JavaScript의 ES란?, ES5/ES6 문법 차이 22_11_27

WIL

개발자를 되기위해 공부를 시작한지 이제 한달이 약 2주가 지나간다. 백엔드 개발자를 꿈꾸면서 현재 Node.js API에 대하여 익숙해지려고 노력하고 있는데, Linux의 tree 구조와 비슷하게 얽혀버린 API를 풀어나가면서 아직은 어렵게만 느껴지고 있다. 그래도 꾸준히 한개씩 배워나가니 확실하게 늘고있다는 것을 느낀다. 첫 project로 아무것도 모르는 상태로 풀스택을 진행 했을때를 생각하면 그렇다. 앞으로도 한발한발 나아가 데려가고 싶은 개발자가 될것이다 !

---

javascript ES

자바스크립트라는 어떠한 프로그램을 만들려고 탄생했다기 보다는 웹 페이지에 입력값에 대한 유효성 검사(데이터가 공란인지 아닌지 등등)와 같은 페이지의 동적제어가 주된 목적이며, 그와 더불어 짧은 개발 기간(넷 스케이프 사의 새로운 브라우저에 탑재 예정) 때문에 설계상 꼼꼼하지 못하다고 생각된다. 썬 마이크로시스템즈의 자바와 구문이 유사한 점도 있지만, 이는 Java와 Javascript언어 모두 C 언어의 기본 구문에 바탕을 뒀기 때문이다. 이름과 구문외에는 자바보다 셀프나 스킴과 유사성이 많다. javascript는 ECMAscript의 표준 사양을 가장 잘 구현한 언어로 인정받고 있으며 ECMAScript 5(ES5)까지는 대부분의 브라우저에서 기본적으로 지원되었으나 ECMAScript 6 이후부터는 브라우저 호환성을 위해 트랜스파일러로 컴파일된다.
.
.

결과부터 말하면 ES라는 것은 'Javascript의 표준 규격'을 의미하는데, 이것이 탄생한 배경에는 '브라우저 전쟁'이라고 하는 웹 브라우저 시장에서의 점유율 싸움이 있었다. 넷스케이프 사에서 개발한 Javascript가 선풍적인 인기를 끌기 시작하자 마이크로소프트 사에서도 IE 3(우리가 알고있는 인터넷 익스플로러)에 JScript라는 이름으로 자바스크립트를 탑재했지만, 실제적으로는 둘의 내용이 매우 달라서 같은 기능을 구현하더라도 개발자들이 해야할 일과 시간이 훨씬 늘어나게 되었다.

실제로 서로 사용자를 끌어들이기 위해 이것저것 기능을 추가하다 보니 Javascript와 JScript는 점점 다 달라지는 경향을 보였고, 이에 보다못한 European Computer Manufacturers Association (ECMA, 현 ECMA International)에서 Javascript에 대한 표준을 정하게 되었다.

또, ECMA에서는 Javascript의 표준만 정하는게 아닌 다른 표준안도 정하기 때문에 그것들과 구분하기 위해 숫자를 붙였고 이것이 262가 되었다. 즉, ECMA 262는 자바스크립트의 표준 규격이라고 생각하면 된다. 현재 우리가 ES라고 부르는 것은 ECMA Script의 약자이며, ES5는 ECMA Script 5의 규격을 따른다고 생각하면 된다.

(ECMA가 다루는 표준으로, 262가 붙은 ECMA스크립트 언어 규격이 우리가 흔히 부르는 Javascript이다.)

ES5/ES6 문법 차이

변수의 선언 방식 ❗

function scopeVariableWindow() {
    var var1 = 1;

    if(true){
        var var2 = 2;
    }
    console.log(var1);  // 출력결과 : 1
    console.log(var2);  // 출력결과 : 2
}

ES5 의 변수 선언시 var는 Function Scope를 사용한다.

var 는 block scope가 아닌 function scope이기 때문에 if 조건문의 block 과는 상관없이 외부에서도 접근이 가능하다. 기존의 var keywork의 scope는 전역범위로 스크립트 파일 어디서나 참조하여 사용이 가능하다.
var keyworkd의 장점은 함수 호이스팅이 되기 때문에 var로 생성안하고 그냥 변수로 사용해도 Error없이 생성되어 사용이 가능하였다.
하지만 이러한 경우 스크립트 파일이 많아지거나 길어질 경우 개발자가 의도하지 않게 동일한 변수명에 다른 값을 넣어서 시스템에 문제를 발생시킬수 있는 여지가 있다.

---

function scopeVariableBlock() {
    let let1 = 1;

    // let2변수는 block scope이기때문에 if문 안에서만 유효하다.
    if(true){
        let let2 = 2;
    }
    console.log(let1);  // 출력 결과 : 1
    console.log(let2);  // 출력 결과 : Uncaught ReferenceError: let2 is not defined
}

ES6 에서의 변수 선언시 let과 const가 존재 하며 이 두가지의 변수 선언에 사용되는 문법은 기존 ES5의
var와 달리 Block Scope를 따른다.

let , const는 function scope가 아닌 block scope이기 떄문에 if 문안에있는 block에서 생성된 변수 b 는 if문이 끝남과 동시에 사라지기 때문에 외부에서 b를 참조할수 없어 Reference Error가 발생한다.

let - block scope로 일반 변수 생성시 사용 , 중복 선언시 Type Error를 발생시킨다.
장점은 잘못된 변수 사용으로 인해 발생하는 오해의 소지를 줄여주기때문에 정확한 사용으로 생산성

const - block scope로 JavaScript에서 상수용 변수로 사용된다 , 처음 생성시 초기값을 지정해주어야 한다.

• 주의할 점은 변수에 담긴 값이 불변이라기보다는 재할당이 불가능하다는 의미이다.

  함수(function) 선언 방식의 변경 ❗

  		function plus (a,b) { return a+b; }
     var plus = function(a,b) { return a+b; }

  ES6 함수 선언방식

     let plus = (a,b) => {return a+b} //한눈에 비교해도 간결해진것을 확인 가능.

문자열 처리(템플릿 엔진 문자열) ❗

템플릿 문자열은 템플릿의미 그대로 이미 준비되어있는 틀안에 해당되는 값만 상황에 알맞게 넣어서 사용하는 문자열을 의미한다.

var name = "금도끼";
var age = 27;
var country = "대한민국";

var msg = "안녕하세요 저는 " + name + "입니다 나이는 " + age + "살이며 \"" + country + "\"에 살고있습니다.";
console.log(msg);

' '(Single quotation) , " "( Double quotation) 으로 구분해야해서 + 연산자로 항상 이어줘야 했고 길어지면 불편함을 느낄수 있고 복잡하다. 또한 SIngle quotation과 Double quotation을 자유롭게 사용하지 못하고 맞춰서 사용해야 한다

위의 소스코드에서는 자기소개를 하기위한 msg를 작성하고 쌍따옴표를 표현하기위해 역슬래쉬까지 사용하였다. 또한 비동기 통신이후 동적으로 HTML태그를 그려주기위해 밑에있는 소스처럼 작성을 하게 된다. 지금은 간단한 템플릿에대하여 작성했지만 좀더 복잡해진다면 원하지 않은 실수를 야기할 수 있다.

  var dynamicElement = '';
  dynamicElement += "<p>" + name + "</p>";
  dynamicElement += "<p>" + age + "</p>";
  dynamicElement += "<p>" + country + "</p>";

ES6로 넘어오면서 ``(백틱 or 억음 부호) 와 ${}를 통해 한줄로 표현가능하며 Single quotation 과 Double quotation을 자유롭게 사용할 수 있다.

위 코드를 ES6 템플릿 엔진에 맞춰보자면,

let name = "금도끼";
let age = 27;
let country = "대한민국";
let msg = `안녕하세요 저는 ${name}입니다 나이는 ${age}살이며 "${country}"에 살고있습니다.`;
</source>
<source lang="javascript>
let dynamicElement = `
    <p>${name}</p>
    <p>${age}</p>
    <p>${country}</p>
`;

객체의 변화 ❗

메소드를 줄여서 사용할 수 있다. ES5의 객체 내부함수에서는 의미없는 function keywork를 항상 적어줘서 함수라는것을 명시해줘야 했지만, ES6에서는 일반 메서드처럼 name()과 같이 사용할 수있으며 넣고자 하는 변수와 object의 key가 같다면 변수명만 적어주어도 변수명으로 key:value가 생성된다.

let getInfo = () => {
    let name = "금도끼";
    return name;
};
let age = 33;
let object = {
    getAge(){
        return age;
    },
    getInfo,
    ["getInfo" + age] :"getInfo" + age