javaScript. ES2015 - Object(객체)

 

const sayYeah = () => {
  alert('Yeah'); 
};

// 바뀌기 전 코드
var sayYeah = function() {
  alert('Yeah');
};

1. var -> const, let

2. Arrow Function 

 

💡 위 방식은 함수표현식 이므로 블록 끝에 ;(세미콜론)을 붙인다.

javaScript. 함수선언식 vs. 함수표현식

 

___

 

객체에 해당하는 내용을 살펴보자.

var sayYeah = function() {
  alert('Yeah');
};
var a = 1;
var b = 'Wow';
var object = {
  sayHello: function() {
    alert('hello');
  },
  sayYeah: sayYeah
};
object[a + 3] = 'four';
object['say' + b] = function() {
  alert('Wow');
};

const a = 1;
const b = 'Wow';
const sayYeah = () => {       // 화살표함수 (=>) 이용
  alert('Yeah'); 
};
const object2 = {             // 객체 선언.
  sayHello() {                // sayHello : function() {} 에서 function 생략가능
    alert('hello');           
  },                           
  sayYeah,                   // sayYeah = sayYeah (변수명 = 속성명인 경우 한번만작성)
  [a + 3]: 'four',  // 4: 'four'    // 동적 속성 생성. (속성명에 변수가 들어가도 OK)
  ['say' + b]() {                   // 메서드 - function 생략가능
    alert('Wow');
  }              // sayWow() { alert('Wow') }
};

 

---

<변경 사항>

 

1. 메서드(Method)를 줄여쓸 수 있다.

이전	이름 : function( ) { }	sayYeah : function() { alert('Yeah') },
ES2015	이름( ) { }	sayYeah() { alert('Yeah'); },

- function 부분 생략 가능

❗ 단, 줄여쓴 메서드는 생성자로 쓸 수 없다. (new 를 붙일 수 없다)

 

 

 

 

 

2. 참조하는 변수의 이름과 속성이름이 같은 경우 {이름: 이름} 대신 {이름}과 같이 생략 가능.

// {이름: 이름} 일 경우에
{ data: data, result: result, object: object }

// 생략 가능 - {이름}만 작성
{ data, result, object }

 

 

 

3. 동적 속성 생성

 

속성 이름에 변수의 값이 사용될 때, 자체적으로 계산하지 못했었다.

객체 선언시 바로 추가하지 못하고 계산한 후에 따로 속성을 추가했었다.

 

예> object[a+3]

속성 이름인 a+3에 변수 a가 사용되므로 이전에는 사용하지 못했다.

그래서 객체 선언 블록에서 못하고, 따로 적어줘야 했다.

 

 

 

 

 

---

REFERENCE

https://www.zerocho.com/category/ECMAScript/post/5757feea4bd934472a2ee52c

(ECMAScript) ES2015(ES6) Object(객체)

이 포스팅은 zerocho님의 javascript 강의를 보고 작성한 글입니다.

공부+기록 용으로 작성한 것이며, 자세한 것은 위 포스팅을 참고하세요!