spread 연산자 다루는 거 같고
Rest는 API
Restful? 오늘은 오전에 1시간 30분 정도만 학습시간이고
나머지는 koans(한글 화두)를 푼다는데
프로그래밍을 페어랑
기본적인 문제를 심도있게 다루어 봐라라는 의미로 다가온다.
Achievement Goals
- Spread/Rest 문법, 구조 분해 할당을 사용할 수 있다.
Spread/Rest 문법
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
sum(...numbers) // 6
배열을 풀어서 인자로 전달하거나(배열)
배열을 풀어서 각각의 요소로 넣을 때(객체) 사용
Rest 문법
function sum(...theArgs) {
return theArgs.reduce((previous, current) => {
return previous + current;
});
}
sum(1,2,3) // 6
sum(1,2,3,4) // 10
매개변수를 배열의 형태로 받아서 사용할 수 있다. 변수의 개수가 가변적일 때 유용
Spread 문법을 배열에서 사용하기
1. 배열 합치기
let parts = ['shoulders', 'knees'];
let lyrics = ['head', ...parts, 'and', 'toes'];
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];
spread 문법은 기존 배열을 변경시키지 않으므로(immutable) arr1에 새롭게 할당해야 한다.
array.concat대신 사용가능/immutable한것도 동일
2. 객체에서 사용하기
let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };
let clonedObj = { ...obj1 };
let mergedObj = { ...obj1, ...obj2 };//{foo: "baz", x: 42, y: 13}
3. 함수에서 나머지 파라미터 가져오기
function myFun(a, b, ...manyMoreArgs) {
console.log("a", a);
console.log("b", b);
console.log("manyMoreArgs", manyMoreArgs);
}
myFun("one", "two", "three", "four", "five", "six");
MDN으로 좀더 공부 필요한 영역 manyMoreArgs
구조 분해 (Destructing)
구조 분해 할당은 Spread 문법을 이용하여 값을 해체한 후,
개별 값을 변수에 새로 할당하는 과정을 말한다.
배열
const [a, b, ...rest] = [10, 20, 30, 40, 50];
객체
const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
// 질문: a, b, rest는 각각 어떤 값인가요?
- 객체에서 구조 분해 할당을 사용하는 경우, 선언(const, let, var)과 함께 사용하지 않으면 에러가 발생할 수 있다.
유용한 구조분해 함수 예제
function whois({displayName: displayName, fullName: {firstName: name}}){
console.log(displayName + " is " + name);
}
let user = {
id: 42,
displayName: "jdoe",
fullName: {
firstName: "John",
lastName: "Doe"
}
};
whois(user) // jdoe is John
쉽게 쉽게 넘어가자 하다가 모르는 거 나오면 다시 보면 된다.
'개발인생다반사 > TIL(Today i learned)' 카테고리의 다른 글
TIL 210809 - 이벤트 객체(해도해도 끝이 없구먼!) (0) | 2021.08.09 |
---|---|
TIL 210806- DOM, 유효성 검사 (0) | 2021.08.06 |
TIL 210804 - 자료형, 스코프, 클로저(보지 마시오. 머리가.. (0) | 2021.08.04 |
TIL 210803 - [CSS] 레이아웃, selector (불친절에 욕이 나오는...) (0) | 2021.08.03 |
TIL 210802 - 객체 코플릿으로 하루를 만땅으로 장식하다. (0) | 2021.08.02 |