홈으로

[JS] 문법

2020년 02월 18일

You don’t know JS 를 공부하고 정리한 글이다.

문(statement)과 표현식(expression)

표현식(expression) 은 특정한 결괏값으로 계산되는 것이며 문(statement) 은 표현식과 연산자로 이루어진 것을 말한다. 아래 코드를 보자.

var a = 1 + 2;
var b = a;
b;

첫번째 줄에서 1+2 는 표현식이며 var a = 1+2 는 문이다. a = 1+2 나 b = a 를 할당 표현식(assignment expression)이라고 한다. 마지막 줄에서 b 는 그 자체로 표현식이며 문이기 때문에 표현식 문(expression statement)이라고 한다. 또한 var a = 1+2 는 변수를 선언하는 문이기 때문에 선언문(declaration statement)이라고 한다.

문의 완료 값(completion value)

모든 문은 완료 값을 가지는데, 문이 완료되는 시점에 값을 가진다는 것을 뜻한다.

  • 변수 선언문의 완료 값은 undefined 이다.

  • 조건문, 반복문 등의 블록으로 감싸진 문의 완료 값은 내부에 있는 마지막 문의 값을 암시적으로 반환한 값이다.

    • var a = 3;
if (true) a = 4; // 완료값 = 4
  • 함수의 완료 값은 리턴값이고 없으면 undefined 이다.

표현식의 부수효과(side effect)

  • 함수호출 표현식
var a = 3;
function b() { a = a + 1; }
b(); // a가 변하는 부수효과, undefined
  • 증감/감소 연산자
var a = 30;
var b = ++a; // 증가시키는 부수효과 발생하고 할당, 31
var c = b++; // 할당하고 증가시키는 부수효과 발생, 31
  • delete 연산자

객체의 프로퍼티를 없애거나 배열의 슬롯을 없애는 연산자이다. 성공하면 true 를 반환하고 실패하면 false 를 반환하거나 에러를 발생시킨다.

var obj = { c: 3 };
delete obj.c; // 부수효과는 객체의 프로퍼티인 c를 제거, true
  • 할당(=) 연산자

할당된 값이 완료 값이기 때문에 부수효과는 할당하는 자체이다.

var a;
a = 30; // 30을 a에 할당하는 부수효과, 30

else if 절은 존재하지 않는다

자바스크립트에는 if 문과 else 문만이 존재할 뿐, if else 문은 없다. 하지만 관용적으로 사용할 수 있는 이유는 else 의 실행이 하나밖에 없기 때문에 중괄호({})를 생략할 수 있는 것이다.

연산자 우선순위

  • && > || > ? : 로 평가된다.
  • ? : 와 = 은 3개 이상일 경우 우측부터 그룹으로 묶이는 우측 결합성을 가진다.
var a = 10;
var b = 'test';
var c = false;

var d = a && b || c ? c || b ? a : c && b : a; // 10
// ((a && b) || c) ? ((c || b) ? a : (c && b)) : a; 로 평가된다.

ASI(Automatic Semicolon Insertion)

세미콜론이 누락된 곳에 엔진이 자동적으로 세미콜론을 삽입하는 것을 말한다. 엔진은 세미콜론이 있어야 하는 곳에 없을 경우 에러를 발생시키기 때문에 알아서 삽입한다. 따라서, 세미콜론을 쓰지 않아도 프로그램을 실행시킬 수 있는 것이다. 하지만 저자의 결론은 필요하다고 생각되는 곳이라면 세미콜론을 쓰는 것이 바람직하다는 것이다.

함수 인자

디폴트 인자 값을 설정해서 함수를 만들었을 때, 그 함수의 arguments 객체는 인자를 넘겨준 경우와 그냥 실행한 경우가 다르다.

const f = function(a = 3) {
  console.log(arguments.length);
};
f(); // 0
f(3); // 1

이렇게 인자 없이 호출될 경우 arguments 객체와 인자가 연결되지 않는 것은 ES5에서도 마찬가지이다.

const f = function(a) {
  a = 3;
  console.log(arguments.length);
};
f(); // 0
f(3); // 1

ES6부터는 arguments 를 권장하지 않고 나머지 문법인 ... 를 권장하니 이걸 사용하도록 하자.

그 외

  • try~finally 에서 finally는 반드시 실행되는 부분으로 try 문에 리턴 값이 있다 하더라도 finally 가 먼저 실행되고 리턴된다.
  • 만약, finally 에 리턴 값이 있을 경우 try의 리턴 값을 덮어씌운다.
  • switch 의 경우 조건 비교를 할 때 엄격한 동등 비교인 === 를 사용하기 때문에 강제 변환이 일어나지 않는다는 점을 기억하자.

마무리

자바스크립트의 문법들에서 몰랐던 부분들을 배울 수 있었다. 앞으로는 이번에 배운 것들을 확실히 기억하고 코드를 작성하도록 하자. 표현식의 부수효과 및 arguments 배열의 미사용 등을 주의하면 한층 더 질 좋은 코드를 작성할 수 있을 것이다.

Loading script...