template literals

변수와 표현식을 문자열 안에 쉽게 삽입할 수 있게 해주는 문법
백틱(`)을 사용하여 문자열을 구성하고, ${expression}을 통해
변수나 표현식을 삽입

문자열 삽입

//template literals를 사용하지 않은 경우
let customer = { name: "John" };
let item = { name: "커피", price: 4000 };
console.log("감사합니다, " + customer.name + "님. " + item.name + "을(를) " + item.price + "(원)에 구매하셨습니다.");
// 출력: 감사합니다, John님. 커피을(를) 4000(원)에 구매하셨습니다.

//template literals를 사용한 경우
console.log(`감사합니다, ${customer.name}님. ${item.name}을(를) ${item.price}(원)에 구매하셨습니다.`);
// 출력: 감사합니다, John님. 커피을(를) 4000(원)에 구매하셨습니다.

여러줄의 문자열 삽입

//template literals를 사용하지 않은 경우
let customer = { name: "John" };
let item = { name: "커피", price: 4000 };

let orderDetails = "고객: " + customer.name + "\n" +
                   "상품: " + item.name + "\n" +
                   "가격: $" + item.price;
console.log(orderDetails);
// 출력:
// 고객: John
// 상품: 커피
// 가격: 4000


//template literals를 사용한 경우
//줄 바꿈도 따로  \n 써주지 않아도 인식함.
let orderDetails = `고객: ${customer.name}
상품: ${item.name}
가격: $${item.price}`;
console.log(orderDetails);
// 출력:
// 고객: John
// 상품: 커피
// 가격: 4000

destructuring(구조분해할당)

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

객체 Destructuring

다중 속성 추출

const item = {
  name: "커피",
  price: "4000",
}

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

함수 매개변수에서의 사용

객체 Destructuring에서는 obj안의 ‘key’를 그대로 사용하여 분해함
객체안의 순서가아닌 "키의 이름"이 중요!

function greet({ age, name }) 
  console.log(`안녕하세요, 제 이름은 ${name}이고 나이는 ${age}살입니다.`);
}
const person = {
  name: "John",
  age: 28,
}//구조분해 할당시 객체안의 순서 중요하지않음.
greet(person);
//안녕하세요, 제 이름은 John이고 나이는 28살입니다.

배열 Destructuring

배열의 요소를 "위치에 따라" 변수로 할당

let colors = ["red", "green", "blue"];
let [firstColor, secondColor] = colors;
console.log(firstColor);  // red
console.log(secondColor); // green


let [, , thirdColor] = colors;
console.log(thirdColor) //blue

연습문제

문제 1

다음 자바스크립트 객체에서 name과 age를 디스트럭처링을 사용하여
추출하고 출력하는 코드를 작성하세요.

const person = {
  name: "르탄이",
  age: 25,
  job: "개발자"
};

문제 1 풀이

const person = {
  name: "르탄이",
  age: 25,
  job: "개발자"
};

let {name, age} = person;
console.log(`이름은 ${name} , 나이는${age} 입니다`);

문제 2

다음 자바스크립트 객체에서 title과 year를 디스트럭처링을 사용하여
추출하고 출력하는 코드를 작성하세요.

const movie = {
  title: "Inception",
  director: "Christopher Nolan",
  release: {
    year: 2010,
    month: "July"
  }
};

문제 2 풀이

const movie = {
  title: "Inception",
  director: "Christopher Nolan",
  release: {
    year: 2010,
    month: "July"
  }
};

let {title, release:{year}} = movie; //중첩구조분해할당
console.log(`영화 ${title}는 ${year}도에 출시 되었습니다`);

문제 3

다음 자바스크립트 배열에서 첫 번째와 세 번째 요소를 디스트럭처링을 사용하여
추출하여 first, third 변수에 담아 출력하는 코드를 작성하세요.

const numbers = [10, 20, 30, 40, 50];

문제 3 풀이

const numbers = [10, 20, 30, 40, 50];

let [first, ,third] = numbers;
console.log(`첫번째 숫자 : ${first} 두번째 숫자 : ${third}`);

문제 4

호텔의 예약 확인 시스템의 함수라고 가정합니다.
아래 결과와 같이 출력되도록 함수를 완성해 보세요

function confirmReservation(user) {
        // 여기에 user 객체를 구조 분해 할당 하세요.
        
        return `${name} 고객님의 ${roomType}룸 입실날짜는 ${firstDate} 입니다.`
}

const userInfo = {
  name: "James",
  roomType: "Deluxe",
  date: "2023-05-30"
}
const result = confirmReservation(userInfo);
console.log(result);

문제 4 풀이

function confirmReservation(user) {
        let {name, roomType, date} = user;
        let firstDate = date
        return `${name} 고객님의 ${roomType}룸 입실날짜는 ${firstDate} 입니다.`
}//이것보다는

function confirmReservation(user) {
        let {name, roomType, date:firstDate} = user;
        return `${name} 고객님의 ${roomType}룸 입실날짜는 ${firstDate} 입니다.`
}//이런식으로 
//객체의 속성을 변수에 할당할때 그변수의 이름을 객체의 속성명과 다르게 지정할수도 있음 
//객체 내의 속성을 추출하면서 동시에 새로운 이름으로 변수를 선언하고 할당.

spread operators

배열이나 객체의 모든 요소/속성을 개별적으로 분리하여 사용할 수 있음 (...)

객체에서의 사용

객체의 속성을 쉽게 다른 객체로 복사하거나 확장할 때 사용

const original ={
  name: "John",
  age: 28,
}
const update = {...original}; //참조하는 주소값을 바꿔줌. 그래서 각각 독립적인 객채
update.name = "Mike";

console.log(original,update);//{name: 'John', age: 28} {name: 'Mike', age: 28}

배열에서의 사용

두 배열을 간편하게 합칠 때

const first = [1, 2, 3];
const second = [4, 5, 6];
const combined = [...first, ...second];
console.log(combined);  // [1, 2, 3, 4, 5, 6]

연습문제

문제 1

• 다음 두 배열 array1과 array2가 주어졌을 때,
  두 배열을 합친 새 배열 combinedArray를 스프레드 연산자를 사용하여 만들고,
  결과를 출력하는 코드를 작성하세요.
• 또한, array1을 스프레드 연산자를 사용하여 복제한 후
  원본 배열 array1에 변화를 주어 복제된 배열이
  영향을 받지 않는지 검증하는 코드도 작성하세요.

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

문제1 풀이

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const combinedArray = [...array1,...array2];
console.log(combinedArray); //1,2,3,4,5,6

const copyArray1 = [...array1];
array1.push(4);
console.log(array1); //1,2,3
console.log(copyArray1); //1,2,3,4

문제 2

다음 두 객체 obj1과 obj2가 주어졌을 때, 두 객체의 속성을 스프레드 연산자를
사용하여 병합한 새 객체 mergedObj를 생성하고 결과를 출력하세요.

단, 같은 이름의 키가 존재할 경우 obj2의 값이 우선하여 반영되어야 합니다.
또한, mergedObj에서 name 속성의 값을 '원장님'으로 변경 후,
원본 객체 obj1과 obj2가 변경되지 않는 것을 확인하세요.

const obj1 = { name: "르탄이", age: 25 };
const obj2 = { name: "르순이", email: "rsoony@sparta.com" };

문제 2 풀이

const obj1 = { name: "르탄이", age: 25 };
const obj2 = { name: "르순이", email: "rsoony@sparta.com" };

const mergedObj = {...obj1,...obj2}; //{name: '르순이', age: 25, email: 'rsoony@sparta.com'}
console.log(mergedObj);
mergedObj.name = "원장님"; 
console.log(mergedObj); //{name: '원장님', age: 25, email: 'rsoony@sparta.com'}
console.log(obj1); //{name: '르탄이', age: 25}
console.log(obj2); //{name: '르순이', email: 'rsoony@sparta.com'}

rest operator(나머지 연산자)

함수의 매개변수에서 또는 배열과 객체 리터럴에서 복수의 요소들을
하나의 배열이나 객체로 묶는데 사용 (...)

함수 매개변수

function sum(...numbers) {
    console.log(...numbers) //1,2,3,4
    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 { occupation, ...rest } = person; //같이 묶을 값을 앞으로 따로 빼주고 
//나머지를 묶음
console.log(rest); // { name: "John", age: 30, country: "USA"" }

문제

person 객체에서 password를 제외한 나머지 요소를 sampleObj
변수에 담아 분리해보세요.

문제풀이

const person = { name: 'Young', age: 35, job: "developer", password: "1234" }

const {password, ...sampleObj} = person

console.log(sampleObj) // => { name: 'Young', age: 35, job: "developer" }