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