ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • ES6와 ES5 비교
    ES6 2020. 2. 26. 17:55


    ES6=ECMASCRIPT 6 

     *ES5의 문제점  
     1. 함수 레벨 스코프  
     2. var 키워드 생략 가능 
     3. 변수 중복 허용 
     4. 변수 호이스팅(선언은 나중에하고 실행 가능) 
     5. ==, === 

    ES5

    • javascript는 함수 단위로만 scope가 잡힌다.

     

     

     

    • var는 생략이 가능하다. 단 전역변수로만 쓸 수 있다.

     

     

     

    • hosting이 가능하다.

     

     

     

     

     

    • javascript는 동적 Typing 언어이다. 자료형이 유동적으로 변한다.

     

     

     

    • 1.함수 중에서는 익명 함수와 기명 함수로 표현해서 쓸 수 있다.
      2.또한 즉시 실행 함수로 선언을 하자마자 바로 실행하는 함수가 있는데 다른 곳에 재상용을 하지 않을 때 사용한다.
      3.또한 함수 표현식에 의한 명시적 함수 호출이 가능하다.

    익명함수와 기명함수
    app()을 통해 호출한다.

    • 1급객체 : 매개변수로 전달할 수 있고, 변수에 할당 할수 있고, 리턴값으로 전달할 수 있는 객체를 말한다.
      -자바스크립트에서 함수도 1급 객체이다.-  return을 함수로 return하는 것을 1급 객체라고한다.

    1급 객체 

    *Closure

    클로저는 독립적인 (자유) 변수를 가리키는 함수이다. 또는, 클로저 안에 정의된 함수는 만들어진 환경을 ‘기억한다’.

    1급 객체에서 return에 사용되어지는 함수가 지역변수를 전부 사용해야만 자원반납이 이루어지는데 이러한 반환되어지는

    함수를 closure라고 한다. 

     

     

    환경을 기억하는 closure

    • for문에 전역변수를 선언하고 배열에 해당 전역변수를 가지고 있는 함수를 집어 넣게 되면 
      환경을 기억하는 특성 때문에 전역변수는 기존의 값에 더해져 출력된다.

     

    출력값

     

    *전역변수가 중첩되지 않도록 하려면

    전역변수가 중첩되지 않게 하려면 함수의 매개변수에 전역변수를 준다.

     

     

     

     

    ES6

    ES5 var의 문제점 

    변수 중복이 허용 된다. 변수 중복이 허용이 되면 코드가 길어지거나 코드를 합치게 될때 변수의 중복으로 제대로 기능을 하지 않게 된다. 하지만 어떠한 오류메세지도 나오지 않기 때문에 고치기 힘들다는 문제점이 생기게 됐다.

     

    • ES5의 var 문제점을 해결 하기 위해 let과 const를 사용한다. 

    • let은 또한 java의 변수 선언처럼 전역변수를 선언하고 {}안에 변수를 선언하면 지역 변수로 선언하게 된다.

     

     

    • ES5의 유동적인 변수 선언에 반해 ES6의 const는 한번 선언하면 추가로 수정하지 못하도록 고정한다. 

     

     

    • template literal 방식 `(backtick)를 사용한다.

     

    • ES6부터 화살표 함수라는 것이 만들어졌다. 람다식을 사용한다.
      함수이름() =>{...}로 사용한다.

    1.변수가 1개

    ES5와 ES6비교

    2. 변수가 2개 이상+ 문장이 1개인 경우

     

    3.JSON 객체를 이용해 표현하기 

     

    'ES6' 카테고리의 다른 글

    CommonJs,AMD(Asynchronuous Module Definision)  (0) 2020.03.09
    객체 선언 방법  (0) 2020.03.09
    디스트럭처링  (0) 2020.03.09
    계산된 프로퍼티 computed property name  (0) 2020.02.29

    댓글

Designed by Tistory.