Template Literals, Destructuring, Seperate Operator

■  Template Literals

변수와 표현식을 문자열 안에 쉽게 삽입할 수 있게 해주는 문법

백틱(`) 으로 구성할 문자열을 감싸주고 변수나 표현식은 ${ } 으로 감싸서 입력한다.

(예시)

let customer = { name: "하영" };
let item = { name: "아메리카노", price: 4000 };
console.log(`감사합니다, ${customer.name}님. ${item.name} 을(를) ${item.price}(원)에 구매하셨습니다.`);
// 출력: 감사합니다, 하영님. 아메리카노 을(를) 4000(원)에 구매하셨습니다.

 

 

■  Destructuring (구조 분해 할당)

객체나 배열의 속성을 쉽게 추출할 수 있게 해주는 문법

 

☛ 객체 Destructuring

객체 안의 key 를 그대로 사용해서 분해함! 순서는 상관 X

const { name, price } = item; 
console.log(name); // 커피 
console.log(price); // 4000

// 중첩 객체 디스트럭처링, 출력하기
const movie = {
  title: "Inception",
  director: "Christopher Nolan",
  release: {
    year: 2010,
    month: "July"
  }
};

const { title, release: { year } } = movie;
console.log(title); // Inception
console.log(year);  // 2010

function confirmReservation(user) {
        // 객체의 키를 바꿔줄 떄는 ':' 으로 바꿔줌!!
        const {name, roomType, date: firstDate} = user; 
               // userInfo가 user로 들어오므로 = user 해줘야 함!
        
        return `${name} 고객님의 ${roomType}룸 입실날짜는 ${firstDate} 입니다.`
}
const userInfo = {
  name: "James",
  roomType: "Deluxe",
  date: "2023-05-30"
}
const result = confirmReservation(userInfo);
console.log(result); // 출력 결과: 'James 고객님의 Deluxe룸 입실날짜는 2023-05-30 입니다.'

 

☛ 배열 Destructuring

배열의 요소를 index(순서)에 따라 변수로 할당!

const numbers = [10, 20, 30, 40, 50];
// 10, 30을 가져오기 위해서 ',' 로 index를 표시하고 2번째 index 가져오기 
const [first, , third] = numbers;
console.log(first); // 10
console.log(third); // 30

 

 

■  spread operator (...)

기존 배열이나 객체의 전체, 일부를 다른 배열이나 객체로 빠르게 복사할 수 있음

* 기존에 생성되어 변수에 할당되어 있는 배열, 객체를 새로운 변수에 할당하게 되면 새로운 변수는 기존 객체, 배열을 참조한다

  → 새로운 변수의 객체, 배열을 변경 할 시 기존 변수의 객체, 배열도 같이 변경된다..!

  ➜  참조가 아닌 복사를 하기 위해 spread Operator(...) 를 활용하면 간편하게 새로운 배열을 복사할 수 있다!

// 두 객체를 병합하여 새 객체 생성하기
const obj1 = { name: "빵빵이", age: 28 };
const obj2 = { name: "옥지", email: "okgee@gmail.com" };

const mergedObj = { ...obj1, ...obj2 }; // 펼쳐진 객체 obj1 뒤에 ',' 를 붙여서 쉽게 병합
console.log(mergedObj); // { name: "옥지", age: 28, email: "okgee@gmail.com" }
        	       // 동일한 키 'name' 이 존재할 경우 뒤에오는 obj2 값이 우선시 됨!!
mergedObj.name = "하영";
console.log(mergedObj); // { name: "하영", age: 28, email: "okgee@gmail.com" }
 			// 객체를 펼쳐서 새로운 객체로 생성했으므로 값을 변경해도 기존 객체 값 변동X! 
console.log(obj1);      // { name: "빵빵이", age: 28 }
console.log(obj2);      // { name: "옥지", email: "okgee@gmail.com" }

 

 

■  rest operator (...)

함수의 매개변수, 객체/배열 리터럴에서 남은 부분을 하나의 변수로 그룹화 할 때 사용됨

함수 - 여러 인수를 배열로 그룹화

객체분해할당 - 특정 속성을 제외한 나머지 속성들을 새 객체로 그룹화

// 함수 매개변수에서 사용
function sum(...numbers) {
    return numbers.reduce((acc, current) => acc + current, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

// 객체 분해 할당
const person = {
    name: "John",
    age: 30,
    country: "USA",
    occupation: "Developer"
};
const { country, ...rest } = person;
console.log(rest); // { name: "John", age: 30, occupation: "Developer" }
// country 를 제외한 나머지 값을 쉽게 가져올 수 있음!