모던 자바스크립트 Deep Dive

[TIL/모던 자바스크립트 Deep Dive] 2023/03/28

삼항 조건 연산자?삼항 조건 연산자(ternary operator)는 말 그대로, 조건에 의해 동작하는 연산자이며 연산의 대상, 즉 피연산자가 3개이다. 조건식의 평가 결과에 따라 반환할 값을 결정한다는 점이 핵심이다.첫 번째 피연산자인 'score>=60'이라는 조건

2023년 3월 28일3min read

7장. 연산자(Operator)

7-4. 삼항 조건 연산자

삼항 조건 연산자?

삼항 조건 연산자(ternary operator)```는 말 그대로, ```조건```에 의해 동작하는 연산자이며 연산의 대상, 즉 ```피연산자가 3개```이다. ```조건식의 평가 결과```에 따라 ```반환할 값을 결정```한다는 점이 핵심이다.


![](https://velog.velcdn.com/images/minkwan/post/774b920f-0398-4d5c-9e5a-6fcf5a7edb22/image.png)

즉, 삼항 조건 연산자는 ``두 번째 피연산자 또는 세 번째 피연산자로 평가되는 표현식``이다.

만일 ``첫 번째 피연산자(=조건식)`의 평가 결과가 불리언 값이 아니면, 불리언 값으로 `암묵적 타입 변환``된다.

위 코드에서 연산의 결과는 0이다. 2%2는 0이고, 0은 false로 암묵적 타입 변환된다. 따라서 console에는 '짝수'가 입력된다.

if...else와의 차이

어차피 첫 번째 operand가 조건식이라면 왜 굳이 ``if...else문``을 사용하지 않고 삼항 조건 연산자를 사용하는 것일까?

삼항 조건 연산자 표현식은 값처럼 사용할 수 있지만 if...else문은 값처럼 사용할 수 없다. 한마디로, ``if...else문은 표현식이 아닌 문``이다.

변수에 할당이 되지 않는 것을 보니, 표현식이 아닌 문이라는 점은 분명하다.

삼항 조건 연산자 표현식```은 값으로 평가할 수 있는 ```표현식인 문```이다. 값처럼 다른 표현식의 일부가 될 수 있어 매우 유용하다.


![](https://velog.velcdn.com/images/minkwan/post/2c160778-1020-4a15-b79a-e90cfff85ee4/image.png)

조건에 따라 특정 값을 결정해야 한다면 삼항 조건 연산자 표현식을 사용하는 것이 더욱 유리할 것이다. 다만 조건에 따라 수행해야 할 문이 여러 개라면 가독성의 증진을 위해 if...else문을 활용하는 것이 더 좋은 방식이겠다!


### 7-5. 논리 연산자

논리합(||) 연산자

논리합(||) 연산자```는 기본적으로 ```좌항에서 우항으로``` 평가가 진행된다. 좌항의 평가 결과가 확정되면 나머지 평가는 생략하게 된다. 두 개의 피연산자 중 하나라도 true이면, 나머지 평가는 생략하는 특징이 있다.


첫 번째 코드는 좌항이 true이다. 우항에 대한 평가는 더 이상 진행하지 않는다. 두 번째 코드도 좌항이 true이다. 마찬가지의 결론이 도출된다.

세 번째, 네 번째 코드는 좌항이 false이다. true를 찾기 위해 우항으로 논리의 여행을 떠나게 된다. 세 번째 코드는 우항에 true가 있기 때문에 true를 반환하고, 네 번째 코드는 우항에도 false가 있기 때문에 최종적으로 false를 반환하게 된다.


> **논리곱(&&) 연산자**

![](https://velog.velcdn.com/images/minkwan/post/1f71c376-3b34-409f-8edf-26a25330c738/image.png)

첫 번째, 두 번째 코드는 좌항이 모두 true이다. 우항으로의 논리 연산 여행을 떠나게 된다. 첫 번째 코드는 우항에도 true가 있기 때문에 true가 반환된다. 두 번째 코드는 우항에는 false가 있기 때문에 최종적으로 false를 반환한다.

세 번째, 네 번째 코드는 좌항에 이미 false가 있기 때문에 우항에 대한 연산을 진행하지 않게 된다. 바로 false를 반환한다.

논리 부정(!) 연산자

논리 부정(!) 연산자```는 언제나 불리언 값을 반환한다. 다만, 피연산자가 반드시 불리언 값일 필요는 없고, 이런 경우에는 불리언 타입으로 암묵적 타입 변환된다.


### 7-6. 쉼표 연산자 
![](https://velog.velcdn.com/images/minkwan/post/08a437c9-efc2-4de9-bcb8-798d6e1bb75c/image.png)

7-7. 그룹 연산자

소괄호('()')```로 피연산자를 감싸는 연산자가 ```그룹 연산자```이다. 연산자의 우선순위가 전체 연산자 중 가장 높다는 것이 핵심이다. ```7-12. 연산자의 우선순위```와 연결된다.


![](https://velog.velcdn.com/images/minkwan/post/a27bd1f0-6ee3-4ed8-b3de-f4ddc596ea5e/image.png)

단순 계산에서는 큰 의미가 없다. 


### 7-8. typeof 연산자

null이 object로 반환되는 것은 자바스크립트 첫 번째 버전의 버그다. 기존 코드에 영향을 줄 수 있어서 아직까지 수정되지 못하고 있다고 한다.

따라서 ``값이 null인지 확인`할 때에는 typeof 연산자가 아니라 `일치 연산자(===)``를 사용해야 한다.

추가적으로, ``선언하지 않은 식별자`를 typeof로 연산하면 ReferenceError가 아니라 `undefined``를 반환한다.

7-9. 지수 연산자

지수 연산자는 ES7에서 도입되었다. ``좌항`의 피연산자를 `밑(base)`으로, `우항`의 피연산자를 `지수(exponent)``로 거듭 제곱하여 숫자 값을 반환한다.

7-10. 그 외의 연산자

1. ``?.`` 옵셔널 체이닝 연산자 2. ``??`` null 병합 연산자 3. ``delete`` 프로퍼티 삭제 4. ``new`` 생성자 함수를 호출할 때 사용하여 인스턴스를 생성 5. ``instanceof`` 좌변의 객체가 우변의 생성자 함수와 연결된 인스턴스인지 판별 6. ``in`` 프로퍼티 존재 확인

연산자 이후 챕터에서 깊게 다룬다고 한다.

7-11. 연산자의 부수효과

부수효과(side effect)는 ``다른 코드에 영향`을 주는 효과를 의미한다. 부수효과가 있는 연산자는 `할당 연산자, 증가/감소 연산자, delete 연산자``다.

7-12. 연산자의 우선순위

여러 개의 연산자로 이루어진 문이 실행될 때, 연산자가 실행되는 순서를 ``연산자 우선순위``라고 한다. 우선순위를 나열한 표가 있는데 공무원 시험도 아니고...이걸 외울 필요는 없을 것 같다.

기억에 의존하기보다는, 우선순위가 가장 높은 ``그룹 연산자`를 통해 `우선순위를 명시적으로 조절``하는 것이 유리한 방식일 것이다.

7-13. 연산자의 결합순서

좌항에서 우항으로 평가를 수행할 것인지, 우항에서 좌항으로 평가를 수행할 것인지에 관한 논의가 ``연산자의 결합순서``이다.

사용하면서 직관적으로 익히면 되는 부분이다.