📝 ES6 신규 문법
spread / rest 문법
✅ spread 문법
- “요소를 펼쳐서 넣어주는 것”
- 배열을 풀어서 인자로 전달하거나
- 배열을 풀어서 각각의 요소로 넣을 때 사용
let arr = ['code', 'states']
let value = [
...arr,
'pre',
...['course', 'student']
]
// ['code', 'states', 'pre', 'course', 'student']function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
sum(...numbers) // 6let arr = [10, 30, 40, 20]
let value = Math.max(arr) // value 값은 NaN
// Math.max는 숫자인 인자들을 비교하여 가장 큰 수를 리턴하는 메서드인데, 여기서는 배열을 전달하여 실행하였기 때문에 NaN
let arr = [10, 30, 40, 20]
let value = Math.max(...arr) // value 값은 40
// spread syntax는 iterable 한 모든 것의 (대표적으로 문자열, 배열) 요소를 "펼쳐"주는 문법을 의미
// arr의 요소를 모두 "펼쳐서" Math.max 메서드에 전달하여 실행시켰습니다. 즉, Math.max(10, 30, 40, 20)과 같음✅ rest 문법
- 파라미터를 배열의 형태로 받아서 사용할 수 있음.
- 파라미터 개수가 가변적일 때 유용
function printMaxNums(...args) {
console.log(args)
}
printMaxNums(10, 30, 40) // (3) [10, 30, 40]
// 실행이 되면 rest parameter args는 모든 남아있는 인자를 할당받습니다.
// 따로 매개변수를 빼놓지 않았으므로 args는 배열의 형태로 모든 인자를 할당받습니다. 그렇기 때문에 답은 [10, 30, 40], A입니다.
// 만일 따로 매개변수를 지정했었다면, 남은 매개변수만 배열의 형태로 rest parameter args에 할당합니다.
function printMaxNums(num1, ...args) {
console.log(args) // [30, 40]
}function sum(...theArgs) {
return theArgs.reduce((previous, current) => {
return previous + current;
});
}
sum(1,2,3) // 질문: 어떤 값을 리턴하나요? 6
sum(1,2,3,4) // 질문: 어떤 값을 리턴하나요? 10✅ 배열에서 사용
- 배열 합치기
let parts = ['shoulders', 'knees'];
let lyrics = ['head', ...parts, 'and', 'toes'];
// lyrics의 값은
// ['head', 'shoulders', 'knees', 'and', 'toes'] let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];
// 참고: spread 문법은 기존 배열을 변경하지 않으므로(immutable), arr1의 값을 바꾸려면 새롭게 할당해야 합니다.
// 질문: arr1의 값은 무엇인가요?
// [0, 1, 2, 3, 4, 5]- 배열 복사
let arr = [1, 2, 3];
let arr2 = [...arr]; // arr.slice() 와 유사
arr2.push(4);
// 참고: spread 문법은 기존 배열을 변경하지 않으므로(immutable), arr2를 수정한다고, arr이 바뀌지 않음
// 질문: arr와 arr2의 값은
// arr [1, 2, 3]
// arr2 [1, 2, 3, 4]✅ 객체에서 사용
let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };
let clonedObj = { ...obj1 };
let mergedObj = { ...obj1, ...obj2 };
// 질문: clonedObj와 mergedObj의 값은 각각 무엇인가요?
// clonedObj {foo: 'bar', x: 42}
// mergedObj {foo: 'baz', x: 42, y: 13}
// obj1과 obj2의 키가 같을 경우, 값이 덮어 씌워집니다. 그렇지 않은 경우, 각각의 키와 값이 모두 그대로 전달됨✅ 함수에서 나머지 파라미터 받아오기
function myFun(a, b, ...manyMoreArgs) {
console.log("a", a);
console.log("b", b);
console.log("manyMoreArgs", manyMoreArgs);
}
myFun("one", "two", "three", "four", "five", "six");
// 질문: 콘솔은 순서대로 어떻게 찍힐까
// a one
// b two
// manyMoreArgs (4) ['three', 'four', 'five', 'six']레퍼런스
- 전개구문 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax
- Rest 파라미터 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters
구조분해할당
- 구조분해할당은 spread 문법을 이용하여 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정을 말함
✅ 분해 후 새 변수에 할당
- 배열
const [a, b, ...rest] = [10, 20, 30, 40, 50];
// 질문: a, b, rest는 각각 어떤 값인가요?
// a 10
// b 20
// rest [30, 40, 50]- 객체
const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
// 질문: a, b, rest는 각각 어떤 값인가요?
// a 10
// b 20
// rest {c: 30, d: 40}- 객체에서 구조 분해 할당을 사용하는 경우, 선언(
const,let,var)과 함께 사용하지 않으면 에러가 발생할 수 있음- 선언없이 할당하는 경우 참고 (구조분해할당 doc) : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
- 함수에서 객체 분해
더 살펴볼 부분들
함수를 정의하는 4가지 방법
- 함수 선언문
- 함수 표현식 : 기명, 무명
- 생성자 함수
- 화살표 함수
- 세부내용 참고
- https://velog.io/@minj9_6/JavaScript-%ED%95%A8%EC%88%98%EC%9D%98-%EC%A0%95%EC%9D%98%EC%9D%98-4%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95-%EC%A4%91-%ED%95%A8%EC%88%98-%EC%84%A0%EC%96%B8%EB%AC%B8%EA%B3%BC-%ED%91%9C%ED%98%84%EC%8B%9D%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C
- https://sdass.tistory.com/6
호이스팅
- 스코프 내부 어디에서든 변수 선언은 최상위에 선언된 것처럼 행동
- 호이스팅은 스코프 단위로 일어난다
- let 과 const 도 호이스팅 되지만 TDZ 의 영향을 받음
- TDZ (Temporal Dead Zone)
https://velog.io/@soshin_dev/JS-JS%EC%9D%98-TDZ%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C
커링(currying)
- 함수 하나가 n개의 인자를 받는 대신 n개의 함수를 만들어 각각 인자를 받게 하는 방법
- 클로저 사용의 예가 된다
느리지만 꾸준하게. 부족하거나 잘못된 부분은 알려주시면 감사하겠습니다.