[ES6강좌] 3강 향상된 객체 리터럴(Object Literal) - 오쌤의 니가스터디

 

 

 

 

 

 

 

 

 

1. 향상된 객체 리터럴(Enhanced Object Literal)

---

- 향상된 객체 리터럴이란 기존 자바스크립트에서 사용되던 객체 정의 방식을 개선한 문법입니다.

- 자주 사용하던 문법을 한층 더 간결하게 작성할 수 있도록 도와줍니다.

 

 

 

 

1) 기존 객체 정의 방식

## 문법

var 객체명 = {
	속성: 값,
    메서드: function(){
    	//메서드 명령
    }
}

 

 

 

## 예시 코드

var person = {
  name: '홍길동',
  age: 20,
  walk: function(){
  	console.log(this.name + '이 걷습니다.');
  }
}

 

 

 

 

 

 

 

 

 

728x90

 

 

 

 

 

 

 

 

 

2) 축약문법

## 속성명과 속성값이 같으면 한번만 작성해도 됨

var test = {
  //javascript: javascript,
  javascript
}

console.log(test);

- 현재 브라우저에서 테스트하면, 에러가 발생됩니다.

- 하지만 Vue.js나 React에서는 유용하게 사용될 것입니다.

 

 

 

 

## 변수명과 속성명이 같으면 값을 작성하지 않아도 됨

var a = "테스트", b = 42, c = {};
var test = {
  a,
  b,
  c
};

console.log(test.a);
console.log(test.b);
console.log(test.c);

- 변수값이 속성값으로 전달되서 잘 호출되는 것을 확인할 수 있습니다. 

- 기존에는 변수명과 key명이 같더라도 반드시 다시 값을 할당해야만 사용가능했습니다. 

- 하지만 향상된 문법으로 변수에만 값을 대입하더라도 가능해졌습니다. 

 

 

 

## 메서드 작성시 function 생략 가능

var test = {
  /*
  javascript: function(){
  	console.log('자바스크립트');
  }
  */
  javascript(){
  	console.log('자바스크립트');
  }
}

test.javascript();

- function을 생략하고 바로 함수로 처리해도 실행되는 것을 확인할 수 있습니다.