var person = {
name: "Lee", // name: "Lee" = 프로퍼티 name = 프로퍼티 키, "Lee" = 프로퍼티 값
age: 20
}
객체는 프로퍼티의 집합이다.
//프로퍼티와 메서드로 구성된 집합체
var counter = {
num: 0, //프로퍼티
increase: function(){ // 메서드
this.num++;
}
}
- 프로퍼티 : 객체의 상태를 나타내는 값(data)
- 메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior)
리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용하여 값을 생성하는 표기법!
- 객체 리터럴은 중괄호({...}) 내에 0개 이상의 프로퍼티를 정의한다. 변수에 할당되는 시점에 자바스크립트엔진은 객체 리터럴을 해석해 객체를 생성한다.
var person = {
name: "Lee";
sayHello: function(){
console.log(`Hello! My name is ${this.name}.`);
}
};
console.log(typeof person); //object
console.log(person); //{name: "Lee", sayHello: f}
var empty = {};
console.log(typeof empty); //object
var person = {
name: "Lee", // name: "Lee" = 프로퍼티 name = 프로퍼티 키, "Lee" = 프로퍼티 값
age: 20
}
프로퍼티 키는 프로퍼티 값에 접근할 수 있는 이름으로서 식별자 역할을 한다. 하지만 반드시 식별자 네이밍 규칙을 따라야 하는 것은 아니다. 두개의 차이점은 식별자 네이밍 규칙을 준수하는 이름인 경우 따옴표를 생략할 수 있고, 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 한다.
var person = {
firstName: 'Yoo', // 식별자 네이밍 규칙을 준수하는 프로퍼티 키
'last-name': 'Lee' // 식별자 네이밍 규칙을 준수하지 않는 프로퍼티 키
last-name: 'Lee' // 에러(-연산자로 해석)
}
var circle = {
radius: 5, //프로퍼티
//원의 지름
getDiameter: function () { //메서드
return 2 * this.radius; // this는 circle을 가리킨다
}
};
console.log(circle.getDiameter()); //10
var person = {
name: 'Lee'
};
//마침표 표기법에 의한 프로퍼티 접근
console.log(person.name); //Lee
//대괄호 표기법에 의한 프로퍼티 접근
console.log(person['name']); //Lee
//올바르지 않은 프로퍼티 접근
console.log(person[name]); //ReferenceError
var person = {
name: 'Lee'
};
//person 객체에 name 프로퍼티가 존재하므로 name 프로퍼티의 값이 갱신된다.
person.name = 'Kim';
console.log(person); // {name: "Kim"}
var person = {
name: 'Lee'
};
//person 객체에 age 프로퍼티가 존재하지 않는다.
//따라서 person 객체에 age 프로퍼티가 동적으로 생성되고 값이 할당된다.
person.age = 20;
console.log(person); // {name: "Kim", age: 20}
var person = {
name: 'Lee'
};
//person 객체에 age 프로퍼티가 존재하지 않는다.
//따라서 person 객체에 age 프로퍼티가 동적으로 생성되고 값이 할당된다.
person.age = 20;
console.log(person); // {name: "Kim", age: 20}
//delete로 삭제
delete person.age;
//없는 프로퍼티 삭제
delete person.address; //오류 없음
console.log(person); // {name: "Lee"}
//ES5
var x = 1, y = 2;
var obj = {
x: x,
y: y
};
console.log(obj); // {x:1, y:2}
//ES6
let x = 1, y = 2;
//프로퍼티 축약 표현
const obj = { x, y }
console.log(obj); // {x:1, 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
const obj = {
[`${prefix}-${++i}`]: i,
[`${prefix}-${++i}`]: i,
[`${prefix}-${++i}`]: i
};
console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}
//ES5
var obj = {
name: 'Lee',
sayHi: function(){
console.log('Hi! ' + this.name);
}
};
obj.sayHi(); // Hi! Lee
//ES6
var obj = {
name: 'Lee',
sayHi(){ //메서드 축약 표현
console.log('Hi! ' + this.name);
}
};
obj.sayHi(); // Hi! Lee