연산자(Operator)는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 연산 등을 수행해 하나의 값을 만든다.

🤔개념

Numeric operators (산술 연산자)

기호	명칭
+	덧셈연산자
-	뺄셈연산자
/	나눗셈연산자
*	곱셈연산자
%	나머지연산자
**	거듭제곱연산자

String concatenation

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

'my' + 'dog';
'8' + 5; // 결과: '85' => 숫자와 문자열을 더하면 문자열로 변환됨
`string literals : 8 + 5 = ${8 + 5}`

덧셈을 제외한 연산자
뺄셈과 나눗셈과 같이 덧셈을 제외한 산술 연산자의 경우, 오직 숫자형의 피연산자만을 다룬다.

const a = 8 - '2' // 6
const b = '6' / '3' // 2

Unary operators (단항 연산자)

기호	의미
+	양
-	음
!	부정 (논리 연산자에 속함)

!!
피연산자를 불린형으로 변환하며, 내장함수 Boolean 도 같은 역할을 수행한다.

// + : 숫자가 아닌 타입들을 숫자로 변환하면 어떤 값이 나오는지 확인 가능함
+false // 0
+null // 0
+'' // 0
+true // 1
+'text' // NaN
+undefined // NaN
+'100' // 100 (형변환의 효과)
// !! : 불리언 타입으로 변환할 수 있음
!!1 // true

Increment & Decrement operators (증감 연산자)

let counter= 2;
const preIncrement= ++counter; // counter= counter+1; preIncrement= counter; 와 같음
const postIncrement= counter++; // postIncrement= counter; counter= counter+1; 와 같음

Assignment operators (할당 연산자)

**=,** +=, **-=, *=, /=, %=**

Comparison operators (비교 연산자)

**<, <=, >, >=**

A Between B

변수가 특정 범위 내에 존재하는 조건을 표현할 때, A <= x <= B 와 같이 쓸 수 없다. 대신, (A <= x) && (x <= B) 와 같이 쓸 수 있다.

Logical operators (논리 연산자)

기호	설명
ll (or)	하나만 참이어도 참
&& (and)	모두 참이어야 참
! (not)	피연산자는 불리언 값이 아니면 불리언으로 암묵적 타입 변환됨

Short-curcuit

조건문 밖에서 논리 연산자를 사용하는 경우로, 참이나 거짓으로 평가하지 않는다.

const obj1 = { name: 'dog' };
const obj2 = { name: 'cat', owner: 'Wonil' };
const obj3 = false;

let result = obj1 && obj2;
console.log(result); // { name: 'cat', owner: 'Wonil' }
result = obj3 && obj1;
console.log(result); // undefined
result = obj1 || obj2;
console.log(result); // { name: 'dog' }

• &&: 첫 번째 falsy를 반환하고, 만약 피연산자에 falsy가 없다면 마지막 값을 반환한다. 아래는 조건이 참일 때 ‘무언가’를 해야 할 경우, && 바로 뒤에 ‘무언가’를 쓰는 예시이다.

  function changeOwner(animal) {
      if (!animal.owner) {
          throw new Error("주인이 없음");
      }
      animal.owner = '바뀐주인!';
  }
  
  function makeNewOwner(animal) {
      if (animal.owner) {
          throw new Error('주인이 있어')
      }
      animal.owner = '새로운주인!';
  }
  
  obj1.owner && changeOwner(obj1);
  obj2.owner && changeOwner(obj2);
  console.log(obj1); // obj1 그대로 출력
  console.log(obj2); // { name: 'cat', owner: '바뀐주인!' }

  • Null check: null 체크 시, && 연산자 활용할 수 있다.

    null nullableObject;
    nullableObject && nullableObject.something
    // if(nullableObject != null) {nullableObject.something;} 와 같음
    // if(nullableObject) {nullableObject.something;} 와 같음

    let item = { price: 1 };
    const price = item && item.price;
    console.log(price); // 1

  • Optional Chaining ?. : null check 시 반복을 최소화한다.

    let obj = { name: 'dog', owner: { name: 'wonil' }};
    function printOwnerName(obj) {
        const ownerName = obj?.owner?.name;
        console.log(ownerName);
    }
    printOwnerName(obj);

    • 예시

      // dimensions 객체가 존재할 경우에만 동작 수행
      dimensions?.height > 760 && dimensions?.width / dimensions?.height < 1.3
            ? setResize(true)
            : setResize(false);

• ||: 첫 번째 truthy를 반환하고, 만약 피연산자에 truthy가 없다면 마지막 값을 반환한다. 아래는 조건이 거짓일 때 ‘무언가’를 해야 할 경우, || 바로 뒤에 ‘무언가’를 쓰는 예시이다.

  // ...
  obj1.owner || makeNewOwner(obj1);
  obj2.owner || makeNewOwner(obj2);
  console.log(obj1); // { name: 'dog', owner: '새로운주인!' }
  console.log(obj2); // obj2 그대로 출력

  • 기본값 설정: 기본값 설정 시 || 연산자를 활용할 수 있다.

    function print(message) {
        const text = message || 'Hello';
        console.log(text); // Hello
    }
    print();

    Default Parameter와의 차이점

    default parameter의 경우 빈 값이나 undefined(직접 명시)를 인자로 넘겼을 경우 지정한 디폴트로 인자를 대체하는 반면, || 활용의 경우 undefined 뿐만 아니라 0, -0, null, ‘’ 와 같이 거짓인 경우를 모두 취급할 수 있다.

|| 과 && 를 사용할 때 주의점

연산을 많이 하는 함수나 표현을 논리 연산자의 앞부분에 호출하면 비효율적일 수 있음을 인지하자.

Equality operators (동등 연산자)

기호	의미
== (loose equality)	형식을 같게 변환하여 비교(동등 비교)
=== (strict equality)	형변환 없이 비교(일치 비교)
!=	(부등 비교)
!==	(불일치 비교)

• 예시

    const stringOne= '1';
    const numberOne= 1;
    stringOne == numberOne // true
    stringOne != numberOne // false
    stringOne === numberOne // false
    stringOne !== numberOne // true

• Object equality: 객체에서의 동등 연산자를 통한 비교는 항상 참조 주소 일치 여부만 판단하게 된다. 따라서 실제 구조의 일치 여부를 알고 싶은 경우에는 JSON.stringify 나 lodash(라이브러리) 등을 활용할 수 있다.

    const wonil1 = {name: 'wonil'};
    const wonil2 = {name: 'wonil'};
    const wonil3 = wonil1;
    wonil1 == wonil2; // false
    wonil1 === wonil2; // false
    wonil1 === wonil3; // true

    JSON.stringify(wonil1) === JSON.stringify(wonil2); // true
    _.isEqual(wonil1, wonil2); // true

Conditional operators (조건 연산자)

if, else if, else

Ternary operator (삼항 연산자)

condition ? value1 : value2 ;

condition 이 불리언 값이 아니면 불리언 값으로 암묵적 타입 변환이 일어난다.

Ternary operator vs if…else
삼항 연산자를 if…else문으로 대체할 수 있지만, if…else문은 표현식이 아닌 문이므로 값으로 평가될 수 없다. 반면, 삼항 연산자는 값으로 평가할 수 있는 표현식으로 다른 표현식의 일부가 될 수 있다.

• 예시: 리액트에서 css 모듈 사용시 조건에 따른 다른 css 적용

  <img
      className={resize ? styles.reSize : styles.sameSize}
      src={imgSrc}
      alt="img__main"
  />

• 중첩 삼항연산자: 삼항 연산자는 표현식이므로 다른 표현식의 일부가 될 수 있다. 다만, 무분별한 사용은 가독성을 헤칠 수 있음에 유의하자.

  let num = -7
  
  let state = num ? (num > 0 ? '양수' : '음수') : '영';

Nullish coalescing operator (nullish 병합 연산자)

?? (nullish coalescing operator)는 여러 피연산자 중 그 값이 ‘확정되어 있는’ 변수를 반환하는 연산자이다.

a ?? b : a가 null 도 아니고 undefined 도 아니면 a를, 그 외의 경우는 b를 반환한다.

?? vs ||

|| : 첫 번째 truthy 값을 반환

?? : 첫 번째 정의된 값을 반환

실제 의도와 다르게 기본값으로 대체하는 오류를 방지할 수 있다. 0이 할당될 수 있는 변수를 사용해 기능을 개발할 땐 ||보다 ??가 적합하다. ex) 높이

let num = 0; // 0 을 그대로 출력하려는 의도를 가지고 있음
console.log(num || '-1'); // '-1'로 대체
console.log(num ?? '-1'); // 0 그대로 출력

In

명시된 속성이 명시된 객체에 존재하면 true를 반환하며, 속성 in 객체명 형태로 사용한다. 이때, 속성은 속성의 이름이나 배열의 인덱스를 뜻하는 문자열 또는 수 값이고, 객체명은 객체의 이름이다. 객체명에는 반드시 객체를 명시해야 한다. 가령, String 생성자로 만들어진 문자열은 명시 가능하지만, 문자열 리터럴은 명시할 수 없다.

• 배열에 사용하는 경우: 배열의 내용이 아닌, 인덱스 값을 명시해야 한다. 파이썬에서의 in 연산자와 혼동하지 말자.

  const arr = ['apple', 'banana', 'cherry'];
  
  0 in arr // → true (인덱스 0이 배열에 존재하는지 확인)
  '0' in arr // → true (인덱스는 문자열로도 표현 가능)
  'apple' in arr // → false (배열 내용 중 값 'apple'이 인덱스가 아니므로 in 연산자는 false 반환)