객체 리터럴 (Object Literal)

건둔덕 ·2023년 2월 24일

Javascript

목록 보기

26/28

객체 (Object)

객체란?

원시 타입은 단 하나의 값만 나타내지만 객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조입니다. 또한 원시 타입의 값, 즉 원시 값은 변경 불가능한 값(Immutable value) 이지만 객체 타입의 값은 변경이 가능한 값(Mutable value)입니다.

자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 모든 것이 객체입니다. 원시 값을 제외한 나버지 값(함수, 배열, 정규 표현식 등)은 모두 객체입니다.

객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성됩니다.
아래의 이미지를 참고하시면 더욱 이해하시기 편합니다.

자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있습니다. 여기서 그럼 함수는 어떻게 프로퍼티의 값으로 활용할 수 있을까요?

자바스크립트의 함수는 일급 객체로 취급이 됩니다. 그러므로 값으로도 활용이 가능합니다.

일급 객체에 대한 내용을 좀 더 자세히 알고 싶으시다면 위의 일급 객체 텍스트에 링크 걸어두었으니 참고하시면 됩니다.

또, 프로퍼티 안의 값이 함수일 경우에는 일반 함수들과 구분하기 위해서 메서드(Method)라고 부르니 참고 하시면 됩니다.

위의 내용처럼 객체는 프로퍼티와 메서드로 구성된 집합체라고 생각하시면 됩니다.

프로퍼티 (Property

프로퍼티의 키는 프로퍼티 값을 참조할 수 있는 식별자 역할을 합니다. 프로퍼티 키의 이름을 지어줄 때는 식별자 네이밍 규칙을 준수하는 프로퍼티 키와 그렇지 않은 프로퍼티 키가 있습니다.

프로퍼티의 키가 자바스크립트의 식별자 네이밍 규칙을 따른다면 따옴표를 사용하지 않고 사용이 가능하지만 그렇지 않다면 반드시 따옴표를 사용해야 합니다.

아래의 예시 이미지를 참고해주시면 더욱 이해하기 쉽습니다.

위의 이미지에서 보이듯이 식별자 네이밍 규칙을 준수한 프로퍼티 키 firstName은 따옴표를 생략 할 수 있습니다. 하지만 last-name은 따옴표를 반드시 사용해 주어야 합니다.

last-name은 "-"을 자바스크립트 엔진이 - 연산자가 있는 표현식으로 해석하여 오류가 생깁니다. 이러한 경우를 식별자 네이밍 규칙을 준수하지 않았다고 할 수 있습니다.

또 프로퍼티 키는 빈 문자열로도 표현이 가능하며, 프로퍼티 키에 문자열이나 심벌 값 외의 값을 사용하면 암묵적 타입 변환을 통해 문자열로 변환 됩니다.

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

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

예를들어 위와 같은 예제가 있다고 생각해 봅시다. 콘솔에서는 따옴표가 붙지 않지만 자바스크립트 내부적으로는 문자열로 반환됩니다.

var foo = {
	name: 'Kim',
  	name: 'Kwon'
}

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

프로퍼티 키를 중복 선언 하게된다면 나중에 선언한 프로퍼티가 먼전 선언된 프로퍼티를 덮어쓰게 됩니다. 이 때 에러를 일으키지 않으니 디버깅 시 골치가 아파질 수 있으니 꼭 참고 바랍니다.

메서드 (Method)

위에서 자바스크립트의 함수는 일급 객체 이기 때문에 프로퍼티의 값으로 사용이 가능하다고 했었습니다. 이 때 일반 함수와 구분하기 위해 프로퍼티의 값으로 할당되어 있는 함수는 메서드(Method)라고 부르게 됩니다. 즉, 메서드는 객체에 묶여 있는 함수를 의미합니다.

메서드 내부에서 사용한 this 키워드는 객체 자신을 가리키는 참조 변수로 사용됩니다.

아래의 예제 코드를 살펴보시면 이해하는데 더 도움이 될 수 있습니다.

var circle = {
	radius: 10,
  
  	getDiameter: function() {
    	return 2 * this.radius;
    }
};

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

프로퍼티 접근

프로퍼티에 접근하는 방법은 마침표 표기법, 대괄호 표기법 이렇게 두 가지가 존재합니다.

프로퍼티 키가 식별자 네이밍 규칙을 준수하는 이름, 즉 자바스크립트에서 사용 가능한 이름이면 마침표 표기법과 대괄호 표기법을 모두 사용할 수 있습니다.

var person = {
	name: 'Kim'
};

// 마침표 표기법
console.log(person.name); // Kim

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

위의 예제에서 보이듯이 대괄호 표기법을 사용하는 경우에는 대괄호 안의 프로퍼티 키는 반드시 따옴표로 감싼 문자열을 사용해 주어야 합니다. 따옴표를 사용하지 않게 되면 자바스크립트 엔진은 식별자로 해석하게 되어 참조 에러를 발생 시킵니다. 이 때 name이라는 변수가 있다면 에러를 반환하지 않고 name이라는 변수 안의 값을 반환 할 수도 있으니 참고 바랍니다.

프로퍼티 키가 숫자인 경우에는 대괄호 표기법만 사용이 가능한데 숫자일 경우에만 대괄효 표기법 안의 프로퍼티 키를 따옴표를 사용하지 않고 접근이 가능합니다.

프로퍼티 변경

var person = {
	name: 'Kim'
};

person.name = 'Kwon';

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

이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 변경됩니다.

프로퍼티 생성

var person = {
	name: 'Kim'
};

person.age = 28;

console.log(person); // {name: "Kim", age: 28}

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

프로퍼티 삭제

var person = {
	name: 'Kim'
};

person.age = 28;

delete person.age; // person 객체에 age 프로퍼티가 존재하므로 age 프로퍼티 값 삭제

delete person.address; // person 객체에 address 프로퍼티가 존재하지 않으므로 address 프로퍼티 삭제 불가

프로퍼티를 삭제할 때에는 delete 연산자를 사용합니다. 이때 delete 연산자의 피연산자는 프로퍼티 값에 접근할 수 있는 표현식이어야 합니다. 만약 존재하지 않는 프로퍼티를 삭제한다면 아무런 에러 없이 무시하게 됩니다.

ES6 확장 기능

ES6에서는 객체 리터럴을 좀 더 간편하고 표현력 있게 사용할 수 있습니다.

프로퍼티 축약 표현

var x = 1;
var y = 1;

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

console.log(obj); // {x: 1, y: 2}

// ES6
const obj = { x, y };

console.log(obj); // {x: 1, y: 2}I

ES6에서는 프로퍼티 값으로 변수를 사용하는 경우 변수의 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략 가능합니다. 위의 예시 코드를 참고하시면 되는데, ES6 방식으로 사용하게 되면 프로퍼티 키는 변수 이름으로 자동 생성되게 됩니다.

메서드 축약 표현

// ES5
var obj = {
	name: 'Kim',
  	sayHi: function() {
    	console.log('Hi ' + this.name);
    }
}

obj.sayHi(); // Hi Kim

// ES6
const obj = {
	name: 'Kim',
    sayHi() {
      console.log(`Hi ${this.name}`);
    }
}

obj.sayHi(); // Hi Kim