[Javascript] ECMAScript 6 (ES6)_1

💡 ES5와 ES6의 차이

ES5와 ES6의 대표적인 차이점

• 변수 선언
• 화살표 함수, this
• 템플릿 리터럴
• 모듈
• 클래스

 

1. ES5 vardml 문제점
    - var 중복 선언이 가능
    - var는 불록 단위 변수가 아님 (함수나 전역 단위만 지정 가능)
    - var는 호이스팅(선 사용 후 선언) 가능 

2. 블록 단위의 let 등장
    - let은 중복 선언 불가능
    - let은 블록 단위의 변수
    - let은 호이스팅 불가능

3. 상수를 정의하는 const 키워드
    - 상수를 정의할 때는 선언과 동시에 초기화 필수
    - let과 동일하게 블록 단위 변수, 호이스팅을 지원하지 않음
    - const는 상수이기 때문에 새로운 값을 할당할 수 없음
    - const 선언 시 변수명은 대문자로 지정

4. const 키워드와 객체
    - const로 객체를 선언 시 객체 내용 변경 가능
    - 원시 값인 변수는 재할당 없이 변수 값을 변경할 수 없음
    - 객체 속성 값들은 재할당 없이 직접 변경 가능
    - const: 재할당 금지, 불변 의미X

5. ES6 변수 선언
    - 기본적으로 const를 사용하여 변수를 선언하되 재할당이 필요한 변수는 let으로 선언
    - var를 사용하지 않음
    - let 변수를 선언할 때는 최소한의 단위 선언
    - 상수와 객체는 const를 사용하여 선언

6. Template Literal
    - ES6에서 도입된 새로운 문자열 표기법
    - 멀티라인 문자열, 표현식 삽입, 태그드 탬플릿을 지원
    - 백틱(`)을 사용하여 선언
    - ${ } 이용해서 선언된 변수를 문자열에 직접 삽입 가능 

7. 지수 연산자
    - 거듭제곱을 계산해주는 연산자
    - **로 표시
    - Math.pow()랑 동일한 기능

8. 논리 연산자를 이용한 단축 평가
    - &&, || 결과를 결정하는 값을 반환
    - ex) 'cat' && 'dog' = 'dog'
    - ex) 'cat' || 'dog' = 'cat'
    - true || anything = true
      false || anything = anything
    - true && anything = anything
      false && anything = false

9. 객체에 추가된 기능
    - 속성의 축약 표현
        var obj = {
            x: 1,
            y: 2
        }
        //ES6
        let x = 1, y = 2;
        const obj = {x, y};
    - 계산된 프로퍼티 이름
      Templateliteral 표현식 삽입 기능을 이용하여 동적으로 속성값을 만들 수 있음
    - 메소드의 축약 표현

10. ES6에서 새로 도입된 class
    - ES5에서는 객체의 상속을 하려면 무조건 프로토타입의 상속을 이용
    - 객체지향 언어에 익숙한 개발자들이 프로토타입 기반 개발에 어려움을 느껴 ES6부터는 class가 도입 됨 
    - class를 사용한다고 프로토타입 기반을 포기하는 것은 아님
    - ES5의 객체 생성방식에 하나의 방식이 추가된 것
    - 기존 객체 생성 방식보다 편하게 상속 구현 가능 (extends, super 키워드 사용 가능)
    - class의 선언 
      class 객체명 {
            //생성자 함수는 반드시 constructor 사용
            constructor(매개변수){
                초기화과정;
            }
            프로토타입 메소드{

            }
            정적 메소드{

            }
            get getter 메소드(){

            }
            set setter 메소드(){

            }
      }
    - class에는 필드 지정 불가능, 메소드만 선언 가능

11. class의 상속
    - extends 키워드를 사용하여 상속받아 새로운 클래스를 정의
    - 생성 함수를 상속 받아 동적으로 클래스 생성 가능

12. ES6 화살표 함수
    - ES6 이전의 메소드들은 모두 호출 가능하면서 생성자 함수로 사용 가능하기 때문에 모든 메소드들에 불필요하게 prototype 객체가 생성되는 경우가 발생
    - 호출 가능하지만 생성자 함수로는 사용 불가능한 화살표 함수 등장
    - 화살표 메소드의 정의
        function 키워드 대신 =>
    //ES5
    function add(a,b){
        return a + b;
    }
    //ES6 화살표 함수
    const add = (a,b) => {
        return a + b;
    }
    const add = (a, b) => (
        a + b;
    )
    const print = a =>{
        console.log(a);
    }
    const add = () => {
        console.log(1 + 2);
    }

13. 화살표 함수와 일반 함수의 차이점
    - 화살표 함수는 생성자 함수로 사용 불가능
    - 화살표 함수는 prototype 생성되지 않음
    - 중복된 매개변수 이름 사용 불가능
    - 화살표 함수는 arguments, this, super, new.target 바인딩을 갖지 않음

    - 화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않음

    - 화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져  옴

14. Rest 파라미터
    - ...키워드를 사용하여 함수에 전달된 매개변수 목록을 배열로 전달 받는다.

15. 매개변수의 기본 값 지정
    - ES6에서 함수를 정의할 때 매개변수의 기본 값 지정 가능
    function add (a = 1, b = 1){
        return a + b;
    }
    - Rest Parameter에는 기본 값 지정 불가능

16. 배열의 고차원 함수
    - concat : 원본 배열 마지막에 새로운 요소를 추가한 배열 반환
    - map : 배열의 요소를 하나씩 꺼내서 인수로 전달된 콜백 함수를 반복 호출
            콜백 함수의 반환 값들로 이루어진 새로운 배열 반환
    - filter : 배열의 요소를 하나씩 꺼내서 인수로 전달된 콜백 함수를 반복 호출
               콜백 함수의 반환 값이 true인 요소로만 이루어진 새로운 배열 반환