ES6+ 문법 (EX6+ Syntax)

💁‍♀️ ES6+ 문법이란,
ES6+는 ECMAScript 6(2015)의 확장 버전으로, 화살표 함수, 클래스, 블록 스코프 변수 선언, 디폴트 매개변수, 템플릿 리터럴, 비구조화 할당, 나머지 매개변수, 전개 연산자 등이 있음

👀 클래스 (Class)

💁‍♀️ 동일한 종류의 객체를 여러 개 생성해야 하는 경우 객체 리터럴을 여러 개 생성하기 보다 클래스 문법을 통해 동일한 종류의 객체를 재생성 할 수 있음

---

🙋‍ 생성자 함수와 클래스 문법의 차이

• 클래스 생성자를 new와 함께 호출하지 않으면 에러 발생

Teacher("조이");
// Student("치즈"); // TypeError: Class constructor Student cannot be invoked without 'new' 오류

• 클래스에 정의된 메소드는 열거 불가 (for..in 순회 시 제외)
• 클래스는 호이스팅이 발생하지 않는 것처럼 동작
• 클래스는 항상 use strict 적용

👉 클래스 선언 및 사용

class Student {

    // 생성자를 통해 인스턴스 생성 및 초기화
    // 생성자는 1개 이상 정의 될 수 없으며 생략할 경우 암묵적으로 정의 됨
    constructor(name){
        this.group = 1;     // way 1. 고정 값으로 인스턴스 초기화
        this.name = name;   // way 2. 전달 받은 값으로 인스턴스 초기화
    }

    // 메소드 추가 (Student 클래스의 프로토타입 메소드)
    introduce() {
        console.log(`안녕하세요 저는 ${this.group}반 멈머 ${this.name}이에용🐶`);
    }

    // 암묵적으로 this를 반환하므로 반환문 작성 X
}

let student1 = new Student("허치치");    // 초기값 전달하며 생성
let student2 = new Student("허꼬순");    // 초기값 전달하며 생성
student1.introduce();                   // 메소드 호출
student2.introduce();                   // 메소드 호출

/* 클래스 문법과 유사하게 기능하는 것처럼 보이는 '생성자 함수'를 사용할 수 있음 */
function Teacher(name) {
    this.group = 1;
    this.name = name;
}

Teacher.prototype.introduce = function() {
    console.log(`안녕하심까 저는 ${this.group}반 담당 ${this.name}임다😳`);
}

let teacher = new Teacher("효연");
teacher.introduce();

👉 클래스 표현식

💁‍♀️ 클래스 표현식 정의가 가능하다는 것의 의미는 클래스도 함수처럼 일급 객체이며 다른 표현식 내부에서 정의, 전달, 반환, 할당이 가능하다는 것

// 1. 익명 클래스 표현식
let Tutor = class {
    teach() {
        console.log('이해했나용😅');
    }
};

new Tutor().teach();

// 2. 기명 클래스 표현식
let Tutee = class MyTutee {
    learn() {
        console.log("음?..네😓");
        console.log(MyTutee);   // [class MyTutee] 출력 => 해당 클래스 내부에서만 사용 가능
    }
};

new Tutee().learn();
// console.log(MyTutee);   // 정의 X => 외부에서 불러서 사용 불가하므로 클래스 이름의 의미 X

/* 3. 클래스 동적 생성 */
function makeTutee(message) {

    /* 해당 함수가 호출되면 아래의 클래스를 선언하고 이를 반환 */
    return class{
        feedback() {
            console.log(message);
        }
    };
}

let secondTutee = makeTutee("10점 만점에 10점😎");
new secondTutee().feedback(); // secondTutee에 클래스가 담겨있고 그 클래스 안의 feedback() 메소드를 호출

👉 getter & setter

class Product {

    constructor(name, price) {
        /* 1. this들은 setter 호출 */
        this.name = name;
        this.price = price;

    }

    /* name, price라는 값으로 외부 접근하고 (getter, setter 호출)
       getter, setter 내부에서는 _name, _price로 실제 값에 접근 */

    // getter 함수
    get name() {
        console.log("get name 동작!");
        return this._name; // 언더바 작성 필요 (작성하지않으면 getter를 호출하게됨 -> 자기 자신 호출 -> Stack over flow Error)
    }
    
    get price() {
        console.log("get price 동작!");
        return this._price;
    }
    // setter 함수
    set name(value) {
        console.log("set name 동작!");
        this._name = value; // 언더바 작성 필요 (작성하지않으면 setter를 호출하게됨 -> 자기 자신 호출 -> Stack over flow Error)
    }
    
    set price(value) {
        console.log("set price 동작!");
        if(value <= 0) {
            console.log('가격은 음수일 수 없어유🫥');
            this._price = 0;
            return;
        }
        this._price = value;
    }

}

let phone = new Product('아이폰 14 pro', 2000000);
console.log(phone.name, phone.price); /* 2. getter 호출 */

let computer = new Product('갤럭시북3', -2500000);
console.log(computer.name, computer.price);

👉 상속

// Animal 클래스 선언
class Animal {

    constructor(name, weight) {
        this.name = name;
        this.weight = weight;
    }

    eat(foodWeight) {
        this.weight += foodWeight;
        console.log(`${this.name}(은)는 ${foodWeight}kg만큼의 식사를 하고 ${this.weight}kg가 되어버렸어요😂`);
    }

    move(lostWeight) {
        if(this.weight > lostWeight) this.weight -= lostWeight;
        console.log(`${this.name}(은)는 움직임으로 인해 ${lostWeight}kg만큼 감량되어 ${this.weight}kg가 되었네용!😯`)
    }

}

// Animal을 상속받는 Human 클래스 선언 - extends 키워드 사용
class Human extends Animal {

    develop(language) {
        console.log(`${this.name}(은)는 ${language}로 개발을 해요~ 음 잘하네요🫠`);
    }

    dog(dogName) {
        console.log(`${dogName}는 ${this.name}의 갱얼쥐에요🐶`);
    }
}

let human = new Human("조이", 50);

human.eat(2);
human.move(1);
human.move(3);
human.eat(5);

human.develop('JavaScript');
human.dog('치즈');

💻 Mini Console

조이(은)는 2kg만큼의 식사를 하고 52kg가 되어버렸어요😂
조이(은)는 움직임으로 인해 1kg만큼 감량되어 51kg가 되었네용!😯
조이(은)는 움직임으로 인해 3kg만큼 감량되어 48kg가 되었네용!😯
조이(은)는 5kg만큼의 식사를 하고 53kg가 되어버렸어요😂
조이(은)는 JavaScript로 개발을 해요~ 음 잘하네요🫠
치즈는 조이의 갱얼쥐에요🐶

💁‍♀️ 메소드 오버라이딩
부모 메소드 전체를 교체하지 않고, 부모 메소드를 토대로 일부 기능만 변경하고 싶을 때, 부모 메소드의 기능을 확장하고 싶을 때 메소드 오버라이딩을 사용

class Animal {

    constructor(name, weight) {
        this.name = name;
        this.weight = weight;
    }

    eat(foodWeight) {
        this.weight += foodWeight;
        console.log(`${this.name}(은)는 ${foodWeight}kg만큼의 식사를 하고 ${this.weight}kg가 되어버렸어요😂`);
    }

    move(lostWeight) {
        if(this.weight > lostWeight) this.weight -= lostWeight;
        console.log(`${this.name}(은)는 움직임으로 인해 ${lostWeight}kg만큼 감량되어 ${this.weight}kg가 되었네용!😯`)
    }

}

// Animal을 상속 받는 Tiger 클래스 선언
class Tiger extends Animal {

    attack(target) {
        console.log(`${this.name}🐯(이)가 ${target}을 공격해요!🫣`);
    }

    // Animal의 move를 확장한 Tiger의 move
    move(target) {
        // super를 통해 부모 객체 참조 가능
        super.move(0.1);
        this.attack(target);
    } 

}

let tiger = new Tiger('신사동 호랭이', 90);
tiger.move('찍찍이🐭');

💻 Mini Console

신사동 호랭이(은)는 움직임으로 인해 0.1kg만큼 감량되어 89.9kg가 되었네용!😯
신사동 호랭이🐯(이)가 찍찍이🐭을 공격해요!🫣

💁‍ 생성자 오버라이딩

class Animal {

    constructor(name, weight) {
        this.name = name;
        this.weight = weight;
    }

    eat(foodWeight) {
        this.weight += foodWeight;
        console.log(`${this.name}(은)는 ${foodWeight}kg만큼의 식사를 하고 ${this.weight}kg가 되어버렸어요😂`);
    }

    move(lostWeight) {
        if(this.weight > lostWeight) this.weight -= lostWeight;
        console.log(`${this.name}(은)는 움직임으로 인해 ${lostWeight}kg만큼 감량되어 ${this.weight}kg가 되었네용!😯`)
    }

}

class Deer extends Animal {

    /* constructor 재정의 가능 */
    constructor(name, weight, legLength) {
        super(name, weight);
        this.legLength = legLength;
    }

    hide(place) {
        console.log(`${this.name}(이)가 ${place}에 숨었어요!`);
    }
}

let deer = new Deer('아기 사슴 밤비🦌', 40, 1);
deer.eat(5);
deer.move(3);
deer.hide('풀숲 사이');

---

👀 화살표 함수 (Arrow function)

💁‍♀️ 화살표 함수란?
ES6에서 도입된 화살표 함수는 function 키워드 대신 화살표를 사용해 좀 더 간략한 방법으로 함수를 선언할 수 있음. 화살표 함수는 항상 익명 함수로 정의. 본문이 한 줄인 함수를 작성할 때 유용

👉 화살표 함수의 사용

let message;

// 기존 function 정의
message = function () {
    return "Hello World!";
};

console.log(message());

// function 키워드 생략 가능
message = () => {
    return "Arrow Function!";
};

console.log(message());

// 명령문이 하나만 있는 경우 중괄호 생략 가능
// 이 때 함수 몸체 내부의 문이 값으로 평가 될 수 있는 표현식인 문이라면 암묵적으로 반환
// return 키워드 생략 가능
message = () => "Arrow Functions are Simple!";

console.log(message());

// 매개변수가 있을 경우
message = (val1, val2) => "Arrow " + val1 + val2;

console.log(message('Function', '!'));

// 매개변수가 하나면 소괄호 생략 가능
// 매개변수가 없거나 여러 개일 경우 생략 불가
message = val => "Arrow " + val;

console.log(message('Functions are GOOD!!!'));

// 객체 리터럴을 반환하는 경우 소괄호로 감쌈
const createUser = (id, name) => ({ id, name });
console.log(createUser(1, '유관순'));
// 소괄호로 감싸지 않을 경우 함수 몸체 중괄호로 잘못 해석
const createUser2 = (id, name) => { id, name };
console.log(createUser2(2, '홍길동'));

// 고차 함수에 인수로 전달 가능하며 일반적인 함수 표현식 보다 표현이 간결해짐
console.log([1,2,3,4,5].map(function(val){ return val * 10}));
console.log([1,2,3,4,5].map(val => val * 10));

👉 화살표 함수의 특징

• 화살표 함수는 다른 함수의 인수로 전달되어 콜백 함수로 사용되는 경우가 많음
• 아래와 같은 특징은 콜백 함수 내부의 this가 외부 함수의 this와 다르기 때문에 발생하는 문제를 해결하기 위한 의도적 설계

// 1. 화살표 함수는 this를 가지지 않음
//    이러한 특징은 객체의 메소드 안에서 동일한 객체의 프로퍼티를 대상으로 순회하는데 사용 가능
let theather = {
    store : '용산아이파크점',
    titles : ['어벤져스', '겨울왕국', '스파이더맨', '라이온킹', '알라딘', '맘마미아', '보스베이비'],
    showMovieList() {
        /* 화살표 함수 */
        // 화살표 함수는 this를 가지지 않기 때문에 this.store를 사용 시, theather 객체 안의 store에 접근이 가능
        this.titles.forEach(title => console.log(this.store + " : " + title));

        /* 일반 함수 */
        // 화살표 함수가 아닌 일반 함수를 사용하면 function의 this는 전역 객체를 나타냄
        this.titles.forEach(function(title) {
            console.log(this); // undefined
            console.log(this.store + " : " + title);
        });
    }
};

theather.showMovieList();

// 2. 화살표 함수는 new와 함께 호출할 수 없음
// this가 없기 때문에 생성자 함수로 사용할 수 없음
const arrowFunc = () => {};
// new arrowFunc(); // TypeError : arrowFunc is not a constructor
// 화살표 함수는 인스턴스를 생성할 수 없으므로 prototype 프로퍼티가 없고 프로토타입도 생성하지 않음
console.log(arrowFunc.hasOwnProperty('prototype')); // false

// 3. 화살표 함수는 super를 가지지 않음
class Animal {

    constructor(name, weight) {
        this.name = name;
        this.weight = weight;
    }

    move(lostWeight) {
        if(this.weight > lostWeight) this.weight -= lostWeight;
        console.log(`${this.name}(은)는 움직임으로 인해 ${lostWeight}kg만큼 감량되어 ${this.weight}kg가 되었네용!😯`)
    }

}

// Animal을 상속 받는 Tiger 클래스 선언
class Tiger extends Animal {

    move(lostWeight) {
        // 화살표 함수는 super를 지원하지 않아 super를 외부 함수에서 가져오기 때문에  Animal의 move를 호출하게 됨
        setTimeout(() => super.move(lostWeight), 3000);
        // setTimeout(function(){ super.move(lostWeight) }, 3000); // SyntaxError: 'super' keyword unexpected here
                                                                   // 일반 함수를 사용하게 되면 에러 발생
        
        console.log('찍찍이🐭를 찾아 어슬렁🐯~');
    } 

}

let tiger = new Tiger('지리산 호랭이', 90);
tiger.move(2);

// 4. 화살표 함수는 arguments를 지원 X
(function(){

    // 화살표 함수는 본인의 argument 3, 4가 아닌 상위 스코프인 즉시 실행 함수의 argument 1, 2를 참조
    const arrowFunc = () => console.log(arguments); // [Arguments] { '0': 1, '1': 2 } 출력
    arrowFunc(3, 4);

})(1, 2);

---

👀 스프레드 문법 (Spread syntax)

💁‍♀️ 스프레드 문법이란?
나머지 매개변수(Rest parameter)처럼 매개변수 목록을 배열로 가져오는 것과는 반대로, 배열을 통째로 매개변수로 넘겨주는 기능.
하나로 뭉쳐져 있는 여러 값들의 집합을 전개해서 개별적인 값들의 목록으로 만듬

👉 나머지 매개변수 (Rest parameter)

function merge(msg1, msg2) {
    return msg1 + msg2;
}

console.log(merge('안뇽!'));                               // 안뇽!undefined (전달된 두 번째 매개변수가 없어 undefined)
console.log(merge('안뇽!', '방가방가~'));                   // 안뇽!방가방가~
console.log(merge('안뇽!', '방가방가~', '전 Joy에요🙋‍♀️'));   // 안뇽!방가방가~ (마지막 매개변수는 무시됨)

// 나머지 매개변수 ...를 사용하면 매개변수를 한데 모아 배열에 담을 수 있음
function mergeAll(...args) {

    let message = '';

    for(let arg of args) message += arg;

    return message;
}

console.log(mergeAll('안뇽!'));                                // 안뇽!
console.log(mergeAll('안뇽!', '방가방가~'));                    // 안뇽!방가방가
console.log(mergeAll('안뇽!', '방가방가~', '전 Joy에요🙋‍♀️'));    // 안뇽!방가방가~전 Joy에요🙋‍♀️


// 유의할 점은 나머지 매개변수는 항상 마지막에 있어야함
// function func(arg1, ...args, arg2) {}    // 불가능
function func(arg1, arg2, ...args) {}       // 가능

👉 스프레드 문법 (Spread syntax)

console.log(`가장 큰 값 ; ${ Math.max(10, 20, 30)}`);

/* 1. */
let arr = [10, 20, 30];
// Math.max는 배열이 아닌 숫자 목록을 인수로 받기 때문에 배열을 전달하면 원하는 대로 동작하지 X
console.log(`가장 큰 값 : ${ Math.max(arr) }`);     // NaN
// ...(스프레드 문법) : 배열이 해당 데이터 타입 그대로 펼쳐짐
console.log(`가장 큰 값 : ${ Math.max(...arr) }`);  // 30   

/* 2. */
let arr1 = [10, 30, 20];
let arr2 = [100, 300, 200];
// 다른 배열 객체 여러 개를 한꺼번에 펼쳐서 사용 가능
console.log(`가장 작은 값 : ${ Math.min(...arr1, ...arr2)}`);               // 가장 작은 값 : 10
// 일반 값과 혼합해서 사용 가능
console.log(`가장 작은 값 : ${ Math.min(5, ...arr1, 15, ...arr2, 25)}`);    // 가장 작은 값 : 5

/* 3. concat() 메소드보다 간결하게 배열 병합에 사용 가능 */
let merged = [0, ...arr, 2, ...arr2];
console.log(merged);

/* 4. 문자열을 배열로 변환 */
let str = "JavaScript";
console.log([...str]);
// ['J', 'a', 'v', 'a','S', 'c', 'r', 'i','p', 't']

👉 스프레드 문법을 이용한 배열, 객체 복사

/* 1. 배열 복사 */
let arr = [10, 20, 30];
let arrCopy = [...arr];
console.log(arr);
console.log(arrCopy);
console.log(arr === arrCopy); // false(동일 객체는 아님)

/* 2. 객체 복사 */
let obj = { name : '허치치', age : 20 };
let objCopy = { ...obj };
console.log(obj);
console.log(objCopy);
console.log(obj === objCopy); // false(동일 객체는 아님)

---

👀 구조 분해 할당 (Distructuring assignment)

🙋‍ 구조 분해 할당을 사용하면 배열이나 객체를 변수로 분해하여 연결 가능

👉 배열 구조 분해 할당

let nameArr = ["Cheese", "Heo"];

/* 인덱스 하나하나 접근했던 방식 */
// let firstName = nameArr[0];
// let lastName = nameArr[1];
/* 구조 분해 문법으로 한번에 처리 */
let [firstName, lastName] = nameArr;
console.log(firstName);
console.log(lastName);

/* 반환 값이 배열인 split 메소드를 활용 */
let [firstName2, lastName2] = "Chichi Heo".split(" ");
console.log(firstName2);
console.log(lastName2);

/* 쉼표를 사용하여 필요하지 않은 배열 요소를 버릴 수 있음 */
let [firstName3, , lastName3] = ['Hyoyeon', 'Joy', 'Cho'];
console.log(firstName3);
console.log(lastName3);

💁‍ 다양한 사용법

/* 1. 객체 프로퍼티에 사용 */
let user = {};
[user.firstName, user.lastName] = "Zzanga Shin".split(" ");
console.log(user);

/* 2. 변수 교환 용도로 사용 */
let student = "학생";
let teacher = "쌤";

[student, teacher] = [teacher, student]; // [구조 분해 할당 문법] = [배열] 

console.log(`student : ${student}, teacher : ${teacher}`); // student : 쌤, teacher : 학생

/* 3. rest parameter ...로 나머지 요소를 한 번에 가져올 수 있음 */
let [sign1, sign2, ...rest] = ['양자리', '물병자리', '황소자리', '게자리', '사자자리']; // ...rest에는 나머지 요소들의 배열이 담김
console.log(sign1); // 양자리
console.log(sign2); // 물병자리
console.log(rest);  // [ '황소자리', '게자리', '사자자리' ]

/* 4. 기본 값을 설정하고 사용 가능 */
let [firstName = "메롱", lastName = "허"] = ["꼬순"];
console.log(firstName); // 꼬순
console.log(lastName);  // 허 (값이 입력되지 않았을 때의 기본값 출력)

👉 객체 구조 분해 할당

let pants = {
    productName : '조거팬츠',
    color : '애쉬베이지',
    price : 25000 
};

let { productName, price, color } = pants;   // 객체의 프로퍼티의 명칭을 기준으로 구조 분해 (프로퍼티 작성 순서 상관 X)
console.log(productName);
console.log(color);
console.log(price);

// 각 변수의 서술 순서는 무관하며 { 객체 프로퍼티 : 목표 변수 } 형식으로 작성 가능
let { color : co, price : pr, productName : pn } = pants;
console.log(co);
console.log(pr);
console.log(pn);

💁‍ 다양한 사용법

let pants = {
    productName : '조거팬츠',
    color : '애쉬베이지',
    price : 25000 
};

/* 1. 프로퍼티가 많은 복잡한 객체에서 원하는 정보만 뽑아오고 싶을 때 사용 */
let { productName } = pants;
console.log(`productName : ${productName}`);

/* 2. 객체에 존재하지 않는 프로퍼티는 기본 값을 설정해서 사용 가능 */
let shirts = {
    productName : '베이직 셔츠'
};

let { productName : pn, color : co = '어떤 색상', price : pr = 0 } = shirts;
console.log(pn);    // 베이직 셔츠
console.log(co);    // 어떤 색상 (기본값)
console.log(pr);    // 0 (기본값)

/* 3. rest parameter ...로 나머지 요소를 한번에 가져올 수 있음 */
let { productName : productName2, ...rest } = pants;
console.log(productName2);  // 조거팬츠
console.log(rest);          // { color: '애쉬베이지', price: 25000 }

/* 4. let 키워드 없이 사용할 때 유의할 점 */
let productName3, color3, price3;

// { productName : productName3, color : color3, price : price3 } = pants;    // 코드 블럭으로 인식하기 때문에 오류 발생
({ productName : productName3, color : color3, price : price3 } = pants);     // 소괄호로 감싸주면 오류 해결
console.log(productName3);
console.log(color3);
console.log(price3);

💁‍ 중첩 구조 분해 할당

let product = {
    size : {
        width : 10,
        height : 30
    },
    items : ['doll', 'robot']
};

// 중첩 구조 분해 시 코드를 여러 줄에 걸쳐 작성해 의도하는 바를 명확히 함
let {
    size : {
        width,
        height
    },
    items : [item1, item2],
    producer = "허강냉"
} = product;

console.log(width);
console.log(height);
console.log(item1);
console.log(item2);
console.log(producer);

💁‍ 함수의 매개변수로 활용
함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우에 활용

/* 인수의 순서가 고정되어있어 순서가 바뀌면 문제가 생기고
   기본 값 활용 시에도 undefined를 이용해서 인수를 넘겨줘야만 함 */
function displayProduct(producer = "꼬순",  width = 0, height = 0, items = []) {}

displayProduct("치즈", undefined, undefined, ["Coffee", "Donut"]);

/* 구조 분해 할당을 매개변수에 적용 */
function displayProduct2({producer = "아무개", width = 0, height = 0, items = []}) {
    console.log(producer);  // 허멈머
    console.log(width);     // 0 
    console.log(height);    // 0
    console.log(items);     // [ 'Creame', 'Cheese' ]
}

// 함수에 전달할 객체 (일부)
let exampleProduct = {
    items : ["Creame", "Cheese"],
    producer : "허멈머"
};

displayProduct2(exampleProduct);