학습 내용
1.Spread
1.1 문법
배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용합니다.
function sum(x, y, z){
return x+y+z;
}
const numbers = [1,2,3];
sum(...numbers) // 6
-
'...' 이 spread 연산자 이다.
-
퍼뜨리다 라는 의미로, 안에 담겨있는 내용을 퍼뜨려서 사용할수 있게 해줌.
-
...numbers : numbers 에 담겨 있는 내용을 퍼뜨려 준다.
곧 ...numbers === 1,2,3 이다.
1.2 활용
1.2.1 배열
let parts = ['shoulders', 'knees'];
let lyrics = ['head', ...parts, 'and', 'toes'];
// ['head', 'shoulders', 'knees', 'and', 'toes']let arr = [1, 2, 3];
let arr2 = [...arr]; // arr.slice() 와 유사
arr2.push(4);
console.log(arr); // [1,2,3]
console.log(arr2); // [1,2,3,4]깊은 복사(deep copy)를 할수 있다.
1.2.2 객체
let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };
let clonedObj = { ...obj1 }; // 복사
let mergedObj = { ...obj1, ...obj2 }; // 중복 key 값 존재- mergedObj 의 경우 중복 된 key 값이 존재하고 뒤에 존재하는 것이 마지막으로 할당되어서 출력된다.
2.Rest 문법
매개변수를 배열의 형태로 받아서 사용할 수 있습니다.
매개변수의 갯수가 정해지지 않았을 때도 사용할수 있습니다.
함수의 인자를 배열 형태로 사용 할수 있게 해줍니다.
const purpleCuteSlime = {
name: '슬라임',
attribute: 'cute',
color: 'purple'
};
const { color, ...rest } = purpleCuteSlime;
console.log(color); // purple
console.log(rest); // {name:'슬라임', attribue:'cute'}function sum(...rest) {
return rest;
}
const result = sum(1, 2, 3, 4, 5, 6);
console.log(result); // [1,2,3,4,5,6]3.활용
javascript_koans 를 활용하여 내용을 익히자.
느낀 점 & 미비한 점
javascript_koans 를 실습하면서 사전에 익혔던 내용들을 되돌아 보는 기회가 되어서 좋았다. 하지만 예외 Case가 발생할 경우 아직도 정리가 덜 된다는걸 느꼇다.
물론 위의 spread, rest 경우 오늘 처음 본것 이기에 더 익숙해져서 사전에 익혔던 내용처럼 미숙하지만 자연스럽게 내용이 정리되도록 하여야 할것 같다.
추가 : 깊은 복사 & 얕은 복사의 내용 꼭 숙지하자.
