Javascript - Object Literal Syntax Extension

 

인프런 자바스크립트 입문 수업을 듣고 중요한 내용을 정리했습니다.
개인 공부 후 자료를 남기기 위한 목적이므로 내용 상에 오류가 있을 수 있습니다.

 

Object Literal Syntax Extension

 

• Object Literal Syntax Extension 이란?

Object Literal Syntax Extension은 오브젝트의 키 값을 동적으로 만드는 기능이다.

<기본 개념>

//Object Literal Syntax Extension을 사용하지 않는 일반적인 오브젝트의 경우

var person = {
	firstName: "John",
	lastName: "Kim"
 };

console.log(person.firstName);

// 결과 : John

//여기서 firstName와 lastName은 오브젝트의 키 값이지만,
//고정된 값으로 정적인 형태이다.

//하지만 Object Literal Syntax Extension의 기능을 통해
//오브젝트의 키 값을 동적으로 사용할 수 있다.



//Object Literal Syntax Extension을 사용하는 경우

var type = "student";

var score = {
	[type]: "John",
	score : 95
 };

console.log(score.student);

// 결과 : John

//이처럼 Object Literal Syntax Extension의 기능을 활용하면,
//오브젝트의 키 값에 변수 type을 넣음으로써 동적인 형태의 키 값을 사용할 수 있다.

Object Literal Syntax Extension은 오브젝트의 키 값을 추가할 경우에도 동일하게 사용된다.

<응용 예시>

//Object Literal Syntax Extension을 사용하지 않고 키 값을 추가하는 경우
        
var type = "student";

var score = {
	[type]: "John",
	score : 95
 };

score.grade = 1;                

console.log(score);

// 결과 : {student: "John", score: 95, grade: 1}

//오브젝트에 새로운 키 값으로 grade를 추가했으며, 고정된 값인 정적인 형태이다.
//score["grade"] =1;의 코드를 통해서도 오브젝트의 키 값을 새롭게 추가할 수 있다.



//Object Literal Syntax Extension을 사용하여 키 값을 추가하는 경우

var type = "student";

var type2 = "grade";

var score = {
	[type]: "John",
	score : 95
 };

score[type2] = 1;

console.log(score);

// 결과 : {student: "John", score: 95, grade: 1}

//오브젝트에 동적인 키 값으로 grade를 새롭게 추가했다.

//이 경우에 오브젝트에 키 값을 추가하는 문법으로 score.grade = 1; 형태가 아닌,
//score["grade"] =1;의 형태를 사용한 것이 중요하다.