자바스크립트 - ES6문법

ECMA Script?

• 자바스크립트는 1995년 넷스케이프 웹 브라우져에서 웹페이지에 동적인 요소를 구현하기 위해서 발명 됨.
• 이후 많은 브라우져를 지원하면서 자바스크립트가 공통적으로 잘 작동하기 위해서 표준 규격이 필요하게됨.
• Ecma 인터내셔널에 의해 제정된 ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어.
• 스크립트 언어가 준수해야 하는 규칙, 세부 사항 및 지침을 제공한다.

JavaScript는 ECMAScript 사양을 준수하는 범용 스크립팅 언어이다.

ECMA Script 지원이 상이한 이유

• JavaScript 엔진에는 Google Chrome의 V8, Mozilla Firefox의 SpiderMonkey와 같이 여러 종류가 존재함.
• 새로운 버전의 ECMAScript를 발표한다고해서 모든 JavaScript 엔진이 갑자기 새로운 기능을 추가하지 않는다.
• 해당 조직의 업데이트에 따라 달렸음.

ES6

• ECMAScript2015로 알려져있는 ES6는 2009년도에 표준화된 ES5 이후로 언어 기능에 대한 첫 업데이트며 현재 많은 부라우저에서 지원한다. (하지만 cross browing 이슈 때문에 실제로 babel과 같은 트랜스 파일러를 같이 사용한다.)
• ES5에 비해 깔끔한 문법을 사용하며 직관적이로 사용하기 편리한 문법들이 많이 나옴.

---

var, let, const

종류	의미
var	function scope
let	block scope
const	block scope + immutable(배열, 오브젝트 값 변경 제외)

변수의 범위는 최대한 작게 가지고 변하지 않는 변수는 상수로 선언해야 가독성이 높아진다.

var

function varFunc() {
    if (true) {
        var innerIfVar = 'innerIfVar';
    }
    console.log('innerIfVar :: ', innerIfVar); // innerIfVar ::  innerIfVar
}

varFunc();

let

function letFunc() {
    if (true) {
        let innerIfLet = 'innerIfLet';
    }
    console.log('innerIfLet :: ', innerIfLet); // ReferenceError: innerIfLet is not defined
}

letFunc();

const

function constFunc() {
    if (true) {
        const innerIfConst = 'innerIfConst';
        innerIfConst = 'another value'; // TypeError: Assignment to constant variable.
    }
    console.log('innerIfConst :: ', innerIfConst); // ReferenceError: innerIfConst is not defined
    
}

constFunc();

화살표 함수 () => {}

• ES5에서는 함수 선언시 function키워드를 명시해야 하지만 ES6에서는 키워드 생략 후 화살표(=>)로 정의가능.
• 파라미터 없을시 괄호 필수.
• 파라미터 하나만 있을시 괄호 생략 가능.
• 파라미터가 2개 이상일시 괄호 필수.
• 한줄 표현식 사용시 return생략 가능

ES5

var es5Func = function() {
    console.log('ES5 function !!');
};

var textPrint = function(text) {
    console.log(text);
}

var sum = function(num1, num2) {
    return num1 + num2;
}

ES6

const es6Func = () => {
    console.log('ES5 function !!');
};

// 괄호 생략 가능
const textPrint = text => {
    console.log(text);
}

const sum = (num1, num2) => {
    return sum1 + sum2;
}

// 한줄 표현식일시 괄호와 return 생략 가능
const sum2 = (num1, num2) => num1 + num2;
console.log(sum2(1, 2)); // 3

화살표 함수는 축약형이기도 하지만 this 바인딩에도 큰 차이점이 있음.

ES5

• introduce의 경우 this(Person)에 바인딩(메서드 실행 문맥)되어 이름을 정상 출력함.
• introduce 내부의 getMyAge의 경우 Person에 바인딩이 되지 않아(함수 실행 문맥) this가 전역(global, window)에 바인딩 되었고 전역에는 age라는 변수가 없으므로 undefined가 출력됨.
• 이렇게 this문맥을 찾기 쉽지 않아 언어 사용자들이 혼동하게됨.

function Person(name, age) {
    this.name = name;
    this.age = age;

    this.introduce = function() {
        var getMyAge = function() {
            console.log(this.age); // 위의 age가 아닌 undefined가 출력됨.
            return this.age;
        }
        return 'my name is ' + this.name + ' my age is ' + getMyAge();
    }
}

var person = new Person('park jin', 31);
console.log(person.introduce());

• 위의 문제를 해결하려면 this를 변수에 가지고있어야한다.

function Person(name, age) {
    this.name = name;
    this.age = age;

    this.introduce = function() {
        // this(Person)를 변수에 저장한다.
        var that = this;
        var getMyAge = function() {
            // this가 아닌 that변수로 접근한다.
            console.log(that.age); // 31
            return that.age;
        }
        return 'my name is ' + this.name + ' my age is ' + getMyAge();
    }
}

var person = new Person('park jin', 31);
console.log(person.introduce()); // my name is park jin my age is 31

ES6

• 내부에서 this를 동일하게 바인딩 시켜 직관적으로 사용할 수 있게 변경함.

function Person(name, age) {
    this.name = name;
    this.age = age;

    this.introduce = function() {
        // 화살표형 함수 사용시 this를 직관적으로 사용할 수 있다. 
        var getMyAge = () => {
            console.log(this.age); // 31
            return this.age;
        }
        return 'my name is ' + this.name + ' my age is ' + getMyAge();
    }
}

var person = new Person('park jin', 31);
console.log(person.introduce()); // my name is park jin my age is 31

템플릿 리터럴

• 기존 자바스크립트에서 변수와 문자열을 같이 보여주기 위해서는 문자 결합 연산자인 + 를 사용함.
• 템플릿 리터럴은 ` (백틱) 을 사용해 문자열 및 변수를 감쌀수 있다.

ES5

function Person(name, age) {
    this.name = name;
    this.age = age;

    this.introduce = function() {
        return 'my name is "' + this.name + '" my age is ' + this.age;
    }
}

var person = new Person('park jin', 31);
console.log(person.introduce()); // my name is "park jin" my age is 31

ES6

function Person(name, age) {
    this.name = name;
    this.age = age;

    this.introduce = function() {
        return `my name is "${this.name}" my age is ${this.age}`;;
    }
}

var person = new Person('park jin', 31);
console.log(person.introduce()); // my name is "park jin" my age is 32

비구조화 할당

• 배열과 객체에 패턴 매칭을 통한 데이터 바인딩을 제공한다.
• 객체안의 필드를 손쉽게 꺼내어 변수로 대입할 수 있는 문법이다.

ES5

var person = {
    name: 'Park Jin',
    age: 31
};

var name = person.name;
var age = person.age;

console.log('name :: ', name); // Park Jin
console.log('age :: ', age); // 31

ES6

const person = {
    name: 'Park Jin',
    age: 31
};

const { name, age } = person;

console.log('name :: ', name); // name ::  Park Jin
console.log('age :: ', age); // age ::  31

// 다른 이름으로 할당하기
const { name: personName, age: personAge } = person;

console.log('personName :: ', personName); // personName ::  Park Jin
console.log('personAge :: ', personAge); // personAge ::  31

• 객체를 비구조화한 후 함수의 인자로 넘길 수도 있다.

const person = {
    name: 'Park Jin',
    age: 31
};

function printPersonName({ name }) {
    console.log('name :: ', name); // name ::  Park Jin
}

printPersonName(person);

단축된 프로퍼티 초기화

//ES5
var name = 'Park Jin';
var age = 31;

var person = {
    name: name,
    age: age
}


// ES6
const name = 'Park Jin';
const age = 31;

var person = {
    name,
    age
}

간결한 메서드

//ES5
var person = {
    name: 'Park Jin',
    introduce: function() {
        return 'my name is ' + this.name;
    }
}


// ES6
const person = {
    name: 'Park Jin',
    introduce() {
        return 'my name is ' + this.name;
    }
}

 

 

---

출처

https://wormwlrm.github.io/2018/10/03/What-is-the-difference-between-javascript-and-ecmascript.html

JavaScript와 ECMAScript는 무슨 차이점이 있을까? - 재그지그의 개발 블로그

https://takeuu.tistory.com/93

0. ECMAScript, ES6란?

https://medium.com/sjk5766/ecma-script-es-%EC%A0%95%EB%A6%AC%EC%99%80-%EB%B2%84%EC%A0%84%EB%B3%84-%ED%8A%B9%EC%A7%95-77715f696dcb

ECMA Script.. ES.. 정리와 버전별 특징

https://itstory.tk/entry/JavaScript-ES6-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC

[JavaScript] ES6 문법 정리