10 객체 리터럴

JS는 객체(object) 기반의 프로그래밍 언어이며,

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

객체 타입(object/ reference type)은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조(data structure) 이다.

또한 객체는 변경 가능한 값(mutable value)이다.

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

var person = {
  name: 'LEE',		// 프로퍼티	
  age: 20		// 프로퍼티
};

 

프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라 부른다.

var counter = {
  num: 0,				// 프로퍼티
  increase: function () {		// 메서드
    this.num++;				// 메서드
  }					// 메서드
};

 

프로퍼티: 객체의 상태를 나타내는 값

메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior)

 

객체지향 언어는 클래스를 사전에 정의하고 필요시점에 new 연산자와 함께 생성자(constructor)를 호출하여

인스턴스를 생성함

 

인스턴스: 클래스에 의해 생성된 메모리에 저장된 실체

 

JS는 프로토타입 기반 객체지향 언어로서 다양한 객체 생성 방법을 지원한다.

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

객체 리터럴  

var person = {
    name: 'LEE',
    sayHello: function() {
        console.log('Hello! My name is ${this.name}.');
    }
};

console.log(typeof person);
console.log(person);

 

객체 리터럴은 JS의 유연함과 강력함을 대표하는 객체 생성 방식.

객체를 생성하기 위해 클래스를 먼저 정의하고 new연산자와 함께 생성자를 호출할 필요가 없다

 

네이밍 규칙

var person = {
    firstName: 'Ung-mo',
    last-name: 'Lee'    // SyntaxError
};

네이밍 규칙을 따르지 않으면 반두시 '' 를 써야함

 

문자열 or 문자열로 평가할 수 있는 표현식을 사용해 프로퍼티 키를 동적으로 생성할 수도 있다.

이 경우에는 프로퍼티 키로 사용할 표현식을 대괄호([...])로 묶어야 한다.

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

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

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

 

메서드

프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드라 부른다.

즉 메서드는 객체에 묶여 있는 함수.

 

프로퍼티 접근 방법

• 마침표 프로퍼티 접근 연산자(.)를 사용하는 마침표 표기법(dot notation)
• 대괄호 프로퍼티 접근 연산자([...])를 사용하는 대괄호 표기법(bracket notation)

var person = {
    name: 'Lee'
};
// 마침표 표기법에 의한 프로퍼티 접근
console.log(person.name); // Lee
//대괄호 표기법에 의한 프로퍼티 접근
console.log(person['name']); // Lee

# 대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열

안그러면 ReferenceError

 

var person = {
    'last-name': 'Lee',
    1: 10
};

person.'last-name';     // SyntaxError
//person.last-name;    // 브라우저 환경: NaN
                        // Node.js 환경: ReferenceError
person[last-name];      // ReferenceError
person['last-name'];    // Lee
// 프로퍼티 키가 숫자로 이뤄진 문자열인 경우 따옴표 생략 가능
person.1;               // SyntaxError
person.'1';             // SyntaxError
person[1];              // 10: person[1] -> person['1']
person['1'];            // 10

 

JS엔진은 person.last를 평가. last인 프로퍼티가 없어서 undefined로 평가.

즉 person.last-name은 undefined-name과 같다.

이후 name식별자 찾는데 이때 name은 프로퍼티 키가 아니라 식별자로 해석됨

 

Node.js 환경에서는 name이란 식별자 선언이 없어서 ReferenceError

브라우저에서는 name이란 전역 변수가 암묵적으로 존재

 

프로퍼티 값 갱신 : 재 할당하면 값이 갱신

프로퍼티 동적 생성 : 존재하지 않는 프로퍼티 값을 할당하면 프로퍼티가 동적으로 생성

프로퍼티 삭제 : delete로 삭제. 존재하지않으면 에러 없이 그냥 무시

 

 

 

# 나만의 quiz

1. var person = {

       name: 'Lee'

   };

   console.log(person.name); // ??

   console.log(person[name]); // ??

       다음 출력의 결과를 쓰시오.
       - Lee, ReferenceError

        대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 함