다음 중 a, b의 값은?

var a = 0;
for(var i = 5; i--;){
	a++;
}
console.log(a);

var b = 0;
for(var i =5; i--, i;){
	b++;
}
console.log(b);

문제의 요점

• 표현식에 대한 이해
• ,연산자에 따른 차이

문제의 정답

a : 5
b : 4

문제 풀이

위의 문제의 경우, a()와 b()의 차이점은 반복문 안의 ,연산자 유무 차이이다.

a()의 경우, i--이기 때문에 처음 loop를 실행할때의 i의 초기값은 5가 되며 반복문과 마찬가지로 5 → 4 → 3 → 2 → 1 으로 진행이 된다.

b()의 경우, ,연산자가 있기 때문에 i--, i에서 결과값인 i--가 된 i의 값은 결과값이자 초기값이 되기 때문에 이 경우의 i의 값은 4가 되며 반복문과 마찬가지로
4 → 3 → 2 → 1 으로 진행이 된다.

표현식 (Expression) 이란?

JavaScript 인터프리터가 계산하여 값을 구할 수 있는 JavaScript 구절
즉, 값을 만들 수 있으면 표현식이라고 한다.

리터럴 표현식

• 숫자 리터럴 표현식
  - 1
• 문자열 리터럴 표현식
  - 'hi'
• 객체 리터럴 표현식
  - {a : 1}
• 배열 리터럴 표현식
  - [1, 2]
• 함수 리터럴 표현식
  - function () {}
  

복잡한 표현식

간단한 표현식에 연산자가 결합이 된 것

• 1 + 1
  - (숫자 리터럴) 연산자 (숫자 리터럴)

결합 연산자(좌결합성)

2 + 2 + 3
왼쪽에서 오른쪽 방향으로 진행한다.

• 2 + 2
• 4 + 3

할당 연산자(우결합성)

x = y = 2
오른쪽에서 왼쪽 방향으로 진행한다.

• y = 2
• x = y

예시로 알아보는 연산자의 실행

&&연산자

앞의 결과 값이 false라면 뒤를 실행하지 않는다.

a() && b();

function a(){
	console.log(1);
    return false;
}

function b(){
	console.log(2);
    return true;
}

위의 예시의 경우, 만약 a()의 결과 값이 false라면 b()를 실행하지 않는다.
따라서 결과는 아래와 같이 출력이 된다.

1
false

+연산자

console.log(1) + console.log(2);

function a(){
	console.log(1);
    return false;
}

function b(){
	console.log(2);
    return true;
}

function fn(a, b){
	return a && b;
}

fn(a(), b());

위 예제의 실행과정은 아래와 같다.

• 1을 출력한다.
• 2를 출력한다.
• 함수 fn()을 호출한다.
• a()라는 피연산자를 먼저 실행하게 된다.
  - console에 1을 출력, false를 return
• b()라는 피연산자를 실행한다.
  - console에 2를 출력, true를 return
• fn함수에 a와 b의 값을 넣고 실행한다.
  - a : false , b : true
  • false를 반환한다.

1
2
1
2
false

따라서 결과는 위와 같이 출력이 된다.

|| 연산자

앞의 결과 값이 true라면 뒤의 값을 실행하지 않는다. 주로 default값을 만들기 위해 자주 쓰인다.

function fn(options){
	options = options || {};
}

위 코드에서 options이라는 값은 optional이기 때문에 넣어도 되고 안넣어도 되는 값이다. 만약 options에 값을 안넣고도 기본값을 지정하고 싶은 경우에는 위와 같은 코드로 많이 사용한다.

---

해당 포스팅은 썬한 코딩, 입사에 필요한 JS기술의 내용을 보며 공부한 것을 정리한 내용입니다.

참고 사이트

• 김썬 Youtube
• MDN - 표현식과 연산자