[JavaScript] Regular Expression(정규표현식)과 RegExp 객체

정규표현식이란 특정 패턴의 문자열을 의미하며, 이를 통해 이 문자열에서 특정 단어나, 특정 패턴을 가진 문자열을 찾아낼 수 있다.

자바스크립트는 기본 내장(Built-in)객체로 RegExp 객체를 탑재하며, RegExp 객체의 test 또는 exec 메소드를 이용해 정규표현식을 이용한 패턴 매칭이 가능하다.

정규 표현식 패턴(Regular Expression Pattern)생성하기

정규 표현식의 패턴 여러 문자들로 이루어지며 사용자는 원하는 패턴을 두개의 /(Slash)사이에 적게된다. /(Slash)는 delimiter로써 프로그래밍 언어에서 해당 패턴의 시작과 끝을 알린다. 또한 / 뒤에 정규 표현식 검색 옵션을 적을 수도 있다.

var expression = /abc/; //abc문자열을 뜻한다.
var expression = /at/; //at문자열을 뜻한다.

이에 더해서 몇가지 특수문자를 이용해 조금 더 복잡한 패턴 생성이 가능하다.

특수문자	의미
일반
\	1. 일반 문자 앞에 올 경우에는, \를 포함한 일반문자를 특수문자로 해석한다. 2. 특수 문자 앞에 올 경우에는, Escape Chracter 의 역할을 한다, 즉 /\\/은 일반문자 "\"를 표현하는 표현식이다.
^	문자열의 시작과 일치한다. 예) /^E/는 E로 시작하는 모든 문자열과 일치한다.
$	문자열의 끝과 일치한다. 예)/E$/는 E로 끝나는 모든 문자열과 일치한다.
*	* 선행 문자가 0번이상 반복된다. {0,}과 같은 의미를 가진다. /ab*/는 abbbbb, a, ab, 등과 일치하며, /ab*c/는 abbbbc, ac, abc, 등과 일치한다.
Quantifiers
+	+ 선행문자가 1번이상 반복된다. {1,}과 같은 의미를 가진다. /ab+/는 abbbbb, ab 등과 일치하나, a와는 일치하지 않는다. /ab+c/는 abbbc, abc등과 일치하나 ac와는 일치하지 않는다.
?	1. 선행 문자가 0번 또는 1번 존재한다. {0,1}과 같은 의미를 가진다 2. 수량자(Quantifier, *, +, ?,{})의 뒤에 올때는 선행 수량자의 최소값만큼 일치한다. 예) /a{1,4}/ 패턴을 "aaaa"라는 문구에 사용시, "aaaa" 전체와 일치하나, /a{1,4}?/ 패턴을 사용시에는 제일 앞의 a 한글자에만 일치한다
{n}	선행 문자가 양의 정수 n 회만큼 발생한다
{n,m}	선행 문자가 최소 n회, 최대 m회만큼 발생한다. m이 비게되면 무한을 뜻한다, {n,}은 최소 n회이상을 의미
Group Constructors
(x)	하위 패턴을 생성하며 \1, \2 와 같이 \숫자 문구를 이용해서 패턴을 재사용 가능하다. 예) 표현식 \([1-9]{3,}?)\-\1\-\1\ 은 \([1-9]{3,}?)\-([1-9]{3,}?)\-([1-9]{3,}?)\와 같다. 표현식 \(foo) (bar) \1 \1 \2\ 은 \(foo) (bar) \(foo) \(foo) \(bar)\와 같다.
(?:x)	(x)와 같이 하위패턴을 생성하나, 패턴 재사용이 불가능하다.
x(?=y)	x의 뒤에 y가 올때만 x와 일치한다.
x(?!y)	x의 뒤에 y가 오지 않을 때만 x와 일치한다.
(x|y)	x 또는 y와 일치한다.
Character Set
[xyz]	문자 세트를 생성한다. -(hypen)을 이용해서 범위를 정할 수도 있다. /[abcdefg]/ 는 /[a-g]/와 같으며 a,b,c,d,e,f,g 한 글자와 일치 한다.
[^xyz]	문자 세트를 생성한다. 단, 해당 문자가 포함되지 않을 때 일치한다. /[a-g]/는 a,b,c,d,e,f,g가 아닌 다른 문자 1개와 일치한다.
[x-z]	[xyz]와 같은 표현
[^x-z]	[^xyz]와 같은 표현
[x-zX-A]	x-z범위 사이, 또는 X-A범위 사이의 모든 문자와 일치한다
Meta Character
[\b]	Backspace와 일치한다. \b와는 다른 의미를 가지니 조심할것.
.	모든 문자와 일치한다.
\b	Word Boundary(단어간의 경계)를 의미한다, 단어간의 경계는 길이가 0 이므로 \b는 언제나 다른 문자와 함께 사용된다. 예) /\bace/ 는 "acehigh"의 ace와 일치하며 /high\b/는 "acehigh"의 high와 일치한다. 단, /eh\b/나 /\beh/는 "acehigh"와 부분적으로 전혀 일치하지 않으며, 이는 "eh"문구가 단어내부에 포함되어 있기 때문이다
\B	\b와는 반대로 non-word boundary를 의미한다, 위의 "acehigh"에서 "/\Beh\B/를 사용했을 때 "eh"와 일치하며, 이는 "eh" 앞뒤로 단어가 이어지기 때문이다.
\cX	제어문자와 일치한다.
\d	0-9 사이의 숫자와 일치한다.
\D	0-9 사이의 숫자와 일차하지 않는 모든 문자와 일치한다. [^0-9]와 같다.
\f	form feed와 일치한다.
\n	line feed와 일치한다.
\r	carriage return와 일치한다.
\t	tab(탭)과 일치한다.
\v	Vertical Tab(수직 탭)과 일치한다.
\s	space, form feed, line feed, carriage return, tab등의 공간 문자와 일치한다.
\S	space, form feed, line feed, carriage return, tab, vertical tab등의 공간 문자를 제외한 모든 문자와 일치한다.
\w	"_"(underscore)을 포함한 모든 숫자 + 알파벳 문자와 일치한다. /[A-Za-z0-9_]/와 같다.
\W	\w와 일치하지 않는 모든 문자와 일치한다.
\숫자	()로 생성되는 하위패턴을 재사용 가능하다.
\0	Null 문자와 일치한다.
\xhh	2자리 16진수 코드 hh를 가진 문자와 일치한다.
\uhhhh	4자리 16진수 코드 hhhh를 가진 문자와 일치한다.

또한 RegExp 패턴 검색 옵션을 정하는 총 3개의 flag가 있다

g : Global Search, 패턴 검색이 처음 일치하는 스트링에서 멈추는 것이 아니라 전체 텍스트에 적용된다.
i : ignore case, 대소문자 관계없이 검색된다
m: multiline mode, 한 줄이 끝나고 다음 줄까지도 검색이 이어진다다다

RegExp 객체 생성하기

RegExp 객체는 2가지 방법으로 생성이 가능하다.

Regular Expression Literal

var expression = /abc/g;
// "/"는 delimiter며 "/"사이에 패턴이 들어가고 그 후에 flag 표시를 하게된다.
// /abc/g는 전체 텍스트에서 "abc" 문자열을 일치한다.

RegExp Constructor

var rep1 = new RegExp('abc', 'g');
var rep2 = new RegExp(/abc/, 'gmi');
// 첫번째 파라미터로 패턴이 들어가며, 두번째 파라미터로 flag가 들어가게 된다
// 단 첫번째 경우처럼 '(single quote)로 패턴 문자열을 구성할 경우에, \(backslash)는 \\로 표현된다.
// 즉 /\d+/ 라는 패턴은 '\\d+'로 적어야 한다.

각각의 RegExp 객체는 총 6가지 프로퍼티를 가지고 있다.

• global : 표현식이 g flag를 가졌는지를 가리키는 Boolean 값
• ignoreCase : 표현식이 i flag를 가졌는지를 가리키는 Boolean 값
• lastIndex : 다음 매칭이 시작될 문자의 위치를 가리키는 Integer 값, 기본값은 언제나 0이다.
• multiline : 표현식이 m flag를 가졌는지를 가리키는 Boolean 값
• source : Regexp에 사용된 정규 표현식, 표현식의 delimiter(/) 내부 패턴

var rep = new RegExp('foo.+', 'gi');

console.log(rep.global); //true
console.log(rep.ignoreCase); //true
console.log(rep.lastIndex); //0
console.log(rep.multiline); //false
console.log(rep.source); //foo.+

Regexp.prototype.exec()

exec()메소드는 파라미터로 주어진 문자열을 검색해 해당 표현식에 일치하는 결과값을 Array 형식으로 반환한다.

Parameter : 검색을 실행할 문자열(String)

Return : 표현식과 일치하는 문자열이 존재할 떄 Array형식으로 결과값을 반환하며, 해당 RegExp 인스턴스의 프로퍼티를 업데이트 한다.
반환되는 Array의 첫번째 인덱스에 해당 표현식과 일치하는 문자열이 저장되며, 그 후로 각각의 인덱스에 표현식에서 생성한 하위패턴['(',')'를 이용하는것]에 일치하는 문자열들이 순차적으로 저장되게 된다
표현식과 일치하는 문자열이 존재하지 않는다면, null 값을 반환한다.

var reg = /(java).*(\d{3}).*(fun)/gi

var str = "My JavaSrcipt101 class is fun. Good Class";

var result = reg.exec(str);
console.log(result);

//  reg.exec(str)메소드 실행 후 반환되는 Array 값
//
//  result[0] : 'JavaSrcipt101 class is fun',
//  result[1] : 'Java',
//  result[2] : '101',
//  result[3] : 'fun',
//  result["index"] : 3,
//  result["input"] : 'My JavaSrcipt101 class is fun. Good Class'

반환되는 Array 객체 정보

배열 인덱스(Array Index)	저장되는 값	예제
[0]	표현식에 일치하는 문자열	JavaSrcipt101 class is fun'
[1], [2], [3]....[n]	각각의 하위 패턴에 일치하는 문자열	[1] : 'Java' [2] : '101' [3] : 'fun'
배열 객체 프로퍼티(Property)	저장되는 값	예제
"index"	검색이 실행된 문자열에서 첫번째로 표현식이 일치하는 문자의 위치(최소 0에서 시작한다)	3
"input"	검색이 실행된 문자열	My JavaSrcipt101 class is fun.'

위의 형식에 일치하는 배열(Array)이 반환되며 exec() 메소드를 실행한 Regex 인스턴스는 아래와 같이 업데이트 된다.

Regex 인스턴스의 프로퍼티(Property)	저장되는 값	예제
lastIndex	다음 검색을 실행할 문자열의 인덱스 일치하는 문자열의 마지막 문자의 인덱스 + 1이 된다. 만약 g 플래그를 사용하지 않는다면 언제나 0이 된다.	29 "fun" 뒤에오는 마침표 문자 (.) 의 인덱스
ignoreCase	i 플래그의 사용여부	true
global	g 플래그의 사용여부	true
multiline	m 플래그의 사용여부	false
source	검색에 사용한 표현식	(java).*(\d{3}).*(fun)

RegExp.prototype.test()

test() 메소드는 파라미터로 주어진 문자열에 표현식에 일치하는 문자열이 존재하는지를 확인한 후 그 결과값을 true 또는 false의 Boolean 값으로 반환한다.

Parameter : 검색을 실행할 문자열(String)

Return : 표현식과 일치하는 문자열이 존재할때는 true 값을 반환하며, 아닐시는 false 값을 반환한다

var reg = /[A-Za-z]/;

var str = "My JavaSrcipt101 class is fun. Good Class";

var resultStr = reg.test(str);

console.log(resultStr); //true

var num = "4132";

var resultNum = reg.test(num);

console.log(resultNum); //false

[JavaScript] 자바스크립트 프로토타입(Prototype) 객체 이해하기

프로토타입(Prototype)이란?

프로토타입(Prototype), 이름에서 알 수 있듯 프로토타입이란 객체의 기본형인 객체를 뜻한다. 모든 객체는 프로토타입 객체를 가지며 프로토타입의 프로퍼티에 접근이 가능하다. 또한 이 프로토타입 객체도 객체인만큼 포로토타입 객체를 가진다. 즉 가기장 기본 Object 객체를 제외한 모든 객체들은 프로토타입 객체를 가지며 모든 객체의 최상위 프로토타입은 기본 Object.prototype 객체가 된다. 즉, 모든 객체들은 1개의 객체 인스턴스와 해당 인스턴스의 속성들을 공유하며 상속한다는 말이 된다.

이 프로토타입(Prototype)이 중요한 이유는 OOP의 상속 컨셉을 자바스크립트에서 구현할 수 있게하기 때문이다. 만약 객체가 뭔지 모른다면, 우선 이 글(클릭하기)을 읽고 와주기를 바란다.

우선 객체의 프로토타입은 ECMAScript 에서 지원하는 표준 메소드인 Object.getPrototypeOf() 메소드를 통해 접근할 수 있으며, 이 메소드는 프로토타입을 얻어(get)오는 메소드이므로 이메소드를 통해서 프로토타입을 수정하는것은 불가능하다.

*하지만 곧 ECMAScript 6에서 Object.setPrototypeOf() 메소드가 생긴다.

위의 표준 메소드와 별개로 Chrome, Internet Explorer, Mozilla FireFox 등에서는 __proto__따프로퍼티를 이용해 객체의 프로토타입에 접근할 수 있다.

var ob1 = {};
var ob2 = {};

console.log(ob1.__proto__); //Object
console.log(Object.getPrototypeOf(ob2)); //Object
console.log(ob1.__proto__ == Object.getPrototypeOf(ob2)); //true
//기본으로 생성되는 객체는 모두 같은 Object 프로토타입 객체 인스턴스을 참조한다.

여기서 ob1과 ob2 객체에 프로토타입을 설정해준다면

var protoObj = {
  getFirstName: function() {
    return this.firstName;
  }
}
var ob1 = {};
var ob2 = {};
ob1.__proto__ = protoObj;
ob2.__proto__ = protoObj;

ob1.firstName = "Jason";
ob2.firstName = "Natali";
console.log(ob1.getFirstName()); //Jason
console.log(ob2.getFirstName()); //Natali

protoObj.getFirstName = function(){
  return "Function changed";
};

console.log(ob1.getFirstName()); //Function changed
console.log(ob2.getFirstName()); //Function changed
console.log(ob1.__proto__==ob2.__proto__); //true
console.log(protoObj.__proto__ == Object.prototype); //true

이렇게 다른 언어의 객체 상속과 같은 결과를 낳게 된다. 또한 두 객체 모두 같은 프로토타입 객체 인스턴스를 참조하고 있으므로 주어진 프로토타입 객체의 수정은 해당 프로토타입 객체를 참조하는 모든 객체에 적용된다.

위 객체들의 최종 관계도를 UML 다이어그램으로 나타내자면 아래와 같다.

프로토타입 객체 인스턴스와 객체 인스턴스들의 관계도

앞서 말했듯, 모든 사용자 생성 객체는 생성될 때 Object.prototype 객체를 프로토타입으로 가진다.
그리고 ob1과 ob2는 같은 protoObj 인스턴스를 프로토타임으로 가지니, protoObj 인스턴스에 생기는 변화는 obj1과 obj2에 모두 적용된다.

그리고 Object.prototype에는

Object.prototype.constructor
Object.prototype.hasOwnProperty()
Object.prototype.isPrototypeOf()
Object.prototype.propertyIsEnumerable()
Object.prototype.toLocaleString()
Object.prototype.toString()

와 같이 생성되는 객체에 기본으로 탑재되는 메소드들이 프로퍼티로 저장되 있다.

*참고로 Object.prototype 객체 프로퍼티들의 속성은

Writable : false
Enumerable : false
Configurable : false

이니 어떤 방법을 써서도 코드 프로퍼티 리스트나 프로퍼티 수정이 불가능하다.


그렇다면 Object.prototype에서 Object란 무었일까? 이를 이해하기 위해서는 우선 constructor에 대해 알아야하니 모른다면 이 글(클릭하기)을 읽고 오자.

프로토타입과 생성자 함수(Constructor)

우리가 Constructor 라 부르는 함수들은 function 객체로 여러가지 프로퍼티를 가지는데, 그 중 prototype 이라는 프로퍼티가 존재한다. 이 prototype이라는 프로퍼티는 해당 생성자 함수에 의해 성성되는 객체들에 부여되는 프로토타입 객체를 참조한다.

*참고로 이 prototype 프로퍼티는 함수(Function) 객채의 프로퍼티이고, Object.getPrototypeOf 메소드로 얻어지는 프로토타입 객체는 함수(Function) 객체의 프로토타입이다. 자바스크립트에서는 함수도 객체라는것을 잊지 말자

function Foo(){};

var foo = new Foo();
var too = new Foo();

console.log(foo.__proto__ == Foo.prototype); //true
console.log(foo.__proto__ == Object.getPrototypeOf(Foo)); //false
console.log(Object.getPrototypeOf(Foo) == Function.prototype); //true
console.log(foo.__proto__ == too.__proto__); //true
console.log(Foo == Foo.prototype.constructor); //true

함수 Foo의 프로토타입 객체가 바로 Function.prototype 객체이며, 이는 Foo.prototype 프로퍼티가 참조하는 객체와는 다른 객체이다.

그리고 해당 함수의 prototype 프로퍼티가 참조하는 객체의 constructor 프로퍼티는 해당 함수를 참조한다.
관계도를 그린다면 아래와 같이 된다.

Constructor Foo로 생성되는 객체 인스턴스들과 프로토타입의 관계도

생성자 함수 Foo에 의해 생성된 객체 foo와 too는 모두 함수 Foo의 prototype 프로퍼티가 참조하는 객체 Foo.prototype을 프로토타입으로 두고 있다. 즉 Foo.prototype의 수정은 foo와 too 객체 모두에 영향을 끼치게 된다.

*단, 아래의 경우처럼 프로토타입을 새로이 어싸인(Assign)할 경우에는 해당 객체가 참조하는 프로토타입만이 바뀔 뿐, 원 프로는는토타입이나 같은 프로타입을 가진 다른 객체들은 아무런 영향을 받지 않는다.

function Foo() {};

var foo = new Foo();
var too = new Foo();

var newPrototype = new Object();

foo.__proto__ = newPrototype;

console.log(Foo.prototype == foo.__proto__); //false
console.log(Foo.prototype == too.__proto__); //true
console.log(foo.__proto__ == too.__proto__); //false

위의 코드가 실행되면 관계도는 아래처럼 변한다.

생성된 객체에 새로운 프로토타입 어싸인(Assign) 후 관계도

객체 foo에 새로이 어싸인된 프로토타입은 constructor로 기본 Object 함수를 참조하고 있는데, 이는 newPrototype이 사용자에 의해 생성된, 즉 Object() 생성자 함수를 이용해 생성되었기 때문이다.

저 constructor도 프로퍼티 이기 때문에
foo.__proto__.constructor, 또는 newPrototype 객체 생성시 newPrototype.constructor 프로퍼티를 이용해 원하는 생성자 함수를 어싸인해주면 된다.

Property Lookup(프로퍼티 검색)과 프로퍼티 overriding

어떤 객채이든 프로퍼티 검색은 해당 객체의 본체에서부터 시작된다. 아래의 코드를 보자.

var fooProto = {
  write: function() {
    return "write";
  },
  read: function() {
    return "read";
  }
};

function Foo() {
  this.write = function() {
    return "No write";
  }
}
Foo.prototype = fooProto;

foo = new Foo();

console.log(foo.write()); //No write
console.log(foo.read()); //read

too = new Foo();
too.read = function() {
  return "No read";
}

console.log(too.write()); //No write
console.log(too.read()); //No read

delete too.read; //too.read 프로퍼티 삭제

console.log(too.read()); //read

객체의 프로퍼티 호출이 일어나게 되면 자바스크립트 엔진은 가장 먼져 호출이 된 해당 객체(base object)에서 프로퍼티를 검색한다. 그리고, 만약 찾지 못하면 해당 객체의 프로토타입 객체에서 프로퍼티를 검색하고, 그리고도 찾지못다면 프로토타입의 프로토타입 객체까지 검색을 이어간다. 이 검색은 프로퍼티가 발견되거나, 또는 더 이상 검색을 이어갈 프로토타입이 없을 때(Object.prototype까지 도달할 떄)까지 계속 이어진다. 즉 하위 객체에 해당 프로퍼티가 존재한다면 프로퍼티 Overriding이 가능하다는 것이다.

이 때문에 위의 코드에서도 foo.write() 메소드는 Foo함수에서 정의한대로 실행되고, foo.read() 메소드는 Foo함수 생성자의 프로토타입 프로퍼티가 참조하는 fooProto 객체에서 정의한대로 실행되는 것이다. 이는 too.write(), too.read()의 실행결과에서도 잘 알 수 있다.

또 위의 코드를 보면 too.read 프로퍼티를 삭제하게되면 too.read() 메소드가 프로토타입 객체에서 정의한대로 작동한다. 즉, 프로토타입 객체를 직접 호출하지 않고는 하위 객체에서 프로토타입의 프로퍼티를 수정하는 것이 불가능하다.

Object.prototype.hasOwnProperty() 메소드와 in Operator(연산자)

hasOwnProperty() 메소드는 해당 객체에  파라미터로 주어진 이름을 가진 프로퍼티가 있는지를 확인한다.

앞서 말했듯, 자바스크립트 엔진은 프로퍼티 호출이 발생하면, 해당 객체에서 먼져 프로퍼티를 검색한 후, 찾지 못한다면 프로토타입으로 검색을 이어간다. 이 때문에, 특정 프로퍼티가 호출되어도 개발자들은 해당 프로퍼티가 프로토타입에 속한 프로퍼티인지, 하위 객체에 속한 프로퍼티인지 알 수 없게 되는데, hasOwnProperty() 메소드는 그 점을 해결해주는 메소드 이다.

사용법은 간단하다. 확인을 원하는 객체와 프로퍼티 이름으로 메소드를 호출하면 Boolean(true||false) 값을 리턴한다.

hasOwnProperty()와는 달리 in 연산자는 해당 객체에서 간접적으로 접근이 가능한 모든 프로퍼티에 대해 true 값을 반환단다.

var fooProto = {
  a: "Letter A",
  b: "Letter B",
};

function Foo() {
  this.b = "Letter B";
  this.c = "Letter C";
}

Foo.prototype = fooProto;

foo = new Foo();

console.log(foo.hasOwnProperty("a")); //false
console.log("a" in foo); //true
console.log(foo.hasOwnProperty("b")); //true
console.log("b" in foo); //true
console.log(foo.hasOwnProperty("c")); //true
console.log("c" in foo); //true

Object.prototype.isPrototypeOf() 메소드

isPrototypeOf 메소드는 해당 객체가 파라미터로 주어진 객체의 프로토타입인지를 확인하는 메소드 이다.

물론 Object.getPrototypeOf() 메소드 또는 __proto__ 프로퍼티와 '=' 연산자(equal operand)를 이용해서도 확인이 가능하지만, 이 방법을 대체할 수 있게 해주는 메소드 이다.

var fooProto = {
  a: "Letter A",
  b: "Letter B",
};

function Foo() {
  this.b = "Letter B";
  this.c = "Letter C";
}

Foo.prototype = fooProto;

foo = new Foo();

console.log(foo.isPrototypeOf(fooProto)); //false

//아래 3가지 확인법들은 모두 같은 결과를 반환한다.
console.log(fooProto.isPrototypeOf(foo)); //true
console.log(fooProto == Object.getPrototypeOf(foo)); //true
console.log(fooProto == foo.__proto__); //true

[JavaScript] 자바스크립트 생성자(Constructor) 함수와 객체

객체(Object)는 Object Literal Notation을 사용해서 생성할 수도 있을 뿐 아니라, Constructor 라는 함수를 이용해서도 생성이 가능하다. 이 Constructor 함수는 Object.constructor 프로퍼티를 이용해 접근이 가능하며, 우리가 일반적으로 new Object() 또는 Object Literal Notation을 이용해 생성한 객체들은 모두 자바스크립트 내장 함수인 Object() 라는 객체 생성자(Constructor)함수를 이용해 생성되는 것 이다.

var person1 = {
  firstName: "Jason",
  lastName: "Bourne",
  age: 25  
};

var person2 = new Object();

console.log(person1.constructor); //function Object() 
console.log(person2.constructor); //function Object() 
console.log(person1.constructor == person2.constructor); //true

이렇듯 person1 객체나 person2 객체 모두 같은 constructor에 의해 생성된다. 또 number, boolean string, array, regex 등도 각각의 constructor에 의해 생성된다.

var array = [];
var number = new Number(3);
var bool = new Boolean(true);
var str = new String("String");

console.log(array.constructor); //function Array()
console.log(number.constructor); //function Number()
console.log(bool.constructor); //function Boolean()
console.log(str.constructor); //function String()

즉 constructor(생성자)는 함수일 뿐이며, constructor 함수는 언제든지 생성될 수 있다는 뜻 이기도 하다.
예를들어, 위의 person 객체의 생성자 함수를 만든다 하면 아래와 같이 만들 수 있다.

function Person(firstName, lastName, age) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
  this.getInfo = function() {
    return "Name : " + firstName + " " + lastName + "\nAge : " + age;
  }
}

var person1 = new Person("Jason", "Bourne", 33);
var person2 = new Person("Jenny", "Laurence", 18);

console.log(person1.constructor); //function Person
console.log(person2.constructor); //function Person

단 new 키워드없이 생성자(Constructor)함수를 호출하게 되면 this 키워드때문에 윈도우 객체에 변수들이 추가되므로 주의하도록 하자(자세한건 this 키워드 관련 글을 참고하기).

[JavaScript] 자바스크립트 객체(Object)의 프로퍼티(Property)와 속성(Property Attribute)

예전에 적었던 자바스크립트 객체 소개글에서 말했던것 처럼, 객체란 여러가지 자료(Data)들과 함수(Function)들의 집합이다. 매우 간단하게 선언할 수 있고 접근될 수 있다. 이 글에서는 객체의 프로퍼티(Property)에 대해 이야기 해볼까 한다.

프로퍼티(Property)란 객체에 속한 데이터(Data)를 뜻한다. 아래의 코드에서는 name, age, occupation 이 person 객체의 프로퍼티가 되겠다.

var person = {
 name: "Jason",
 age: 25,
 occupation: "Student",
 getPersonProfile: function() {
  return "Name : " + this.name +
   "\nAge : " + this.age +
   "\nOccupation : " + this.occupation;
 }
};
person.newProperty = "newProperty";

console.log(person);
// { name: 'Jason',
//   age: 25,
//   occupation: 'Student',
//   getPersonProfile: [Function],
//   newProperty: 'newProperty' }

delete person.newProperty;

console.log(person);
// { name: 'Jason',
//   age: 25,
//   occupation: 'Student',
//   getPersonProfile: [Function] }

console.log(person.getPersonProfile());
// Name : Jason
// Age : 25
// Occupation : Student

위의 코드를 보면 person 객체 내부에 저 값들이 모두 저장된것 같지만, 사실 name, age, occupation 은 모두 값(Data)들이 저장된 메모리 위치를 가리킬 뿐이다. 그러므로, 프로퍼티에 저장된된 Data의 수정, 변경등은 모두 프로퍼티가 가리키는 메모리 위치에서 이루어 지는 일이다.

우리가 흔히 메소드(Method)라 부르는 항목은, 객체 내부에서 프로퍼티로 선언된 함수(Function)을 뜻하며, 위의 코드에서는 returnPersonProfile 프로퍼티가 바로 메소드 이다.

프로퍼티는 객체 선언시점에서와, 선언된 이후 시점 모두에서 추가가 가능하며, delete 키워드를 이용해서 삭제가 가능하다.

프로퍼티는 named data property, named accessor property 2가지 종류로 나뉘지며 named data property든 named accessor property든, 프로퍼티들은 총 4가지의 속성(Attribute)으로 이루어지는데, 이러한 속성(Attribute)들은 특정 조건에서 프로퍼티의 행동양식(Behavior)을 저장하며, 또한 프로퍼티의 값(Value)를 저장한다.

Data Property와 Accessor Property는 2개의 같은 속성들(Configurable, Enumerable)과 2개의 다른 다른 속성들([Writable, Value], [Get, Set])로 구성된다

Named Data Property(데이터 프로퍼티)

저장된 Data 값에 관련된 프로퍼티이며 Value를 제외한 모든 속성(Attribute)들이 true||false, boolean 값으로 이루어져 있다. 위의 Person 객체에서는 name, age, occupation 프로퍼티들이 데이터 프로퍼티에 속한다

• Configurable
• 해당 프로퍼티가 delete 키워드 등으로 재정의(Redefine)될 수 있음을 가리킨다
• 객체 프로퍼티 생성시 기본값으로 true 값을 가지며 false로 변경할 경우,  해당 프로퍼티 삭제되지 못하며, 이는 해당 프로퍼티의 속성(Attribute)에도 적용된다.
• 객체 선언시 정의되지 않은 프로퍼티 같은경우에는 기본으로 false 값을 가진다.
• Enumerable
• 객체가 for-in 루프를 통과할시, 해당 프로퍼티가 for-in 루프에서 반환되어야(읽혀져야) 할지를 가리킨다.
• 기본값으로는 true 값을 가진다.
• 객체 선언시 정의되지 않은 프로퍼티 같은경우에는 기본으로 false 값을 가진다.
• Writable
• 프로퍼티의 Data 값이 수정될 수 있음을 가리킨다.
• 기본값으로는 true 값을 가진다.
• Value
• 프로퍼티의 Data 값이다.
• Value가 정해지지 않은경우에는 undefined값을 가진다.
• 위의 Person 객체의 name 프로퍼티의 value 값은 "Jason"이다.

Named Accessor Property(접근 프로퍼티)

접근 속성은 프로퍼티의 데이터 값(Value)에 대한 접근에 관련된 속성이다. 데이터를 읽어(Retrieve)오는 Get 속성과 데이터를 저장하는 Set 속성을 가지며, 프로퍼티를 읽어오고 수정하는 기능을 한다. 위의 Person 객체에서는 getPersonProfile 메소드가 바로 Get의 역할을 한다 할 수 있다.

• Configurable
• 해당 프로퍼티가 delete 키워드 등으로 재정의(Redefine)될 수 있음을 가리킨다
• 프로퍼티 생성시 기본값으로 true 값을 가지며 false로 변경할 경우,  해당 프로퍼티 삭제되지 못하며, 이는 해당 프로퍼티의 속성(Attribute)에도 적용된다.
• 객체 선언시 정의되지 않은 프로퍼티 같은경우에는 기본으로 false 값을 가진다.
• Enumerable
• 객체가 for-in 루프를 통과할시, 해당 프로퍼티가 for-in 루프에서 반환되어야(읽혀져야) 할지를 가리킨다.
• 기본값으로는 true 값을 가진다.
• 객체 선언시 정의되지 않은 프로퍼티 같은경우에는 기본으로 false 값을 가진다.
• Get
• 프로퍼티가 읽어질 때, 호출되는 함수를 정한다. 이 속성을 통해 프로퍼티가 읽어져 반환되기 전에 어떠한 과정을 수행할지를 정할 수 있다.
• Get 속성에 어싸인된 함수는 Parameter를 받을 수가 없다.
• 기본값은 undefined.
• Set
• 프로퍼티가 수정될 때, 호출되는 함수를 정한다. 이 속성을 통해 프로퍼티가 수정되기 전에 어떠한 과정을 수행할지를 정할 수 있다.
• Set 속성에 어싸인된 함수는 2개 이상의 Parameter를 받을 수가 없다.
• 기본값은 undefined.

이러한 속성을 이용해서 아래와 같이 getPersonProfile 메소드를 대체할 수 있다.

var person = {
  name: "Jason",
  age: 25,
  occupation: "Student",
};

Object.defineProperty(person, "profile", {
  get: function() {
    return "Name : " + this.name +
      "\nAge : " + this.age +
      "\nOccupation : " + this.occupation;;
  }
});

console.log(person.profile);
// Name : Jason
// Age : 25
// Occupation : Student

프로퍼티(Property) 속성(Attribute) 정의하기

프로퍼티의 속성은

• Object.defineProperty()
• Object.defineProperties()

두가지 메소드를 이용해서 정의가 가능하다. 두 메소드의 차이는 단일 프로퍼티를 정의하는지(defineProperty), 여러가지 프로퍼티를 정의하는지(defineProperties)이다.

Object.defineProperty()

Object.defineProperty() 메소드는 프로퍼티를 소유한 객체, 프로퍼티의 이름, 프로퍼티 속성(Attribute) 정의객체(Descriptor Object), 이렇게 3개의 매개변수(Parameter)를 받는다.

사용법은 아래와 같다.

var person = {
  name: "Jason",
  age: 25,
  occupation: "Student",
  returnPersonProfile: function() {
    return "Name : " + this.name +
      "\nAge : " + this.age +
      "\nOccupation : " + this.occupation;
  }
};

//"name" 프로퍼티 속성을 정의한다
Object.defineProperty(person, "name", {
  configurable: true,
  enumerable: false,
  writable: false,
  value: "Laura"
});

console.log(person.name); //값이 Jason에서 Laura로 변경됬다

//프로퍼티 정의 객체 이기때문에 이렇게 객체를 선언해 사용할 수도 있다
var propertyDescriptor = {
  configurable: false,
  enumerable: false,
  writable: false,
  value: "New Property Value"
};

Object.defineProperty(person, "newProperty", propertyDescriptor);

//프로퍼티를 원하는 속성으로 생성할 수도 있다.
console.log(person.newProperty);

// configurable 을 false로 설정했기 때문에 아래 코드는 에러를 발생시킨다.
delete person.newProperty;
Object.defineProperty(person, "newProperty", {
  enumerable : true
});

Object.defineProperties()

defineProperties()가 여러개의 프로퍼티를 한꺼번에 정의한다. 매개변수로는 프로퍼티를 정의할 객체, 그리고 프로퍼티들의 속성 정의객체.

사용법은 아래와 같다.

var person = {
  name: "Jason",
  age: 25,
  occupation: "Student",
};

Object.defineProperties(person, {
  name: {
    configurable: false,
    enumerable: true,
    writable: false,
    value: "Laura"
  },

  profile: {
    get: function() {
      return "Name : " + this.name +
        "\nAge : " + this.age +
        "\nOccupation : " + this.occupation;;
    }
  }
});

console.log(person.profile);
// Name : Laura
// Age : 25
// Occupation : Student

프로퍼티 속성 읽어오기

프로터티의 속성은 Object.getOwnPropertyDescriptor() 메소드를 이용해 읽어올 수 있다. 매개변수로는 프로퍼티가 속한 객체와, 프로퍼티의 이름을 받는다.

var person = {
  name: "Jason",
  age: 25,
  occupation: "Student",
};

Object.defineProperty(person, "profile", {
  get: function() {
    return "Name : " + this.name +
      "\nAge : " + this.age +
      "\nOccupation : " + this.occupation;;
  }
});

var propertyDescriptor_name = Object.getOwnPropertyDescriptor(person, "name");

console.log(propertyDescriptor_name);
// { value: 'Jason',
//   writable: true,
//   enumerable: true,
//   configurable: true }

var propertyDescriptor_age = Object.getOwnPropertyDescriptor(person, "age");
console.log(propertyDescriptor_age);
// { value: 25,
//   writable: true,
//   enumerable: true,
//   configurable: true }


var propertyDescriptor_occupation = Object.getOwnPropertyDescriptor(person, "occupation");
console.log(propertyDescriptor_occupation);
// { value: 'Student',
//   writable: true,
//   enumerable: true,
//   configurable: true }

var propertyDescriptor_Profile = Object.getOwnPropertyDescriptor(person, "profile");
console.log(propertyDescriptor_Profile);
// { get: [Function],
//   set: undefined,
//   enumerable: false,
//   configurable: false }
// 객체 선언시 내부에서 정의된 프로퍼티가 아니기 때문에 configurable 과 enumerable 값이 모두 false 이다.

[JavaScript] 자바스크립트 this 키워드의 모든것

this 키워드를 이해하기 위해서는 Execution Context를 이해해야하니, 혹시 Execution Context를 모른다면 이 글(클릭하기)을 읽어 봐 주길 바란다.

자바스크립트에서는 매번 함수의 호출마다 새로운 Execution Context가 생성된다. 이 Execution Context는 Lexical Environment, Variable Environment, 그리고 ThisBinding에 대한 정보를 가지고 있는데, 바로 this 키워드가 이 이 thisbinding이라고 할 수 있겠다. this값은 해당 함수가 현재 어느 Execution Context에서 구동하고 있는지를 알려준다.

Context는 함수 호출에 의해 새로이 생성되며, thisBinding 값은 함수 호출시점에 정해지게 된다. 정확히 말하자면 ECMAScript 내부에서 Function call 발생할 때, 함수의 Arguments List와 thisArg라 불리는 두 객체를 전달하게 되는데, ECMAScript® Language Specification 10.4.3에 따르면 여기서 아래의 과정을 거친후 thisBinding의 값이 결정 된다.

1. 만약 함수가 strict mode에서 정의된 함수인지를 확인한 후, thisBinding 값은 전달된 thisArg값이 된다.
2. (strict mode에서 정의된 함수가 아니고) thisArg 값이 null 이나 undefined라면면,  thisBinding 값은 global object가 된다.
3. 전달된 Type(thisArg) 연산으로 얻어진 thisArg 값의 Type이 object(객체)가 아니라면, thisBinding 값은 toObject(thisArg) 오퍼레이션을 통해 객체화된 객체가 된다.
• Type() 함수는 ECMA스크립트 내부 함수로, 주어진 변수의 Type을 연산합니다.
• toObjecT() 함수는 주어진 변수를 Boolean, Number, String, Object 형으로 변환 합니다
4. 위 모든 과정에서 thisBinding 값이 정해지지 않았다면, 전달된 thisArg가 thisBinding이 된다.

참고로 funciton.prototype.call, function.prototype.apply 와 같은 this 값을 수정 가능케 하는 기능들은 모두 thisArg 값을 사용자가 전달할 수 있게 함으로써 가능한 기능들이다.

그렇다면, 일반적으로는 이 thisArg 값이 어떻게 결정 되는 것 일까? 이는 함수 호출(Function Call) 과정을 설명한 ECMAScript® Language Specification 11.2.3 에 잘 정의 되어 있다 - 6번과 7번에 주목하자.

*우선 이전에 몇가지 알아야 될것들이 있다

• 함수가 저장된 주소인 reference 값은 base value, referenced name, strict reference flag, 이 3가지 요소로 이루어져 있다
• referenced name은 string 값으로 저장된 function identifier이다
• strict reference flag는 boolean 값으로, strict mode 에서 실행되는 코드인지를 표시한다
• base value는 reference가 속한 context object를 가리킨다

thisArg값은 함수 호출(Function Call)의 6번째 과정에서에서 결정되며, 함수 호출의 전체 과정은 아래와 같다.

1. 함수 객체의 이름(MemberExpression)을 해석해서 함수가 저장된 레퍼런스 값인 ref를 얻는다.
2. GetValue(ref) 오퍼레이션을 이용, 함수 func을 불러온다.
3. 주어진 arguments 들로 argList를 생성한다.
4. Type(func) 오퍼레이션을 이용, 함수 func의 타입을 확인한후, 객체타입이 아니라면 TypeError Exception 을 발생시킨다.
5. IsCallable(func) 오퍼레이션을이용, 함수 func의 호출이 가능한지를 확인한 후, 불가능하다면 TypeError Exception을 발생시킨다.
6. Type(ref)를 이용, ref의 타입을 확인한 후, reference 타입이라면
1. IsPropertyReference(ref) 오퍼레이션을 이용, ref가 object 또는 primitive wrapper object(String, Boolean, Number 등의 객체)에 속한 property 라면 thisArg값은 getBase(ref) 오퍼레이션에서 얻어진 해당 객체 인스턴스가 된다.
2. 그 이외의 경우에는 ref가 속한 Environment Record(Variable Environment Object)라면 getBase(ref)에서 얻어진 값의 ImplicitThisValue()가 바로 thisArg가 된다.
7. 만약 Type(ref)를 이용해 확인한 ref의 타입이 reference 가 아니라면, thisArg값은 undefined가 된다.
8. Call 오퍼레이션을 이용, thisArg 값과 argList를 전달해 함수를 호출한 후 그 결과값을 리턴한다.

결국 각각의 경우에 따라 thisBinding의 값이 달라지니 좀 헷깔린다. 그래서 자주 보게되는 상황들을 Case By Case 로 설명을 해보려 한다.

* 참고로 this 키워드는 객체이기 대문에 '.'(Dot Notation) 또는 '[', ']'(Bracket Notation) 를 이용해서도 this 객체의 변수나 함수를 호출 할 수 있다.
* 위 과정을 읽었으면 알겠지만 strict 모드에서는 함수 호출시 thisArg값은 non-strict mode 일때와는 다르다.

1. Declaration environment record에 존재하는 함수 호출(Function Call)

• 위의 6-2번 과정이다. ImplicitThisValue() 는 모든 declaration에 대해 undefined를 리턴한다
• 이 때문에 this 키워드는 strict mode에서는 undefined 값을, non-strict mode에서는 global object(window object)값을 참조하게 된다.

function invokeFunction() {
    console.log("invokeFunction");
    console.log(this);//Window
    demo1();
    function demo1() {
 console.log("demo1");
 console.log(this);//Window

 var demo2 = function() {
     console.log("demo2");
     console.log(this);//Window

     var demo3 = function() {
  console.log("demo3");
  console.log(this);//Window
     };
     demo3();
 };
 demo2();
    }
}
console.log(this);//Window
invokeFunction();

2. new 키워드를 이용해 객체(object)로 인스턴스화 될 때, this 값은 언제나 인스턴스화된 객체를 참조한다.

• 위 과정의 6-1번에 속하는 경우이다. 호출된 함수가 객체의 property인 경우이다

function thisObject(name, property) {
    this.name = name;
    this.property = property

    this.thisValue = this;

    this.f = function() {
 console.log("this in function f \n" + this); //object
    }
}

var demo = new thisObject("testObject", 0);
console.log("demo.thisvalue is " + demo.thisValue); //object demo

3. 객체의 메소드로써 호출될 때, this 값은 언제나 인스턴스화된 객체를 참조한다.

• 메소드란 객체의 프로퍼티(property)로 존재하는 함수를 한다.
• 이 경우 또한 위 과정의 6-1번의 경우가 되겠다.

var a = {
    test : function() {
 return this;
    }
};

a.test();// object 'a'

var b = {};
b.test = a.test;

b.test()// object 'b'

4. function.prototype.call 또는 function.prototype.apply 메소드를 이용해 호출될 때

• thisArg의 값은 사용자에 의해 주어진다.

function test() {
    return this;
}
test();// windows

var a = {};
test.apply(a);// object 'a'

test.call(a);// object 'a'