(JavaScript)ES6와 TypeScript의 공통점과 차이점 - 공통점편

ES6의 개념

ECMA 2015로도 불리는 ES6는 기존 ES5에 비해서 화살표 함수, 클래스 등 여러 문법들이 추가된 버전이다. 

 

타입스크립트의 개념

MS에서 만든 자바스크립트의 상위언어로써 서로 다른 언어는 아니다.

타입스크립트는 기존 자바스크립트가 타입을 명시하지 않아서 생기는 에러들을 타입을 명시해줌으로써 해결해줬다. 또한 인터페이스나 제네릭, Enum 등의 기능들을 추가했다.  

 

공통점

사실 타입스크립트 안에 ES6가 속해있기 때문에 공통점은 기존 ES5와 비교해 ES6에 추가된 기능들을 써보겠다.

 

1. 화살표 함수

function 키워드 대신 =>를 써서 간단하게 함수를 선언할 수 있다. 

기존 const f = function(){} 과같은 함수표현식의 단축표현이기 때문에 호이스팅 되진 않는다.

f(1); // Uncaught TypeError
const f = (prop)=>{console.log(prop)}

기존 함수와 다른점 중 하나는 바로 this가 가리키는 객체이다.  기존의 경우 함수 내부의 this가 자신을 호출하는 객체를 가리키는 것과 달리 화살표 함수안엔 this가 없기 때문에 상위 객체의 this가 바인딩 된다는 차이점이 있다.

 

2. class

기존 ES5의 프로토타입 객체생성 방식을 Java와 같이 클래스 방식의 문법을 사용하였다. 

class와 상속할때의 extends, super를 사용할 수 있다.

class SuperA{
      constructor(){
          this.superprop = 10
      }
  }


   class A extends SuperA{  
       constructor(_prop){
           super()
        this.prop = _prop
       }
       Afunc(){
           console.log(this.prop)
       }
   }
   var a = new A(1);
   a.Afunc()

 

3. 객체 리터럴 추가 기능

var obj = {
    // __proto__
    __proto__: theProtoObj,

    // ‘handler: handler’의 단축 표기
    handler,

    // Methods
    toString() {
     // Super calls
     return "d " + super.toString();
    }
};

- 해당 리터럴객체의 __proto__프로퍼티를 직접 설정함으로써 기존 ES5보다 쉽게 프로토타입 상속을 적용할 수 있다.

- 키값과 value의 객체이름이 같을때 중복된 글자를 생략할 수 있다.

- 상속된 객체의 생성자인 super객체를 사용할 수 있다.

 

4. 구조분해할당

특정 객체의 값을 더 간편하게 꺼내 올 수 있다.

var josh = {
  language: 'javascript',
  position: 'front-end',
  area: 'pangyo',
  hobby: 'singing',
  age: '102'
};

var { language, position, area, hobby, age } = josh;
console.log(language); // javascript
console.log(position); // front-end
console.log(area); // pangyo
console.log(hobby); // singing
console.log(age); // 102

 

5. 기본 파라미터, Spread파라미터

- 기본파라미터 : 파라미터에 기본값을 셋팅할 수 있다.

function f(x, y=12) {
  // y is 12 if not passed (or passed as undefined)
  return x + y;
}
f(3) // 15

- Spread파라미터 : 파라미터에 가변인자를 사용해서 배열로 치환시켜준다.

function f(x, ...y) {
  // y is an Array ["hello", true]
  return x * y.length;
}
f(3, "hello", true) // 6

 

6. Let 과 Const

- 중복선언 : var는 중복선언 가능 / let과 const는 불가능 

- 재할당 : var와 letd은 재할당 가능 / const 는 불가능

- 스코프 : var는 함수내부에 선언된 변수만 지역변수로, 나머진 전역변수 / let과 const는 블록레벨 스코프 가짐

- 호이스팅 : var는 변수 호이스팅 발생(undefined로 초기화) / let,const는 엄밀히 말하면 호이스팅되나(미리 변수 선언됨) 변수 정의하는곳에서 초기화 되기때문에 선언 전에 접근하면 에러남

- 전역객체 : var는 전역으로 선언될때 window의 프로퍼티가 됨 / let과 const는 전역으로 선언될때 window에 할당되지 않음

 

7. For-in, For-of

- For-in : 반복가능한 객체(Array, Map 등)의 요소들을 반복

- For-of : 객체의 속성 또는 배열의 요소 반복

 

8. 모듈

- js파일이 곧 모듈이된다.

- 모듈을 import / export 가능

- 모듈에서 선언한 변수나 함수를 export하지 않으면 다른곳에서 접근하지 못함