[Java Script] 07. 연산자

** 본 글은 모던 자바스크립트 DEEP DIVE 를 읽고 정리한 글입니다.
** 본인이 책 내용의 이해를 돕기 위해 정리한 글이며, 부정확한 정보전달이 있을 수 있습니다.

---

연산자?

하나 이상의 표현식을 대상으로 하나 이상의 값을 만드는 것을 연산자 라고 한다.

이 때 명사와 같은 연산의 대상을 피연산자 라고 하고,

피연산자에 동사에 역할을 하는 것을 연산자 라고 한다.

역시 아이패드 그림은 어렵다

어렵게 생각할 거 없이 우리가 수학에서 사용하는 +  -  =  < 와 같은 기호들과

타입을 나타내는 typeof 와 같이 어떠한 값에 이걸 처치하여 같거나 다른 값을 반환시키는 것을 연산자라고 보면 된다.

 

역시 설명보다는 하나씩 보면서 알아가자.

 

1. 산술연산자

  a. 이항 산술 연산자

말 그대로 항이 두개인 산술 연산자이다

x + y; // 덧셈
x - y // 뺼셈
x * y // 곱셈
x / y // 나눗셈
x % y // 나머지
x ** y // 제곱, ES7 에서 도입되었다.

수학시간에 배웠던 친구들이며, 사용 기호만 안다면 어렵지 않다.

 

  b. 단항 산술 연산자

var x = 1;
x ++; // x = x + 1와 같다. x -> 2
x --; // x = x - 1와 같다. x -> 1

var y = '1';
+y; // 양수로 변환. 문자열도 숫자로 전환된다. x -> 1
-y; // 음수로 전환. 이 또한 숫자로 전환된다. y -> -1

var z = 'z';
+z // NaN. 당연히 숫자로 변환이 불가능한 문자열은 NaN를 반환한다.

또한 ++ -- 와 같은 산술연산자는 위치에 따라 다른 값을 반환한다.

var x = 5;
var result;

result = x++; // 이 코드는
result = x; // x를 우선  result에 할당 후
x++; // x를 1증가시킨다.
consoel.log(result, x) // 5, 6

result = ++x; // 이 코드는
x++; // x를 우선 증가시킨 후
result = x; // 증가 된 x를 result에 할당한다.
consoel.log(result, x) // 7, 7

이런식으로 연산자 위치에 따라 다르게 값이 할당됨을 유의하자.

 

2. 할당연산자

지금껏 변수에 값을 = 을 사용해 할당해 왔던 것과 같이 값을 할당하는 연산자이다.

거기에 추가로  기호= 형태의 축약형 연산자가 등장한다.

x = 5;   // x = 5;
x += 5;  // x = x + 5;
x -= 5;  // x = x - 5;
x *= 5;  // x = x * 5;
x /= 5;  // x = x / 5;
x %= 5;  // x = x % 5;
x **= 5; // x = x ** 5;

이렇게 축약된 형태로 계산과 할당을 동시에 하는 연산자들이다.

 

부수효과(Side Effect): 피연산자에 영향을 주는 경우

우리가 어떤 기능을 수행할 때, 의도치 않게 다른 효과가 발생하는 것을 부수효과(Side Effect) 라고 한다.
연산자에서 부수효과는 피연산자 자체가 변하는 것을 뜻하며,
이는 단항 산술 연산자 와 할당연산자 두 가지에서 발생한다.
(근데 할당 연사자인데, 할당 되는 것이 부수효과라고 할 수 있을까…?)

// 덧셈의 경우

var x = 1;
console.log(x + 1, x); // 2 1 -> 연산 결과를 반환하며, x 값에는 변함이 없다.
console.log(++x, x); // 2 2 -> 연산 결과와 x 값 모두 증가한 결과를 반환했다.

var y = 2;
console.log(y * 2, y); // 4 2 -> 연산자의 결과를 반환하며, y 값에는 변함이 없다.
console.log( y *= 2, y); // 4 4 -> 연산 결과와 y 값 모두 증가한 결과를 반환했다.​

이런식으로 단항 산술 연산자와 할당연산자 만 원래 값에 영향을 미침을 꼭 알아두자.

 

3. 비교 연산자

자바스크립트에서는 비교는 ==  ===  !=  !== 이렇게 네 가지를 이용해서 비교한다. ( = 하나는 할당 연산자기 때문)

일반적으로 비교를 할 때 ===을 이용해서 할 텐데, 이유는 == 은 타입을 멋대로 변환해가며 비교하기 때문이다.

이같은 비교 방식은 동적 타입의 언어인 자바스크립트에서 예상치 않은 오류가 발생할 수 있다.

0 == ''; // true
'0' == ''; // false

false == 0; // true
false === 0; // false

자바스크립트에서 빈 문자열 이나 0과 음수 같은 값은 false처럼 쓰일 수 있는데, 이와 같은 특성 때문에 == 연산자로 비교했을 때 위와 같은 결과를 발생시킨다.

때문에 거의 대부분의 상황에서 === 로 비교한다.

또한 ! 는 자바스크립트에서 부정의 의미를 갖고있기 때문에 ≠ 와 같은 연산을 원할 때에는 !== 을 사용하면 된다.

 

부등호는 수학에서 동일하게 사용하여 대소관계 비교도 가능하다.

5 > 0; // true
5 >= 5; // true
5 <= 3; // false

Object.is() 메서드 알아두기

앞서 말한 === 의 연산자를 사용하더라도 NaN이나 0 === -0의 을 비교할 때에는 오류가 발생한다.

NaN === NaN // false
0 === -0; // true​

이럴 때에는 ES6에서 도입된 Object.is() 메서드를 사용하여 정확하게 비교가 가능하다.

Object.is(0, -0); // false
Object.is(NaN, NaN); // true

정확한 결과가 잘 출력된다.
그러니 꼭 Object.js 를 알아두자 (사실 다른 방법으로 비교할수도 있다.)

 

4. 삼항 조건 연산자

if 조건문과 같은 조건식인 동시에, 값을 할당할 수 있는 표현식인 연산자다.

x % 2 ? "add" : "even" // 이렇게 ?와 : 을 이용하여 사용한다.

var result = (x % 2) ? "add" : "even" // 이렇게 값으로 할당할 수 있고, 괄호로 묶어줘도 된다.

사용법은 ? 앞에 조건문을 작성하며,

: 을 분기점으로 true : false 값을 적어주면 된다.

처음엔 헷갈려도 점점 익숙해지더라. 🙂

 

5. 논리 연산자

아까 ! 를 포함하여, true / false를 검사하는 연산자이다

and → && 

or → || (엔터 위에 있다.)

not → !

true || false -> true;
true && false -> false;
!true -> false;

이렇게 코드로 작성하여 헷갈릴 수 있지만, 수학 공식이나 문장을 생각하며 쓰면 쓸 만 하다.🙂

 

6. 쉼표 연산자

쉼표로 나눠서 피연산자를 동작(평가)하며, 가장 오른쪽 피연산자를 반환한다,

var a, b, c; // 이 쉼표연산자는
var a;
var b;
var c;
return c // 와 같은 결과이다.

var x = (1, 2); // 이 쉼표연산자는
x = 1;
x = 2; // 의 과정을 거치므로 
console.log(x) // x = 2가 할당되며 2를 반환한다.

 

7. 그룹 연산자

수학에서의 () (괄호) 와 같다.

괄호로 묶어준 값을 우선적으로 연산한다.

 

8. typeof 연산자

typeof 피연산자 의 형태로 사용하며, 피연산자의 타입을 반환한다.

타입은 앞서 배운 타입중 null을 제외한 총 6개의 타입과, 함수의 경우 function 타입을 반환한다.

typeof 1; // number;
typeof '1'; // string;
typeof true; // boolean;
typeof undefined; // undefined;
typeof null; // Object -> null이 아니다!!
typeof Symbol(); // symbol

typeof {}; // Object
typeof []; // Object. array도 object 타입 중 하나이다.
typeof function () {} // function

여기서 유의할 점은, null 값의 타입 반환시, null 이 아닌 Object를 반환한다.

이는 자바스크립트의 버그라고 하니 유의하자 (대충만든 언어같으니)

 

9. 그 외 연산자와 연산자의 우선순위

이 외에도

? 옵셔널 체이닝

new 인스턴스생성

과 같은 몇 가지 연산자가 더 있으나, 추후에 더 알아보기로 하자. 여기까지만 해도 머리아프다.

또한 연산자의 우선순위는 꽤나 촘촘하게 우선순위가 짜여져 있어, 다 외우기가 쉽지 않다.

그래도 괄호 ()는 항상 1번의 우선순위를 가지니, 괄호를 적절히 활용하도록 하자!

---

 

후기

사실 수학의 기호처럼 사용하는 부분이 대부분이라 사용하면 막상 어렵지 않은데, 이렇게 적어놓으니 굉장히 복잡해보인다.

어차피 수학에서 계산에 사용하는 기호들은 대부분 코드로 구현 가능할테니, 원하는 계산식이 있다면 검색해가며 쓰도록 하자.

그래도 알게되어 좋은 부분이 있다면

단항 산술 연산자와 할당 연산자의 부수효과를 구분하여 알게 된 점,

단항 산술 연산자의 계산 방식을 다시 한번 되짚고 간 점이 큰 수확이라 할 수 있다.