728x90
반응형
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을 생략하고 바로 함수로 처리해도 실행되는 것을 확인할 수 있습니다.
728x90
반응형
'웹언어 > 자바스크립트 - ES6' 카테고리의 다른 글
[ES6강좌] 6강 Import & Export 모듈화 - 오쌤의 니가스터디 (0) | 2021.03.01 |
---|---|
[ES6강좌] 5강 비구조화 할당(destructuring assignment) - 오쌤의 니가스터디 (2) | 2021.03.01 |
[ES6강좌] 4강 Class 문법추가 - 오쌤의 니가스터디 (0) | 2021.03.01 |
[ES6강좌] 2강 화살표함수(Arrow Function) - 오쌤의 니가스터디 (0) | 2021.02.27 |
[ES6강좌] 1강 변수키워드 const & let - 오쌤의 니가스터디 (2) | 2021.02.26 |