[TIL]02. ES6 자바스크립트에 추가된 문법

점점 더 발전하는 자바스크립트

자바스크립트는 ES6에 들어서면서 발전하고 현대적인 언어로 업그레이드되었다. 그럼으로써 배워야 할 문법도 많아졌고 새로운 개념도 많이 도입되면서 기존 ES5나 Jquery에 익숙한 사용자들에겐 당황스러운 부분이 많을 것이다.

그중 나도 해당하는데 다행히 강의에서 ES6문법을 자세히 다뤄주어서 정리해보려고 한다.

 

• 구조분해할당
  
  • 객체, 배열의 속성을 분해해서 새로운 변수에 옴겨담거나 사용가능하게 만듦

//1. 배열의 경우
// value1,2에 배열 index 순서대로 할당한다.
const [value1, value2] = [1, "홍길동"];
// value1 = 1, value2 = "홍길동"

const myArray = [1, "홍길동", 3];
const [a, b, c] = myArray;
// a = 1, b = "홍길동", c = 3



2. 객체의 경우

const person = { 
	name : "홍길동",
    age : 20
}

const {name, age} = person;
// name = "홍길동", age = "20"

// name, age라는 person객체내 key값을 사용하지 않고 새로운 값으로 사용할수 있다
const {name : newName, age : newAge} = person;

 

• 단축 속성명
  • 객체의 key, value값이 동일시 생략하여 사용할 수 있다

// 값이 변수에 지정되었다고 가정
const name = "홍길동"
const age = 20

// 기존방법
person = {
	name : name,
    age : age
}

// 단축 속성명 사용
person = { name, age }

 

• 전개구문(speard)
  • 객체, 배열의 내부 속성값을 나열해서 새로운 객체, 배열을 만든다.

// 전개구문 (spead)
// 배열에 사용
const myArray = [1, 2, 3];

// 기존 myArray에 10을 추가한 newArray를 만든다.
const newArray = [...myArray, 10];

// 객체에 사용
// 새로운 속성값을 추가할수도 있다.
const person = { name : "홍길동", age : 20 }

const newPerson = { ...person, gender : "남자" }

• 나머지 매개변수
  • 함수에 나머지 매개변수를 사용하면 지정된 매개변수 외 추가적으로 받을 수 있다

function example(a, b, c, ...args) {

}

https://github.com/iufan1526/TIL/tree/main/WEEK_2