Skip to main content

객체 리터럴

작성일 : 2024.10.18

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

프로퍼티​

  • 객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다
  • 프로퍼티 키는 문자열이지만 JS에서 사용 가능한 유효한 이름인 경우 따옴표를 생략가능
  • 식별자 네이밍 규칙을 따르지 않는 이름에는 반듯기 따옴표를 사용
  • 문자열 또는 문자열로 평가할 수 있는 표현식을 사용해 프로퍼티 키를 동적으로 생성가능
  • 빈 문자열을 프로퍼티 키로 사용해도 에러 발생 X
  • 프로퍼티 키에 문자열이나 심벌 값 외의 값을 사용하면 암묵적 타입 변환을 통해 문자열로 변환
  • var, function와 같은 예약어를 프로퍼티 키로 사용해도 에러 발생 X
  • 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어씀
var person = {
	firstName : 'Ung=mo', 	// 식별자 네이밍 규칙을 준수하는 프로퍼티 키
	'last-Name' : 'Lee'		// 식별자 네이밍 규칙을 준수하지 않는 프로퍼티 키
}

var obj = {};
var key = 'hello';
obj[key] = 'world';

var foo = {
	'' : ''	
};

var foo2 = {
	0: 1,
	1: 2,
	2: 3
};

var foo3 = {
	var: '',
	function : ''
};

var foo4 = {
	name = "a"
	name = "b"
}

프로퍼티 접근​

프로퍼티 접근 방식

  1. 마침표 프로퍼티 접근 연산자(.)를 사용하는 마침표 표기법
  2. 대괄호 프로퍼티 접근 연산자([...])를 사용하는 대괄호 표기법
    • 대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열
  • 객체에 존재하지 않는 프로퍼티에 접근하면 undefined을 반환
  • 프로퍼티 키가 숫자로 이뤄진 문자열인 경우 따옴표 생략 가능
console.log(person.name);
console.log(person['name'])

var person = {
	'last-name' : 'Lee'
}

person[last-name];	// -> ReferenceError : last is not defined
person.'last-name';	// -> SyntaxError: Unexpected string
person.last-name;	// -> 브라우저 환경 : NaN
					// -> Node.js 환경 : ReferenceError: name is not defined

person.last-name 실행 과정

  1. person.last 평가
  2. person.last가 없기에 undefined을 반환 => person.last-name = undefined -name
    • 브라우저 환경에서 window 전역변수의 프로퍼티인 name인 암묵적으로 존재 -> undefined -name => NaN
    • node.js 환경에서 name이라는 프로퍼티가 없기에 ReferenceError 반환

프로퍼티 삭제​

delete person.age

프로퍼티 축약 표현​

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

const obj2 = {x,y};

계산된 프로퍼티​

// ES5
var prefix = 'prop';
var i = 0;
var obj = {};

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

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

const obj2 = {
	[`${prefix}-${++i}`]: i,
	[`${prefix}-${++i}`]: i,
	[`${prefix}-${++i}`]: i
};