[JS] ES6 문법 8가지 예제로 살펴보기

https://www.w3schools.com/js/js_es6.asp

https://developer.mozilla.org/ko/docs/Web/JavaScript

JavaScript | MDN

 

 

💡 개요

ES : "ECMAScript"의 약어이며, JavaScript의 표준 스펙을 정의하는 규격을 말한다.
6 : 2015년에 발표된 6번째 주요 버전이라는 의미이다.

• ES6(ECMAScript 2015)은 코드의 가독성과 효율성을 높이기 위한 다양한 새로운 문법과 기능을 도입하였으며, 현재 ECMAScript 표준의 최신 버전입니다.
• JavaScript ES6 문법을 배우는 것은 React를 배우기 위한 중요한 기초입니다.

 

 

1️⃣ 블록 스코프 변수 let과 const

ES6에서 추가된 `let`과 `const`는 블록 스코프 변수를 선언할 때 사용하며, 블록(`{}`) 내에서만 유효합니다.

✔️`let` : 변수를 선언할 때 사용하며, 중복 선언이 불가능합니다.

// let 변수는 같은 블록 내에서 중복이 불가능하다.✨
let y = 1;
// let y = 100; // 에러: 'y'는 이미 선언된 변수이므로 재선언할 수 없습니다.

// let 변수의 유효 범위는 {} 블록이다.✨
let z = 10;
if (true) {
    let z = 100; // 블록 내에서 새로운 z 변수를 선언
    console.log(z); // 100 (블록 내의 z 값을 출력)
}
console.log(z); // 10 (블록 외부의 z 값을 출력)

✔️`const` : 상수를 선언할 때 사용하며, 값 재할당이 불가능하지만 객체나 배열의 내부 값은 변경할 수 있습니다.

const GENDER = "남자";
// var GENDER = "여자"; // 에러: 'GENDER'는 이미 선언된 상수이므로 재선언할 수 없습니다.
// GENDER = "여자"; // 에러: 상수의 재할당은 불가능합니다.✨

const arr = ["홍길동", "이순신", "홍길자"];
// arr = ["김철수"]; // 에러: 'arr'는 상수이므로 재할당할 수 없습니다.
arr[0] = "김철수"; // 허용: 배열의 내부 요소는 변경할 수 있습니다.✨
arr.push("박영희"); // 허용: 배열에 요소를 추가하는 것은 가능합니다.
console.log(arr); // ["김철수", "이순신", "홍길자", "박영희"]

// 객체에서의 수정
const P1 = {"name" : "홍길동"};

// P1 = {"name" : "이순신"}; // 에러: 상수 'P1'의 재할당은 불가능합니다.
P1.name = "이순신"; // 허용: 객체의 내부 값은 변경할 수 있습니다.
P1.age = 20; // 허용: 객체에 새로운 프로퍼티를 추가할 수 있습니다.

console.log(P1); // { name: '이순신', age: 20 }

 

 

2️⃣ 화살표 함수 (Arrow Function)

화살표 함수는 기본적으로 익명함수를 대체하며, 가독성이 향상됩니다.

✔️변수에 할당된 화살표 함수는 호이스팅 되지 않습니다. 즉, 화살표 함수는 선언된 위치보다 위에서 참조할 수 없습니다. 이는 변수의 초기화가 이루어지기 전에는 사용할 수 없다는 것을 의미합니다.

/* 기존 익명 함수 */
a(); // 호출 가능: var로 선언된 a는 호이스팅되므로 호출 가능
var a = function() {
    console.log('a 실행'); // 'a 실행'을 출력하는 함수
}

/* 화살표 함수✨ */
// b(); // 호출 불가: let으로 선언된 b는 호이스팅되지 않아서 호출할 수 없음
let b = () => { 
    console.log('b 실행'); // 'b 실행'을 출력하는 화살표 함수
}
b(); // 호출 가능: 선언 이후에 호출하면 정상적으로 실행됨

✔️문법1 : 코드가 한 줄일 경우 `{}`를 생략할 수 있으며, 이때 기본값으로 `undefined`를 반환하고, `{}` 없이 작성하면 해당 값이 자동으로 반환됩니다.

let a1 = (a) => console.log(a); // 출력 함수✨
console.log(a1(1)); // 1을 출력한 후, undefined를 반환

let a2 = (a, b) => a + b; // 두 수를 더하는 화살표 함수
console.log(a2(1, 2)); // 3을 출력

let a3 = (a, b = 20) => console.log(a, b); // 기본값이 있는 함수
a3(10); // 10과 20을 출력

✔️문법2 : 매개변수가 1개라면, 매개변수 자리의 `()`를 생략할 수 있습니다.

let a1 = a => console.log(a); // 매개변수가 1개이므로 () 생략✨
console.log(a1(1));

✔️문법3 : 객체를 반환 할때는 `()`로 묶어야 합니다. (함수 블록과 구분하기 위함)

let a5 = a => ({"name": a}); // 인수 a를 사용하여 객체를 반환하는 화살표 함수✨
console.log(a5("홍")); // { name: '홍' } 출력

---

화살표 함수는 배열 메서드(forEach, filter, map 등)에서 콜백 함수로 유용하게 사용됩니다. 이 메서드들은 배열의 각 요소를 순회하며 함수를 호출합니다.

forEach - 반복문

`forEach` 메서드 : 배열의 각 요소를 반복하며 주어진 콜백 함수를 실행합니다.

array.forEach(callbackFunction(currentValue, index, array), thisArg);
// currentValue: 현재 요소
// index: 현재 인덱스
// array: 현재 배열
// thisArg: 콜백 함수 내에서 this로 사용될 값

// 예시 1: 일반 함수 사용
list.forEach(function(x, y, z) {
    console.log(x, y, z);
});

// 예시 2: 화살표 함수 사용✨
list.forEach((x, y, z) => console.log(x, y, z));

filter - 조건 필터링

`filter` 메서드 : 배열의 각 요소를 반복하여 조건에 맞는 요소만으로 새로운 배열을 생성합니다.

array.filter(callbackFunction(currentValue, index, array), thisArg);

// 예시 1: 일반 함수 사용
var result = list.filter(function(x) {
    return x % 2 == 0; // 짝수만 반환
});
console.log(`result: ${result}`); // 2, 4, 6, 8, 10

// 예시 2: 화살표 함수 사용✨
var result = list.filter(x => x % 2 == 0);

map - 배열 변환

`map` 메서드 : 배열의 각 요소에 대해 주어진 함수를 실행하여 변환된 결과로 새로운 배열을 생성합니다.

array.map(callbackFunction(currentValue, index, array), thisArg);

// 예시 1: 일반 함수 사용
var result2 = list.map(function(x) {
    return x * x; // 제곱을 반환
});
console.log(`result2: ${result2}`); // 1, 4, 9, 16, ..., 100

// 예시 2: 화살표 함수 사용✨
var result2 = list.map(x => x * x);

this 키워드

`this` 키워드는 함수를 호출한 객체를 참조하며, 일반 함수와 화살표 함수에서의 동작이 다릅니다. 일반 함수는 호출 방식에 따라 this가 다르게 바인딩되지만, 화살표 함수는 상위 스코프의 this를 그대로 사용합니다. 

const obj = {
    value: 10, // 객체의 속성
    normalFunc: function() {
        console.log(this.value); // 일반 함수: this는 obj 참조
    },
    arrowFunc: () => {
        console.log(this.value); // 화살표 함수: this는 상위 스코프 참조 (arrowFunc가 정의된 시점의 상위 스코프는 전역 스코프)✨
    }
};

obj.normalFunc(); // 10 출력: this가 obj를 참조하므로 value는 10
obj.arrowFunc(); // undefined 출력: this가 전역 스코프를 참조하므로 value가 없어서 undefined✨

 

 

3️⃣ 클래스 (Class)

클래스는 객체 지향 프로그래밍에서 객체를 생성하기 위한 템플릿 역할을 합니다. ES6에서는 클래스를 사용하여 객체를 쉽게 생성하고, 상속을 통해 코드 재사용성을 높일 수 있습니다.

✔️예제1

// ES6 - 일반 HTML에서는 굳이 쓸 필요는 없음
class Person {
    // 멤버변수 (키워드를 적지 않음)✨
    name = "홍길동"; 
    age = 20;

    // 생성자 - 하나만 작성할 수 있음✨
    constructor(addr) { 
        this.addr = addr; // 자동으로 멤버변수 addr을 추가해줌
    }

    // 화살표 함수로 정의된 메서드
    func = () => {
        console.log("함수1");
    }

    // 이름을 반환하는 메서드
    getName = () => {
        return this.name;
    }
}

// 객체 생성
let p1 = new Person("서울시");

console.log(p1.addr); // "서울시" 출력
console.log(p1.age); // 20 출력
console.log(p1.name); // "홍길동" 출력
console.log(p1.getName()); // "홍길동" 출력
p1.func(); // "함수1" 출력

// 생성자가 없더라도 기본 생성자로 객체 생성 가능
let p2 = new Person(); // addr이 undefined로 초기화됨
console.log(p2.addr); // undefined 출력

✔️예제2(상속)

class Shape {
    // Shape 클래스의 메서드
    func = () => {
        console.log("test");
    }
}

class Rect extends Shape {
    // 생성자 생성
    constructor(width, height) {
        super(); // 부모 클래스의 생성자를 호출 (필수)✨
        this.width = width; // width 속성 초기화
        this.height = height; // height 속성 초기화
    }

    // func 메서드를 오버라이딩✨
    func = () => {
        console.log("오버라이딩");
    }
}

// Rect 클래스의 인스턴스 생성
let r = new Rect(10, 20); // width와 height를 전달하여 인스턴스 생성
r.func(); // "오버라이딩" 출력

 

 

4️⃣ 모듈 (Module)

ES6의 모듈 시스템은 변수, 함수, 클래스 등을 별도의 파일로 나누어 관리하고, 필요한 기능만 선택적으로 가져와 사용할 수 있게 해줍니다.

✔️`Export`(Named/Default) : 모듈에서 변수를 내보내는 방법

// Named Export : 특정 변수나 함수를 개별적으로 내보낼 때 사용✨
export const PI = 3.14;
export function add(a, b) { return a + b; }
export function subtract(a, b) { return a - b; }

// Default Export : 하나의 주된 값이나 객체를 내보낼 때 사용✨
const greeting = "Hello, World!";
export default greeting;

✔️`Import`(Named/Default)  : 내보낸 모듈을 다른 파일에서 가져오는 방법

// Named Import : 여러 값을 가져올 때 사용(Alias 가능)✨
import { PI, add as sum, subtract } from './mathUtils.js';

// Default Import : 기본으로 내보낸 하나의 값을 가져올 때 사용(변수명 임의 지정 가능)✨
import greetingMessage from './mathUtils.js';

// Import All : 모든 값을 한 번에 가져올 때 사용✨
import * as mathUtils from './mathUtils.js';

HTML 파일에서 ES6의 모듈 시스템을 사용하려면 `<script type="module">`을 작성해야 합니다.

<script type="module" src="yourModule.js"></script>

 

 

5️⃣ 구조 분해 할당 (Destructuring Assignment)

배열이나 객체의 요소를 변수에 할당하는 문법입니다. 이를 통해 복잡한 데이터를 쉽게 추출하고 사용할 수 있습니다.

✔️배열 [a, b, ...]

let arr = [1, 2, 3, 4];

// 배열 구조 분해 할당을 사용하여 각 요소를 변수에 할당
let [a, b, c, d] = arr; // 위치 요소 반환✨
console.log(a, b, c, d); // 1 2 3 4

// 특정 요소만 선택하여 변수에 할당 (중간 요소는 생략)
let [n1, , , n4] = arr; // n1은 첫 번째 요소, n4는 네 번째 요소✨
console.log(n1, n4); // 1 4

// 나머지 요소를 배열로 할당
let [...x] = arr; // arr의 모든 요소를 복사하여 x에 할당✨
console.log(x); // [1, 2, 3, 4]

// 앞의 두 요소를 개별 변수로 할당하고 나머지 요소를 배열로 할당
let [k1, k2, ...y] = arr; // k1은 첫 번째 요소, k2는 두 번째 요소, y는 나머지 요소✨
console.log(k1, k2, y); // 1 2 []

✔️단일 객체 {"key1": "value", "key2": "value"}

let obj = { "name": "홍길동", "age": 20 };

// 객체의 속성에 접근하는 두 가지 방법
console.log(obj["name"], obj.name);
// 위 두 가지 방식 모두 객체의 속성에 접근하는 방법입니다.
// obj["name"]은 문자열로 속성명에 접근하는 방식이고, obj.name은 점 표기법을 사용하는 방식입니다.
// 두 방법 모두 "홍길동"을 출력합니다.

// 구조 분해 할당을 사용하여 속성을 변수에 할당
let { name, age } = obj; // name과 age 변수를 obj에서 직접 추출✨
// obj에서 "name"과 "age" 속성 값을 각각 name과 age라는 변수에 바로 할당하는 방식입니다.
// 이제 name은 "홍길동", age는 20이 됩니다.

// 특정 속성을 다른 이름으로 가져오기
let { name: i1, age: i2 } = obj; // name을 i1으로, age를 i2로 재할당✨
// 구조 분해 할당 시 속성명을 원하는 이름으로 변경할 수 있습니다.
// 여기서는 obj의 "name"을 i1이라는 변수로, "age"를 i2라는 변수로 할당합니다.

✔️배열 객체 [ {"key1": "value", "key2": "value"}, {"key1": "value2", "key2": "value2"} ]

let list = [
    {
        "num": 1,
        "title": "hello",
        "info": ["apple", "banana"],
        "profile": { birth: "2020", img: "abc.png" }
    },
    {
        "num": 2,
        "title": "bye",
        "info": ["melon", "orange"],
        "profile": { birth: "2024", img: "abcddddd.png" }
    },
];

// 두 번째 객체에 접근
let [, a] = list; // 첫 번째 객체를 건너뛰고 두 번째 객체를 a에 할당✨
console.log(a); // { num: 2, title: 'bye', info: [ 'melon', 'orange' ], profile: { birth: '2024', img: 'abcddddd.png' } }

// 두 번째 객체의 num과 title 속성에 접근
let [, { num, title }] = list; // 두 번째 객체에서 num과 title을 추출✨
console.log(num, title); // 2 'bye'

// 두 번째 객체의 info 배열에서 요소에 접근
let [, { info: [x, y] }] = list; // 두 번째 객체의 info 배열에서 첫 번째와 두 번째 요소를 x와 y에 할당✨
console.log(x, y); // 'melon' 'orange'

// 두 번째 객체의 profile 안에 있는 birth와 img를 한 번에 추출
let [, { profile: { birth, img } }] = list; // profile 속성의 birth와 img를 추출✨
console.log(birth, img); // '2024' 'abcddddd.png'

 

 

6️⃣ 전개구문 (Spread Operator)

반복 가능한 객체에 사용할 수 있는 문법으로, 배열이나 문자열 등을 개별 요소로 전개시킬 수 있습니다.

✔️전개 구문 사용 예시

const arr = [1, 2, 3];
console.log(...arr); // 1 2 3✨

// 배열의 추가
const num = [10, 20, 30, ...arr];
console.log(num); // [10, 20, 30, 1, 2, 3]

// 배열 중간에 추가
const num2 = [10, ...arr, 20, 30];
console.log(num2); // [10, 1, 2, 3, 20, 30]

// 배열의 복사
const num3 = [...arr]; 
console.log(num3); // [1, 2, 3]

// 배열의 결합
const num4 = [...arr, ...arr, ...arr];
console.log(num4); // [1, 2, 3, 1, 2, 3, 1, 2, 3]

✔️함수 호출 시 전개 구문 사용 예시

const arr = [1, 2, 3];
function sum(x, y, z) {
    return x + y + z;
}

// sum(1, 2, 3) 호출
console.log(sum(...arr)); // 6✨
console.log(sum(10, 20, ...arr)); // 33

✔️가변적 매개변수 처리

function sum3(x, ...arr) {
    return [x, ...arr];
}

console.log(sum3(1, 2, 3, 4, 5, 6)); // [1, 2, 3, 4, 5, 6]
console.log(sum3(1, 2, 3, 4)); // [1, 2, 3, 4]
console.log(sum3(1)); // [1]
console.log(sum3(...[1, 2, 3])); // [1, 2, 3]✨

✔️기본(default) 매개변수 처리

function sum4(x, y = 10, z = 20) {
    return x + y + z;
}

console.log(sum4(1)); // 31✨
console.log(sum4(1, 2)); // 23
console.log(sum4(1, 2, 3)); // 6
console.log(sum4(1, ...[1, 2, 3])); // 4

 

 

7️⃣ 템플릿 리터럴 (Template Literal)

템플릿 리터럴을 통해 가독성이 뛰어난 멀티라인 문자열과 변수 삽입이 가능합니다.

✔️템플릿 리터럴은 `${}`를 사용하여 동적으로 값을 삽입할 수 있으며, 이때 문자열은 반드시 백틱(`)으로 감싸야 합니다. 

let name = "이순신"; // 이름 변수 선언
let age = 20; // 나이 변수 선언

// 문자열 연결을 사용한 출력
console.log(name + "님의 나이는 " + age + "입니다"); 

// 템플릿 리터럴을 사용한 출력✨
console.log(`${name}님의 나이는 ${age}입니다`); 

// 조건부 연산자를 사용한 출력✨
console.log(`${age < 20 ? `20보다 작음` : `20보다 큼`}`);

 

 

8️⃣ for of문

✔️반복 가능한 객체(iterable)를 반복하여 결과값을 얻으며, `forEach` 문에서는 지원하지 않는 `break`, `continue`, `return` 문을 사용할 수 있습니다.

// 배열 선언
let arr = [1, 2, 3, 4, 5];

// 1. for...in 루프 (인덱스 기반)
// for (var i in arr) {
//     console.log(i); // 인덱스 출력
//     console.log(arr[i]); // 값 출력
// }

// 2. forEach 메서드 (배열 요소에 대해 반복)
// arr.forEach(function(value, index) {
//     console.log(index, "는", value); // 인덱스와 값 출력
// });

// 3. for...of 루프 (값 기반)✨
for (let i of arr) {
    console.log(i); // i는 배열의 값
}

// 배열 객체를 가진 배열 선언
let arr2 = [{ a: 1, b: "홍길동" }, { a: 2, b: "이순신" }];

// 4. 구조 분해 할당을 사용한 for...of 루프✨
for (let { a, b } of arr2) {
    console.log(a, b); // a와 b의 값 출력
}