24.01.02 누네띠조 2일차 - ES6

오늘 오전은 블로그 이전에 시간을 소모하게 되었다. 원래 쓰던 velog에서 글을 쓰고 완료를 누르면 페이지가 넘어가지 않는 에러가 떴기 때문이다. 몇번 그냥 자잘한 에러라고 생각하고 넘어갔는데, 결국 에러 때문에 썼던 글을 날려먹고서야 이전 해야겠다는 생각이 들어 티스토리로 급하게 이동했다.

오늘은 JS 2주차 강의인 ES6에 대해서 배웠는데, 이전에 했던 프로젝트에서 이해가 안 가던 코드의 대부분이 이 부분이었다. 확실히 간결하고 활용성이 좋아 익혀놓으면 사용하기도 쉽고 다른 사람의 코드를 이해하는 데에 큰 도움이 될 것 같았다.

 

1. 구조분해할당(destructuring) : 객체나 배열의 구조를 분해해서 각각의 요소를 각각 할당하는 것.

 1) 배열인경우

let [value1, value2] = [1, "new"]
console.log('1', value1);
console.log('2', value2);
let arr = ["value1", "value2", "value3", "vlaue4"];
let [a, b, c, d=4] = arr;

이렇게 하면 각각의 value에 a, b, c, d가 할당된다. 4는 value4가 없을 때 undefined로 뜨는데, 그 때 대체할 기본값이다.

 2)객체인 경우

let user = {
    name: "nbc",
    age: 30,
};

let { name, age, birthday = "today" } = user;

객체의 구조를 분해해서 각각의 요소를 각각의 변수에 할당해준다. 저기에서 "today"도 역시 기본값이다.

 

 

2. 단축 속성명(property shorthand) : 

const name = "nbc"
const age = "30"

// kew = value면 생략가능!!
const obj = { name,age }
const obj1 = {name: name, age: age}; // 윗 줄과 동일한 것

 

 

3. 전개구문(spread operator) : 원래 구조를 벗어버리고 새로운 구조로 만들어야 할 때 쓴다.

let arr = [1, 2, 3];

let newArr = [...arr, 4]
console.log(arr)
console.log(newArr)

순서대로 [1, 2, 3], [1, 2, 3, 4]가 출력된다. 

 

4. 나머지 매개변수(rest parameter) : "args"를 이용하여 부분을 추출할 수 있게 함.

function exampleFunc (a, b, c, ...args) {
    console.log(a, b, c);
    console.log(args);
}
exampleFunc(1, 2, 3, 4, 5, 6, 7);

 

 

5.템플릿 리터럴(Template literal) = 백틱(`)을 이용한 방법

const testValue = "안녕하세요!"
console.log(`Hello World ${testValue}`);
console.log(`
    Hello
        My name is Javascript!!!!

        Nice to meet you!!
`)

이런식으로 줄바꿈도 반영되어 출력된다. 활용도가 매우 높으니 꼭 익혀둘 것!