오늘의 공부
spread와 rest
spread
spread 문법 (전개구문) 을 사용하면 배열이나 문자열 등 반복 가능한 0개 이상의 요소를 풀어서 인자로 전달하거나, 각각의 요소로 활용할 수 있다. 일반적으로 배열의 요소를 풀어 사용할 때, apply() 메소드를 사용했지만 spread로 대체가능하다. 더불어, new 생성자와 함께 사용할 수 있다.
function sum (x, y, z) { // 매개변수를 3가지 받는 함수 sum
return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6
console.log(sum.apply(null, numbers)); // 6
var dateFields = [2022, 0, 1];
var d = new Date(...dateFields); // Fri Oct 07 2022 00:00:00 GMT+0900 (한국 표준시)더불어 새로운 배열을 얻고자 할 때도 사용할 수 있다. spread 없이 배열을 조작하려면, pop(), push(), concat() 등을 활용했지만 더 간단하게 가능하다.
var threeFour = [3, 4];
var oneToSix = [1, 2, ...threeFour, 5, 6];
// [1, 2, 3, 4, 5, 6]]
// 배열 몇 번째 인덱스라도 넣을 수 있다.
var arr = ['a', 'b', 'c'];
var copy = [...arr]; // copy = ['a', 'b', 'c']
copy.push('d'); // copy = ['a', 'b', 'c', 'd']
cosole.log(arr) // arr = ['a', 'b', 'c'] 변화하지 않음
// 배열을 복사할 수 있다.객체에서도 사용할 수 있다.
let obj1 = {name: 'Hyunwoo', location: 'Incheon'};
let obj2 = {location: 'Seoul', learn: 'JS'};
let clonedObj = { ...obj1 }; // {name: 'Hyunwoo', location: 'Incheon'}
let mergedObj = { ...obj1, ...obj2 }; // {name: 'Hyunwoo', location: 'Seoul', learn: 'JS'};
// 함수의 나머지 파라미터를 받아올 수 있다.
function test(a, b, ...args) {
console.log("a", a); // a one
console.log("b", b); // b two
console.log("args", args); // args (4) ['three', 'four', 'five', 'six']
}
test("one", "two", "three", "four", "five", "six");rest
rest 문법을 통해 가변적으로 매개변수가 변하는 함수에 활용할 수 있다.
function sum(...theArgs) {
return theArgs.reduce((previous, current) => {
return previous + current;
});
} // reduce 메소드를 통해 누산하는 함수
sum(1,2,3) // 6
sum(1,2,3,4) // 10마무리
오늘은 spread와 rest, 구조분해할당에 대해 학습하고 JavaScript Koans라는 코드스테이츠의 페어 과제를 수행했다. Section1까지 학습한 모든 개념들을 총 정리할 수 있었다. 오늘 this 개념에 대해 배웠는데 , 상위 스코프의 객체나 메소드를 사용할 수 있었다. 다만, 표현식이나 선언식으로 선언된 함수에서와 화살표 함수에서의 개념이 조금 달랐다. 스코프 개념을 확실히 이해해야 다음 섹션에서도 애먹지 않을 것 같다.
또, 얕은복사와 깊은 복사에 대해서도 학습해봤다. 개념정리가 이해하기 쉽게 잘 된 블로그가 있어 링크를 달아본다.
진행하던 중에 spread를 통해 배열을 다른 변수에 복사했는데, 내부에 참조 자료형 배열이 또 존재한 문제가 있었다. 내 지식으론 다른 변수에 할당하여 복사하면 그 내부를 수정하여도 원본엔 변화가 없었어야 한다.
하지만 원본에도 수정된 값이 똑같이 변경됐다. 얕은 복사의 개념을 몰랐기 때문에 일어난 일이었다.
그 외에도 지금까지 학습한 여러 자료형, 함수, 선언 등등 다시 되짚어 공부할 수 있었다. 중간에 진행하면서 잘 모르는 개념이 너무 많았다. (this 또는 Iterable 등등) 그래도 설명을 차분히 해주시고, 같이 레퍼런스도 찾아보면서 학습해서 공부해야 할 부분을 명확히 한 것 같다. symbol 자료형이나 Iterable, 화살표 함수의 특성 등은 이번 주말을 활용해서 보완할 필요가 있겠다.
