Language/Javascript

[JavaScript/jQuery] Null 병합 연산자 '??'

Plitche 2023. 1. 5. 11:49
반응형

안녕하세요! Plitche(플리체)입니다.
이번 포스팅의 내용은 jQuery를 이용해서 Null 병합 연산자(??)소개 입니다.

Intro

Script를 작성하면서 Null 체크는 빈번하게 사용할 일이 많습니다.
그때마다 비교적 길고 지저분한 코드들을 간단하게 줄일 수 있는 연산자 입니다.


Null 병합 연산자(??)를 사용하지 않은 형태부터 동일한 결과의 코드를 차례로 예시를 들어 보여드리겠습니다.

1. 기본 연산자만 사용한 형태

해당 변수의 값이 Null일 때 '10' 이라는 값을 할당한다고 가정합니다.
그럼 data라는 변수가 있을때 해당 로직은 아래 사진과 같을 것입니다.

가장 기본적인 코드이지만 사실 작성하기 너무 번거롭고 보기도 좋지 않습니다.

  var data = null
  if (data === null || data === undefined) {
    data = 10
  }
  console.log(data) // 10

 

2. 삼항 연산자를 활용한 형태

모든 조건은 위와 같지만 삼항연산자를 활용한 형태의 예시입니다.

1번 예시보다는 한줄로 간결해졌지만 아직 맘에 들지않아요!

  var data = null
  data = (data === null || data === undefined) ? 10 : data
  console.log(data) // 10

 

 

3. Null 병합 연산자를 활용한 형태

이번엔 이번 포스팅에서 소개해 드리고 있는 Null 병합 연산자를 활용한 형태 입니다.

정말 말도안되게 코드가 확! 줄었습니다.

 

  var data = null
  data ??= 10
  console.log(data) // 10

위 1,2번 코드들과 비교를 해보면 정말 간단한 예시만으로도

코드가 훨신 더 간결해지고, 가독성이 좋아진 모습을 확인 할 수 있습니다.

 

주의점

  1) 연산자 우선순위

Null 병합 연산자(??)의 우선순위는 5순위로 상당히 낮습니다.
때문에 다른 연산자보다 더 먼저 적용하려면 괄호 등을 통해 순서를 잘 지정해 주어야 합니다.

  2) 브라우저

테스트 결과 Chrom이나 Edge에서는 잘 작동하나, 역시 Explorer에서는 작동하지 않았습니다.
혹 아직 익스를 서비스해야하는 곳이라면 사용하기 힘들 것 같습니다.

My thought

처음부터 모든 문법들이나 기타 등등을 한번에 접하려고 하면 상당히 머리가 복잡하지만,
하나씩 숙지하다보면 나중에 하나씩 추가되는 문법들은 쉽게 익숙해질 수 있습니다.

 

처음부터 너무 급하게 달리지 마시고 천천히 꾸준히 학습하시길 바랍니다!^^ 감사합니다.

반응형