1. Nullish coalescing operator
아래와 같은 코드가 있다.
function getTitle(title) {
return title || 'no title'
}
console.log(getTitle('알면 쓸만한 자바스크립트 문법'))
console.log(getTitle())
console.log(getTitle(''))
당연하게도 위와 같은 결과를 볼 것이다. 하지만, 마지막
console.log(getTitle(''))
타이틀이 공백문자열 일때는 제대로 표현 되지 않았다. 이럴때 쓸수 있는 것이 아래와 같은 코드이다.
function getTitle(title) {
return title ?? 'no title'
}
console.log(getTitle('알면 쓸만한 자바스크립트 문법'))
console.log(getTitle())
console.log(getTitle(''))
위의 ?? 연산자는 null과 undefined에 대해서만 처리가 된다.
2. console 출력 꾸미기
콘솔을 보다 보면 아래와 같이 이상하게 멋있는(?) 콘솔들을 볼 수 있다. 개발자 대상으로 경고 목적이나, 개발자들한테 전달 하고 싶은 내용들을 멋있게(?) 노출 시킨 다.
console.log("%c콘솔을 꾸며 봅시다.",
"color: yellow; font-style: italic; background-color: blue;padding: 2px");
위처럼 %c키워드를 이용하면, 뒤에 있는 font-style을 적용 시킬 수 있다. 브라우저별로 사용 가능한 키워드가 있으니 주의 하자. <- 뭐 물론 스타일이 적용 되지 않는다고 버그로 인식 하진 않을 테니 뭐...
3. Optional chaining
let a = null
if(a && a.test && a.test.test) {
a && a.test && a.test.test()
}
개발을 하다보면 위와 같이 a.test.test가 있으면 실행 한다거나 하는 코드를 만들 때가 있다.
하지말 위처럼 해당 함수까지의 값이 있는지 하나씩 확인해가며 실행해야 할 때가 있는데, if문과 &&를 이용하는 것을 꽤나 불편하다.
a?.test?.test?.()
Optional chaining을 이용 하면 간단하게 위처럼 표현 할 수 있다.
뭐 의문을 갖고 계신분은 딵디 걸만한 부분은 a.test.test가 함수 인지에대한 판단을 하는가?를 의문을 품을 수 있다. 당연하게도, 값이 null, 이나 undefined 대한 여부만 확인할 뿐 함수 여부는 확인해주지 않는다. 이점은 주의 하자.
댓글
댓글 쓰기