3주차 주간회고를 TA 빡준님께서 리뷰해주셨다! (감사합니다!)
Salt님께서 hasOwnProperty라는 메소드를 사용하셨고, 그부분을 새로 배웠다! 라고 작성했는데, TA 빡준님께서 해당 메소드의 코드를 공유해주셨다!
const obj = {}
const hasPropertyByKey = (key:string) => !!obj[key]근데 !! 연산자를 사용하고 있는데, 이전에 연산자 정리를 했는데 내가 대충보고 지나친것 같다는 생각이 들었다.
그래서 다시한번 리마인드 해보려고 한다.
자바스크립트 유요한 연산자
자바스크립트에서는 다양한 연산자를 제공해 코드를 더 간결하고 가동성 있게 작성할 수 있다!
그 중에서 ?, !, ~를 알아보고 어떤 상황에서 사용하는것이 좋을이 정리해보자.
- 물음표 한 개 - 삼항 연산자, 옵셔널 체이닝 연산자
- 물음표 두 개 - Null 병합 연산자
- 느낌표 한 개
- 느낌표 두 개
물음표 한 개 (?)
물음표 한 개 연산자는 자바슼릡트에서 가장 일반적으로 사용하는 연산자 중 하나인데, 삼항 연산자와 옵셔널 체이닝 연산자에 사용된다.
- 삼항 연산자
조건식 ? 참일때 값 : 거짓일때 값삼항 연산자는 if-else문과 비슷한 역할을 하는데, 조건식이 참일때와 거짓일때의 각각 다른 값을 반환한다.
물론 이것도 if-else if처럼 중첩해서 사용할 수 있다.
const x = 10;
const y = 20;
const result = x > y ? "x가 더 큼!" : "x가 더 작음!";- 옵셔널 체이닝 연산자
옵셔널 체이닝 연산자는 객체의 중첩 속성에 접글할때, 해당 속성이 없는 경우 undefined를 반환하는 연산자다. (리스트에서도 사용가능, 그때는 ?. 를 사용)
한마디로 어떤 객체가 있고, 해당 객체 내부에 데이터들이 저장이 되어있을건데, 해당 데이터가 있을지 없을지 모른다고 가정해보자.
그럼 && 연산자를 사용해서 data가 있으면~ 이라는 조건을 걸어야 안전하게 코드가 돌아가겠지만, 옵셔널 체이닝 연산자를 사용하면 동일한 효과를 보다 짧은 코드로 갖고갈 수 있다.
const obj = {
data: {
hi: "안녕하세요!"
}
}
if(obj.data && obj.data.hi) {
console.log(obj.data.hi);
}
console.log(obj?.data?.hi?);물음표 두 개 (??)
null 병합 연산자는 || 와 언뜻 비슷해 보이지만 약간 다르다.
|| 연산자는 truthy값을 반환하지만 ?? 연산자는 null 또는 undefined가 아닌 값을 반환한다.
let height = 0;
alert(height || 100); // 100
alert(height ?? 100); // 0이 부분은 유념해두자
느낌표 한 개 (!)
느낌표 연산자는 어떤 데이터의 앞에 위치하느냐 뒤에 위치하느냐에 따라서 TS에서 다르게 동작한다. (골때리긴해)
- 앞에 위치할 떄
앞에 위치하게 되면 이는 논리연산자 중 부정(NOT)에 해당한다.
즉 피연산자가 True면 False로, False면 True로 바꿔버린다.
let str = "";
if(!str) {
console.log("빈 문자열~");
}
console.log(`${!true}`); // false
console.log(`${!false}`); // true- 뒤에 위치할 때
타입스크립트를 사용할때 어떤값이 undefined일지도 몰라! 라면서 빨간줄이 쫙 그어지는 경우가 있다.
그럴때 해당 데이터의 뒤에 느낌표를 붙혀줌으로써, 이거는 undefined가 될 일이 없다! 라고 확답(?)을줄때 사용한다.
const data = comming from somewhere
data.map(...) // data might be undefined 임
data!.map(...) // data는 undefined가 될 일이 없음!느낌표 두 개 (!!)
자바스크립트에서 느낌표를 2개 사용하면, 값을 불리언 값으로 명시적으로 변환할 수 있다!!
(그래서 hasOwnProperty가 undefined인데 false를 뱉으면서 되면서 O(1)이구만?)
const x = null;
console.log(x); // null
console.log(!!x); // false참고
