[JavaScript] ES6 (2015) 정말 유용하게 쓰이는 문법!

Javascript JS ECMAScript 6 ES6(2015)

React, Angular, Vue과 같은 유명한 라이브리러들도 ES6 이상의 문법을 지향하고, 백엔드에서 NodeJS로 개발할때도 많이 쓰이는 문법이니 배워 두시면 좋을 것 같습니다.

 

1. Shorthand property names ( 약식 속성 네임 )

/* ES6(2015) Shorthand property names 이 문법을 사용하면 개체의 속성과 동일한 이름의 변수가 있을 때마다 개체를 구성할 때 속성 이름을 생략할 수 있습니다. */ const title = 'Shorthand Property names' const job = 'dev'; // 이전 방식 const oldSet = {   title: title,   job: job, } // 신규 방식 (Shorthand Property names) const newSet = {   title,   job, }

 

2. Shorthand method names ( 약식 메소드 네임 )

/* ES6(2015) Shorthand Method Names ES6의 Shorthand Method Names를 사용하면 function키워드를 완전히 생략할 수 있습니다 . */ // 이전 방식 function formatMessage (name, id, avatar) {   return {     name,     id,     avatar,     timestamp: Date.now(),     save: function () {       // save message     }   } } // 신규 방식 (Shorthand Property names) function formatMessage (name, id, avatar) {   return {     name,     id,     avatar,     timestamp: Date.now(),     save () {       //save message     }   } }

 

3. Destructuring assignment ( 구조 해체 할당 )

/* ES6(2015) Destructuring assignment 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 최신 문법입니다. */ // 1. // 이름과 성을 요소로 가진 배열 let arr = ["Bora", "Lee"] // 구조 분해 할당을 이용해 firstName = arr[0], surname = arr[1] 을 두 변수에 할당하였습니다. let [firstName, surname] = arr; console.log(firstName); // Bora console.log(surname);  // Lee // 2. // 쉼표를 사용해서 요소를 무시 할 수도 있습니다. // 두 번째 요소는 필요하지 않음 let [firstArr, , thirdArr] = ["Julius", "Caesar", "Consul", "of the Roman Republic"]; console.log( thirdArr ); // Consul // 3. // 변수 교차 교환 // 임시 배열을 만들어 두 변수를 담는 행위를 생략 할 수 있습니다. let guest = "Jane"; let admin = "Pete"; // 변수 guest엔 Pete, 변수 admin엔 Jane이 저장되도록 값을 교환함 [guest, admin] = [admin, guest];