아래 내용은 학원 수업과 "모던자바스크립트 Deep Dive : 이웅모 저"를 읽고 정리한 내용입니다.

프로그래밍에서는 수학에서 사용하는 산술연산자 외에도 여러가지 연산자들이 존재하고, 연산자가 연산을 수행하는 대상을 피연산자라고 한다. 이 때 피연산자는 값으로 평가 될 수 있어야 한다.

1. 산술 연산자

산술연산자는 피연산자의 개수에 따라서 이항연산자와 단항 연산자로 구분이 된다.

1-1. 이항 산술 연산자

수학에서 사용하는 산술연산자 중에서 자바스크립트에서 사용되는 연산자는 +, -, *, /, %, **가 있는데, 이 연산자들 중에서 +, -, *, /는 일반적인 산술연산자와 같이 사용할 수 있지만 %, **는 약간의 설명이 필요할 것 같다.

%(나머지)연산자

나머지 연산자는 왼쪽의 피연산자를 오른쪽의 피연산자로 나눈 나머지 값을 정수로 반환한다.

console.log(5 % 2) // 1

**(거듭제곱 or 지수)연산자

지수 연산자 혹은 거듭제곱 연산자는 좌항의 피연산자를 밑으로 우항의 피연산자를 지수로 거듭 제곱하여 숫자 값을 반환한다. (다시 말하면 좌항의 피연산자를 우항의 피연산자 수만큼 곱한 값을 반환한다.)

console.log(2 ** 2) // 4 (2 * 2)
console.log(2 ** 3) // 8 (2 * 2 * 2)

1-2. 단항 산술 연산자 (증감 연산자)

단항 산술 연산자에는 ++, --, +, -가 있는데, 이 중에서 증감 연산자(++, --)에 대해서만 살펴보려고 한다. 이 증감 연산자는 1씩 증감한다는 것과, 피연산자의 값을 변경한다는 점은 같지만 피연산자를 기준으로 앞에 있는지, 혹은 뒤에 있는지에 따라서 산술연산의 값이 달라질 수 있다. 때문에 이 것을 잘 알고 있어야 원하는 값을 얻을 수 있으므로 유의하자.

전위 증가/감소 연산자

변수에 값을 할당할 때 전위 연산자를 사용하게 되면 먼저 증가(또는 감소)한 뒤에 변수에 값을 할당하게 된다.

후위 증가/감소 연산자

변수에 값을 할당할 때 후위 연산자를 사용하게 되면 먼저 변수에 값을 할당한 뒤에 증가(또는 감소)를 하게 된다.

var x = 5,
  result;

// 선할당 후증가(postfix increment operator)
result = x++;
console.log(result, x); // 5 6
// 왜? 5, 6이 되는가?
// result 변수에 x값인 5를 먼저 할당하고, x변수의 원래 값인 5에 1을 더하여 할당했기 때문이다. (피연산자인 x값이 변경됨)


// 선증가 후할당(prefix increment operator)
result = ++x;
console.log(result, x); // 7 7
// 왜? 7, 7이 되는가?
// 위에서 연산된 x값인 6에서 1은 더하는 연산을 수행하여 x변수와 result에 재할당했기 때문이다.

// 선할당 후감소(postfix decrement operator)
result = x--;
console.log(result, x); // 7 6
// 왜? 7, 6이 되는가?
// 위에서 연산된 x값인 7을 result에 먼저 할당하고, 7에서 -1을 연산한 값인 6을 x에 재할당 했기 때문이다. 

// 선감소 후할당 (prefix decrement operator)
result = --x;
console.log(result, x); // 5 5
// 왜? 5, 5가 되는가?
// 위에서 연산된 x값인 6에서 -1을 먼저 연산하고, 연산된 값인 5를 result와 x에 재할당했기 때문이다. 

코드 출처 : "모던자바스크립트 Deep Dive : 이웅모 저"

2. 비교 연산자

비교 연산자는 말 그대로 연산자를 기준으로 좌항과 우항의 피연산자를 비교한 값의 결과를 불리언 값인 true 혹은 false로 반환한다.

2-1. 동등 / 일치 비교 연산자

동등/일치 비교 연산자는 좌항과 우항의 값이 같은 값으로 평가되는지 비교해서 불리언 값을 반환한다. 일치 비교 연산자는 ===로 비교하며 값과 타입까지 비교하고, 동등 비교 연산자는 ==로 비교할 수 있으며 좌항과 우항의 값의 단순히 값만을 비교하게 되는데 이 것은 동등 비교 연산자의 경우 자바스크립트가 암묵적 타입 변환을 통해 좌항과 우항의 타입을 일치 시킨뒤에 값을 비교하기 때문에 가능한 것이다. 하지만 실제로 코드를 작성할 때 동등 비교 연산자를 사용할 경우 예상치 못한 에러가 발생하게 될수도 있으므로 일치 비교 연산자만을 사용하도록 하자.

// 일치 비교 연산자
17 === '17'; // false

// 동등 비교 연산자
// 좌항과 우항의 값을 암묵적 변환하여 타입을 일치시킨뒤에 값을 비교한다.
17 == '17'; // true

2-2. 대소 관계 비교 연산자

대소 관계 비교 연산자는 수학에서 보던 그것과 같으므로 사실 크게 신경써야 할 부분은 없지만, 비교 연산자인만큼 대소 관계가에 대한 결과 값이 불리언으로 반환된다는 것만 기억하고 있으면 될 것 같다.

3. 삼항 조건 연산자

조건 ? 조건이 true일 때 반환할 값 : 조건이 false일 때 반환할 값

자바스크립트에서는 단 한개의 삼항 조건 연산자가 존재한다. 이 삼항 조건 연산자는 ?와 : 연산자를 기준으로 ? 앞의 조건의 결과가 참이면 :의 앞에 있는 값이, 결과가 거짓이면 :의 뒤에 있는 값이 반환된다.
사실 이 삼항 연산자는 if...else문으로도 대치할수도 있다. 하지만 삼항 조건 연산자는 값처럼 사용할 수 있지만, if...else문은 값처럼 사용할 수 없으므로 유의하자.

4. 논리 연산자

논리 연산자는||(논리합(or)), &&(논리곱(and)), !(부정(not)) 연산자가 있다.

4-1. ! (부정(not)) 연산자

부정 연산자는 값으로 평가되는 표현식에 !를 붙여서 사용하고, 부정 연산자는 언제나 true 혹은 false의 불리언 값을 반환한다.

!true;  // -> false
!false; // -> true

4-2. || (논리합(or)) 연산자 와 && (논리곱(and)) 연산자

|| (논리합(or)) 연산자 와 && (논리곱(and)) 연산자는 언제나 좌항과 우항의 피연산자 중 한쪽으로 평가된다. 그리고 이 것을 단축평가라고 한다. 단축평가를 얘기하기 이전에 알아야 할 것들은 값의 평가와 && (논리곱(and)) 연산자, 그리고 || (논리합(or)) 연산자의 평가 방식에 대해서 알아봐야 하므로 아래에서 순서대로 차근차근 알아보도록 하자.

값의 평가

우리가 사용하는 모든 값은 true 혹은 false로 평가될 수 있는데, 아래의 값을 제외한 나머지는 모두 true로 평가되며, false로 평가되는 값들을 falsy한 값이라고 하고, true로 평가되는 값들을 truthy한 값이라고 한다.

falsy

• false
• undefined
• null
• 0, -0
• NaN
• '' (빈 문자열)

단축평가

단축평가는 || (논리합(or)) 연산자와 && (논리곱(and)) 연산자를 가지고 이뤄지며, 평가 도중 평가 결과가 확정이 되면 나머지 평가 과정을 생략한다. 이 단축평가를 제대로 이해하기 위해서는 몇 가지 알아 두어야 할 것이 있다.

• 논리곱 연산자와 논리합 연산자는 언제나 좌항 또는 우항의 피연산자 값을 반환한다.
• 값은 모두 true로 평가되거나, false로 평가된다.
• 논리 연산자는 피연산자의 타입을 변환하지 않고 그대로 반환한다.

|| (논리합(or)) 연산자

논리합 연산자는 || 연산자를 기준으로 좌항 또는 우항 중 하나라도 true일 경우 true값을 반환한다. 따라서 좌항(앞)의 피연산자가 true로 평가되는 값이라면 우항의 피연산자는 확인할 것도 없이 좌항의 값으로 평가 되고, 좌항의 피연산자가 false라면 우항의 피연산자가 true인지 확인을 하게 되는 것이다.

true || true;   // true
true || false;  // true
false || true;  // true
false || false; // false

문제는 좌항과 우항이 모두 불리언인 true 값이 아니라 true로 평가되는 truthy한 값인 경우이다.

'kyuree' || 'hyacinta'

위 코드의 'kyuree'와'hyacinta는 모두 true로 평가되는 truthy한 값이다. 이런 경우 반환되는 값은 무엇일까? 다시 말하지만 논리합 연산자는 좌항과 우항 중 하나라도 true일 경우 true의 값을 반환한다고 하였다. 따라서 위 코드에서 좌항이 true로 평가되는 값이기 때문에 우항을 확인하지 않아도 true의 값을 반환할 수 있기 때문에 좌항의 값인 'kyuree'를 반환하게 된다. (좌항 우선, true 우선)

&& (논리곱(and)) 연산자

논리곱 연산자는 && 연산자를 기준으로 좌항과 우항이 모두 true일 경우 true값을 반환한다. 따라서 좌항의 피연산자가 true로 평가되는 값이라도 우항의 피연산자가 false로 평가되는 값이라면 false로 평가되기 때문에 우항의 피연산자의 값까지 확인해야 한다. 단, 논리곱 연산자는 좌항과 우항이 모두 true일 때 true값을 반환하므로 좌항이 false라면 false값을 반환하게 된다.

true && true;   // true
true && false;  // false
false && true;  // false
false && false; // false

논리곱 연산자 역시 좌항과 우항이 모두 불리언인 true 값이 아니라 true로 평가되는 truthy한 값인 경우 문제(?)가 된다.

'kyuree' && 'hyacinta'

위 코드는 논리합 연산자의 예시 코드에서처럼 'kyuree'와'hyacinta가 모두 true로 평가되는 truthy한 값이다. 또한 논리합 연산자에서는 이런 상황에서 'kyuree'가 반환되었다. 하지만 논리곱 연산자는 'hyacinta'가 반환된다. 왜냐하면, 논리합 연산자는 좌항과 우항이 모두 true로 평가되어야만 true를 반환하게 된다. 때문에 이 논리합 연산자가 true를 반환하기 위해서는 우항의 값이 true값으로 평가되는지 반드시 확인해야 하기 때문이다. (우항 우선, false 우선)

5. 타입변환

값에는 모두 타입이 있고, 이 타입은 변환할 수 있다. 이 때 값의 타입을 개발자가 의도적으로 변환하는 것을 명시적 타입변환이라고 한다. 또한 표현식을 평가하는 과정에서 자바스크립트 엔진에 의해서 암묵적으로 타입이 자동으로 변환이 되는 것을 암묵적 타입 변환이라고 한다.

이때 암묵적 타입변환은 때로는 유용하게 사용할 수도 있지만, 어떤 상황에서 암묵적 타입 변환이 이루어지는지 개발자가 제대로 알고 있지 않다면, 원하는 의도와 다른 결과가 나올 수 있기 때문에 유의해야 한다.

5-1. 문자열 타입으로 변환

+ 연산자는 숫자 타입의 피연산자들끼리만 있는 상황에서는 더하기 연산자로 작동한다. 하지만, 좌항과 우항의 피연산자 중에 하나라도 문자(string)타입을 가지고 있다면 문자열 연결 연산자로 작동을 한다. 이 때 + 연산자를 문자열 연결 연산자라고 한다.

'010' + 12345678 // 01012345678

5-2. 숫자열 타입으로 변환

사칙 연산자중 + 연산자를 제외한 -, *, /는 문자열 연결 연산자로 동작하는 + 연산자와는 달리 값의 타입을 숫자열 타입으로 변환시킨다.

1 - '1' // 0
1 * '10' // 10
1 / 'one' // NaN

이 때 주의해야 할 것은 숫자열 타입으로 변환할 수 없는 값을 -, *, / 연산자를 이용하여 연산하려고 하면 어떤 타입으로 변환되는지를 알아야 한다. 이런 상황에서도 값은 숫자열 타입으로 변환이된다. 하지만 NaN (산술 연산 불가 : not a number)라는 특수한 값이 나오게된다는 것을 기억하자.

6. 연산자 우선순위와 그룹 연산자

수학에서의 연산자는 연산자에 따른 우선순위가 존재한다. 만약 여러 연산자들을 다양하게 사용할 때 연산자의 우선 순위를 모르고 계산을 하게 된다면 결과값은 우리가 예상했던 것과 완전히 다른 결과가 나올 것이다. 그리고 이 것은 프로그래밍에서도 마찬가지이다. 프로그래밍에서도 연산자는 우선순위를 가지고 있기 때문에 이 우선순위를 잘 생각하고 계산해야 원하는 결과를 얻을 수 있을 것이다. 하지만 자주 사용하지 않는 연산자들의 우선순위까지 전부 기억하기는 힘들것이라고 생각된다. 이 때 우리는 그룹 연산자를 사용할 수 있다는 것을 기억해야 한다. 그룹 연산자는 우리가 흔히 알고 있는 ()를 사용하고 이 연산자는 우선순위가 가장 높다. 그러므로 연산자를 사용할 때 가장 먼저 연산되어야 하는 연산자가 있다면 피연산자와 함께 묶어주면 가장 먼저 연산이 될 것이다.