[Javascript] this

CHAPTER1 this라나 뭐라나

YOU DON_T KNOW JS - this

• 가장 헷갈리는 매카니즘 중 하나 this 키워드
• this는 모든 함수 스코프 내에 자동으로 설정되는 특수한 식별자

모든 기술이 고도로 발전하면 마술과 구별하기 어려워진다.

1.1 this를 왜?

• this의 유용함과 사용 동기
• 다음 코드가 ‘어떻게’ 작동하는지 보다, ‘왜’ 사용하는지 보자
• identify()와 speak() 두 함수는 객체별로 따로따로 함수를 작성할 필요 없이 다중 콘텍스트 객체인 me와 you 모두에서 재사용할 수 있다.

function identify(){
    return this.name.toUpperCase();
}

function speak() {
    var greeting = `Hello, I'm ${identify.call( this )}`;
    console.log( greeting );
}

var me = {
    name: 'Kyle'
};

var you = {
    name: 'Reader'
};

identify.call( me ); // KYLE
identify.call( you ); // READER

speak.call( me ); // Hello, I'm KYLE
speak.call( you ); // Hello, I'm READER

• ( function.prototype.call(): 예제 - call을 사용하여 함수 호출 및 this에대한 컨텍스트 지정 )

• this를 안 쓰고 identify()와 speak() 함수에 콘텍스트 객체를 명시할 수도 있다.

function identify(context){
    return context.name.toUpperCase();
}

function speak(context) {
    var greeting = `Hello, I'm ${ context }`;
    console.log( greeting );
}

identify( you ); // READER
speak( me ); // Hello, I'm KYLE

• 하지만 암시적인 객체 레퍼런스를 함께 넘기는Passing Along this 체계가 API 설계상 좀 더 깔끔하고 명확하며 재사용하기 쉽다.
• 사용 패턴이 복잡해질수록 콘텍스트를 넘기는 방법이 더 지저분해진다.

1.2 헷갈리는 것들

• 사람들은 보통 두 가지의 의미로 해석하는데 둘 다 틀렸다.

  1.2.1 자기 자신

• this가 함수 그 자체를 가리킨다는 오해다.

  1.2.2 자신의 스코프

• this는 어떤 식으로도 함수의 렉시컬 스코프를 참조하지 않는다.

1.3 this는 무엇인가?

• this는 작성 시점이 아닌 런타임 시점에 바인딩 되며 함수 호출 당시 상황에 따라 콘텍스트가 결정된다.
• 어떻게 함수를 호출했느냐에 따라 정해진다.
• 어떤 함수를 호출하면 활성화 레코드Activation Record, 즉 실행 콘텍스트Execution Context가 만들어진다. 여기엔 함수가 호출된 근원(콜스택Call-Stack)과 호출 방법, 전달된 인자 등의 정보가 담겨있다. this 레퍼런스는 그중 하나로, 함수가 실행되는 동안 이용할 수 있다.
• 다음 장에서는 this 바인딩을 결정짓는 함수 호출부Call-Site를 설명한다.

CHAPTER2 this가 이런 거로군!

• this는 호출부에서 함수를 호출할 때 바인딩 된다.

꽃, 김춘수

내가 그의 이름을 불러 주기 전에는
그는 다만
하나의 몸짓에 지나지 않았다.

내가 그의 이름을 불러 주었을 때
그는 나에게로 와서
꽃이 됐다.

2.1 호출부

• this 바인딩의 개념을 이해하려면 먼저 호출부, 즉 함수 호출 코드부터 확인하고 ‘this가 가리키는 것’이 무엇인지 찾아봐야 한다.

function baz() {
    // 호출 스택: 'baz'
    // 호출부는 전역 스코프 내부
    console.log( "baz" );
    bar(); // <- 'bar'의 호출부
}

function bar() {
    // 호출 스택: 'baz' -> 'bar'
    // 호출부는 'baz' 내부
    console.log( "bar" );
    foo(); // <- 'foo'의 호출부
}

function foo() {
    // 호출 스택: 'baz' -> 'bar' -> 'foo'
    // 호출부는 'bar' 내부
    console.log( "foo" );
}

baz(); // <- 'baz'의 호출부

2.2 단지 규칙일 뿐

• 4가지 규칙

2.2.1 기본 바인딩

• default 규칙

function foo() {
    console.log( this.a );
}

var a = 2;
foo(); // 2

• 기본 바인딩이 적용되어 this는 전역 객체를 참조한다.

2.2.2 암시적 바인딩implicit Binding

• 호출부에 콘텍스트 객체가 있는지, 즉 객체의 소유Owning/포함Containing 여부를 확인하는 것이다.

function foo() {
    console.log( this.a );
}

var obj = {
    a: 2,
    foo: foo // 앞에서 선언한 foo() 함수를 참조
}

obj.foo(); // 2

• 호출부는 obj 콘텍스트로 foo()를 참조하므로 obj 객체는 함수 호출 시점에 함수의 레퍼런스를 ‘소유’하거나 ‘포함’한다고 볼 수 있다.
• 암시적 바인딩 규칙에 따르면 바로 이 obj 콘텍스트 객체가 함수 호출 시 this에 바인딩 된다.
• 다음 예제처럼 객체 프로퍼티 참조가 체이닝Chaining된 형태라면 최상위Top/최하위Last 수준의 정보만 호출부와 연관된다.

function foo() {
    console.log( this.a );
}

var obj2 = {
    a: 42,
    foo: foo
};

var obj1 = {
    a:2,
    obj2: obj2
};

obj1.obj2.foo(); // 42

암시적 소실

• ‘암시적으로 바인딩 된implicitly Bound’ 함수에서 바인딩이 소실되는 경우가 있다.
• strict mode 여부에 따라 전역 객체나 undefined 중 한 가지로 기본 바인딩 된다.

function foo() {
    console.log( this.a );
}

var obj = {
    a: 2,
    foo: foo
};

var bar = obj.foo; // 함수 레퍼런스/별명
var a = "엥, 전역이네!" // 'a' 역시 전역 객체의 프로퍼티
bar(); // "엥, 전역이네!"

• bar는 obj의 foo를 참조하는 변수처럼 보이지만 실은 foo를 직접 가리키는 또 다른 레퍼런스다.
• 게다가 호출부에서 그냥 평범하게 bar()를 호출하므로 기본 바인딩이 적용된다.
• 콜백 함수를 전달하는 경우엔 좀 더 애매하게 실행되어 예상외의 결과가 나온다.

function foo() {
    console.log( this.a );
}

function doFoo(fn) {
    // 'fn'은 'foo'의 또 다른 레퍼런스일 뿐이다.

    fn(); // <- 호출부
}

var obj = {
    a:2,
    foo:foo
};

var a = "엥, 적역이네!";  // 'a' 역시 전역 객체의 프로퍼티
doFoo( obj.foo ); // "엥, 전역이네!"

• 콜백을 받아 처리하는 함수가 내장 함수라도 결과는 마찬가지다. (예제 생략)

2.2.3 명시적 바인딩

2.2.4 new 바인딩

2.3 모든 건 순서가 있는 법

2.3.1 this 확정 규칙

2.4 바인딩 예외

2.4.1 this 무시

2.4.2 간접 레퍼런스

2.4.3 소프트 바인딩

2.5 어휘적 this

• ES6 화살표 함수는 4가지 표준 규칙 대신 에두른 스코프Enclosing Scope(함수 또는 전역)를 보고 this를 알아서 바인딩 한다.
• 다음은 화살표 함수의 렉시컬 스코프를 나타낸 예제다.

function foo() {
    // 화살표함수를 반환한다.
    return (a) => {
        // 여기서 'this'는 어휘적으로 'foo()'에서 상속된다.
        console.log( this.a );
    };
}

var obj1 = {
    a: 2
}

var obj2 = {
    a: 3
}

var bar = foo.call( obj1 );
bar.call( obj2 ); // 2, 3이 아니다!

• foo() 내부에서 생성된 화살표 함수는 foo() 호출 당시 this를 무조건 어휘적으로 포착한다. foo()는 obj1에 this가 바인딩 되므로 bar(반환된 화살표 함수를 가리키는 변수)의 this 역시 obj1로 바인딩 된다. 화살표 함수의 어휘적 바인딩은 절대로 오버라이드할 수 없다.
• ES6 이전에도 화살표 함수의 기본 기능과 크게 다르지 않은, 나름대로 많이 쓰이던 패턴이 있었다.

function foo() {
    var self = this; // 'this'를 어휘적으로 포착한다.
    setTimeout( function(){
        console.log( self.a );
    }, 100 );
}

var obj = {
    a: 2
};

foo.call( obj ); // 2

• this 스타일의 코드를 작성해야 할 경우 꼭 다음 두 가지 중 하나만 선택하자.
  1. 오직 렉시컬 스코프만 사용하고 가식적인 this 스타일의 코드는 접어둔다.
  2. 필요하면 bind()까지 포함하여 완전한 this 스타일의 코드를 구사하되 self = this나 화살표 함수 같은 소위 ‘어휘적 this’꼼수는 삼가야 한다.
  3. 두 스타일 모두 적절히 혼용하여 효율적인 프로그래밍을 할 수도 있겠지만 동일 함수 내에서 똑같은 것을 찾는데 서로 다른 스타일이 섞여 있으면 관리도 잘 안되고 개발자가 천재가 아닌 이상 이해하기 곤란한 골칫덩이 코드로 남게 될 것이다.

2.6 정리하기

• 함수 실행에 있어서 this 바인딩은 함수의 직접적인 호출부에 따라 달라진다. 일단 호출부를 식별한 후 다음 4가지 규칙을 열거한 우선순위에 따라 적용한다.
  1. new로 호출했다면 새로 생성된 객체로 바인딩 된다.
  2. call이나 apply 또는 bind로 호출됐다면 주어진 객체로 바인딩 된다.
  3. 호출의 주체인 콘텍스트 객체로 호출됐다면 바로 이 콘텍스트 객체로 바인딩 된다.
  4. 기본 바인딩에서 엄격 모드는 undefined, 그 밖엔 전역 객체로 바인딩 된다.
• this 바인딩을 안전하게 하고 싶으면 ∅ = Object.create(null)처럼 DMZ 객체를 자리 끼움 값으로 바꿔넣어 뜻하지 않은 부수 효과가 전역 객체에서 발생하지 않게 한다.

• ES6 화살표 함수는 표준 바인딩 규칙을 무시하고 렉시컬 스코프로 this를 바인딩 한다. 즉, 에두른 함수 호출로부터 어떤 값이든 this 바인딩을 상속한다. 이는 ES6 이전 시절 self = this 구문을 대체한 장치다.

• #ref: 같은 책, 더 잘 정리된 글 - https://jeonghwan-kim.github.io/2017/10/22/js-context-binding.html

CHAPTER3 객체

• 객체는 정확히 무엇이고 this를 바인딩할 때 왜 객체를 가리켜야 할까?

3.1 구문

• 객체는 선언적Declarative(리터럴Literal) 형식과 생성자 형식, 두 가지로 정의한다.
• 리터럴 형식

var myObj = {
    key: value
    // ...
}

• 생성자 형식

var myObj = new Object();
myObj.key = value;

3.2 타입

• 자바스크립트 객체의 7개 주요 타입(명세서엔 ‘언어 타입Language Type‘이라고 표현한다)은 다음과 같다.

1. null
2. undefined
3. boolean
4. number
5. string
6. object
7. symbol

• ‘단순 원시 타입Simple Primitive(string, number, null, undefined)’은 객체가 아니다.
• 반면 ‘복합 원시 타입Complex Primitive‘이라는 독특한 객체 하위 타입Sub Type이 있다. function은 객체(정확히는 호출 가능한 객체Callable Object)의 하위 타입이다. 자바스크립트 함수는 기본적으로는 (호출 가능한 특성이 고정된) 객체이므로 ‘일급First Class‘이며 여타의 일반 객체와 똑같이 취급된다.
• 배열 역시 추가 기능이 구현된 객체의 일종이다. 다른 일반 객체보다 좀 더 조직적으로 데이터가 구성되는 특징이 있다.

3.2.1 내장 객체

• 내장 객체라고 부르는 객체 하위 타입도 있다.

1. String
2. Number
3. Boolean
4. Object
5. Function
6. Array
7. Date
8. RegExp
9. Error

• 이들은 단지 자바스크립트의 내장 함수일 뿐 각각 생성자Constructor로 사용되어 주어진 하위 타입의 새 객체를 생성한다.

var strPrimitive = 'I am string!';
typeof strPrimitive; // "string"
strPrimitive instanceof String // false

var strObject = new String('I am string!');
typeof strObject; // "object"
strObject instanceof String; // true

// 객체 하위 타입을 확인한다.
Object.prototype.toString.call( strObject ); // [Object String]

• Object.prototype.toString부분은 toString() 메서드의 기본 구현체를 빌려서 내부 하위 타입을 조사한다. 그 결과 strObject가 String 생성자에 의해 만들어진 객체임을 알 수 있다.

• 원시 값은 객체가 아닌 원시 리터럴Primitive Literal이며 불변값Immutable Value이다. 문자 개수를 세는 등 문자별로 접근할 때엔 String 객체가 필요하다.
• 다행이도 자바스크립트 엔진은 자동 강제변환Coerce하므로 명시적으로 객체를 생성할 일은 거의 없다. 리터럴 형식을 사용하라고 적극 권장한다.

var strPrimitive = 'I am string!';
console.log( strPrimitive.length );  // 13
console.log( strPrimitive.charAt(3) ); // "m"

• 42.359.toFixed( 2 )와 같이 숫자 리터럴 42에 메서드를 호출해도 new Number( 42 ) 객체 래퍼로 강제변환되고 불리언 원시 값도 Boolean 객체로 바뀐다.
• 객체 래퍼 형식이 없는 null과 undefined는 그 자체로 유일 값이다. 반대로 Date값은 리터럴 형식이 없어서 반드시 생성자 형식으로 생성해야 한다.
• Objects, Arrays, Functions, RegExps는 형식(리터럴/생성자)과 무관하게 모두 객체다.
• Error객체는 예외가 던져지면 알아서 생성되니 명시적으로 생성할 일은 드물다.

3.3 내용 Contents

• 객체는 특정한 위치에 프로퍼티로 Contents가 채워진다.

3.3.1 계산된 프로퍼티명

• ES6부터는 계산된 프로퍼티명Computed Property Names이라는 기능이 추가됐는데, 객체 리터럴 선언 구문의 키 이름 부분에 해당 표현식을 넣고 [ ]로 감싸면 된다.

var prefix = "foo";
var myObject = {
    [prefix + "bar"]: "hello",
    [prefix + "baz"]: "world"
};
myObject["foobar"]; // hello
myObject["foobaz"]; // world

• 계산된 프로퍼티명은 ES6 심볼에서 가장 많이 사용하지 않을까 싶다.
• 심볼은 새로운 원시 데이터 타입으로 불분명하고 예측 불가능한 값(기술적으로는 문자열 값)을 가진다. 심볼의 실제 값(이론적으로는 자바스크립트 엔진마다 제각각일 수 있다)을 직접 다룰 일은 거의 없으므로 Symbol.Something 같은 심볼명을 사용하면 된다.

var myObject = {
    [Symbol.Something]: "hello wolrd"
}

3.3.2 프로퍼티 vs 메서드

• 함수는 결코 객체에 속하는 것이 아니며, 객체 레퍼런스로 접근한 함수를 그냥 메서드라 칭하는 건 그 의미를 지나치게 확대해 해석한 것이다.

3.3.3 배열

• 배열은 숫자 인덱싱, 즉 인덱스라는 양수로 표기된 위치에 값을 저장한다.
• 인덱스는 양수지만 배열 자체는 객체여서 배열에 프로퍼티를 추가하는 것도 가능하다.
• 인덱스를 쓰지 않고 일반적인 키/값 객체로 배열을 사용할 수도 있지만 좋은 생각은 아니다.

3.3.4 객체 복사

• 객체 복사에는 얕은 복사Shallow Copy, 깊은 복사Deep Copy가 있다.
• 얕은 복사를 할 경우 환형 참조Circular Reference 형태가 되어 무한 복사의 구렁텅이에 빠질 수 있다.
• 깊은 복사 방법인 ‘JSON-Safe 객체’는 쉽게 복사할 수 있으므로 하나의 대안이 될 수는 있다.
• 한편, 얕은 복사는 이해하기 쉽고 별다른 이슈가 없기에 ES6부터는 Object.assign() 메서드를 제공한다.

3.3.5 프로퍼티 서술자

• ES5부터 모든 프로퍼티는 프로퍼티 서술자Property Descriptor로 표현된다.

var myObject = {
    a: 2
};
Object.getOwnPropertyDescriptor( myObject, "a" );
// {
// value: 2,
// writable: true,
// enumerable: true,
// configurable: true
// }

• 평범한 객체 프로퍼티 a의 프로퍼티 서술자(또는 데이터 서술자)를 조회해보니 writable, enumerable, configurable의 세 가지 특성이 더 있다.
• Object.defineProperty()로 새로운 프로퍼티를 추가하거나 기존 프로퍼티의 특성을 수정할 수 있다.(configurable이 true일 때만 가능)

var myObject = {};
Object.defineProperty( myObject, "a", {
    value: 2,
    writable: true,
    enumerable: true,
    configurable: true
} );
myObject.a; // 2

• 쓰기가능/설정가능/열거가능 특성에 따라 프로퍼티의 성격이 바뀐다.

3.3.6 불변성

• 프로퍼티/객체가 변경되지 않게 해야 할 경우 ES5부터 이런 처리를 할 수 있는 여러 가지 방법일 제공하지만, 얕은 불변성Shallow Immutability만 지원한다. 즉, 객체 자신과 직속 프로퍼티 특성만 불변으로 만들 뿐 다른 객체(배열, 객체, 함수)를 가리키는 레퍼런스가 있을 때 해당 객체의 내용까지 불변으로 만들지는 못한다.

myImmutableObject.foo; // [1,2,3]
myImmutableObject.foo.push( 4 );
myImmutableObject.foo; // [1,2,3,4]

• foo를 분변 객체로 바꾸려면 아래의 방법이 있다.
  1. 객체 상수
• writable:false와 configuration:false를 같이 쓰면 프로퍼티를 상수처럼 쓸 수 있다.

var myObject = {};
Object.defineProperty( myObject, "FAVORITE_NUMBER", {
    value: 42,
    writable: false,
    configurable: false
});

1. 확장 금지
   • 객체에 더는 프로퍼티를 추가할 수 없게 차단하고 현재 프로퍼티는 있는 그대로 놔두고 싶을 때 Object.preventExtensions()를 호출한다.

var myObject = {
    a: 2
};
Object.preventExtensions( myObject );

myObject.b = 3;
myObject.b; // undefined

• 비엄격 모드에선 프로퍼티 b를 추가해도 조용히 실패하고 엄격 모드에서는 TypeError가 발생한다.

1. 봉인
   • Object.seal()는 봉인된 객체를 생성한다. 즉, 어떤 객체에 대해 Object.preventExtensions()를 실행하고 프로퍼티를 전부 configurable:false 처리한다. 결과적으로 프로퍼티를 추가할 수 없고 기존 프로퍼티를 재설정하거나 삭제할 수도 없다. 물론 값을 바꿀 수 있다.
2. 동결
   • Object.freeze()는 객체를 꽁꽁 얼린다. 앞에서 설명한 Object.seal()을 적용하고 ‘데이터 접근자Data Accessor’ 프로퍼티를 모두 writable:false 처리해서 값도 못 바꾸게 한다.
   • 동결은 가장 높은 단계의 불변성을 적용한 것으로 객체와 직속 프로퍼티에 어떤 변경도 원천 봉쇄한다.

3.3.7 [[Get]]

• 프로퍼티에 접근하기까지의 세부 과정은 미묘하면서도 중요하다.

var myObject = {
    a: 2
};
myObject.a; // 2

• 명세에 따르면 실제로 이 코드는 myObject에 대해 [[Get]] 연산을 한다. ( [Get] 같은 함수 호출 )
• 기본으로 [[Get]] 연산은 주어진 이름의 프로퍼티를 먼저 찾아보고 있으면 그 값을 반환한다. 프로퍼티를 찾아보고 없으면 [[Get]] 연산 알고리즘은 [[Prototype]] 연쇄 순회를 하게 된다.
• 주어진 프로퍼티 값을 어떻게 해도 찾을 수 없으면 [[Get]] 연산은 undefined를 반환한다.

var myObject = {
    a: 2
};
myObject.b; // undefined

• 식별자명으로 변수를 참조할 땐 작동 방식이 다르다. 해당하는 렉시컬 스코프 내에 없는 변수를 참조하면 객체 프로퍼티처럼 undefined가 반환되지 않고 ReferenceError가 발생한다.

var myObject = {
    a: undefined
};
myObject.a; // undefined
myObject.b; // undefined

• 값만 봐서는 둘 다 undefined라 분산이 안 된다. 하지만 내부적으로 [[Get]] 연산을 수행할 테니 대체로 myObject.b가 myObject.a보다 ‘더 일을 많이 한다’고 볼 수 있다. 이를 구분하려면 hasOwnProperty 메서드를 통해 알 수 있다.

3.3.8 [[Put]]

• 언뜻 보기에 객체 프로퍼티에 값을 할당하는 일은 그저 [[Put]]을 호출하여 주어진 객체에 프로퍼티를 세팅/생성하는 일이 전부일 듯싶지만 실제로는 좀 복잡하다.
• [[Put]]을 실행하면 주어진 객체에 프로퍼티가 존재하는지 등 여러 가지 요소에 따라 이후 작동 방식이 달라진다. [[Put]] 알고리즘은 이미 존재하는 프로퍼티에 대해 대략 다음의 확인 절차를 밟는다.
  1. 프로퍼티가 접근 서술자Accessor Descriptor인가? 맞으면 세터를 호출한다.
  2. 프로퍼티가 writable:false인 데이터 서술사Data Descriptor인가? 맞으면 비엄격 모드에서 조용히 실패하고 엄격 모드는 TypeError가 발생한다.
  3. 이외에는 프로퍼티에 해당 값을 세팅한다.
• 객체에 존재하지 않는 프로퍼티라면 [[Put]] 알고리즘은 훨씬 더 미묘하고 복잡해진다.

3.3.9 게터와 세터

• [[Put]]과 [[Get]] 기본 연산은 이미 존재하거나 전혀 새로운 프로퍼티에 값을 세팅하거나 기존 프로퍼티로부터 값을 조회하는 역할을 각각 담당한다.
• ES5부터는 게터/세터를 통해 (객체 수준이 아닌) 프로퍼티 수준에서 이러한 기본 로직을 오버라이드할 수 있다. 게터/세터는 각각 실제로 값을 가져오는/세팅하는 감춰진 함수를 호출하는 프로퍼티다.
• 프로퍼티가 게터 또는 세터 어느 한쪽이거나 동시에 게터/세터가 될 수 있게 정의한 것을(‘데이터 서술자’의 반대말로) ‘접근 서술자Accessor Description‘라고 한다. 접근 서술자에서는 프로퍼티의 값과 writable 속성은 무시되며 대신 (configurable, enumerable과 더불어) 프로퍼티의 겟Get/셋Set 속성이 중요하다.

var myObject = {
    // 'a'의 게터를 정의한다.
    get a() {
        return 2;
    }
};
Object.defineProperty(
    myObject, // 타깃
    "b", // 프로퍼티명
    { // 서술자
        // 'b'의 게터를 정의한다.
        get: function(){ return this.a * 2 },
        // 'b'가 객체 프로퍼티로 확실히 표시되게 한다.
        enumerable: true
    }
);
myObject.a; // 2
myObject.b; // 4

• get a() {} 처럼 리터럴 구문으로 기술하든, defineProperty()로 명시적 정의를 내리든 실제로 값을 가지고 있지 않은 객체에 프로퍼티를 생성하는 건 같지만 프로퍼티에 접근하면 자동으로 게터 함수를 은밀하게 호출하여 어떤 값이라도 게터 함수가 반환한 값이 결괏값이 된다.

var myObject = {
    // 'a'의 게터를 정의한다.
    get a() {
        return 2;
    }
};
myObject.a = 3;
myObject.a; // 2

• a의 게터가 정의되어 있으므로 할당문으로 값을 세팅하려고 하면 에러 없이 조용히 무시된다. 세티가 있어도 커스텀Custom 게터가 2만 반환하게 하드 코딩되어 있어서 세팅은 있으나 마나다.
• 프로퍼티 단위로 기본 [[Put]] 연산(할당)을 오버라이드하는 세터가 정의되어야 한다. 게터와 세터는 항상 둘 다 선언하는 것이 좋다(한쪽만 선언하면 예상외의 결과가 나올 수 있다.

var myObject = {
    // 'a'의 게터를 정의한다.
    get a() {
        return this._a_;
    },
    set a(val) {
        this._a_ = val * 2;
    }
};
myObject.a = 2;
myObject.a; // 4

• 예제에서 주어진 값 2는 실제로 다른 변수 _a_에 할당([[Put]]연산)한다. _a_라는 명칭은 순전히 관례상 붙인 것이고 로직과는 전혀 무관한 일반 프로퍼티다.

3.3.10 존재 확인

• 객체에 어떤 프로퍼티가 존재하는지는 굳이 프로퍼티 값을 얻지 않고도 확인할 수 있다.

var myObject = {
    a: 2
};
("a" in myObject); // true
("b" in myObject); // false

myObject.hasOwnProperty( "a" ); // true
myObject.hasOwnProperty( "b" ); // false

• in 연산자는 어떤 프로퍼티가 해당 객체에 존재하는지 아니면 이 객체의 [[Prototype]] 연쇄를 따라갔을 때 상위 단계에 존재하는지 확인한다. 이와 달리 hasOwnProperty()는 단지 프로퍼티가 객체에 있는지만 확인하고 [[Prototype]] 연쇄는 찾지 않는다.
• 거의 모든 일반 객체는 Object.prototype 위임을 통해 hasOwnProperty()에 접근할 수 있지만 간혹 (Object.create(null)) Object.prototype과 연결되지 않은 객체는 myObject.hasOwnProperty() 처럼 사용할 수 없다.
• 이럴 경우엔 Object.prototype.hasOwnProperty.call(myObject, “a”) 처럼 기본 hasOwnProperty() 메서드를 빌려와 myObject에 대해 명시적으로 바인딩하면 좀 더 확실하게 확인할 수 있다.

열거

• 프로퍼티 서술자 속성 중 하나인 enumerable의 ‘열거 가능성’ 개념으로 좀 더 자세히 살펴보자.

var = myObject = {};
Object.defineProperty(
    myObject,
    "a",
    // 'a'를 열거가 가능하게 세팅한다(기본값)
    { enumerable: true, value: 2 }
);
Object.defineProperty(
    myObject,
    "b",
    // 'b'를 열거가 불가능하게 세팅한다.
    { enumerable: false, value: 3 }
);
myObject.b; // 3
("b" in myObject); // true
myObject.hasOwnProperty( "b" ); // true
// ...
for (var k in myObject) {
    console.log( k, myObject[k] );
}
// "a" 2

• myObject.b는 실제 존재하는 프로퍼티로 그 값에도 접근할 수 있지만, for…in 루프에서는 자취를 감춰버린다. 이처럼 ‘열거 가능Enumerable’ 하다는 건 기본적으로 ‘객체 프로퍼티 순회 리스트에 포함’된다는 뜻이다.
• 프로퍼티가 열거 가능한지는 다른 방법으로도 확인할 수 있다.

var = myObject = {};
Object.defineProperty(
    myObject,
    "a",
    // 'a'를 열거가 가능하게 세팅한다(기본값)
    { enumerable: true, value: 2 }
);
Object.defineProperty(
    myObject,
    "b",
    // 'b'를 열거가 불가능하게 세팅한다.
    { enumerable: false, value: 3 }
);
myObject.propertyIsEnumerable( "a" ); // true
myObject.propertyIsEnumerable( "b" ); // false

Object.key( myObject ); // ["a"]
Object.getOwnPropertyNames( myObject ); // ["a", "b"]

• propertyIsEnumerable()은 어떤 프로퍼티가 해당 객체의 직속 프로퍼티인 동시에 enumerable:true인지 검사한다. Object.key()는 Object.getOwnPropertyNames()의 열거 가능 여부와 상관없이 객체에 있는 모든 열거 가능한 프로퍼티를 배열 형태로 반환한다.
• in과 hasOwnProprerty()가 [[Prototype]] 연쇄의 확인에 따라 차이가 있는 반면, Object.keys()와 Object.getOwnProertyNames()는 모두 주어진 객체만 확인한다.
• in 연산자와 결과가 동등한 프로퍼티 전체 리스트를 조회하는 기능은 (지금은) 없다. 단계마다 Object.keys()에서 열거 가능한 프로퍼티 리스트를 포착하여 재귀적으로 주어진 객체의 [[Property]] 연쇄를 순회하는 식의 로직을 구현하여 대략 비슷한 유틸리티를 만들어 쓰면 된다.

3.4 순회

• for…in 루프는 열거 가능한 객체 프로퍼티를 ([[Prototype]] 연쇄도 포함하여) 차례로 순회한다.
• 프로퍼티 값을 순회하려면 어떻게 할까? 다음 코드를 보자.

var myArray = [1,2,3];
for (var i = 0; i < myArray.length; i ++) {
    console.log( myArray[i] );
}
// 1 2 3

• 이 코드는 인덱스를 순회하면서 해당 값(myArray[i])을 사용할 뿐 값 자체를 순회하는 것은 아니다.
• ES5부터는 forEach(), every(), some() 등의 배열 관련 순회 헬퍼가 도입됐다. 이 함수들은 배열의 각 원소에 적용할 콜백 함수를 인자로 받으며, 원소별로 반환 값을 처리하는 로직만 다르다.
• forEach()는 배열 전체 값을 순회하지만 콜백 함수의 반환 값은 무시한다.
• every()는 배열 끝까지 또는 콜백 함수가 false(또는 ‘falsy’값)를 반환할 때까지 순회하며 some()은 이와 정반대로 배열 끝까지 또는 콜백 함수가 true(또는 ‘truthy’값)를 반환할 때까지 순회한다. every()와 some()의 이러한 특별한 반환 값은 일반적인 for 루프의 break문처럼 끝까지 순회하기 전에 일찌감치 순회를 끝내는 데 쓰인다.
• for…in 루프를 이용한 객체 순회는 실제로 열거 가능한 프로퍼티만 순회하고 그 값을 얻으려면 일일이 프로퍼티에 접근해야 하므로 간접적인 값 추출이다.
• 배열 인덱스(나 객체 프로퍼티)가 아닌 값을 직접 순회하기 위해 ES6부터 배열(자체 커스텀 순회자가 정의된 객체) 순회용 for…of 구문을 제공한다.

var myArray = [ 1,2,3 ];
for (var v of myArray) {
    console.log( v );
}
// 1
// 2
// 3

• for…of 루프는 순회할 원소의 순회자 객체Iterator Object(명세식으로 말하면 @@iterator라는 기본 내부 함수)가 있어야 한다. 순회당 한 번씩 이 순회자 객체의 next() 메서드를 호출하여 연속적으로 반환 값을 순회한다.
• 배열은 @@iterator가 내장된 덕분에 다음 예제에서 보다시피 손쉽게 for…of 루프를 사용할 수 있다. 내장 @@iterator를 이용하여 수동으로 배열을 순회하면서 작동 원리를 살펴보자.

var myArray = [ 1,2,3 ]l
var it = myArray[Symbol.iterator]();

it.next(); // { value:1, done:false }
it.next(); // { value:2, done:false }
it.next(); // { value:3, done:false }
it.next(); // { done:true }

• 순회자의 next()를 호출한 결괏값은 { value: , done: } 형태의 객체로, 여기서 value는 현재 순회 값, done은 다음에 순회할 값의 유무를 나타내는 불리언 값이다.
• 3이 반환됐는데도 done: false인 것은 ES6 제너레이터Generator함수의 의미 때문이다.
• 배열은 for…of 루프 내에서 알아서 순회하지만, 일반 객체는 내부에 @@iterator가 없다. ES6에서 @@iterator를 의도적으로 누락시킨 이유는 앞으로 등장할 새로운 타입의 객체에서 문제의 소지가 될 수 있나는 점을 생각해보면 차라리 다행스러운 일인 것 같다.
• 순회하려는 객체의 기본 @@iterator를 손수 정의할 수도 있다. 다음 예제를 보자.

var myObject = {
    a: 2,
    b: 3
};
Object.definePropery( myObject, Symbol.iterator, {
   enumerable: false,
   writable: false,
   configurable: true,
   value: function() {
        var o = this;
        var idx = 0;
        var ks = Object.keys( o );
        return {
            next: function() {
                return {
                    return {
                        value: o[ks[idx++]],
                        done: (idx > ks.length)
                    }
                };
            }
        };
   }
});
// myObject를 수동으로 순회한다.
var it = myObject[Symbol.iterator]();
it.next(); // { value:2, done:false }
it.next(); // { value:3, done:false }
it.next(); // { value:undefined, done:false }

// myObject를 'for...of' 루프로 순회한다.
for (var v of myObject) {
    console.log( v );
}
// 2
// 3

• 예제 코드에선 단순히 값 대 값으로 순회하고 있지만 필요에 따라 사용자 자료 구조에 딱 맞는 임의의 복잡한 순회 알고리즘을 정의할 수도 있다. ES6의 for…of 루프와 커스텀 순회자는 사용자 정의 객체를 조작하는 데 아주 탁월한 새로운 구문 도구Syntactic Tool다.

3.5 정리하기