01. Template Literals
🚩 템플릿 리터럴은 변수와 표현식을 문자열 안에 쉽게 삽입할 수 있게 해주는 문법입니다.
1-1. 간단한 문자열 삽입
백틱을 사용하여 문자열을 구성하고, ${expresson}을 통해 변수나 표현식을 삽입합니다.
템플릿 리터럴을 사용안하면 어떤 차이점이 있냐면
let customer = { name: "김씨" };
let item = { name: "커피", price: 4000 };
console.log("감사합니다, " + customer.name + "님. " + item.name + "을(를) " + item.price + "(원)에 구매하셨습니다.");
// 를 템플릿 리터럴을 사용하면?
console.log(`감사합니다, ${customer.name}님. ${item.name}을(를) ${item.price}(원)에 구매하셨습니다.`);
그리고 문자열 작성이 쉬워지는 장점이 있다.
let orderDetails = `고객: ${customer.name}
상품: ${item.name}
가격: $${item.price}`;
02. Destructuring
🚩 객체나 배열의 속성을 보다 쉽게 추출할 수 있게 해주는 문법입니다.
2-1. 객체 Destructuring
다중 속성 추출의 형태는 아래와 같다.
const { name, price } = item;
console.log(name); // 커피
console.log(price); // 4000그렇다면 함수 매개변수에서의 사용에서 중요한 점은?
이 패턴은 리액트 컴포넌트에서 정말 많이 사용한다.
객체 Desturcturing 에서 obj 안의 key를 그대로 사용하여 분해한다는 것이
아주 중요한 개념이다!
순서가 아니니 이 부분은 꼭 기억해야 한다.
function greet({ name, age }) {
console.log(`안녕하세요, 제 이름은 ${name}이고 나이는 ${age}살입니다.`);
}
greet({ name: "민씨", age: 28 });2-2. 배열 Destructuring
배열의 요소를 위치에 따라 변수로 할당한다.
배열보단 객체의 Destructuring에 대해 익숙하게 알아야 한다.
let colors = ["red", "green", "blue"];
let [firstColor, secondColor] = colors;
console.log(firstColor); // red
console.log(secondColor); // green03. Spread Operator
🚩 배열 등의 요소를 개별 요소로 확장할 때 많이 사용한다. (객체 혹은 배열의 bracket을 찢어서 확 펼치는 느낌)
3-1. 객체에서의 사용
객체의 속성을 쉽게 다른 객체로 복사하거나 확장할 때 사용한다.
const originalUser = { name: "김씨", age: 28 };
const updatedUser = { ...originalUser, location: "한국" };
console.log(updatedUser); // { name: "김씨", age: 28, location: "한국" }3-2. 배열에서의 사용
두 배열을 간편하게 합칠 때 많이 사용하는데,
객체 배열 두가지 모두 불변성을 유지해야하는 리엑트에서 많이 사용된다.
const first = [1, 2, 3];
const second = [4, 5, 6];
const combined = [...first, ...second];
console.log(combined); // [1, 2, 3, 4, 5, 6]04. rest operator
🚩 spread operator와 닮아있지만, 사용방법은 매우 다른 rest operator
나머지 연산자(= rest operator) 는 함수의 매개변수 에서 사용되거나,
객체 리터럴 배열 리터럴 에서 남은 부분을 하나의 변수로 그룹화 할 때 사용한다.
예시로 함수에서 여러 인수로 배열로 그룹화하거나, 객체 분해 할당(destructring) 에서
특정 속성을 제외한 나머지 속성들을 새 객체로 그룹화 할 때 사용한다.
객체 리터럴 배열 리터럴 은 단순히 {} [] 를 사용해 객체를
직접 선언하는 방식이다.
4-1. 함수 매개변수
function sum(...numbers) {
return numbers.reduce((acc, current) => acc + current, 0);
}
console.log(sum(1, 2, 3, 4)); // 10
4-2. 객체 분해 할당
const person = {
name: "John",
age: 30,
country: "USA",
occupation: "Developer"
};
const { country, ...rest } = person;
console.log(rest); // { name: "John", age: 30, occupation: "Developer" }
