Javascript 유용한 연산자

Javascript 에서 물음표(?), 느낌표(!)  등 다양한 연산자를 통해 코드의 간결하고 가독성 있게 바꿔준다.

 

물음표 1개(?)

물음표 한개 연산자는 "삼항연산자", "옵셔널 체이닝 연산자" 에서 사용된다.

 

삼항연산자

// 조건식 ? 참값 : 거짓값

let a = 11;
a > 10 ? 'a가 10보다 큽니다.' : 'a가 10보다 작습니다.'

 

삼항연산자는 조건식이 참과 거짓일 때 콜론(:)을 기준으로 각각 다른 값을 반환한다.

 

 

옵셔널 체이닝 연산자(?.)

// 사용법 = (?.)

let card = {};

// undefined, 객체의 존재하지 않는 요소에 접근해 정보를 가져오려고 할 경우 에러가 발생한다.
console.log(card && card.name && card.name.number);

// undefined, 에러가 발생하지 않는다.
console.log(card?.name?.number);

 

옵셔널 체이닝 연산자는 객체안의 속성이 존재하지 않을 경우 호출했을 때 에러를 방지하고자 사용한다.

 

 

 

물음표 두개(??)

물음표 두개 연산자는 좌항의 값이 NULL 또는 undefined 인 경우에 우항의 값을 반환하고

아닐경우 아닐경우 좌항의 값 그대로 반환한다.

특정 값이 null 과 undefined 인지를 체크하려고 하면 유용하게 사용된다.

 

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

console.log(a ?? 'null 입니다.');
console.log(b ?? 'undefined 입니다.');
console.log(c ?? '0 입니다.');
console.log(d ?? '빈값입니다.');
console.log(e ?? 'false 입니다.');

 

 

 

느낌표 1개(!)

Javascript 에서의 느낌표 1개는 논리 부정 연산자로 사용된다.

피연산자의 값을 반전시키는데 true 면 false, false 면 true 로 바꾼다.

 

let a = null;
let b = undefined;
let c = '';
let d = 0;
let e = true;
let f = 1;

console.log(!a);
console.log(!b);
console.log(!c);
console.log(!d);
console.log(!e);
console.log(!f);

 

null, undefined, '',  0 인 피연산자들은 느낌표 1개(!) 를 통해 true, false 를 구별할 수 있다.

 

느낌표 2개(!!)

느낌표 2개는 값을 불린 값 형식으로 변경할 수 있다.

 

let a = null;
let b = undefined;
let c = '';
let d = 0;
let e = true;

console.log(!!a);
console.log(!!b);
console.log(!!c);
console.log(!!d);
console.log(!!e);

 

 

null, undefined, '', 0 일 경우에 불린 형식인 false 값으로 변환할 수 있다.