JavaScript ES6 문법 정리

이번 시간에는 ES6에서 쓰이는 문법을 정리해보겠습니다.

ES5의 형태를 먼저 보고 ES6에서는 어떻게 쓰이는지를 비교해가면서 살펴보겠습니다.

Destructuring(구조 분해 할당)

//ES5

var john = ["john", 26];

var name = john[0];

var age = john[1];

//ES6

const [name, year] = ["john", 26];

console.log(name);
console.log(year);

////////////////////////////////////////////////////////////////////////////
const obj = {
    name: "heeje",
    age: 25,
};

const { name: n, age: a } = obj;    // 새로운 이름을 할당해 줄 수도 있다. 

console.log(n);

////////////////////////////////////////////////////////////////////////////

function calcRetire(year) {
    const age = new Date().getFullYear() - year;
    return [age, 60 - age];   //배열을 return 
}

const [age2, retirement] = calcRetire(1996);   //destructuring 

console.log(age2);

console.log(retirement);

Array

const boxes = document.querySelectorAll(".box"); //node list return

//ES5

var boxesArr5 = Array.prototype.slice.call(boxes);

boxesArr5.forEach(function (cur) {
    cur.style.backgroundColor = "dodgerblue";
});


const boxesArr6 = Array.from(boxes);   //from 을 사용해서 쉽게 들고 올 수 있다. 

boxesArr6.forEach((cur) => (cur.style.backgroundColor = "dodgerblue"));    // arrow function.

for of loop

//ES5

for (var i = 0; i < boxesArr5.length; i++) {
    if (boxesArr5[i].className === "box blue") {
        continue;
    } else {
        boxesArr5[i].textContent = "blue!";
    }
}

//ES6


for (const cur of boxesArr6) {          //for of loop (간단하게 쓸 수 있다.)
    if (cur.className.includes("blue")) {
        continue;
    } else {
        cur.textContent = "blue";
    }
}


////////////////index 접근//////////////////////////

//ES5

var ages = [12, 13, 23, 15, 25, 17];

var full = ages.map(function (cur) {
    return cur >= 18;
});

console.log(full.indexOf(true)); // 조건에 맞는 인덱스를 반환
console.log(ages[full.indexOf(true)]); // 조건에 맞는 인덱스를 가진 배열 값 반환.

//ES6

console.log(ages.findIndex((cur) => cur >= 18));
console.log(ages.find((cur) => cur >= 18));

Spread operator ('...')

function add(a, b, c, d) {
    return a + b + c + d;
}

//ES5

var ages = [20, 20, 30, 30];
var sum1 = add.apply(null, ages);

console.log(sum1);

//ES6

let sum2 = add(...ages);    /// '...' 의 형태로 배열의 모든 원소에 접근할 수 있다. 

console.log(sum2);



const familySmith = ["John", "Jane", "Mark"];
const familyMiller = ["Mary", "Bob", "Ann"];
const bigFamily = [...familySmith, "Lily", ...familyMiller];   //spread operator 를 통해서 간단하게 배열울 합칠 수 있다. 
console.log(bigFamily);

Rest Parameters

//ES6
function isFullAge6(limit, ...years) {     // ...years 가 rest parameters 로 자동으로 인식된다.
    years.forEach(cur => console.log( (2016 - cur) >= limit));
}

isFullAge6(16, 1990, 1999, 1965, 2016, 1987);

➡️ spread operator 랑 구별 필요!

Default Parameters

// ES5
function SmithPerson(firstName, yearOfBirth, lastName, nationality) {
    
    lastName === undefined ? lastName = 'Smith' : lastName = lastName;
    nationality === undefined ? nationality = 'american' : nationality = nationality;
    
    this.firstName = firstName;
    this.lastName = lastName;
    this.yearOfBirth = yearOfBirth;
    this.nationality = nationality;
}


//ES6
function SmithPerson(firstName, yearOfBirth, lastName = 'Smith', nationality = 'american') {   //parameter 의 default 값을 미리 설정해줄 수 있다. 
    this.firstName = firstName;
    this.lastName = lastName;
    this.yearOfBirth = yearOfBirth;
    this.nationality = nationality;
}   // 그리고 값이 들어오면 덮어 쓴다.


var john = new SmithPerson('John', 1990);
var emily = new SmithPerson('Emily', 1983, 'Diaz', 'spanish');

Maps

• new Map() – 새로운 맵 생성.
• map.set(key, value) – key를 이용해 value를 저장
• map.get(key) – key에 해당하는 값을 반환. key가 존재하지 않으면 undefined를 반환합
• map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환
• map.delete(key) – key에 해당하는 값을 삭제
• map.clear() – 맵 안의 모든 요소를 제거
• map.size – 요소의 개수를 반환
• map.keys() – 각 요소의 키를 모은 반복 가능한(iterable, 이터러블) 객체를 반환
• map.values() – 각 요소의 값을 모은 이터러블 객체를 반환
• map.entries() – 요소의 [키, 값]을 한 쌍으로 하는 이터러블 객체를 반환. 이 이터러블 객체는 for..of반복문의 기초로 쓰인다.

let map = new Map();
//key, value
map.set('1', 'str1');   // 문자형 키
map.set(1, 'num1');     // 숫자형 키
map.set(true, 'bool1'); // 불린형 키


alert( map.get(1)   ); // 'num1'
alert( map.get('1') ); // 'str1'

alert( map.size ); // 3

:arrow_right: 맵은 객체를 키로 사용할 수 있다.

let john = { name: "John" };

// 고객의 가게 방문 횟수를 세본다고 가정해 봅시다.
let visitsCountMap = new Map();

// john을 맵의 키로 사용하겠습니다.
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123

// [키, 값] 쌍을 대상으로 순회
for (let entry of recipeMap) { // recipeMap.entries()와 동일
  alert(entry); // cucumber,500 ...
}


for (let [key, value] of question.entries()) {
    if (typeof(key) === 'number') {
        console.log(`Answer ${key}: ${value}`);
    }
}

Classes

class MyClass {
 
  constructor() { ... }    // 객체를 초기화 해주는 constructor
  method1() { ... }
  method2() { ... }
  method3() { ... }
  ...
}

ex)

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

    cal() {
        let age = new Date().getFullYear() - this.birth;
        console.log(age);
    }
}

const heeje = new Person("heeje", 1996, "student");   

heeje.cal();

Classes & Subclasses

class athlete extends Person {     //Person을 상속 받는다. 
    constructor(name, birth, job, game, medal) {
        super(name, birth, job); // 부모 class 부르고 인자 전달.

        this.game = game;
        this.medal = medal;
    }

    wonMedal() {
        this.medal++;
        console.log(this.medal);
    }
}

const Athlete6 = new athlete("heeje", 1996, "student", 7, 77);    // new 를 통해서 새로운 object 생성.

Athlete6.wonMedal();
Athlete6.cal();   // 부모의 method 사용가능하다.

getter(획득자) & setter(설정자)

class User {

  constructor(name) {
    // setter를 활성화
    this.name = name;
  }

  get name() {       //getter
    return this._name;
  }

  set name(value) {           // name 과 동일하게 적어야함.
    if (value.length < 4) {
      alert("이름이 너무 짧습니다.");
      return;
    }
    this._name = value;
  }

}

let user = new User("John");
alert(user.name); // John

user = new User(""); // 이름이 너무 짧습니다.