[ES6] 3. Object Literal

윤재열·2023년 3월 15일
0

ES6

목록 보기
3/6

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

  • 향상된 객체 리터럴이란 기존의 자바 스크립트에서 사용되는 객체 정의 방식을 개선한 문법입니다.
  • 자주 사용하던 문법을 한층 더 간결하게 작성할 수 있도록 도와줍니다.

1. 기존 객체 정의 방식

문법

const 객체명 = {
  속상 :,
  메서드 : function(){
    // 메서드 명령
  }
}

예시 코드

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

2. 축약문법

속성명과 속성값이 같으면 한번만 작성가능

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

console.log(test);
  • 위의 문법은 크롬, 사파리 같은 브라우저에서 테스트하면 에러가 발생합니다.
  • 하지만 Vue.js 또는 React 에서는 유용하게 사용됩니다.

변수명과 속성명이 같으면 값을 작성 불필요

const a = '테스트', b =42, c ={};

const test = {
  a,
  b,
  c,
};

console.log(test.a);
console.log(test.b);
console.log(test.c);
  • 변수값이 속성값으로 전달되서 잘 호출되는 것을 확인할 수 있습니다.
  • 기존에는 변수명과 key명이 같더라도 반드시 다시 값을 할당해야만 사용이 가능했습니다.
  • 하지만 향상된 문법으로 변수에만 값을 대입하더라도 가능해졌습니다.

메서드 작성시 function 생량 가능

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

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

profile
블로그 이전합니다! https://jyyoun1022.tistory.com/

0개의 댓글