JavaScript - #11. 객체 리터럴

자바스크립트는 객체(Object)기반 프로그래밍언어이며, 자바스크립트에서 원시값을 제외한 나머지 모든것이 객체이다.

 

간단히 원시값과 객체의 차이를 알아보자

원시 값 - 단 하나의 값만 나타냄, 변경이 불가능한 값임.

객체 타입의 값 - 다양한 타입의 값(원시값 또는 다른 객체)을 하나의 단위로 구성한 복잡한 자료구조, 변경이 가능한 값. 

자세한 비교는 추후에 따로 알아보도록 하자.

 

그렇다면 객체란 무엇인가.

객체란 0개이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키(key)와 값(value)로 구성된다.

프로퍼티 값은 자바스크립트에서 사용할 수 있는 모든 값이 될 수 있다.

그중에서도 자바스크립트의 함수도 값이 될 수 있으며, 이는 함수가 일급객체이기 때문이다.

 

아직 함수와 일급객체에대해 배우지는 않았지만 개념에 대하여 알아보자.

 

- 일급 객체 (추후 공부예정)

다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 보통 함수에 매개변수로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 한다.

 

따라서 함수는 객체의 프로퍼티의 값이 될 수 있으며, 우리는 자바스크립트의 다른 함수와 객체의 프로퍼티 값으로 할당된 함수를 구별하기 위해서 이를 메서드라고 부른다.

메서드를 사용하는 예시는 다음과 같다.

결론적으로 객체를 정의해보자면, 프로퍼티와 메서드로 구성된 집합체 라고 할 수 있다.

프로퍼티와 메서드의 역할은 다음과 같다

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

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

 

따라서 객체는 상태와 그에 따른 동작을 함께 정의할 수 있기 때문에 유용하다.

 

클래스 기반의 객체지향 언어와 다르게 자바스크립트는  프로토타입 기반 객체지향 언어이다.

따라서 객체를 생성하는 방법이 다양하다.

 

그중에서도 객체 리터럴을 이용하여 객체를 생성하는 방법에 대하여 알아보겠다.

(나머지 방식은 함수를 배우고 알아볼 예정)

 

객체 리터럴은 중괄호 ( { } ) 내에 선언한다.

이때 중괄호는 코드 블록을 의미하는 것이 아닌 객체 리터럴을 의미하므로 닫는 중괄호 뒤에 세미콜론을 붙혀준다.

코드 블록 내에는 0개 이상의 프로퍼티가 정의되어야 하며, 프로퍼티가 없는 경우에도 빈 객체로 판단된다.

let person = {
    name:'Kim'
};

객체 리터럴에 프로퍼티를 포함시켜서 객체를 생성함과 동시에 프로퍼티를 만들 수 있으며, 이후 동적으로 프로퍼티를 생성할 수 있다.

 

다음으로 프로퍼티에 대하여 자세히 알아보자.

객체는 0개 이상의 프로퍼티로 이루어져있기 때문에, 프로퍼티를 나열해야 한다.

이때 각 프로퍼티를 구분하는 것은 쉼표(,) 이다.

let person = {
    name:'Kim',
    age:25
};

프로퍼티는 키와 값으로 이루어져 있으며, 이때 사용할 수 있는 값은 다음과 같다

 

프로퍼티 키 - 빈 문자열을 포함하는 모든 문자열 또는 심벌 값

프로퍼티 값 - 자바스크립트에서 사용할 수 있는 모든 값

 

프로퍼티의 키는 프로퍼티 값에 접근할 수 있는 식별자의 역할을 한다.

이 키는 식별자 네이밍 규칙을 준수하는 경우와 준수하지 않는 경우로 나누어진다.

식별자 네이밍 규칙을 따르는 경우에는 따옴표를 생략 할 수 있으며, 아닌경우에는 따옴표를 반드시 사용해야한다.

let person = {
    firstName:'MS', // 네이밍 규칙을 따르는 경우
    'last-name':'Kim' // 네이밍 규칙을 따르지 않는 경우
};

코드의 혼란이나 번거로운 일을 방지하기 위해서 가급적 네이밍 규칙을 따르는 프로퍼티 키값을 사용하는 것을 권장한다.

또한 프로퍼티 키에는 문자열이나 심벌 값이 들어가야하기 때문에 만약 다른 타입의 값이 key값으로 들어간다면 암묵적 형변환으로 string값이 된다.

let test11= {
    true:'string?'
}
console.log(typeof Object.keys(test11)[0]); //string

 

프로퍼티에 접근하기 위해서는 두가지 방법이 있다.

1. 마침표 표기법 - 마침표 프로퍼티 접근 연산자 사용 (.) 

2. 대괄호 표기법 - 대괄호 프로퍼티 접근 연산자([...])를 사용

 

프로퍼티의 키값이 자바스크립트 식별자 네이밍 규칙에 따른 것이라면 두가지 방법을 모두 사용할 수 있다.

let person = {
	name : 'Kim'
};

console.log(person.name); // 마침표 표기법
console.log(person['name']); // 대괄호 표기법

이때 주의 해야할 사항은 대괄호 표기법을 사용할 시 키값은 따옴표를 이용하여 string 타입의 값을 넣어야 한다.

이 이유는 따옴표가 없을 시 자바스크립트에서는 키값을 식별자로 해석하기 때문이다.

(ReferenceError가 발생한다)

let person = {
	name : 'Kim'
};

console.log(person.age); // 객체 내 없는 프로퍼티에 접근시 undefined 반환, 오류 미발생)

만약 없는 프로퍼티에 접근을 하게된다면 오류가 발생할까?

자바스크립트에서는 객체 내 없는 프로퍼티에 접근을하게 되면 undefined를 반환하고 오류가 미발생한다. 

let person = {
	first-name : 'Kim'
};

console.log(person.first-name); //NaN
console.log(person['first-name']; //Kim

또한 네이밍 규칙을 따르지 않는 키값에 접근 할 때는 반드시 대괄호 표기법을 준수해야 한다.

이때 person.first-name 이 오류가 뜨지 않는 이유는 자바스크립트 브라우저 엔진에서는 person.first에서 name이라는 식별자를 가진 값을 뺀다고 가정을 하기 때문이다. person.first는 person Object에 정의되지 않은 프로퍼티 이므로 undefined를 반환하고 name이라는 변수의 값을 빼기 때문에 숫자타입의 NaN이 반환된다.

이때 name은 선언된 변수가 아니지만 브라우저 환경에서 name이라는 식별자의 전역변수가 암묵적으로 존재한다. (window의 프로퍼티)

기본적으로 name의 값은 빈 문자열이다.

* name은 브라우저 환경에서만 존재하기에 node.js에서는 없음, 위 코드를 node.js 환경에서 실행하면 참조오류 발생 (name 식별자가 선언된 적이 없으므로)

 

프로퍼티 값을 갱신하는 방법도 알아보자.

let obj = {
    propTest : 'test'
};

obj.propTest = 'test1';
console.log(obj.propTest); //test1
obj['propTest']='test2';
console.log(obj.propTest); //test2

프로퍼티 값을 갱신하는 방법은 정말 간단하다.

바로 바꾸고자 하는 프로퍼티 키에 접근을 하여 변경할 값을 할당해주면 되는 것이다.

 

다음은 프로퍼티를 동적으로 생성하는 방법이다.

let obj = {
    propTest : 'test'
};

obj.propTestSecond = 'add property';
console.log(obj);

실행 값:

프로퍼티를 동적으로 생성하는 방법은 생성하고자 하는 키값에 접근을 하여 값을 할당하는 것이다.

 

마지막으로 프로퍼티의 삭제이다.

let obj = {
    propTest : 'test'
};

delete obj.propTest;
console.log(obj) // 빈객체

삭제하고자 하는 프로퍼티의 키값에 접근하며 그 앞에 delete 키워드를 사용한다.

 

다음으로 ES6에서 추가된 객체 리터럴의 확장 기능에 대하여 간단히 알아보자

1. 프로퍼티 축약 표현

객체 리터럴의 프로퍼티는 프로퍼티 키와 값으로 구성된다. 이 프로퍼티의 값은 변수에 할당된 값인 식별자 표현식일 수 있다.

let x = 1;
let y = 2;

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

이때 위코드와 같이 변수의 식별자를 그대로 프로퍼티의 키값으로 사용할 수도 있다.

ES6에서는 변수의 식별자와 프로퍼티 키가 동일 할 경우 프로퍼티의 키를 생략할 수 있도록 하였다. 이때 프로퍼티 키는 변수 이름으로 자동 생성된다.

let x = 1;
let y = 2;

let obj = {x, y};

 

2. 계산된 프로퍼티 이름

ES5까지는 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성하려면, 대괄호 표기법을 사용해야 했다.

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

let obj ={};

obj[prefix + '-' + ++i] = i; //prop-1: 1
obj[prefix + '-' + ++i] = i; //prop-2: 2
obj[prefix + '-' + ++i] = i; //prop-3: 3

ES6에서는 객체 리터럴 내에서 계산된 프로퍼티 이름을 키로 동적 생성이 가능해졌다.

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

let obj ={
    [`${prefix}-${++i}`]: i, 
    [`${prefix}-${++i}`]: i,
    [`${prefix}-${++i}`]: i
};

 

3. 메서드의 축약표현

ES5까지는 메서드를 정의할 때 프로퍼티의 형식을 갖추어서 (키 : function(){})의 형식으로 생성해야했다.

let person = {
    name:'Kim',
    introduce : function(){
    	console.log(`My name is ${this.name}`);
    };
};

ES6에서는 function 키워드를 생략하여 메서드를 생성할 수 있다.

let person = {
    name:'Kim',
    introduce(){
    	console.log(`My name is ${this.name}`);
    };
};