모던자바스크립트 Deep Dive에서 발췌한 객체 리터럴에 관한 내용을 적어보자

객체리터럴

객체란(object)

• 프로퍼티와 메서드로 구성된 집합체

• JS는 객체 기반의 프로그래밍 언어이다. JS를 구성하는 "거의 모든 것"이 객체

• 원시값을 제외한 나머지 값(함수, 배열, 정규표현식 등)은 모두 객체

• 원시값과 객체타입의 비교

  1. 원시값 : 단 하나의 값, 변경 불가능한 값
  2. 객체타입 비교
     • 다양한 타입의 값(원시 값, 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조
     • 변경 가능한 값
     • Key와 Value으로 구성된 property의 집합이다
     • 형태 : var person = {
       name : 'Lee', (프로퍼티)
       age(프로퍼티 키) : 20(프로퍼티 값)
       };

• 프로퍼티와 메서드

  1. JS에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있음(함수도 가능)
  2. 메서드 : 프로퍼티으 값이 함수인 경우 일반 함수와 구분하기 위해 메서드라고 부름(객체 안의 함수)
  3. 프로퍼티의 역할 : 객체의 상태를 나타내는 값(data)
  4. 메서드의 역할 : 프로퍼티(상태 data)를 참조하고 조작할 수 있는 동작

객체리터럴에 의한 객체 생성

JS의 다양한 객체 생성 방법

• JS는 프로토타입 기반 객체지향 언어로서 다양한 객체 생성 방법을 지원
  1. 객체 리터럴
  2. Object 생성자 함수
  3. 생성자 함수
  4. Object.creat 메서드
  5. 클레스(ES6)

리터럴 : 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용하여 값을 생성하는 표기법

• 객체 리터럴
  1. 객체 생성방법 중 가장 간단한 방법
  2. 객체 리터럴은 객체를 생성하기 위한 표기법.
  3. 객체 리터럴은 중괄호({...}) 내에 0개 이상의 프로퍼티를 정의. 중괄호는 코드 블록을 의미하지 않음. 중괄호 내에 프로퍼티를 정의하지 않으면 빈 객체가 생성됨. 중괄호 뒤에는 세미콜론을 붙인다
  4. 변수에 할당되는 시점에 JS 엔진은 객체 리터럴을 해석해 객체를 생성
  5. 객체를 생성함과 동시에 프로퍼티를 만들 수 있고, 객체를 생성한 이후에 프로퍼티를 동적으로 추가 가능
  6. 객체 리터럴은 값으로 평가되는 표현식이므로 변수에 할당 가능
  7. 객체 리터럴 외의 객체 생성 방식은 모두 함수를 사용해 객체를 생성

프로퍼티

• 객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다

 var person = {
 // 프로퍼티 키는 name, 프로퍼티 값은 'Lee'
    name: 'Lee',
 // 프로퍼티 키는 age, 프로퍼티 값은 20
    age: 20
 };

• 프로퍼티를 나열할 때는 쉼표(,)로 구분. 마지막 프로퍼티 뒤에는 쉼표를 사용하지 않으나 사용해도 무방
• 프로퍼티 값 : JS에서 사용할 수 있는 모든 값
• 프로퍼티 키
  1. 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
  2. 프로퍼티 값에 접근할 수 있는 이름으로서 식별자 역할을 함
  3. 문자열 또는 문자열로 평가할 수 있는 표현식을 사용해 프로퍼티 키를 동적으로 생성할 수도 있음 : 프로퍼티 키로 사용할 표현식을 대괄호([ ])로 묶어야 함

var obj = {};
var key = 'hello';

// ES5: 프로퍼티 키 동적 생성
obj[key] = 'world';
// ES6 : 계산된 프로퍼티 이름
// var obj = { [key]: 'world' };

console.log(obj); //{hello: "world"}

4. 프로퍼티 키에 문자열이나 심벌 값 외의 값을 사용하면 암묵적 타입 변환을 통해 문자열이 됨

var foo = {
0 : 1,
1 : 2,
2 : 3
};

console.log(foo); // {0:1, 1:2, 2:3}

5. 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어씀

var foo = {
name : 'Lee',
name : 'Kim'
};

console.log(foo); // {name:"Kim"}

메서드

• JS에서 사용할 수 있는 모든 값은 프로퍼티 값으로 사용할 수 있음
• JS의 함수는 객체 : 함수는 값으로 취급할 수 있기 때문에 프로퍼티 값으로 사용 가능
• 프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드라고 부른다
• 메서드 내부에서 사용한 this 키워드는 객체 자신(아래의 예제에서는 circle 객체)을 가리키는 참조변수

var circle = { 
  radius: 5,  // <- 프로퍼티
  
  // 원의 지름
  getDiameter: function () { // <- aptjem
     return 2 * this.radius; // this는 circle을 가리킨다.
  }
};

console.log(circle.getDiameter());  // 10
  

프로퍼티 접근

• 프로퍼티에 접근하는 두 가지 방법
  1. 마침표 표기법 : 마침표 프로퍼티 접근 연산자(.)를 사용하는 방법
  2. 대괄호 표기법 : 대괄호 프로퍼티 접근 연산자([...])를 사용하는 방법

프로퍼티 값 갱신

• 이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신됨

var person = {
  name: 'Lee'
};

// person 객체에 name 프로퍼티가 존재하므로 name 프로퍼티의 값이 갱신된다.

person.name = 'Kim';

console.log(person); //{name : 'Kim'}

프로퍼티 동적 생성

• 존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당됨

var person = { 
    name: 'Lee'
};

person.age=20;
console.log(person); //{name : 'Kim', age:20}
  

프로퍼티 삭제

• delete 연산자는 객체의 프로퍼티를 삭제한다
• delete 연산자의 피연산자는 프로퍼티 값에 접근할 수 있는 표현식이어야 한다
• 존재하지 않는 프로퍼티를 삭제하면 에러 없이 무시된다

var person = { 
    name: 'Lee'
};

person.age=20;
console.log(person); //{name : 'Lee', age:20}

delete person.age;
console.log(person); //{name : 'Lee'}

delete person.address;
console.log(person); //{name : 'Lee'}

ES6에서 추가된 객체 리터럴의 확장 기능

• 프로퍼티 축약표현
• 계산된 프로퍼티 이름
• 메서드 축약표현