TIL

190514_TIL(객체 리터럴)

javascript

객체 리터럴

1. 객체란?

  • 자바스크립트는 객체(object) 기반의 프로그래밍 언어이며 자바스크립트를 이루고 있는 거의 “모든 것”이 객체이다. 원시 타입을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다.
  • 객체 타입(object / reference type)은 다양한 타입의 값(원시 타입의 값 또는 다른 객체)들을 하나의 단위로 구성한 복합적인 자료 구조(Date structure)이다.
  • 자바스크립트의 객체는 키(key)와 값(value)으로 구성된 프로퍼티(Property)들의 집합이다.
  • 프로퍼티의 값으로 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있다. 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드(Method)라 부른다.
  • 객체는 데이터를 의미하는 프로퍼티와 데이터를 참조하고 조작할 수 있는 동작(behavior)을 의미하는 메소드로 구성된 집합이다.

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

자바스크립트의 객체 생성 방법

  • 객체 리터럴
  • Object 생성자 함수
  • 생성자 함수
  • Object.create 메소드
  • 클래스 (ES6)

객체 리터럴

  • 객체 리터럴은 중괄호({…}) 내에 0개 이상의 프로퍼티를 정의한다.
  • 변수에 할당이 이루어지는 시점에 객체 리터럴은 해석되고 그 결과 객체가 생성된다.
1
2
3
4
5
6
7
// 변수에 할당이 이루어지는 시점에 객체 리터럴이 해석되고 그 결과 객체가 생성된다.
const person = {
  name: 'Kim',
  sayHello: function () {
    console.log(`Hi! My name is ${this.name}.`);
  }
};
  • 객체 리터럴의 중괄호는 코드 블록을 의미하지 않는다. 객체 리터럴은 표현식이다. 따라서 객체 리터럴의 중괄호 뒤에는 세미 콜론을 붙인다.

3. 프로퍼티

  • 프로퍼티를 나열할 때는 쉼표(,)로 구분한다. 일반적으로 마지막 프로퍼티 뒤에는 쉼표를 사용하지 않으나 사용해도 상관없다.
  • 프로퍼티 키로는 빈 문자열을 포함하는 모든 문자열 또는 symbol 값을 사용할 수 있다.
  • 프로퍼티 키는 프로퍼티 값에 접근할 수 있는 이름으로 식별자 역할을 한다.
  • 프로퍼티 키가 반드시 식별자 네이밍 규칙을 따라야 하는 것은 아니다. 하지만 네이밍 규칙을 따랐을 경우에는 따옴표를 생략할 수 있고, 따르지 않은 경우에는 반드시 따옴표를 사용하여야 한다.
1
2
3
4
5
6
var person = {
  first_name: 'jun', // 유효한 이름
  'last-name': 'Kim'    // 유효하지 않은 이름
};

console.log(person); // {first_name: "jun", last-name: "Kim"}
  • 프로퍼티 값은 자바스크립트에 사용할 수 있는 모든 값을 사용할 수 있다.
  • 프로퍼티 키에 문자열이나 symbol 값 이외의 값을 사용하면 암묵적 타입 변환을 통해 문자열이 된다. 예를 들어, 프로퍼티 키로 숫자 리터럴을 사용하면 따옴표는 붙지 않지만 내부적으로는 문자열로 변환된다.
1
2
3
4
5
6
7
var foo = {
  0: 1,
  1: 2,
  2: 3
};

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

4. 메소드

  • 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드(Method)라 부른다.
  • 메소드는 객체에 제한되어 있는 함수를 의미한다.
1
2
3
4
5
6
7
8
9
10
var circle = {
  radius: 10, // ← 프로퍼티

  // 원의 지름
  getDiameter: function () { // ← 메소드
    return 2 * this.radius; // this는 circle를 가리킨다.
  }
};

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

5. 프로퍼티 접근

  • 프로퍼티 값 접근 방법
    • 마침표 표기법(Dot notation)
    • 대괄호 표기법(Bracket notation)
1
2
3
4
5
6
7
8
9
var person = {
  name: 'Kim'
};

// 마침표 표기법에 의한 프로퍼티 접근
console.log(person.name); // Kim

// 대괄호 표기법에 의한 프로퍼티 접근
console.log(person['name']); // Kim
  • 프로퍼티 키가 식별자 네이밍 규칙을 따르지 않는 이름인 경우에는 대괄호 표기법을 사용하여야 한다. 대괄호 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다.

6. 프로퍼티 값 갱신 및 동적 생성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var person = {
  name: 'Kim'
};

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

// person객체에 address 프로퍼티가 존재하지 않는다.
// 따라서 person객체에 address 프로퍼티가 동적으로 생성되고 값이 할당된다.
person.address = 'Busan';

console.log(person);  // {name: "Lee", address: "Busan"}

// delete 연산자로 address 프로퍼치를 삭제할 수 있다.
delete person.address;

console.log(person);  // {name: "Lee"}

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

프로퍼티 축약 표현

  • 객체 리터럴의 프로퍼티는 프로퍼티 키와 프로퍼티 값으로 구성된다. 프로퍼티의 값은 변수에 할당된 값, 즉 식별자 표현식 일 수도 있다.
  • ES6에서 변수명과 프로퍼티 키가 동일한 이름 일 때, 프로퍼티 키를 생략 할 수 있다. 프로퍼티 키는 변수의 이름으로 자동 생성 된다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 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}

메소드 축약 표현

  • ES6에서는 메소드를 선언할 때, function 키워드를 생략한 축약 표현을 사용할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// ES5
var obj = {
  name: 'Lee',
  sayHello: function() {
    console.log('Hello! ' + this.name);
  }
};

obj.sayHello(); // Hi! Lee


// ES6
const obj = {
    name: 'Lee',
    // 메소드 축약 표현
    sayHello() {
        console.log('Hello!' + this.name);
    }
};

obj.sayHello();// Heollo! Lee
Share