신기한 연구소

안녕하세요. 신기한 연구소입니다.

프로젝트를 하다 보면 가끔 정규표현식(정규식 또는 regular expression) 코드를 만나게 됩니다.

개발자로 코딩을 하면서 사실 정규표현식을 자주 접하지는 않고

깊이 공부한 적이 없기에 복잡한 특수 문자들을 보면 뇌 정지가 오곤 합니다.

그래도 개발자로 코딩시 잘 활용하면 편하게 사용할 수 있기에

자바스크립트 정규 표현식을 어떻게 사용하는지

그 방법에 대해 최대한 쉽게 설명해보겠습니다.

정규표현식이란?

문자열 내 특정한 패턴을 찾을 수 있는 표현식입니다.

또한 문자열이 정해진 패턴대로 만들어졌는지 확인할 수도 있습니다.

예를 들어 전화번호, 이메일 주소, 홈페이지 주소 등 규격에 맞게 값을 넣을 수 있도록

입력값을 체크하는 경우에도 유용하게 사용할 수 있습니다.

하지만 막상 정규표현식(정규식)을 코딩 개발 시 사용하려면 어렵기도 하고

어떻게 만들고 읽고 해석해야 하는지 막막한 경우가 있더군요.

그래서 왕초보도 따라할 수 있게 최대한 쉽게 설명도 하고

예제도 만들어서 프로젝트 개발에 도움이 되길 기대해봅니다.

무엇이 필요할까요?

자바스크립트에서 정규표현식을 사용하기 위해서는

무엇이 필요한지 볼까요?

• 체크할 대상(문자열, 이메일, 전화번호 등)
• 체크에 사용할 패턴과 플래그(옵션)
• 패턴과 플래그를 담을 변수 또는 객체

기본 사용법.

먼저 문자열, 이메일, 전화번호 등 체크할 대상을 정해야 합니다.

그렇다면 문자열로 가볍게 시작해 볼까요?

다음,

패턴이 필요합니다.

패턴을 만드는 것은 많이 복잡할 수 있습니다. (특수 문자 등..)

우선 간단한 패턴 하나로 시작해볼게요.

플래그(옵션)도 선택해서 패턴과 같이 조합해 볼 수 있지만 우선은 패턴 먼저 사용해봅니다.

패턴이 정해지면 패턴을 담을 변수(또는 객체)를 선언하고 할당합니다.

그리고 RegExp에서 상속받은 내장 메서드를 사용해서

패턴을 적용 및 사용해 봅니다.

정규표현식은 리터럴을 사용하거나

RegExp() 생성자를 통해서 객체로 만들어 사용할 수 있습니다.

 2가지 방식 중 먼저 리터럴 방식으로 패턴을 만들어 코딩 예제를 만들어볼게요.

정규표현식 리터럴로 사용하기.

직접 변수에 패턴을 할당해서 사용하는 방법입니다.

패턴은 /(슬래시)로 시작해서 /(슬래시)로 닫으면 됩니다.

/와 / 사이의 문자들을 패턴으로 인식하게 된다는 의미입니다.

패턴 시작 /

패턴 a

패턴 종료 /

플래그 (옵션)

여기서 플래그는 패턴 종료 슬래시 뒤에 붙여서 사용합니다.

예제를 통해 같이 리터럴 정규식을 만들어 보겠습니다.

1. myReg1 상수에 처음 만나는 글자 a 하나만 찾는 패턴을 만든다.

const myReg1 = /a/;

2. myReg2 상수는 처음 만나는 글자 k 하나만 찾는 패턴을 만든다.

const myReg2 = /k/;

두 상수에 할당된 패턴에는 문자열을 나타내는 따옴표가 없다는 것을 잘 확인한다!!!

3. 테스트를 위해 sampleTxt1 변수를 선언하고 샘플 문자열 'abc alphabet'을 할당한다.

const sampleTxt1 = 'abc alphabet';

4. sampleTxt1 문자열에 'a'가 있는지 확인을 하기 위해 정규표현식(RegExp)의

내장 메서드인 test()를 사용하면 된다. ('a'가 하나라도 있으면 true, 전혀~없으면 false)

console.log(myReg1.test(sampleTxt1));   // a가 있으니 true

console.log(myReg2.test(sampleTxt1));  // k가 없으니 false

지금까지 리터럴을 사용해서 정규표현식을 만들고 코딩해봤습니다.

true/false가 아닌 일치하는 값을 받아보는 코딩을 RegExp의 exec() 메서드로 해보겠습니다.

1. 패턴과 일치하는 정보를 배열로 받기 위해서 smpArr 변수를 선언한다.

let smpArr;

2. 패턴에 매칭되는 정보를 배열에 담는다. exec() 리턴 타입은 Array다.

smpArr = myReg1.exec(sampleTxt1);

3. smpArr값을 출력한다. 배열이기에 [0] 인덱스를 사용할 수 있다.

console.log(smpArr);   //['a', index: 0, input: 'abc alphabet', groups: undefined]

console.log(smpArr[0]);   // a

console.log(ampArr.index);  // 5   a의 첫 번째 위치가 출력된다.

지금까지 리터럴을 사용해서 정규표현식을 만드는 방법에 대해 알아봤습니다.

new RegExp() 객체 생성자 사용하기.

RegExp()는 자바스크립트에서 정규표현식의 객체를 만들어 주는 생성자입니다.

생성자는 함수이며 객체를 만들 때 사용합니다.

변수를 선언해서 패턴을 할당하는 리터럴 방식과는 다르게

new 키워드를 사용해서 RegExp()의 새로운 객체를 만드는 방법으로 사용합니다.

그럼 new RegExp()를 사용해 정규표현식(정규식) 패턴 객체를 같이 코딩하며 만들어 볼까요?

1. 객체를 담을 변수를 선언하고 new 키워드로 객체를 생성합니다.

var reObj = new RegExp();

2. 객체는 만들었는데 패턴이 없네요. 패턴을 만드는 방법은 두 가지가 있습니다.

처음 생성자 인자로 패턴을 넣는 방식과 객체에 패턴을 할당하는 방식이 있습니다.

var reObj = new RegExp('s');  또는 var reObj = new RegExp(/s/);

인자로 넘기는 경우는 따옴표나 슬래시 둘 다 가능합니다.

reObj = /s/;

이렇게 객체에 패턴을 직접 할당할 수 있습니다. 당연히 슬래시만 가능합니다.

이렇게 객체를 사용하는 경우는 런타임에 컴파일 되기 때문에

외부에서 패턴을 가져오거나 동적으로 생성할 때 유용합니다.

const pattern = /a/;

const reObj = new RegExp(pattern);

const text = 'My name is sophia';

consloe.log(reObj.exec(text));

우리는 이제 자바스크립트에서 정규 표현식을 만들고 사용하는 방법에 대해 알게 되었습니다.

리터럴로 값을 할당해서 사용하는 방법과

new RegExp()로 패턴 객체를 만들어 사용하는 방법

2가지에 대해 알게 되었습니다.

우리는 패턴으로 아주 간단하게 /a/를 사용했지만

실제 특수 문자등을 포함해서 다양한 패턴을 만들 수 있습니다.

또한 플래그 옵션으로 더 풍부한 기능을 사용할 수 있습니다.

다음 포스팅에서 다양한 패턴과 옵션을 어떻게 사용하는지

다양한 예제를 통해 알아보고 자바스크립트 정규표현식을 마스터해보겠습니다.

즐 코딩하세요.

안녕하세요. 신기한 연구소입니다.

자바스크립트는 프로토타입(prototype) 기반 언어입니다.

무슨 의미일까요?

프로토타입(prototype)을 사용해서 객체지향 언어처럼 상속을 할 수 있습니다.

이건 또 무슨 의미일까요?

자바스크립트 개발자(프로그래머)라면 당연히 이해하고 알아야 하는 

프로토타입(prototype)에 대해 알아봅니다.

프로토타입(prototype)이 무엇인지 정말 궁금해지는데요.

프로토타입(prototype)에 대해 알아봅니다.

상속이란?

Object <- 객체1

Object <- 객체1 <- 객체2 <- 객체3

Object <- 객체4

모든 객체는 Object를 시작으로 상속을 받습니다. 물려받는다는 의미입니다.

객체 3이 객체 2를 상속받아 만들어졌다고 해도 결국 상위로 상속을 따라가면 마지막에

Object를 만나게 됩니다.

다른 표현으로 모든 객체는 Object를 상속받습니다.

상속은 물려받는다는 의미입니다.

Object는 객체에 필요한 기본적인 구성들을 가지고 있습니다.

그리고 객체는 그 구성들을 상속받아서 사용할 수 있습니다.

프로토타입(prototype)이란?

상속해 줄 구성들을 꾸러미에 묶어두는데 그것이 바로 프로토타입(prototype)입니다.

그렇게 구성된 꾸러미도 객체입니다. 즉 프로토타입(prototype)도 객체입니다.

새로 생성된 객체는 상위 객체의 꾸러미를 받습니다.

그 꾸러미는 [[Prototype]]에 보관되고 누구한테 받았는지는

__proto__에 그 정보가 있습니다.

Object와 함수 객체는 생성자(constructor) 가지고 있으며

그 생성자는 prototype 속성에 포함됩니다.

프로토타입(prototype) 속성이란?

프로토타입 속성은 객체를 생성할 수 있는 객체가 가지는 prototype 속성이 있습니다.

prototype 속성은 최상위인 Object와 함수 객체에 속성으로 포함되어 있습니다.

Object.prototype을 확인해보겠습니다.

함수 객체도 확인해보겠습니다.

이렇게 객체를 생성할 수 있는 객체는 prototype 속성을 가지고 있으며

그 꾸러미(내부)에는 물려줄 내용들(속성과 메서드)이 기록되어 있습니다.

[[Prototype]](__proto__) 속성이란?

모든 객체는 __proto__ 속성을 가지고 있습니다.

지금은 [[Prototype]]으로 표기되며 그 내부에 __proto__속성으로 상위 객체 정보를 가지고 있습니다.

예를 들어 보겠습니다.

function NewObj(){}라는 함수가 있습니다. 

이 함수는 이름을 대문자로 시작해서 생성자용이라고 사용자에게 알려줍니다.

 "소문자로 시작해도 생성자로 사용할 수 있습니다.

그냥 편의상 대문자로 생성자임을 알려주는 것입니다."

NewObj는 prototype이라는 속성(property)을 가지고 있고 prototype에는

새로운 객체를 생성할 때 사용하는 constructor 함수(생성자)를 가지고 있습니다.

이 생성자 함수로 새로운 객체를 생성하면 prototype 꾸러미를 [[Prototype]]에 받습니다.

[[Prototype]]은 상속받은 정보를 담아두는 바구니입니다.그 바구니에 보면 어디서 받았는지 __proto__에 보관되어 있습니다.

no 객체를 new NewObj()로 생성했습니다.

위 2개의 이미지를 보면 3번째 라인부터 함수 객체와 같은 모양의 구성이 보입니다.

상속 받은 것이지요.

__proto__속성으로 다시 확인해보겠습니다.

역시 같은 구조가 보입니다.

위 이미지를 보면 아래서 3번째 속성이 __proto__인데요.

(...)을 클릭하면 누구한테 상속받은 지 표현됩니다.

(...)을 클릭하니 Object가 나옵니다.

함수 NewObj()는 Object를 상속받았다는 의미입니다.

그리고 그 내부의 __proto__(...)을 클릭하면 null이 나옵니다.

최상위 Object이기 때문입니다.

프로토타입 체인 (prototype chin)이란?

위 예제를 보면 현재 객체가 어떤 객체로 상속을 받았는지 확인할 수 있다고 했습니다.

Object <- 함수객체 <- 객체

이 구성을 가지고 설명해보겠습니다.

객체의 __proto__는 함수객체가 저장되어 있습니다.

함수객체의 __proto__는 Object가 저장되어 있습니다.

Object의 __proto__는 null입니다.

함수객체은 Object.prototype으로 상속받아 생성되었습니다.

객체는 함수객체.prototype으로 상속받아 생성되었습니다.

이렇게 prototype을 사용해서 연결고리를 갖고 추적할 수 있습니다.

바로 prototype chain이라고 합니다. (프로토타입 체인)

정리

모든 객체는 Object를 상속받는다.

모든 객체는 자기 부모가 누구인지 추적할 수 있는 체인을 가지고 있고 그 정보는 __proto__에 담겨 있다.

모든 객체는 생성자 또는 Object의 prototype 속성을 통해 상속받는다.Object와 생성자 함수는 상속해 줄 정보가 담긴 prototype 속성을 가지고 있다. 일반 객체는 prototype 속성은 없고 [[Prototype]] 또는 __proto__ 속성은 필수로 가지고 있다.prototype은 주기 위한 속성이고 [[Prototype]] 또는 __proto__는 받기 위한 속성이다.

지금까지 자바스크립트 프로토타입(prototype)에 대해 알아봤습니다.개발자(프로그래머)는 정말 공부할 것이 많습니다.이해하고 사용하는 멋진 개발자(프로그래머)가 되기를 바랍니다.