JavaScript - JavaScript의 유용한 기능 (ES6+)

1. JavaScript가 뭘까?
2. JavaScript를 시작하기
3. JavaScript의 기본 문법

4. JavaScript 제어문

5. JavaScript 함수

6. JavaScript에서 객체와 배열은 무엇일까?

7. JavaScript에서 DOM 조작 방법

8. JavaScript의 유용한 기능 feat. ES6+

 

 

JavaScript에서 기본 문법 외에도 개발자에게 유용한 기능을 제공하는데, 이번글에서 알아보자.

---

 

템플릿 리터럴(Template Literals)

 

템플릿 리터럴은 문자들을 작성할 때 더 간결하고 가독성 좋게 만들 수 있는 기능이다.

백틱(`) 기호를 사용하며, 변수와 표현식을 ${} 안에 넣어서 사용할 수 있다.

 

기존 문자열 결합과 템플릿 리터럴 사용할 경우 차이

// 기존 문자열 결합
let name = "Hanker";
let greeting = "Hello, " + name + "!";
console.log(greeting); // "Hello, Hanker!"


// 템플릿 리터럴을 사용하여 결합
let name = "Hanker";
let greeting = `Hello, ${name}!`;
console.log(greeting); // "Hello, Hanker!"

 

멀티라인 문자열

let text = `라인 1번
라인 2번
라인 3번`;
console.log(text);

 

---

삼항 연산자 (Ternary Operator)

 

삼항 연산자는 조건에 따라 다른 값을 반환할 때 유용하게 사용된다.

let age = 20;
let message = age >= 18 ? "성인입니다." : "미성년자입니다.";
console.log(message); // "성인입니다."

위 코드에서 조건 age >= 18 이 true 이면 "성인입니다."를, 그렇지 않으면 "미성년자입니다."를 반환한다.

 

---

 

구조 분해 할당 (Destructuring Assignment)

 

구조 분해 할당은 배열이나 객체의 값을 쉽게 추출하는 기능이다.

 

배열 구조 분해

let colors = ["red", "green", "blue"];
let [firstColor, secondColor] = colors;

console.log(firstColor); // "red"
console.log(secondColor); // "green"

 

객체 구조 분해

let person = { name: "Hanker", age: 32 };
let { name, age } = person;

console.log(name); // "Hanker"
console.log(age); // 32

 

---

기본 매개변수 (Default Parameters)

 

함수를 호출할 때 인자를 전달하지 않아도 기본값을 설정할 수 있다.

 

기존 함수 호출방식 과 기본 매개변수 사용 방식

// 기존 방식
function greet(name) {
    name = name || "Hanker";
    console.log(`Hello, ${name}!`);
}
greet(); // "Hello, Guest!"

// 기본 매개변수 사용 방식
function greet(name = "Hanker") {
    console.log(`Hello, ${name}!`);
}
greet(); // "Hello, Hanker!"
greet("Gildong"); // "Hello, Gildong!"

 

 

---

 

화살표 함수 (Arrow Functions)

 

화살표 함수는 더 간결한 문법으로 함수를 작성할 수 있다.

 

기존 함수 표현식과 화살표 함수 사용 방식

// 기존 함수 표현식
let add = function(a, b) {
    return a + b;
};
console.log(add(2, 3)); // 5

// 화살표 함수 사용
let add = (a, b) => a + b;
console.log(add(2, 3)); // 5

// 화살표 함수에서 매개변수가 하나일 경우 () 생략가능
let square = x => x * x;
console.log(square(4)); // 16

 

---

스프레드 연산자 (Spread Operator)

 

스프레드 연산자(...)는 배열이나 객체의 값을 펼쳐서 사용할 때 유용하다.

 

배열에서 사용

let numbers = [1, 2, 3];
let newNumbers = [...numbers, 4, 5];

console.log(newNumbers); // [1, 2, 3, 4, 5]

 

객체에서 사용

let person = { name: "Hanker", age: 32 };
let updatedPerson = { ...person, city: "Seoul" };

console.log(updatedPerson); // { name: "Hanker", age: 32, city: "Seoul" }

 

---

나머지 매개변수 (Rest Parameters)

 

나머지 매개변수는 함수에 전달된 나머지 인자들을 배열로 처리한다.

function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

 

---

정리

 

JavaScript는 현대 웹 개발에 필수적인 기능을 갖추고 있다.

 

템플릿 리터럴, 삼항연산자, 화살표 함수, 스프레드 연산자 같은 유용한 기능을 잘 활용하면 더욱 깔끔하고 효율적인 코드를 작성할 수 있다.

 

다음글에서는 디버깅하는 방법과 개발 도구를 통해 오류를 찾고 개선하는 방법에 대해서 쓰겠다.

 

끝.