Blog - park

typescript를 사용하면서 처음 본 연산자(!)에 대해서 알아보려고 한다.

💡 Non-null assertion operator (!) 란?
접미에 붙는 느낌표(!) 연산자인 단언 연산자는 해당 피연산자가 null, undeifned가 아니라고 단언해준다.
접두사로 쓰이는 !는 boolean의 부정문으로 사용된다.

먼저, HTML문서에서 status라는 id를 가진 요소를 찾고, 해당 요소의 텍스트 내용을 Update로 변경하는 코드를 예로 생각해보자.

typescript에서 아래와 같이 사용하면 오류가 나오는 것을 확인할 수 있다.

const el = document.getElementById('status')
el.textContent = 'Update' // 오류: 'el'은(는) 'null'일 수 있습니다.

지금까지 내가 사용해왔던 방법은 아래와 같다.

getElementById함수는 지정된 ID와 일치하는 DOM 요소 개체, 일치하는 요소가 없다면 null을 리턴해주기 때문에

조건문을 사용해서 null이 아닌경우에 해당 요소에 접근하는 방법을 사용해 왔다.

const el = document.getElementById('status')
if (el) {
  el.textContent = 'Update'
}

하지만, ! 연산자를 사용하면 조금더 간편하게 사용할 수 있게 된다.

아래 소스코드로 확인해보자.

const el = document.getElementById('status')
el!.textContent = 'Update'

📕 주의사항

하지만, 해당 연산자를 사용할 때 주의할 점이 있다.

! 연산자는 일반적인 단언문처럼 생각하면 될 것 같다.

단언문은 컴파일 과정 중에 제거되기 때문에, 타입 체커는 알지 못하지만 그 값이 null이 아니라고 확인할 수 있을 때만 사용해야 한다.

만약 그렇지 않다면 null인 경우를 체크하는 조건문을 사용해야 한다.

위의 코드를 javscript로 컴파일해서 다시한번 살펴보자.

//typescript
const el = document.getElementById('status')
el!.textContent = 'Update'
 
//javascript로 컴파일
var el = document.getElementById('status')
el.textContent = 'Update'

이렇게 javascript로 컴파일 하게 되면 위의 소스코드로 변환되어 실행되게 될 것 이다.

HTML문서에 일치하는 요소가 존재하지 않을 경우 null이 리턴되기 때문에 오류가 발생할 수 있으므로, 사용에 주의가 필요할 것 같다.

eslint에서는 ! 연산자가 엄격한 null체크를 할 수 없기떄문에 사용을 권장하지 않고 있다.

eslint에서는 아래와 같이 작성하는것을 권하고 있다.

// 잘못된 코드
interface Foo {
  bar?: string
}
 
const foo: Foo = getFoo()
const includesBaz: boolean = foo.bar!.includes('baz')
 
// 올바른 코드
interface Foo {
  bar?: string
}
 
const foo: Foo = getFoo()
const includesBaz: boolean = foo.bar && foo.bar.includes('baz')

!를 사용하게 되면 코드를 간결하게 작성할 수 있어서 좋아 보였지만 제대로 사용하지 않으면 많은 오류를 야기할 수 있기 때문에 주의해서 사용해야겠다..ㅎㅎ

Non-null assertion operator | !

📕 주의사항

📚출처