Chapter 3: Objects - hochan222/Everything-in-JavaScript GitHub Wiki

Chapter 3: Objects

this 바인딩에서 그 중심엔 객체가 있었다. 객체란 무엇인가 알아보자.

Syntax

객체는 두가지 형태로 제공된다. (리터럴, 생성된 폼)

literal syntax

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

constructed form

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

두 가지 방식은 확실하게 동일한 객체를 생성한다. 유일한 차이점은 리터럴은 초기화시 키, 값으로 한번에 해줄 수 있지만 constructed form은 하나하나 추가해주어야한다.

Type

객체는 JS에서 6가지 primitive value중 하나다.

• string
• number
• boolean
• null
• undefined
• object

primitive value는 그 자체가 object는 아니다. null같은 경우 언어적 실수로 typeof를 출력하면 object가 나오지만 객체는 아니다.

자바스크립트의 모든것은 객체라는 말은 잘못된 서술이다.

반면, complex primitives라고 불라는 sub-type 객체들이 있다.

함수는 객체의 하위 유형이다. ("callable object") 함수는 호출 가능한 동작이 연결됐을 뿐 일반 객체일 뿐이므로 "first class"라고 한다.

배열 역시 추가 동작이있는 객체이다. 배열의 내부 구조는 객체보다 약간 더 구조화 돼있다.

Built-in Objects

일반적으로 내장 객체라고 하는 object sub-types들이 있다.

• String
• Number
• Boolean
• Object
• Function
• Array
• Date
• RegExp
• Error

다른 언어로 미뤄봤을 때 이것들은 예를들어 String class로 보일 수 있지만 JS에서는 그냥 함수일 뿐이다.

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

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

// inspect the object sub-type
Object.prototype.toString.call( strObject );	// [object String]

strPrimitive는 객체가 아니고 기본 리터럴이다.
길이 확인, 개별 문자 접근등과 같은 작업을 수행하려면 String 객체가 필요하다.

운좋게도 JS는 string primitive value를 String 객체로 강제 형변환을 시켜준다. JS 커뮤니티에서도 String 객체를 명시적으로 생성하는 것보다는 리터럴을 사용하는것을 강력하게 추천한다.

var strPrimitive = "I am a string";

console.log( strPrimitive.length );		// 13
console.log( strPrimitive.charAt( 3 ) );	// "m"

엔진이 자동으로 형변환 해준다!

42.359.toFixed(2)도 같은 경우이며 Boolean도 마찬가지이다.

null, undefined는 객체 래퍼는 없고 기본 값만 있다. 반면에, 날짜 폼은 리터럴이 없으므로 객체 형식으로만 만들 수 있다.

Object, Array, Function, RegExp는 모두 사용 형식과는 관련없이 모두 객체이다.

Contents

객체의 값들은 properties라 부르는 locations에 저장이된다.

엔진 구현마다 다 다를수 있지만 일반적으로 컨테이너에 저장되는 것들은 객체 저장 위치의 포인터들인 property 이름들이다.

var myObject = {
	a: 2
};

myObject.a;		// 2

myObject["a"];	// 2

myObject에서 location a에 접근하기 위해 ., [] 연산자를 사용한다. .a문법은 흔히 프로퍼티에 접근하기 위해 사용하고, ```["a"]문법은 "key"에 접근하기 위해 사용된다. 사실 둘다 동일하다.

var wantA = true;
var myObject = {
	a: 2
};

var idx;

if (wantA) {
	idx = "a";
}

// later

console.log( myObject[idx] ); // 2

객체에서 속성의 이름은 항상 문자열이다. 만약 다른 값을 사용하면 문자열로 변환된다.

var myObject = { };

myObject[true] = "foo";
myObject[3] = "bar";
myObject[myObject] = "baz";

myObject["true"];		// "foo"
myObject["3"];			// "bar"
myObject["[object Object]"];	// "baz"

Computed Property Names

다음과 같은 표현도 가능하다.

var prefix = "foo";

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

myObject["foobar"]; // hello
myObject["foobaz"]; // world

computed property names의 보통 사용처는 ES6의 Symbol인데 엔진마다 Symbol의 값이 다를 수 있다. 그것은 기술적으로는 문자열인 추측할수 없는 값을 갖는 primitive value이다.

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

Property vs. Method

흔히 개발자들은 이 둘을 구분하길 원한다. 하지만 JS specification은 이 두 단어를 동일하게 만든다.

function foo() {
	console.log( "foo" );
}

var someFoo = foo;	// variable reference to `foo`

var myObject = {
	someFoo: foo
};

foo;				// function foo(){..}

someFoo;			// function foo(){..}

myObject.someFoo;	// function foo(){..}

var myObject = {
	foo: function foo() {
		console.log( "foo" );
	}
};

var someFoo = myObject.foo;

someFoo;	// function foo(){..}

myObject.foo;	// function foo(){..}

Arrays

배열도 [] 연산자로 접근을 하고 조금 더 복잡한 구조를 갖는다.

var myArray = [ "foo", 42, "bar" ];

myArray.length;		// 3

myArray[0];			// "foo"

myArray[2];			// "bar"

var myArray = [ "foo", 42, "bar" ];

myArray.baz = "baz";

myArray.length;	// 3

myArray.baz;	// "baz"

. 또는 [] 연산자 구문에 관계없이 명명된 속성을 추가해도 배열 길이는 변하지 않는다.
하지만 배열이는 배열을 만든 의도와 거리가 멀어서 사용을 자제하자.

var myArray = [ "foo", 42, "bar" ];

myArray["3"] = "baz";

myArray.length;	// 4

myArray[3];		// "baz"

Duplicating Objects

자바스크립트에서 흔하게 사용되는 기능은 복사이다. 하지만 객체를 복제하는것은 생각보다 많이 복잡하다.

function anotherFunction() { /*..*/ }

var anotherObject = {
	c: true
};

var anotherArray = [];

var myObject = {
	a: 2,
	b: anotherObject,	// reference, not a copy!
	c: anotherArray,	// another reference!
	d: anotherFunction
};

anotherArray.push( anotherObject, myObject );

우선 깊은복사와 얕은 복사중 어느것에 해당하는지 답해야한다. 모두 참조값을 갖고 있으므로 객체는 순환 참조의 위험성이있다.

복제에대한 표준은 정해져있지 않고, 각 JS 프레임워크들은 알아서 자기들만의 방식으로 구현했다. 하나의 솔루션은 JSON을 이용하는것이다.

var newObj = JSON.parse( JSON.stringify( someObj ) );

ES6는 얕은 복사를 Object.assign()으로 정의했다.

var newObj = Object.assign( {}, myObject );

newObj.a;			// 2
newObj.b === anotherObject;	// true
newObj.c === anotherArray;	// true
newObj.d === anotherFunction;	// true

Property Descriptors

var myObject = {
	a: 2
};

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

var myObject = {};

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

myObject.a; // 2

Writable

var myObject = {};

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

myObject.a = 3;

myObject.a; // 2

strict mode에서는 오류가 발생한다.

"use strict";

var myObject = {};

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

myObject.a = 3; // TypeError

Configurable

var myObject = {
	a: 2
};

myObject.a = 3;
myObject.a;					// 3

Object.defineProperty( myObject, "a", {
	value: 4,
	writable: true,
	configurable: false,	// not configurable!
	enumerable: true
} );

myObject.a;					// 4
myObject.a = 5;
myObject.a;					// 5

Object.defineProperty( myObject, "a", {
	value: 6,
	writable: true,
	configurable: true,
	enumerable: true
} ); // TypeError

한번 false면 true로 바꿀 수 없다.
또한 configurable은 객체가 delete 연산자에 의해 제거되는것을 방지한다.

var myObject = {
	a: 2
};

myObject.a;				// 2
delete myObject.a;
myObject.a;				// undefined

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

myObject.a;				// 2
delete myObject.a;
myObject.a;				// 2

delete는 c,c++에서처럼 메모리 해제 역할보다는 객체 속성을 제거하는 역할로 생각하자.

Immutability

객체에 다른 참조가 있는경우 해당 객체의 내용은 영향을 받지않고 변경 가능 상태를 유지한다.

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

myImmutableObject가 불변으로 보호되어도 myImmutableObject.foo는 변할 수 있다.

Object Constant

writable : false 및 configurable : false를 결합하여 기본적으로 상수 객체 속성을 만들 수 있다.

var myObject = {};

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

Prevent Extensions

객체의 새 속성 추가를 예방하고 싶으면 Object.preventExtensions(..)을 사용하자.

var myObject = {
	a: 2
};

Object.preventExtensions( myObject );

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

strict mode에서는 TypeError가 뜬다.

Seal

Object.seal(..)은 Object.preventExtensions(..)와 configurable:false이 적용된다.

Freeze

Object.seal(..)에 writable:false까지 적용된다.

이게 객체에 적용할 수 있는 가장 높은 수준의 불변성이다.

[Get](/hochan222/Everything-in-JavaScript/wiki/Get)

var myObject = {
	a: 2
};

myObject.a; // 2

myObject.a는 속성 액세스이지만, 보이는 것처럼 myObject에서 이름 a의 속성을 찾는 것은 아니다.

사양에 따르면 위의 코드는 myObject에서 Get 연산 (함수 호출과 유사 함 : Get ())을 실제로 수행한다. 객체에 대한 기본 내장 Get 작업은 먼저 요청 된 이름의 속성에 대해 객체를 검사하고,이를 찾으면 그에 따라 값을 반환한다.

Get 작업의 중요한 결과 중 하나는 요청 된 속성에 대한 값을 얻을 수없는 경우 대신 undefined 값을 반환한다.

var myObject = {
	a: 2
};

myObject.b; // undefined

var myObject = {
	a: undefined
};

myObject.a; // undefined
myObject.b; // undefined

Get 작업은 미묘하지만 참조 myObject.a보다 참조 myObject.b에 대해 더 많은 작업을 수행한다.

[Put](/hochan222/Everything-in-JavaScript/wiki/Put)

속성에서 값을 가져 오기 위해 내부적으로 정의 된 Get 작업이 있으므로 기본 Put 작업도 필연적으로 존재한다.

다음은 Put 작동 방식이다.

1. Property가 accessor descriptor인지?

• 만약에 맞으면 the setter를 호출한다.

2. Property의 data descriptor의 writable이 false로 설정돼있는지?

• non-strict mode에서는 실패하고, strict mode에서는 TypeError가 발생한다.

3. 다음 해당사항에 없으면 존재하는 property의 값을 정상으로 저장한다.

Getters & Setters

ES5는 getter 및 setter를 사용하여 이러한 기본 작업의 일부를 객체 수준이 아니라 속성 별 수준에서 재정의하는 방법을 도입했다. getter는 실제로 숨겨진 함수를 호출하여 값을 검색하는 속성이다. setter 실제로 값을 설정하기 위해 숨겨진 함수를 호출하는 속성이다.

property에 getter, setter 둘다 갖게 설정하면 그것은 "data descriptor"가 아닌 "accessor descriptor"가 된다. accessor-descriptor는 value와 writable 속성이 무시된다. 대신 configurable와 enumerable를 고려한다.

var myObject = {
	// define a getter for `a`
	get a() {
		return 2;
	}
};

Object.defineProperty(
	myObject,	// target
	"b",		// property name
	{			// descriptor
		// define a getter for `b`
		get: function(){ return this.a * 2 },

		// make sure `b` shows up as an object property
		enumerable: true
	}
);

myObject.a; // 2

myObject.b; // 4

와... 이건 무엇이냐.. 객체에 getter를 설정할 수가 있어????

var myObject = {
	// define a getter for `a`
	get a() {
		return 2;
	}
};

myObject.a = 3;

myObject.a; // 2

항상 getter, setter는 같이 정의해주는게 좋다.

var myObject = {
	// define a getter for `a`
	get a() {
		return this._a_;
	},

	// define a setter for `a`
	set a(val) {
		this._a_ = val * 2;
	}
};

myObject.a = 2;

myObject.a; // 4

Existence

우리는 다음 구문을 통해 속성의 존재를 확인 할 수 있다.

var myObject = {
	a: 2
};

("a" in myObject);				// true
("b" in myObject);				// false

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

in 연산자는 객체에 속성이 있는지나 상위 Prototype 체인 객체가 존재하는지 확인한다. 반면 hasOwnProperty는 객체에 속성이 있는지만 확인한다.

Enumeration

var myObject = { };

Object.defineProperty(
	myObject,
	"a",
	// make `a` enumerable, as normal
	{ enumerable: true, value: 2 }
);

Object.defineProperty(
	myObject,
	"b",
	// make `b` NON-enumerable
	{ 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

그렇다 enumerable에 집중하라 false는 enumerable 할 수 없다.

열거를 확인할 수 있는 또다른 방법은 다음과 같다.

var myObject = { };

Object.defineProperty(
	myObject,
	"a",
	// make `a` enumerable, as normal
	{ enumerable: true, value: 2 }
);

Object.defineProperty(
	myObject,
	"b",
	// make `b` non-enumerable
	{ enumerable: false, value: 3 }
);

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

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

Iteration

보통 원소 출력할때 다음과 같이하는데

var myArray = [1, 2, 3];

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

이건 값을 반복하는게아니고 인덱스를 반복하는것이다.

이에 forEach(), every(), some()등은 값을 반복한다.

for in 은 값이 아닌 열거가능한 객체 속성을 반복하기 때문에 간접적으로만 값을 가져온다.

값을 반복하고 싶다. ES6은 of를 이용해 가능하게 한다.

var myArray = [ 1, 2, 3 ];

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

for..of 루프는 반복 될 iterator 객체(spec-speak에서 @@iterator로 알려진 기본 내부 함수에서)를 요청하고, 루프는 해당 iterator 객체의 다음 호출에서 연속적인 반환 값을 반복한다.

배열에는 내장 @@iterator가 있다. 수동 반복 방법은 다음과 같다.

var myArray = [ 1, 2, 3 ];
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 }

@@iterator는 반복기 객체 자체가 아니라 반복기 객체를 반환하는 함수이다.

반복기의 next() 호출에서 반환 값의 형태는 { value: _ , done: _ }이다. value는 현재 값이고 done은 bool 값이다.

for of 에서는 자동으로 반복되지만 일반 객체에는 @@iterator가 존재하지 않는다. 반복하려는 모든 개체에 대해 고유 한 기본 @@ iterator를 정의 할 수 있다.

var myObject = {
	a: 2,
	b: 3
};

Object.defineProperty( 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 {
					value: o[ks[idx++]],
					done: (idx > ks.length)
				};
			}
		};
	}
} );

// iterate `myObject` manually
var it = myObject[Symbol.iterator]();
it.next(); // { value:2, done:false }
it.next(); // { value:3, done:false }
it.next(); // { value:undefined, done:true }

// iterate `myObject` with `for..of`
for (var v of myObject) {
	console.log( v );
}
// 2
// 3

와... iterator 구현...

for of는 ES6의 사용자 지정 iterator에 대응하기위한 문법이다!

Review (TL;DR)

1. 객체에는 많은 옵션이 있다.
2. 자바스크립트의 모든건 객체이다라는 생각은 틀렸다. 객체는 primitive value중 하나이다.
3. 객체에는 하위 유형이 있고 [object Array] 와 같이 특정 동작에 특화시킬 수 있다.
4. 객체에서 get push의 존재.
5. 객체의 옵션을 지정할 수 있는 여러 메소드들..

• Object.preventExtensions(..), Object.seal(..), Object.freeze(..)

6. 객체의 iterator