Java스크립트(템플릿 리터럴, 구조 분해 할당, 기본 매개변수, Spread & Rest 연산자)

이번 포스팅은 JavaScript의 중요한 개념들인 템플릿 리터럴, 구조 분해 할당, 기본 매개변수, 그리고 Spread & Rest 연산자에 대해 알아보겠습니다. 각 개념을 쉽게 이해할 수 있도록 예제를 통해 설명하겠습니다.

 

1. 템플릿 리터럴 (Template Literals)

템플릿 리터럴은 문자열을 쉽게 작성하고 조작할 수 있도록 도와주는 기능입니다. 백틱(`)을 사용하여 문자열을 감싸고, ${}를 통해 변수를 삽입할 수 있습니다.

예제:
const name = '홍길동';
const age = 25;

// 템플릿 리터럴 사용
const greeting = `안녕하세요, 제 이름은 ${name}이고, 나이는 ${age}세입니다.`;
console.log(greeting); // 결과: 안녕하세요, 제 이름은 홍길동이고, 나이는 25세입니다.

2. 구조 분해 할당 (Destructuring Assignment)

구조 분해 할당은 배열이나 객체의 값을 쉽게 분리하여 변수에 할당할 수 있는 문법입니다. 이를 통해 코드의 가독성을 높일 수 있습니다.

예제:
// 배열 구조 분해
const fruits = ['사과', '바나나', '체리'];
const [firstFruit, secondFruit] = fruits;

console.log(firstFruit); // 결과: 사과
console.log(secondFruit); // 결과: 바나나

// 객체 구조 분해
const person = {
  name: '이순신',
  age: 40
};

const { name, age } = person;
console.log(name); // 결과: 이순신
console.log(age); // 결과: 40

3. 기본 매개변수 (Default Parameters)

기본 매개변수는 함수의 매개변수에 기본 값을 설정할 수 있는 기능입니다. 이를 통해 인자를 전달하지 않았을 때 기본값을 사용할 수 있습니다.

예제:
function greet(name = '손님') {
  return `안녕하세요, ${name}님!`;
}

console.log(greet()); // 결과: 안녕하세요, 손님님!
console.log(greet('김철수')); // 결과: 안녕하세요, 김철수님!

4. Spread & Rest 연산자

Spread 연산자는 배열이나 객체의 요소를 펼치는 데 사용되며, Rest 연산자는 함수의 매개변수로 전달된 여러 값을 배열로 묶는 데 사용됩니다.

예제: Spread 연산자
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// 배열 결합
const combined = [...arr1, ...arr2];
console.log(combined); // 결과: [1, 2, 3, 4, 5, 6]

예제: Rest 연산자
function sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3)); // 결과: 6
console.log(sum(1, 2, 3, 4, 5)); // 결과: 15

 

5.마무리

이상으로 JavaScript의 템플릿 리터럴, 구조 분해 할당, 기본 매개변수, Spread & Rest 연산자에 대해 알아보았습니다. 이 개념들을 잘 이해하고 활용하면, 더 효율적이고 가독성 높은 코드를 작성할 수 있을 것입니다. 

 

템플릿 리터럴, 구조 분해 할당, 기본 매개변수, Spread & Rest 연산자