[Javascript] 객체 리터럴

자바스크립트는 객체 기반의 프로그래밍 언어로 원시 값을 제외하면 나머지 (함수, 배열, 정규 표현식 등) 모두 객체이다.

 

원시 타입 vs 객체 타입

원시 타입은 단 하나의 값만 나타내지만 객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 자료구조다.

원시 타입은 변경이 불가능한 값이지만 객체는 변경이 가능하다.

 

객체

객체는 프로퍼티로 구성된 집합이다.

key : value 형태로 표현되는데 모든 값들이 프로퍼티 값이 될 수 있다.

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

 

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

 

따라서 객체는 프로퍼티와 메서드로 구성된 집합체다.

 

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

메서드 : 프로퍼티를 참조하고 조작하는 동작

 

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

자바스크립트는 프로토타입 기반 객체지향 언어로 C++나 자바와 같은 클래스 기반 객체지향 언어와는 달리 다양한 객체 생성 방법을 지원하고 있다.

 

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

 

※ 객체를 생성하는 방법들

객체 리터럴

Object 생성자 함수

생성자 함수

Object.create 메서드

클래스

 

객체 리터럴은 { } 안에 프로퍼티를 정의하면 된다.

변수에 할당되는 시점에 JS엔진은 객체 리터럴을 해석해서 객체를 생성한다.

프로퍼티가 없으면 {} 는 빈 객체를 의미한다.

 

JS엔진은 {}를 코드 블록으로 해석하지 않고 빈 객체로 해석한다는 점!!

const empty = {};

 

객체를 생성하기 위해 클래스를 먼저 정의하고 new 연산자와 함께 생성자를 호출할 필요 없이 객체 리터럴로 객체를 생성할 수 있다.

 

※ 객체 리터럴 이외 객체를 생성하는 방법은 모두 함수를 사용해서 객체를 생성한다.

 

프로퍼티

객체에서 프로퍼티를 나열 할 때 쉼표로 구분한다.

key는 모든 문자열 또는 심벌 값이 올 수 있다.

 

const person = {
    name : "Mukma",
    2property : 20, // 에러, 식별자 네이밍 규칙을 만족하지 않기 때문에 따옴표로 사용해야 한다.
    3 : 10, // 숫자로만 구성된 키는 따옴표를 생략할 수 있다.
}

프로퍼티 키는 식별자 역할을 하지만 식별자 네이밍 규칙을 준수해야 하는 것 아니지만

식별자 네이밍 규칙을 따르면 key를 " ", ' '를 생략할 수 있다.

 

숫자로만 구성된 key는 따옴표를 생략할 수 있다.

 

식별자 네이밍 규칙을 준수하는 것이 따옴표 생략할 수 있기 때문에 되도록이면 준수하는 것이 낫겠다.

 

const obj = {};
obj['key1'] = 'hello world'; // 프로퍼티 키를 동적으로 생성한다.

문자열이나 문자열로 평가할 수 있는 표현식을 사용하면 프로퍼티 key를 동적으로 생성할 수 있다.

이 경우 [ ]로 표현식을 묶어야 한다.

 

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

프로퍼티 key에 문자열이나 심벌 값 이외 값을 사용하면 암묵적으로 타입이 변환이 이루어져 문자열이 된다.

key에 숫자를 넣었더니 문자열로 변환 된 것을 볼 수 있다.

 

var foo = {
    fruit : "apple",
    fruit : "pear",
}

이미 존재하는 프로퍼티 키를 중복해서 선언하면 나중에 선언한 프로퍼티가 기존 것을 덮어쓴다.

 

메서드

객체에서 프로퍼티 값이 함수인 경우 그 프로퍼티를 메서드로 부른다.

 

const circle = {
    radius : 5, // 프로퍼티
    
    getDiameter: function() { // 메서드
        return 2 * this.radius; // this는 객체 자신을 가리키는 참조 변수로 circle를 가리킨다.
    }
}

 

프로퍼티 접근

프로퍼티에 접근하는 방법은 두 가지가 있다.

dot notation : 마침표 접근 연산자

bracket notation :  [ ] 접근 연산자

 

식별자 네이밍 규칙을 준수하는 키라면 두 가지 표기법으로 프로퍼티에 접근할 수 있다.

const person = {
    name : "Mukma",
}

console.log(person.name);

console.log(person["name"]); // 대괄호에 문자열이 들어간다.

[ ] 안에  문자열이 들어간다는 점 주의!

 

const person = {
    name : "Mukma",
}

console.log(person.age); // undefined 출력

객체에 없는 프로퍼티를 접근하면 undefined를 반환한다.

ReferenceError가 발생하지 않는다.

 

const foo = {
    'property-1' : "apple",
    2 : "pear",
}

console.log(foo['property-1']);

console.log(foo[2]); // 에러 아님

프로퍼티를 선언할 때 숫자로만 구성된 key는 따옴표를 생략할 수 있는데 접근할 때도 마찬가지다.

 

프로퍼티 값 갱신

이미 존재하는 프로퍼티에 값을 할당하면 값이 갱신된다.

const obj = {
    a : "apple",
    b : "bear",
    c : "carrot",
}

obj.c = "chocolate"; // 프로퍼티 c 값이 갱신된다.

 

프로퍼티 동적 생성

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

const foo = {
    a : "apple",
}

foo.b = "bear"; // 새로운 프로퍼티 b가 동적으로 생성된다.

 

프로퍼티 삭제

delete 연산자는 객체의 프로퍼티를 삭제할 수 있다.

존재하지 않는 프로퍼티를 삭제하면 에러 없이 무시된다.

const foo = {
    a : "apple",
    b : "bear",
    c : "carrot",
}

delete foo.b; // 프로퍼티 b 삭제
delete foo.d; // 프로퍼티 d가 없지만 에러가 발생하지 않는다.

 

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

프로퍼티 축약 표현

객체 리터럴의 프로퍼티 값은 변수에 할당된 값, 표현식일 수 있다.

var x = 1, y =2;

var obj = {
	x : x,
    y : y,
};

---------------- ES6 ---------------------------------------------
let x = 1, y =2;

const obj = {x, y}; // 프로퍼티 값만 나열하면 키가 프로퍼티 값으로 자동 생성된다.

 

계산된 프로퍼티 이름

프로퍼티 키를 동적으로 생성할 수 있다. 동적으로 생성할 때 [ ] 표기법을 사용하고 이에 들어가는 키는 문자열로 평가되는 표현식이어야 한다.

 

ES5에서는 객체 리터럴 외부에서 프로퍼티 키를 동적으로 생성해야 했지만 ES6에서는 객체 리터럴 내부에서 프로퍼티 키를 동적으로 생성할 수 있다.

var prefix = 'prop';
var i = 0;

var obj = {};

obj[prefix + ++i] = i;
obj[prefix + ++i] = i;
obj[prefix + ++i] = i;

---------------- ES6 ---------------------------------------------

const prefix = 'prop';
let i = 0;

const obj = { // 템플릿 리터럴로 편리하게 문자열을 표기할 수 있다.
    [`${prefix}${++i}`] : i,
    [`${prefix}${++i}`] : i,
    [`${prefix}${++i}`] : i,
};

 

메서드 축약 표현

ES5에서 메서드 정의하려면 프로퍼티 값으로 함수를 할당했다.

 

ES6에서는 메서드를 정의할 때 function 키워드를 생략한 축약 표현을 사용할 수 있다.

 

var obj = {
    a : "apple",
    sayHi : function(){
        console.log("hi");
    },
};

obj.sayHi();

---------------- ES6 ---------------------------------------------

const obj = {
    a : "apple",
    sayHi() {
        console.log("hi");
    },
};

obj.sayHi();