1주차. 30분만에 보는 ES6 필수 기초 문법

1주차. 30분만에 보는 ES6 필수 기초 문법

요즘 주마다 한번씩 ES6에 관한 세미나를 방문하며 깊이있는 정보를 듣고 있다.(내가 깊이있게 공부한게 아니라…) 때문에 정리할겸 전반적인 ES6에 대한 글을 쓰기로 했다. 타겟은 ES6에 관심이 있으면서 빠르게 훑어보고 싶은 분을 위해서~

내가 생각하는 ES6의 주제어는 '명확성’이라는 개념에 맞추면 좀 더 이해하기 편해진다. 기존의 자바스크립트에 존재했던 암묵적 지시어나 명확하지 않는 개념, 문법, 함수들을 더 명확하게 바꾸어 개발의 생산성을 높일뿐만 아니라 타언어 개발자들이 접근하기 쉬워졌다. 먼저 기본문법 부터 살펴보자.

1. 기본 ES6 문법

let

• 기존의 var를 대체하는 키워드
• 기존의 함수 스코프 변수인 var는 전역 범위로 스크립트 내 어디서건 참조 가능하다.

var var1 = 1;
function varTest() {
    console.log(var1); //1
    if(var1 == 1) {
        var var2 = 2;
    }
    console.log(var2); //2
}

• 반면에 블록 스코프 변수인 let은 자신을 정의한 블록에서만 접근 가능하다.

let let1 = 1;
function letTest() {
    console.log(let1); //1
    if(let1 == 1) {
        let let2 = 2;
    }
    console.log(let2); //Reference Error Exception
}

• 동일한 변수명으로 변수를 재선언시 let은 'Type Error’를 발생시킨다.
• 따라서 보다 명확한 변수사용으로 디버깅시 오해의 소지가 줄어들며 개발자의 생산성을 향상 시켜준다.

const

• 기존에는 따로 상수용 변수가 없어 'TEST_CONST’와 같이 대문자를 사용하여 구분해 주었다.
• ES6에서는 const를 사용하여 상수형으로 코딩이 가능하다.

const TEST_CONST = 100;
console.log(TEST_CONST); //100
testConst = 1; //읽기 전용 변수이므로 값이 할당되지 않는다.
console.log(TEST_CONST); //100

• 담긴 값이 불변을 뜻하는게 아니라, 단지 변수의 식별자가 재할당 될 수 없다.

const ME = {
    "name": "ES6"
}
console.log(ME.name); //ES6
ME.name = "ES7";
console.log(ME.name); //ES7, 객체 값 재할당
ME = {}; //변수 자체는 상수값으로 수정되지 않는다.
console.log(ME); //{ name: 'ES7' }

• 변수 스코프는 let과 동일하다.

import, export

• Java, C++를 쓰시는 분이라면 대략 감이 잡히시리라~

• import - 다른 스크립트의 특정 함수, 객체, primitives를 사용하기 위해 들여오는 키워드

• export - 반대로 스크립트 내의 특정 함수, 객체, primitives를 내보내는 키워드

• name을 사용한 export와 import

//math.js
function plus(x, y) {
  return x + y;
}
const doublePI = Math.PI * 2;
export { plus, doublePI };

//다른 스크립트에서(impotMath.js)
import { plus, doublePI } from 'math';
console.log(plus(3, 4)); //7
console.log(doublePI); //6.283185307179586

• default를 사용한 export와 import

//my.js
export default function plus(x, y) {
  return x + y;
}

//다른 스크립트에서(importMy.js)
import plus from 'my';
console.log(plus(1, 1)); //2

• 그외에 import 표현식

import * as name from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";

• 그외에 export 표현식

export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN;
export let name1 = …, name2 = …, …, nameN;

export { name1 as default, … };
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;

Note: 이 기능은 현재 Babel, Traceur Compiler, Rollup과 같은 transpilers를 이용하여 사용할 수 있다.

arrow function

• 기존의 function보다 빠르며 간결한 구문을 보여주는 함수이다.
• 항상 익명함수이다.
• 생성자를 사용할 수 없다.

//이전 방식
var plus = function(a, b) {
    var result = a + b;
    return result;
}

//arrow function 방식
let plus = (a, b) => {
    let result = a + b;
    return result;
}

• 가장 중요한 특징 중 첫번째는 간결한 구문이다.

var result = function(a, b) { return a * b; }
var result2 = (a, b) => a * b;

• 두번쨰는 arrow function의 this값은 해당 스코프의 this값과 같다.
• 기존의 ES5에서의 this는 주로 self(that)나 bind를 사용하여 this를 속박하고 있었다.

function phone() {
    var self = this,
    name = "Galaxy s",
    version = 6;

    versionUp = function() {
        console.log(this);
        self.version++;
    };
}

• ES6에서는 이러한 this의 번거로움을 줄이고 해당 arrow function을 감싸고 있는 블록을 this로 가리킨다.

function phone(){
  this.sName = "Galaxy s";
  this.sVersion = 0;

test => {
    console.log(this);
    this.version++;
};
}

• 무엇보다 arrow function은 기존의 function을 사용하는 것보다 좋은 성능을 보여준다.(이 부분은 추후 따로 챕터를 만들어 다루겠다)