Default Javascripts(1)

Default Javascripts For React

기본적인 Javascript 문법과, ES6 문법을 살펴보자. JavaScript 는 사용하기는 쉽지만, 작성된 코드를 읽기는 쉽지 않은 것 같다. 너무나 다양한 사용법이 있고, 문법이 있기 때문이다. 오히려 겹치는 문법 요소들을 삭제해야 할 필요성도 느낀다.


Variables and Scope

선언과 Scope

  • var: function scope
  • let: block scope
  • const: block scope, referece 변환X, 내용 변환 O
  • hoisting: 모든 선언은 scope의 최상단으로 끌어올려짐, 단 함수표현식은 정의이기 때문에 끌어올려지지 않음
  • 전역 객체: 전역 scope의 변수들은 모두 전역 객체의 멤버임

데이터형

  • 각 데이터형은 window의 attribute임
  • Null, undefined, Number, String, Symbol, Object, Boolean: 7개는 primitive
  • primitive의 경우 Object가 아닌 것으로 간주

리터럴

  • Array, Boolean, Floating point, Integer, Object, String
  • Regular Expression /123.+/
  • 각 리터럴은 상호 변환이 가능하고, 연산도 가능하다.

Control Flow

  • if…else 문법은 C와 동일
  • false, null, undefined, 0, ""가 거짓으로 취급됨
  • switch…case 문법 역시 C와 동일
  • try..catch, throw 문법은 C와 동일. 단 finally가 있음
  • 비동기 처리를 위해 Promise 라는 객체가 있음

반복문

JavaScript 반복문의 대부분의 문법은 C나 C++과 동일하다. 몇 가지 JavaScript 만의 독특한 문법 요소들만 살펴보려고 한다.

For statement

  • for loop의 block scope은 initialize statement 부터 시작된다. C와 동일하게 사용하려면, let을 사용해야 한다.
  • var는 function scope 이므로 block 바깥에서도 접근이 가능하다.
  • 반복문의 interative variable를 closure로 사용하면, 가장 마지막 값으로만 읽혀진다. 즉 의도한 동작을 하지 않는다.

Labeled 반복문

  • labled 반복문을 통해서 break나 continue 대상을 지정할 수 있다. 예를들면 아래와 같다.
outer: for (let i = 0; i < N; i++) {
  for (let j = 0; j < M; j++) {
    if(isCondition()) break outer;
    doSomething();
  }
}

for..in 과 for..of

  • for..in 은 JavaScript Object의 Key를 iteration한다.
  • for..of 는 iterable Object의 Value를 iteration한다.
  • 일반적인 JavaScript Object에 for..in을 사용하고,
  • Array, Map, Set 등에는 for..of 를 사용하면 된다.

객체와 함수

함수

함수 선언에는 function예약어가 사용된다. C와 사용법은 동일한데 아래 두 가지가 다르다.

  • return 타입을 기록하지 않는다.
  • 이름은 생략해도 무방하다.
  • 함수 선언 statement는 function 객체를 리턴한다. 그러므로 C++의 lambda 함수와 같은 함수 표현식 형태로 항상 사용할 수 있다.
  • return 구문이 없는 함수를 호출할 경우, undefined가 자동으로 호출된다.
  • function은 항상 고유의 Scope를 가진다.
  • default arguments, remaining arguments 는 ES6부터 지원

new 키워드

  • Function 객체에 new 연산자를 사용하면, 해당 함수를 생성자 삼아서 객체가 생성된다.
  • 모든 Function 객체가 new 에 사용될 수 있는 것은 아니고, constructor가 존재할 경우만 가능하다.
  • 일반적인 방법으로 만든 Function은 모두 new와 사용 가능하고, built-in Function 중에 일부가 불가능하다.

  • new 와 함께 사용되는 function 내의 this는 새로 생성될 객체를 레퍼런스한다.
  • new와 함께 사용되지 않는 객체를 그냥 호출할 경우, this는 전역 객체(Window)가 된다.
  • 객체의 멤버 메소드로서 호출될 때 만 this는 해당 객체가 된다.
  • arrow function 안에서 this는 객체의 멤버 여부와 상관없이 다른 rule을 적용받는다. 이는 따로 다룬다.

Arrow Function

  • => 표시를 통해서 함수를 정의할 수 있다.
  • 앞쪽은 좌변은 인자 리스트, 우변은 함수 몸체이다.
  • 좌변은 인자가 하나일 경우, 우변은 리턴 값만 있는 경우 괄호를 생략할 수 있다.
  • this, arguments를 새로 바인딩 하지 않고, 부모 스코프의 것 그대로 쓴다.
  • new, yield와 함께 사용 할 수 없다.