1. spread/rest 문법
1-1. spread 문법
- 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
sum(...numbers)
1-2. rest 문법
function sum(...theArgs) {
return theArgs.reduce((previous, current) => {
return previous + current;
});
}
sum(1,2,3)
sum(1,2,3,4)
1-3. 배열에서 사용하기
1. 배열 합치기
let parts = ['shoulders', 'knees'];
let lyrics = ['head', ...parts, 'and', 'toes'];
console.log(lyrics)
----
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];
2. 배열 복사
let arr = [1, 2, 3];
let arr2 = [...arr];
arr2.push(4);
console.log(arr2);
1-4. 객체에서 사용하기
et obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };
let clonedObj = { ...obj1 };
let mergedObj = { ...obj1, ...obj2 };
1-5. 함수에서 나머지 파라미터 받아오기
function myFun(a, b, ...manyMoreArgs) {
console.log("a", a);
console.log("b", b);
console.log("manyMoreArgs", manyMoreArgs);
}
myFun("one", "two", "three", "four", "five", "six");
2. 구조 분해(destructing)
구조 분해 할당(destructing)
2-1. 분해 후 새 변수에 할당
1. 배열
const [a, b, ...rest] = [10, 20, 30, 40, 50];
console.log ([a]);
console.log ([b]);
console.log ([...rest]);
2. 객체
const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
console.log ({a});
console.log ({b});
console.log ({...rest});
3. 화살표 함수(arrow function)
표현식 함수 보러가기
- ES6가 등장하면서 함수를 정의하는 방법이 하나 더 등장.
- 함수표현식으로 함수를 정의할 때 function 키워드 대신 화살표(=>)를 사용.
const multiply = (x, y) => {
return x * y;
}
3-1. 매개변수가 한 개일 때, 소괄호(()
)를 생략할 수 있다.
const square = x => { return x * x }
const square = ( x ) => { return x * x }
const greeting = () => { return 'hello world' }
3-2. 함수 코드 블록 내부가 하나의 문으로 구성되어 있다면 중괄호({}
)를 생략할 수 있다. 이때 코드 블록 내부의 문이 값으로 평가될 수 있으면 return
키워드를 생략할 수 있다.
const squre = x => x * x
const square = x => { return x * x }
const square = function (x) {
return x * x
}