Javascript 파헤치기 4번째 - ES6 문법

🔗 템플릿 리터럴

let str = "자바스크립트";
console.log("이것은", str, "입니다.");
// ES6에서는 ``안에 아래와 같이 작성하여 위와 동일한 결과를 얻을 수 있음
console.log(`이것은 ${str} 입니다.`);

---

 

🔗 기본 매개 변수

파라미터 값이 없는 경우 사용할 default 값 설정

const myFunc = (name, age = 24) => {
return `내 이름은 ${name}, 나이는 ${age}살이야.`; 
};

console.log(myFunc1('철수')); // 내 이름은 철수, 나이는 24살이야.

---

 

🔗 화살표 함수

let sum = function (a, b) {
    return a + b;
};

// 아래와 같이 화살표 함수로 표현하여 위와 동일한 결과를 얻을 수 있음
// 한줄인 경우 return 생략 가능
let arrowSum = (a, b) => a + b;

---

 

🔗 클래스 - 상속

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    nextYearAge() {
        return Number(this.age) + 1;
    }
}

class IntroPerson extends Person {
    constructor(name, age, city) {
        super(name, age); // 부모 생성자 호출
        this.city = city;
    }

    introduce() {
        return `저는 ${this.city}에 살고 있는 ${this.name}입니다.`;
    }

    nextYearAge() { // 부모클래스의 함수를 재정의 하는 것 - 오버라이드
        const nextAge = super.nextYearAge();
        return `내년에는 ${nextAge}살이 됩니다.`;
    }
}

let introPerson = new IntroPerson("홍길동", 30, "한양");

console.log(introPerson.introduce());

console.log(introPerson.nextYearAge());

---

 

🔗 import and export

코드를 분리하고 재사용성을 높이는 데 사용

// exportFile.js
export const PI = 3.14;
export function add(a, b) { return a + b; }
export class Calculator { 
	multiply(a, b) { return a * b; }
}

 

위 코드들을 아래와 같이 또 다른 파일에서 불러와 사용 가능함

// main.js
import { PI, add, Calculator } from './exportFile.js';

console.log(PI); // 3.14
console.log(add(2, 3)); // 5
const calc = new Calculator();
console.log(calc.multiply(4, 5)); // 20

---

 

🔗 구조분해할당과 전개연산자

🧩 구조분해할당

비구조화 할당

let [a, b, c] = [10, 20, 30];
console.log(a, b, c); // a: 10, b: 20, c: 30

---

🫧 활용1: 값 교환(swap)

let [n1, n2] = [10, 20];
console.log(n1, n2); // 10 20

[n1, n2] = [n2, n1]; // swap
console.log(n1, n2); // 20 10

 

🫧 활용2: key-value 객체 구조분해할당

let obj = {
    apple: 1000,
    banana: 2000,
};
console.log(obj.apple, obj.banana) // 1000 2000

let { apple, banana } = obj; // 반드시 가져오고자하는 값의 이름과 동일해야함
console.log(apple, banana) // 1000 2000

 

🫧 활용3: 새로운 이름 할당

let { apple:n1, banana:n2 } = obj; // apple: 1000, banana: 2000 할당되어있다고 가정

console.log(n1, n2) // 1000 2000
console.log(apple, banana) // Reference Error: 새로 할당한 변수명을 이용해야함

---

🧩 전개(spread) 연산자

let [x, y, ...etc] = [10, 20, 30, 40, 50];
console.log(x, y, etc); // x: 10, y: 20, etc: [30, 40, 50]

---

🫧 활용1: 전개 연산자를 이용한 객체 생성

let pet = {
    cat: 1000,
    dog: 2000,
    pig: 3000,
};

let ball = {
    baseball: 1000,
    soccer: 2000,
    basketball: 3000,
};

let favorit = { ...pet, ...ball };
console.log(favorite);
// {cat: 1000, dog: 2000, pig: 3000
// ,baseball: 1000, soccer: 2000, basketball: 3000}
// 순서는 달라질수도 있음

// 값 추가하는 법
let favorite2 = {...pet, ...ball, camping: 4000,};
console.log(favorite2)
// {cat: 1000, dog: 2000, pig: 3000, baseball: 1000
// ,soccer: 2000, basketball: 3000, camping: 4000}

 

🫧 활용2: 객체 속성 제외

let pet = {
    cat: 1000,
    dog: 2000,
    pig: 3000,
};

const { cat, ...rest } = pet;
console.log(cat); // 1000
console.log(rest); // {dog: 2000, pig: 3000}

 

🫧 활용3: 함수 인자/파라미터로 전개연산자 사용

const nums = [10, 20, 30];

function sum(x, y, z) {
    return x + y + z;
}

console.log(sum(...nums)); // 자동으로 x: 10, y: 20, z: 30 할당됨

 

🫧 활용4: 기본값 설정할 때 사용

const defaultSetting = { theme: "dark", showSidebar: true };
const userSetting = { showSidebar: false };
const finalSetting = { ...defaultSetting, ...userSetting };

console.log(finalSetting); // { theme: "dark", showSidebar: false };

---

 

🔗 Promise

콜백 함수를 해결하고, 비동기 작업을 처리하기 위해 나타난 문법이다.
추후, 별도의 게시물로 자세하게 다룰 예정

---

 

✈️ 출처

한국경제신문 x 토스뱅크 풀스택 훈련