JavaScript ES201n 공부

글에 앞서

본 글은 ZeroCho님의 ECMAScript 텍스트 강좌를 인용했습니다.

ES6

JavaScript의 ES시리즈란 JavaScript의 버전을 말한다. 최신 Javascript는 var부터 모든것들이 바뀌고 편의성이 개선되었다고 한다.

const, let

var을 대체하는 이 두 가지는 함수의 스코프를 따르는것이 아닌 블록 스코프를 따른다. var은 어느곳에서 선언해도 최상단으로 끌어올려지는 '호이스팅'이라는 개념때문에 개발자가 예기치 못한 상황을 많이 맞이하였지만, 이 const와 let은 그런 부분에 대해서 철저하게 반응하여서 선언한 곳보다 위에서 접근하는 것이 불가능하다. 블록이란 '{}'를 의미한다.

    (function () {
        console.log(x);
        var x = 10;
    })();

에러가 나지 않음.

    (() =>{
        console.log(x);
        const z = 10;
    }) ();

에러가 발생함.

const, let은 전역 스코프에서 선언 시 var과는 다르게 window, global에 등록되지 않는다.

const, let간의 차이

const는 선언된 값을 = 을 통한 재 선언이 불가능하다. 하지만 선언된 그 주소값만 고정하는 것이지 그 주소의 요소가 변환되는것은 상관이 없다. 따라서 필요에 따라 값을 바꾸어주는 것이 가능하다. let은 그 블록 내에서만 사용하게 되어있다. 그리고 const와는 다르게 자유로이 변환이 가능하다.

요약하면 기존 var의 기능은 let이 하고 const는 보다 제한적인 상황에 사용한다.

object(객체)의 변화

    var sayYeah = function () {
        alert('yeah')
    };
    var a = 1;
    var b = 'Wow';
    var object = {
        sayHello: function() {
            alert('Hello');
        },
        sayYeah: sayYeah
    };
    object[a + 3] = 'four';
    object['say' + b] = function() {
        alert('Wow');
    };

기존 방식

    const a = 1;
    const b = 'Wow';
    const sayYeah = () => {
        alert('Yeah');
    };
    const object2 = {
        sayHello() {
            alert('hello');
        },
        sayYeah,
        [a + 3]: 'four',
        ['say' + b]() {
            alert('Wow');
        }
    };

ES2015 방식

sayYeah는 yeah라는 문자열을 출력해주는 함수이다. 그리고 그 함수를 표현식으로 작성하였다. 두 가지 모두 object를 가지고있고 object내에는 sayHello라는 함수를 가지고 있다. 차이점을 살펴보자면 화살표 함수를 통한 function이라는 구문의 생략, 객체 내에서 함수를 불러올때도 function이 생략된다.

요약하자면 function이라는 구문을 생략하기 위한 시스템적 변화를 알 수 있다. 정도로 넘어가면 될 것 같다.

함수의 변화

    var object = {
        name: 'Kim',
        friends: ['One', 'Two', 'Three'],
        alertFriends: function () {
            var self = this;
            this.friends.forEach(function(friend) {
                alert(self.name + 'and' + friend);
            });
        }

    };
    object.alertFriends();

기존 함수 방식

    const object2 = {
        name: 'Kim',
        friends: ['One', 'Two', 'Three'],
        alertFriends() {
            this.friends.forEach((friend) => {
                alert(this.name + ' and ' + friend);
            });
        }
    };
    object2.alertFriends();

원래는 함수 내에서 함수를 선언 바깥함수에서 this로 저장된 값을 self라는 곳에 따로 저장을 해서 두번의 번거로운 작업을 거쳤는데 이제는 그럴 필요없이 바깥함수에서 선언된 this를 그대로 안쪽에서도 사용 할 수 있다.

그리고 return만 있는 간소한 함수를 더 간소하게 바꾸었다.

    var long = function (x){
        return x;
    }

    const long = (x) => x;