[Javascript] 자바스크립트 물음표(?) 2개 / 느낌표(!) 2개 / 물결(~) 2개 연산자(feat.예시코드)

척척 프로그래밍, 인프준

 

 

 

 

 

 

 

 

 

자바스크립트 유용한 연산자

자바스크립트에서는 다양한 연산자를 제공하여 코드를 더 간결하고 가독성 있게 작성할 수 있습니다. 그중에서도 물음표, 느낌표, 물결 연산자에 대해서 알아보고, 어떤 상황에서 사용하는 것이 좋은지 그리고 각각의 연산자를 사용할 때 주의할 점 등에 대해 다루며 예시 코드도 같이 소개할 예정입니다.

 

 

 

 

• 물음표 한 개 - 삼항 연산자, 옵셔널 체이닝 연산자
• 물음표 두 개 - Null 병합 연산자
• 느낌표 한 개
• 느낌표 두 개
• 물결 한 개 - 틸드 연산자
• 물결 두 개

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

물음표 한 개(?)

물음표 한 개 연산자는 자바스크립트에서 가장 일반적으로 사용되는 연산자 중에 하나이며 삼항 연산자와 옵셔널 체이닝 연산자에서 사용됩니다.

 

 

1) 삼항 연산자(Ternary operator)

조건식 ? 참일 때의 값 : 거짓일 때의 값

 

이 연산자는 if-else 문과 비슷한 역할을 하며, 조건식이 참(true) 일 때와 거짓(false) 일 때 각각 다른 값을 반환합니다.

 

const x = 10;
const y = 20;

const result = x > y ? 'x가 y보다 큽니다.' : 'y가 x보다 큽니다.';
console.log(result); // 'y가 x보다 큽니다.'

 

 

2) 옵셔널 체이닝 연산자(Optional Chaining Operator)

옵셔널 체이닝 연산자(?.)는 객체의 중첩 속성에 접근할 때, 해당 속성이 없는 경우 undefined를 반환하는 연산자입니다. 

 

let user = {}; // 정보가 없는 사용자

// undefined, 페이지에 존재하지 않는 요소에 접근해 요소의 정보를 가져오려 하면 에러 발생
console.log( user && user.name && user.name.lastname );

// undefined, 에러가 발생하지 않습니다.
console.log( user?.name?.lastname );

 

이 연산자를 사용하면, 속성이 없을 때 발생할 수 있는 에러를 방지하고 코드의 간결성을 높일 수 있습니다.

 

const obj = {
  prop1: {
    prop2: {
      prop3: 'value'
    }
  }
};

// 옵셔널 체이닝 연산자를 사용하지 않은 경우
if (obj.prop1 && obj.prop1.prop2 && obj.prop1.prop2.prop3) {
  console.log(obj.prop1.prop2.prop3);
} else {
  console.log('undefined');
}

// 옵셔널 체이닝 연산자를 사용한 경우
console.log(obj?.prop1?.prop2?.prop3);

 

 

 

 

 

물음표 두 개(??)

물음표 두 개 연산자(Nullish coalescing operator)는 좌항의 값이 null 또는 undefined인 경우에만 우항의 값을 반환하고, 그 외의 경우에는 좌항의 값을 반환합니다. 이러한 동작 때문에 옵셔널 체이닝 연산자(?.)와 함께 사용되기도 합니다.

 

const a = null;
const b = undefined;
const c = 0;
const d = '';
const e = false;

console.log(a ?? 'default'); // 'default'
console.log(b ?? 'default'); // 'default'
console.log(c ?? 'default'); // 0
console.log(d ?? 'default'); // ''
console.log(e ?? 'default'); // false

 

이와 같이 변수의 값이 null 또는 undefined인 경우에 기본값을 설정할 때 유용하게 사용됩니다.

 

 

 

 

 

느낌표 한 개(!)

자바스크립트에서 느낌표(!)는 논리 부정 연산자로 사용되며 피연산자의 논리 값을 반전시킵니다. 즉, 피연산자가 true면 false로, false면 true로 바꿉니다.

 

예를 들어, !true는 false가 되고, !false는 true가 됩니다. 이 연산자는 불리언 값뿐만 아니라 다른 타입의 값을 논리 값으로 변환할 때도 사용됩니다. 

 

let x = 10;
let y = 20;

if (!(x > y)) {
  console.log("x는 y보다 작거나 같습니다.");
}
// 출력 결과: x는 y보다 작거나 같습니다.

let str = "";
if (!str) {
  console.log("문자열이 비어있습니다.");
}
// 출력 결과: 문자열이 비어있습니다.

 

 

 

 

 

느낌표 두 개(!!)

자바스크립트에서는 느낌표를 2개(!!) 사용하여 값을 불리언 값으로 명시적으로 변환할 수 있습니다. 이를 두 번째 부정 연산자(double negation operator)라고도 부릅니다.

 

let x = null;

console.log(x); // 출력 결과: null
console.log(!!x); // 출력 결과: false

 

이와 같이 두 번째 부정 연산자(!!)를 사용하면 값이 null 또는 undefined인 경우에도 명시적으로 false 값을 얻을 수 있습니다.

 

 

 

 

 

물결 한 개(~)

비트 부정 연산자 또는 틸드(Tilde) 연산자라고 불리는 이 연산자는 피연산자로 들어온 숫자의 비트를 뒤집는 기능을 합니다. 자세한 동작은 2진수로 표현했을 때 0을 1로, 1을 0으로 바꿔주는 동작을 하지만 단순하게 아래의 공식과 같습니다.

 

-( K + 1 )

 

아래는 예시 코드이며 양수와 음수 모두 적용됩니다.

 

let numA = 7;
console.log(~numA);
// -8

let numB = -5;
console.log(~numB);
// 4

 

 

 

 

 

물결 두 개(~~)

Not 연산자는 두 번 사용하게 되면 다시 원본값을 반환하는 성질을 가집니다. 하지만 기본적으로 물결 연산자는 소수점 아래 비트를 버리는 성질을 가집니다.

 

이점을 이용한 방식으로 Math.floor의 기능과 같이 소수점을 제거하는데 활용할 수 있습니다. Math.floor에 비해 속도가 더 빠르다는 의견도 있습니다.

 

let numA = 5.5;
console.log(~~numA);
// 5

let numB = -10 / 3;
console.log(~~numB);
// -3

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

정리

물음표 한 개 - 삼항 연산자와 옵셔널 체이닝 연산자
물음표 두 개 - 프로퍼티 접근 시에 undefined 에러를 방지

느낌표 한 개 - 논리 부정 연산자로, Boolean 값의 반대 값을 반환
느낌표 두 개 - 일치하지 않는 값인 경우 true를, 일치하는 값인 경우 false를 반환

물결 한 개 - 피연산자의 비트를 반전, -(K+1)
물결 두 개 - Math.floor()와 같이 소수점 버림

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

Reference

ChatGPT, 모던 Javascript 튜토리얼