본 포스팅은 '모던 자바스크립트 Deep Dive'를 기반으로 공부한 내용을 정리한 것입니다.
원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체다.
0개 이상의 프로퍼티로 구성된 집합, 프로퍼티는 키(key)와 값(value)으로 구성되며, 함수도 프로퍼티 값으로 사용할 수 있다.
var person = {
name : 'Lee',
age: 20
};
name : 'Lee'
, age: 20
: 프로퍼티name
, age
: 키(key)'Lee'
, 20
: 값(value: 객체의 프로퍼티 값으로 사용된 함수
var counter = {
num : 0,
increase : function(){
this.num++;
}
};
increase : function(){this.num++;}
: 메서드 methodJavaScript는 객체 지향 언어로서 다양한 객체 생성 방법을 지원한다.
Object
생성자 함수Object.create
메서드중괄호{...}
내에 0개 이상의 프로퍼티를 정의한다.
var person = {
name: 'Lee',
sayHello: function(){
console.log(`Helo! My name is ${this.name}.`);
}
};
console.log(typeof person); // object
console.log(person); // {name:"Lee",sayHello:f}
객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.
var object = {
key : value,
key : value
};
프로퍼티 키는 프로퍼티 값에 접근할 수 있는 이름으로서 식별자 역할을 한다. 식별자 네이밍 규칙을 따라야하는 것은 아니지만, 식별자 네이밍 규칙을 준수했는지에 따라 표기가 달라진다.
var person = {
firstName: 'Ung-mo',
last-name: 'Lee' // SyntaxError: Unexpected token -
};
위의 예제에서 'last-name'은 네이밍 규칙을 준수하지 않은 프로퍼티 키이다. -
가 연산자로 인식하여 에러를 일으킨다.
문자열 또는 문자열로 평가할 수 있는 표현식을 사용해 프로퍼티 키를 동적으로 생성할 수 있다. 프로퍼티 키로 사용할 표현식을 대괄호[...])로 묶어야한다.
var obj = {};
var key = 'hello';
obj[key] = 'world';
console.log(obj); // {hello: "world"}
프로퍼티 키에 문자열이나 심벌 값 외의 값을 사용하면 암묵적 타입 변환을 통해 문자열이 된다.
var foo = {
0: 1,
1: 2,
2: 3
};
console.log(foo); // {0: 1, 1: 2, 2: 3}
위의 예제에서는 프로퍼티 키로 숫자 리터럴이 사용됐다. 이 경우 따옴표는 붙지 않지만 내부적으로는 문자열로 변환된다.
프로퍼티 키를 중복선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼ㅣ를 덮어쓴다. 에러는 발생하지 않는다.
var foo = {
name: 'Lee',
name: 'Kim'
};
console.log(foo); // {name: "Kim"}
객체에 묶여 있는 함수
var cirle = {
radius: 5,
getDiameter: function(){
return 2 * this.radius;
}
};
console.log(circle.getDiameter()); // 10
메서드는 자신이 속한 객체 뒤에 .메서드이름
을 붙여 호출한다.
프로퍼티에 접근하는 방법
.
를 사용[...]
를 사용, 반드시 따옴표로 감싼 문자열로 프로퍼티 키를 부른다.var person = {
name: 'Lee'
};
person.name // 마침표 표기법
person["name"] // 대괄호 표기법
객체에 존재하지 않는 프로퍼티에 접근하면 undefined
반환한다. (ReferenceError
x)
이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신된다. (update)
var person = {
name: 'Lee
};
person.name = 'Kim';
person["name"] = 'Kim';
console.log(person); // {name: "Kim"}
존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 값이 할당된다.
var person = {
name: 'Lee'
};
person.age = 20;
console.log(person); // {name: "Lee", age: 20}
delete
연산자를 사용한다.
var person = {
name: 'Lee'
};
delete person.name; // person = {}
delete person.age; // 존재하지 않는 프로퍼티
존재하지 않는 프로퍼티(age
)를 삭제하면 에러 없이 무시된다.
변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략할 수 있다.
var x = 1, y = 2;
var obj = {
x: x,
y: y
};
// 축약표현
var obj = {
x, y
};
프로퍼티 키로 사용할 표현식을 대괄호[...]
로 묶어서 계산된 프로퍼티 이름을 만든다.
ES5에서는 객체 리터럴 외부에서 계산된 프로퍼티 이름을 생성해야했다.
var prefix = 'prop';
var i = 0;
var obj = {};
obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;
console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}
ES6에서는 객체 리터럴 내부에서도 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성할 수 있다.
const prefix = 'prop';
let i = 0;
const obj = {
[`${prefix}-${++i}`]: i,
[`${prefix}-${++i}`]: i,
[`${prefix}-${++i}`]: i
};
console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}
ES6에서는 메서드를 정의할 때 function
키워드를 생략할 수 있다.
const obj = {
name: 'Lee',
sayHi() {
console.log('Hi! ' + this.name);
}
};
obj.sayHi(); // Hi! Lee