티스토리 뷰

이 내용은 아래 링크에서 동영상 강의도 같이 보실 수 있습니다.

[ 동영상 강의 보기 ]


ECMA Script란?

ECMA스크립트(ECMAScript, ES[1])는 Ecma 인터내셔널의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어이다. 이 언어는 웹 상에서 널리 쓰이며, 흔히 자바스크립트 또는 J스크립트로도 생각할 수 있지만 두 용어는 특별한 의미 차이가 있다. ECMA스크립트와 자바스크립트, J스크립트의 관계를 이해하기 위해서는 ECMA스크립트의 역사를 알아야 한다.

[ 위키백과 ECMA Script 소개 ]


우리가 사용하는 자바스크립트는 에크마 인터내셔널에서 만든 ECMA Script 규격을 개발자가 사용할 수 있도록 각 브라우저 개발사에서 제공한 스크립트입니다.

ECMA Script라는 표준이 있기 때문에 크롬, 파이어폭스 등 다양한 브라우저에서 동일한 자바스크립트 문법을 제공하고 있는것 입니다.


[ ECMA Script 종류 ] 에서 ECMA Script의 종류를 확인할 수 있으며 2015년부터 매년 표준을 업데이트하는것을 목표로 하고 있습니다.

출판한 버전명을 사용해서 ECMA Script 6(ES6) 와 같이 불리기도 하고, ECMA Script 2015와 같이 발표년도를 붙여 사용합니다.


* ECMA Script = Javascript 라고 봐도 크게 문제가 되진 않지만 역사를 따져보면 의미가 다릅니다. 더 자세한 내용은 제가 링크해놓은 위키백과에서 확인할 수 있습니다.

왜 ECMA Script를 알아야 하는가?

Node.js의 등장으로 자바스크립트가 서버개발 등 다양한 분야에 사용되어 자바스크립트의 표준인 ECMA Script를 알고있는것이 중요해졌고, 웹 프론트엔드 개발만 할지라도 요즘 복잡해져가는 UI를 커버하기 위해 도입하는 Vue.js, React JS와 같은 라이브러리 역시 매년 발표하는 ECMA Script를 적극 반영하고 있습니다.


앞으로 같이 알아보겠지만 기존에 자바스크립트 언어의 한계때문에 피할수 없었던 콜백 지옥, 특이한 변수 선언 룰, 모듈화 미지원등이 ECMA 2015에서 해결이 되었기 때문에 ECMA Script 2015를 알고나면 앞으로 자바스크립트 개발을 좀 더 편하게 할 수 있을것입니다.


자, 그럼 ECMA Script 2015에 어떤것들이 추가되었는지 한번 알아보겠습니다.


* [ es6-cheatsheet ] 의 내용으로 ECMA Script 2015에 추가된 내용을 알아볼텐데요 모든 내용을 다루진 않고 자주 사용하는 내용만 다루려 합니다. 여기서 다루지 않는 내용은 링크를 통해 확인해주세요.

새로운 변수 할당 키워드 let, const

let

var snack = 'Meow Mix';

function getFood(food) {
    if (food) {
        var snack = 'Friskies';
        return snack;
    }
    return snack;
}

console.log(getFood(false));

위 코드를 눈으로 보고 콘솔창에 어떤 값이 출력될지 예상이 되시나요?

아마 "Meow Mix"라고 생각하시는 분도 있겠지만, 자바스크립트는 undefined가 출력됩니다.

보통 대부분의 언어에서 변수는 Block단위로 유효하기 때문에 아래와 같은 오해를 불러올수 있습니다.

// 전역변수 snack 생성 후 "MeowMix" 값으로 채움
var snack = 'Meow Mix';

function getFood(food) {
    if (food) {
        // if문 Block 안에서 유효한 snack 변수 생성 후 "Friskies" 값으로 채움
        var snack = 'Friskies';
        return snack;
       // Block이 끝났으니 snack 메모리에서 지움
    }
    // 전역변수 snack 리턴
    return snack;
}

console.log(getFood(false));

하지만 자바스크립트는 function-scope로 동작하고 호이스트되기 때문에 실제 동작은 아래와 같이 코드가 변경되어 실행됩니다.

// 전역변수 snack 생성 후 "MeowMix" 값으로 채움
var snack = 'Meow Mix';

function getFood(food) {
    // 함수 내에서 할당한 변수를 자바스크립트 엔진이 임의로 함수 최상단으로 끌어올림 ( 호이스트 )
    var snack; 

    if (food) {
        // 변수 선언은 함수 최상단에서 했으니 "Friskies"로 값만 채워줌
        snack = 'Friskies';
        return snack;
    }
    // 아무런 값이 채워지지 않은 snack 리턴 ( undefined )
    return snack;
    // 블록이 끝났으니 메모리에서 해제
}

console.log(getFood(false));

호이스팅이란 함수 내에서 선언한 변수 선언문을 함수 최상단으로 끌어올리는 호이스트가 동작하는 현상을 말하는데, 바로 위 코드에서 getFood 함수 안에 선언한 지역변수 var snack이 임의로 함수 최상단으로 올라가는 것을 말합니다.

이런 코드는 자칫 잘못하면 개발자가 예상한대로 실행되지 않기 때문에 간단한 오류 수정도 오래 걸릴 수 있습니다.

때문에 ES2015에서 let이라는 변수 선언 키워드가 추가됐습니다.

let은 다른 언어와 비슷하게 동작합니다. 사용방법도 그냥 var만 let으로 바꿔주면 됩니다.

let snack = 'Meow Mix';

function getFood(food) {
    if (food) {
        let snack = 'Friskies';
        return snack;
    }
    return snack;
}

// "MeowMix" 출력
console.log(getFood(false));

호이스팅은 아직 동작한다

let snack = 'Meow Mix';

function getFood(food) {
    if (food) {
        console.log(snack);
        let snack = 'Friskies';
        return snack;
    }
    return snack;
}

console.log(getFood(true));

getFood함수 안에있는 if문 블럭으로 들어가기 위해 파라메터를 true로 변경하고, let snack이 실행되기 전에 snack을 출력해보면 에러가 발생합니다. 

이는 아직도 호이스팅이 되고 있기 때문입니다. 위 코드는 아래와 같이 실행됩니다. 단지 명시적으로 변수를 선언하지 않았으므로 변수에 값을 집어넣을때까지 사용하지 못하는 상태가 됩니다. ( 아래서 설명할 const도 동일합니다. ) 

let snack = 'Meow Mix';

function getFood(food) {
    if (food) {
        // 블럭 상단으로 호이스트
        let snack;
        // 개발자가 선언하기 전에 참조했으므로 snack is not defined 에러 발생
        console.log(snack);
        let snack = 'Friskies';
        return snack;
    }
    return snack;
}

console.log(getFood(true));

const

자바스크립트는 상수를 지원하지 않고 있었습니다. 때문에 트릭을 사용해 상수처럼 동작하는 코드를 만들거나 개발자간 변경하지 않는다는 신뢰를 바탕으로 개발했었습니다.

ES2015에는 const라는 상수 선언 키워드가 추가되어 간단히 선언할 수 있게 되었습니다.

사용방법은 let과 마찬가지로 기존 var를 const로 변경해주면 됩니다.

const API_KEY = 'abcdefg';

// 에러 발생
API_KEY = '1234567'; 

모든것을 변경하지 못하는것은 아니다

const snacks = ['MeowMix'];

// 상수값을 변경하려 했으므로 에러 발생
snacks = ['MeowMix', 'Friskies'];

// 에러발생하지 않음
snacks.push('Friskies');

// ['MeowMix', 'Friskies'] 출력
console.log(snacks); 

변경하지 못하도록 snacks라는 상수를 선언했지만 snacks.push('Friskies') 로 값이 변경됩니다.

그 이유는 snacks는 배열의 참조값을 갖고있기 때문입니다.

이는 const의 문제가 아닌 당연한 결과이며 만약 배열 내부의 값까지 변경하지 못하도록 하려면 immutable.js와 같은 별도의 라이브러리를 사용하셔야합니다.


댓글
댓글쓰기 폼
Total
3,807
Today
0
Yesterday
1
링크
TAG
more
«   2022/08   »
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      
글 보관함