JavaScripts ES2015+(ES6) 정리

1. const, let

•  보통 자바스크립트는 변수선언을 var로 하지만 const와 let으로 대체된다.
•  var는 전역변수
•  let과 const는 블록 스코프를 가진다.
•  let은 변수, const는 상수

 

if (true){
	var x = 3;
}
consloe.log(x); //3

if (true){
	const y = 3;
}
consloe.log(y); // is not defined

 

2. 템플릿 문자열

• 기존의 큰따옴표나 작은따옴표로 감싸는 것과 다르게 Tab키 위에 있는 " ` " 백틱으로 감쌀수 있으며, 문자열 안에 변수를 넣을 수 있다.

 

var num1 = 1;
var num2 = 2;
var string = `${num1} 더하기 ${num2} 는 ${num1 + num2} 입니다.`

 

3. 객체 리터럴

 

var say = function(){
	console.log('hi');
}

var Ob1 = {
	sayJS : function(){
    	consloe.log('JS');
    },
    say : say,
}

//객체 속성명을 동적으로 생성
var es = 'ES';
Ob1[es+6] = 'hello' // {ES6 : 'hello'}

 

•  Ob1 오브젝트 안에는 sayJs, say, 동적으로 생성한 ES6가 있다.

 

var es = 'ES';
Ob1[es+6] = 'hello' // {ES6 : 'hello'}

var say = function(){
	console.log('hi');
};

const Ob2 = {
	sayJS() {
    	console.log('JS');
    },
    say,
    [es + 6]: 'hello',
};

 

• 이전 문법에서는 ES6라는 속석명을 만들어면 바깥에서 [es+6]를 선언해야 했지만 바뀐 문법에서는 객체 리터럴 안에 속성을 선언해도 무방하다.
• 첫번째 코드와 비교하면 먼저 메서드에 함수를 연결할 때 (:)을 더이상 붙이지 않아도 된다.
• say : say 처럼 속성명과 변수명이 동일한 경우에는 한번만 써도 되게 바뀌었다. 이때는 코드의 중복을 피할 수 있어 편리하다.

 

{name: name, age: age} //ES5
{name, age}// ES2015

 

4. 화살표함수(arrow function)

 

function add1(a, b){
	return a + b;
} // 기존의 함수

const add2 = (a, b) => {
	return a + b;
}; // arrow function

// 간단한 함수는 이렇게도 만들 수 있다.
const add3 = (x, y) => x + y;
const add4 = (x, y) => (x + y);

 

5. 구조분해 할당

 

var ES5 = {
    name : 'zero',
    friends: ['nero', 'zero', 'hero'],
    logFriends: function() {
    var that = this // ES5에서 this를 that에 저장
    this.friends.forEach(function(friends){
    	console.log(that.name, friend);
    	});
    },
};

var ES6 = {
	name : 'zero',
    friends: ['nero', 'zero', 'hero'],
    logFriends(){
    	this.friends.forEach(friend => {
        	console.log(this.name,friends);
        });
    },
};

 

• 기존에는 각자 다른 함수 스코프의 this를 가지므로 that이라는 변수를 사용하여 간접적으로 접근하였지만 ES6에서는 상위스코프의 this를 그대로 물려받을 수 있다.

 

다음은 객체의 속성을 같은 이름의 변수에 대입하는 코드이다.

 

var example = {
	status : {
    	name: 'one',
    	count: 5,
    }
    getCount() {
    	this.status.count--;
        return this.status.count;
    },
};

var getCount = example.getCount; // example의 getCount 가져오기
var count = example.status.count; // count 

const { getCount, status: {count} } = example; // ES6, getCount와 count를 한번에 선언

/*
const {
	getCount,
    status: {count}
} = example // json형식으로 보면 이해하기 쉽다! 
/*

 

• 위의 const로 선언한 문법은 example 객체 안의 속성을 찾아서 변수와 매칭한다. count처럼 여러 단계 안의 속성도 찾을 수 있다.

 

다음은 배열에 대한 구조분해 할당이다.

 

// es5
var array = [1, 2, 3, 4];
var one = array[0];
var two = array[1];
var three = array[2];
var four = array[3];

//es6
const array = [1,2,3,4];
const [1,2,3,4] = array;

 

6. 클래스

• 클래스 문법도 추가되었지만 다른언어처럼 클래스 기반으로 동작하는 것이 아니라 프로토타입 기반으로 동작한다.

 

var Human = function(type){
    this.type = type || 'human';
};

Human.isHuman = (human) =>{
    return human instanceof Human; // Human이 인스턴스인가? 를 리턴
}

Human.prototype.breathe = () => {
    console.log('h-a-a-a-m');
}

var Zero = (type, firstName, lastName) => {
    Human.apply(this, arguments);
    this.firstName = firstName;
    this.lastName = lastName;
}

Zero.prototype = Object.create(Human.prototype);
Zero.prototype.constructor = Zero; // 상속하는 부분
Zero.prototype.sayName = () =>{
    console.log(this.firstName + ' ' + this.lastName);
}

var oldZero = new Zero('human', 'zero', 'cho');
Human.isHuman(oldZero) // true

 

• Human 생성자 함수와 그 함수를 Zero 생성자 함수가 상속한다. 상속받는 부분을 보면 코드가 상당히 난해하다.

 

위 코드를 클래스 기반 코드로 바꿔보면

 

class Human {
    constructor(type = 'human'){
        this.type = type;
    }

    static isHuman(human) {
        return human instanceof Human;
    }
    
    breathe(){
        console.log('h-a-a-a-m');
    }
}

class Zero extends Human{
    constructor(type, firstname, lastname){
        super(type);
        this.firstname = firstname;
        this.lastname = lastname;
    }

    sayName(){
        super.breathe();
        console.log(`${this.firstname} ${this.lastname}`)
    }
}

const newZero = new Zero('human', 'zero', 'cho');
Human.isHuman(newZero);

 

• 전반적으로 class 안에 그룹화 되었다. 생성자는 constructor안으로 들어갔고 Human.isHuman 같은 클래스 함수는 static 키워드로 전환되었다. 거의 Java 문법과 유사하다고 볼 수 있다

 

프로미스와 async/await는 다음 글에서 작성하겠다.