Deep Dive - 7 (연산자)

- 연산자란?

• 연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행하여 하나의 값을 만든다.
• 이때 연산의 대상은 피연산자라 한다. 피연산자는 값으로 평가될 수 있는 표현식 이어야 한다.
• 피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식이다.
• ex) 표현식이란? 값으로 평가될 수 있는 문을 말한다.

 

- 산술 연산자

• 산술 연산자는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다.
• 산술 연산이 불가능한 경우 NaN을 반환한다. (Not a Number)
• 산술 연산자는 피연산자의 개수에 따라 이항 산술 연산자, 단항 산술 연산자로 구분한다.

 

이항 산술 연산자

• 2개의 피연산자를 산술 연산하여 값을 만든다.
• 이항 산술 연산자는 사이드 이펙트가 없다. ( 어떤 이항 산술 연산자도 피연산자의 값을 변경하지 않음.)

5 + 2; // 7
5 - 2; // 3
5 * 2; // 10
5 / 2; // 2.5
5 % 2; // 1

 

단항 산술 연산자

• 1개의 피연산자를 산술 연산하여 숫자 값을 만든다.
• 피연산자의 값을 변경하는 사이드 이펙트가 있다. ( +, - 제외)

• 증가/감소 연산자는 위치에 따라 연산을 수행하는 값이 달라질 수 있다.

let x = 5;
let result;

// 할당을 하고 후에 x의 값이 증가한다.
result = x++;
console.log(result, x); // 5, 6

// 증가 후 할당한다.
result = ++x;
console.log(result, x); // 7, 7

// 감소 연산자도 동일하다.

// +,- 단항 연산자를 이용한 타입변경

+"10" === 10 // true
-"10" === -10 // true

+true; // 1;
-false // -0

+'hello' // NaN 문자열은 변경불가.

// -단항 연산자를 이용한 부호 반전
-(-10) // 10

• +, - 연산자에는 피연산자를 변경하지는 않지만 숫자 타입이 아닌 피연산자에 +단항 연산자를 이용하면 숫자 타입으로 변경되고 -단항 연산자를 이용하면 피연산자의 부호를 반전할 수 있다.
• 이때 피연산자를 변경하는건 아니고 숫자 타입으로 변환한 값을 생성해서 반환하는 것 이기에 사이드 이펙트는 없다.

 

문자열 연결 연산자

• + 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다.

// 문자열 연결
'1' + 2; // '12'

// 산술 연산
1 + 2; // 3

• 위 결과를 보면 개발자의 의도와는 상관없이 자동으로 타입이 변환 되는데 이를 암묵적 타입 변환 또는 타입 강제 변환이라고 한다.

 

- 할당 연산자

• 할당 연산자는 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다.
• 좌항의 변수의 값을 할당하여 변경하므로 사이드 이펙트가 일어난다고 할 수 있다.

let x;

x = 10;
console.log(x); // 10

x += 5;
console.log(x); // 15

x -= 5;
console.log(x); // 10

// 문자열 연결

let y = 'name:';

y += 'YunCow';
console.log(y); // 'name:YunCow'

• 할당은 우측에서 좌측으로 이루어지고 피연산자가 더 많다한들 제일 우측에서 좌측으로 이루어진다.
• 할당 문 또한 값으로 평가되는 표현식이다.

 

- 비교 연산자

• 비교 연산자는 좌항과 우항의 피연산자를 비교해 결과를 불리언 값(true, false)으로 반환한다. (if, for문에서 자주 사용)

 

동등/일치 비교 연산자

// 동등 비교 연산자 타입을 암묵적 타입 변환으로 true

5 == '5'; // true

// 일치 비교 연산자 암묵적 타입 변환을 허용하지 않아 false

5 === '5'; // false

// 자신과 일치하지 않는 유일한 값 NaN

NaN === NaN; // false

// 양의 0 과 음의 0 은 일치하다고 자바스크립트는 평가한다.

0 === -0; // true

// 부동등 비교 연산자 두 피연산자가 다르면 true 같으면 false

5 != 8; // true

5 != 5; // false

5 != '5';

// 불일치 비교 타입이 다른것도 불일치로 판단한다.

5 !== 8; // true

5 !== 5; // false

5 !== '5'; // true

• 동등 비교와 부동등 비교는 예측하기 어렵고 암묵적 타입 변환으로 인해 실수할 가능성이 크다. 사용을 지양하고 일치 비교와 불일치 비교 연산자로 사용하자.

 

대소 관계 비교 연산자

 

- 삼항 조건 연산자

• 조건식의 평가 결과에 따라 반환할 값을 결정.
• 사이드 이펙트는 없다.

//
const result = 100;

//             조건식        true    false

console.log(result < 200 ? '맞다' : '틀리다'); // '맞다'

• 피연산자가 true면 두 번째 피연산자를 반환하고 false면 세 번째 피연산자를 반환한다.
•  if else 문을 사용하는 것과 유사하지만 if else문은 표현식이 아니기에 값처럼 사용할 수 없다.

 

- 논리 연산자

• 논리 연산자는 우항과 좌항의 피연산자를 논리연산 한다.
• 논리 부정 연산자는 항상 불리언 값을 반환한다.
• 논리합, 논리곱 연산자 표현식의 반환 값은 불리언 값이 아닐 수 있고 항상 두 개의 피연산자 중 한쪽으로 평가된다.

// 논리합 연산자는 두 피연산자 중 하나만 true여도 true를 반환한다.

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

// 논리곱 연산자는 두개의 피연산자 모두 true여야 true를 반환한다.

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

// 논리 부정 연산자는 해당하는 불리언 값의 반대값을 반환한다.

!true; // false
!false; // true

 

- 쉼표 연산자

• 쉼표 연산자는 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환한다.

let x,y,z;
x = 1, y = 2, z = 3; // 3

 

- 그룹 연산자

• 소괄호()로 피연산자를 감싸는 그룹 연산자는 가장 먼저 표현식을 평가한다. (우선순위 조절)

// 10 * 2 연산 후 20 + 3 연산 수학과 동일.

10 * 2 + 3 // 23

// 그룹 연산자 우선 연산 후 나머지 연산

10 * (2 + 3); // 50

 

- typeof 연산자

• null 값은 object를 반환하는데 이건 자바스크립트의 버그이고 기존 코드에 영향이 줄 수 있기에 수정하지 못하고 있다.
• null 타입을 확인할 때는 typeof 연산자가 아닌 일치 연산자(===)를 이용하자.
• 선언하지 않은 식별자는 undefined를 반환한다.

 

- 지수 연산자

• ES7에서 도입됐으며 좌항의 피연산자를 우항의 피연산자로 거듭제곱한다.
• 비슷한 메서드로 Math.pow 가 있다. (가독성에서 지수 연산자가 우수)
• 이항 연산자 중 우선순위가 가~장 높다.

2 ** 2 // 4

// 음수는 소괄호로 묶어줘야 한다.

(-5) ** 2; // 25

// 지수 연산자는 우측에서부터 연산을 하기에 2^18 이 되어 512를 반환한다.

2 * 3 * 2; // 512

// 그룹으로 묶어주면 가능

(2 * 3) * 2; // 64

 

- 그 외의 연산자

• 해당 부분이 오면 자세히 찾아보자 ( 링크 추가 예정 )

 

- 연산자의 부수 효과

• 할당 연산자(=), 증감 연산자(++/--), delete 연산자는 사이드 이펙트(부수효과)를 가진다.
• 자바스크립트 에서의 사이드 이펙트는 다른 코드에 영향을 주는 걸 말한다. (변수에 값을 할당하면 변수의 값이 변경)
• delete 연산자는 객체의 프로퍼티를 삭제하는 사이드 이펙트가 있다.

 

- 연산자 우선순위

• 연산자 우선순위는 여러 연산자로 이뤄진 문이 실행될 때 연산자가 실행되는 순서를 말한다.

• 보다시피 종류가 굉장히 많다. 모두 외우기는 어려움으로 그룹 연산자를 사용해 명시적으로 우선순위를 조절하는 습관을 들이자.

 

- 연산자 결합 순서

• 연산자의 어느 쪽 (좌, 우)부터 평가를 수행할 것인지를 나타내는 순서다.