[ES6] 기본 개념 정리

let과 const

• let은 변수, 선언된 변수는 다시 선언 불가
• const는 상수, 선언하면서 초기화 필수

let myName;
console.log(myName);

let으로 선언되고 초기화 하지 않은 변수는 undefined로 정의된다

const name = 'kim';

name = 'lee';	//error

const animal = {
    name: 'cat',
    weight: 5
};
animal.name = 'dog';
console.log(animal);

const상수를 변경하는것은 에러가 나지만,

const객체의 프로퍼티는 변경 가능하다

 

표현식과 템플릿 문자열

• 백틱(backtick)문자 `를 사용
• 템플릿 문자열 표현식 처리

let name = "jack";
let weight = 60;

console.log(`
    name = ${name}
    weight = ${weight}
    weight + bagWeight = ${weight + 3};
`);

name = jack
weight = 60
weight + backWeight = 63;

백틱문자를 이용해 멀티라인 스트링을 만들 수 있다

 

비구조화 할당 (destructing assignment)

• 구조화된 object나 array를 비구조화 하여 변수에 할당
• 객체 또는 배열에서 데이터를 분석하여 각각의 변수에 할당

let data = [{
    count = 1,
    list: [{
        name: ["jack","paul"],
        group: "sports"
    }]
}];

let [{count, list: [{name, group}]}] = data;
console.log(`
    count: ${count}
    group: ${group}
`);

count: 1
group: sports

객체도 객체표현식으로 할당 가능하다

 

class

• 클래스와 상속으로 객체지향 프로그래밍 가능

class Lang {
    constructor(name){
        this.name = name;
    }
    getName(){
        return this.name;
    }
}
let lang = new Lang("Language");
console.log("lang.getNmae();" + lang.getName());

lang.getName();Language

생성자 함수 constuctor로 정의, lang 객체 생성

class Lang {
    constructor(name){
        this.name = name;
    }
    getName(){
        return this.name;
    }
}
let lang = new Lang("Language");
console.log("lang.getNmae();" + lang.getName());

class JavaScript extends Lang{
    constructor(name){
        super(name);
    }
}
let js = new JavaScript("JavaScript");
console.log("js instanceof JavaScript: " + (js instanceof JavaScript));
console.log("js instanceof Lang: " + (js instanceof Lang));
console.log("js.getName(): " + js.getName());

lang.getName();Language
js instanceof JavaScript: true
js instanceof Lang: true
js.getName(): JavaScript

자식클래스를 초기화하기 위해 부모클래스의 생성자를 호출해야됨

자식클래스는 생성자에 super메소드를 사용하여 부모클래스의 생성자를 호출

부모클래스의 변수와 메소드를 상속받아서 JavaScript클래스에서는 정의하지 않은 함수도 사용가능

 

Arrow Function

function() {

}

() => {

}

function을 대체하는 화살표 함수

const myFunction = () => {
	console.log("ES6 arrow function");
};
myFunction();

 

this

var name = "ES5";

function Lang(){
    this.name = "ES6";
    setTimeout(function(){
    	console.log("Global name is " + this.name);
    },100);
    setTimeout(()=>{
    	console.log("My name is " + this.name);
    },100);
}

Global name is ES5
My name is ES6

ES6에서 화살표함수 안의 this는 함수안의 변수를 가리킨다

 

Iterator & for-of

const myArray = [10,20,30];

for(let value of myArray){
    console.log(value);
}

10
20
30

 

Map

• Map은 key와 value가 한쌍인 컬렉션

const myMap = new Map();
//myMap.set("Plugin","Update").set("Refactor",6).set("Code",5);
const myArray = [["Plugin","Update"],["Refactor",6],["Code",5]];

for(let i of myArray){
    myMap.set(...i);
}

for(let [key,value] of myMap){
    console.log(key + "," + value);
}

Plugin,Update
Refactor,6
Code,5

 

Promise

• 프로미스란? 자바스크립트 비동기 처리에 사용되는 객체
• 비동기 처리? 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성
• then() : 모든 프로미스에 존재하며 두개의 파라미터를 갖는다.
  • 첫번째 파라미터는 프로미스가 수행될 때 호출 할 함수, 비동기 작업과 관련된 추가 데이터가 이 처리함수에 전달된다.
  • 두번째 파라미터는 프로미스가 거부될 때 호출 할 함수, 거부와 관련된 추가 데이터가 전달된다.

const promise = new Promise(function(resolve,reject){
    //비동기 처리 작성
    //처리가 끝나면 resolve 또는 reject를 호출합니다
})

const promise = new Promise(function(resolve,reject){
    console.log("Promise");
    resolve();
});
promise.then(function(){
    console.log("Resolved");
});
console.log("Hi");

Promise
Hi
Resolved

then() 메서드에 전달된 함수는 비동기적으로 실행된다,

수행 및 거절 핸들러가 job queue의 끝에 추가되기 때문이다.

 

const pro2 = new Promise(function(resolved,reject){
    reject("rejected!");
});
pro2.then(function(contents){
    console.log(contents);
},function(err){
    console.error("err: " + err);
});

err: rejected!

then() 메서드를 이용해 두개의 익명함수를 받고, reject함수를 호출해 거부이유를 기록했다.

 

chaining

• 하나의 프로미스에서 다음 프로미스로 데이터를 전달
• catch() : 거절 핸들러만 할당, 프로미스가 거부된 경우 무엇을 할지 정의

let promise = new Promise(function(resolve,reject){
    resolve(1);
})

promise.then(function(value){
    return value + 9;
})
.then(function(value){
    return value * 2;
})
.then(function(value){
    return value / 4;
})
.then(console.log);

5

수행핸들러에 리턴값을 지정하여 체인을 따라 데이터를 계속 전달

 

const promise = new Promise(function(resolve,reject){
    resolve();
});

promise.then(function(){
    throw.new Error("Error in then()");
}).catch(function(err){
    console.log("then error: ",err);
});

then error: Error: Error in then()

catch를 에러로 처리하면 일관되게 핸들링이 가능하다. 체이닝 가능