SEB/FE - 220513

애리·2022년 5월 13일

TIL 코드스테이츠

Section 1

목록 보기

11/14

📌 JavaScript 핵심 개념과 주요 문법 - 2

ES6 주요 문법

1. Spread 문법

주요 배열을 풀어서 인자로 전달하거나, 배열을 풀어 각각의 요소로 넣을 때 사용된다.

function sum(a, b, c) {
    return a + b + c;
}
const number = [4, 5, 6];
console.log(sum(...number)); //...number을 통해 함수 호출 -> 6
console.log(sum.apply(nu11, number)); // 6

1-1. 배열 합치기

... 은 배열 리터럴의 어디에서든 사용될 수 있으며 여러 번 사용이 가능하다.

var = parts = ['shoulders', 'knees'];
var = lyrics = ['head', ...parts, 'and', 'toes'];
// -> ['head', 'shoulders', 'knees', 'and', 'toes']

1-2. 배열 복사

let arr1 = [1, 2, 3];
let arr2 = [...arr1]; //arr1.slice()와 유사
arr2.push(4);
console.log(arr1); // [1, 2, 3] -> arr1는 영향을 받지 않음
console.log(arr2); // [1, 2, 3, 4]

1-3. 객체에서 사용

var obj1 = {foo: 'bar', x: 42};
var obj2 = {foo: 'baz', y: 13};

var cloneObj = {...obj1};
console.log(cloneObj); // { foo: 'bar', x: 42 }

var mergedObj = {...obj1, ...obj2};
console.log(mergedObj); // { foo: 'baz', x: 42, y: 13 }
//-> object.assign()과 유사하지만 대체X

2. rest 문법

함수가 정해지지 않은 수의 매개변수를 배열로 받을 수 있다.

함수의 마지막 매개변수 앞에 ...를 붙이면 남은 매개변수를 배열에 넣도록 지정한다.

function myFun(a, b, ...manyMoreArgs) {
   console.log("a", a);    //a one
   console.log("b", b);    //b two
   console.log("manyMoreArgs", manyMoreArgs);
   //manyMoreArgs [ 'three', 'four', 'five', 'six' ]
}
myFun("one", "two", "three", "four", "five", "six");

나머지 매개변수는 배열이기 때문에 배열에서 사용되는 메소드를 적용할 수 있다.

3. 구조 분해 할당

(spread 문법을 통해) 배열이나 객체의 속성을 해체하여 그 값을 각각의 변수에 새로 할당하는 과정

3-1. 분해 후 새 변수에 할당

var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(...rest) // [30, 40, 50]

마무리 🤔

오늘은 자바스크립트 ES6 문법 중 spread와 rest에 대해 공부했다. 그동안 배웠던 배열과 객체의 내용도 다시 복습해보면서 새로운 문법에 대해 알게되었다. 그리고 오늘은 가장 큰 수확은 줌 세션에서의 클로저 정의였다! 클로저는 외부 변수의 값을 내부 함수에서 사용한 것 이었다. 즉, 내부 함수에서 외부 함수에서 선언된 변수를 사용가능 하다면 클로저를 사용한다고 볼 수 있는 것이다. 이렇게 약간은 복잡한 클로저는 왜 사용할까라는 의문을 가지게 되었다. 크루님의 답변을 통해 내가 이해한 바로는 클로저를 사용해 내부 함수에서만 접근을 할 수 있도록 해 다른 모든 곳에서 값이 의도치 않게 변경되는 것을 막기 위해 사용된다고 이해했다. 이는 캡슐화 나 정보의 은닉에 관련이 있다고도 말씀해주셨는데 주말에는 해당 내용에 대해 복습하며 한 번 찾아봐야겠다.