개발나라 스용공주

[JavaScript] NULL과 Undefined 차이점 / NULL 병합 연산자 본문

WEB/JavaScript

[JavaScript] NULL과 Undefined 차이점 / NULL 병합 연산자

스용공주 2024. 11. 22. 00:23
728x90
728x90

이번 글은 null과 undefined의 설명과 둘의 차이점과 null 병합 연산자에 대해 알아볼 것이다.

 


 

[ NULL ]

null type은 아무 것도 없는 것으로 명시적으로 값을 넣어줄 때 사용된다.

let empty = null;

 

 


 

[ Undefined ]

undefined type은 변수 선언 후 아무 값도 할당하지 않았을 때 자동으로 부여되는 것이다.

let none;

 

 


 

[ NULL과 Undefined의 차이점 ]

이 둘의 차이 점은 null은 비어있는 값 자체를 값으로서 넣어준 것이고 undefined의 경우 변수의 선언만 하고 아무런 값을 넣어주지 않았을 때 정의되지 않은 곳에 자동으로 undefined이 적용된 것이다.

 


 

[ NULL 병합 연산자 ]

null 병합 연산자는 존재하는 값을 추려내는 기능으로 null, undefined이 아닌 값을 찾아내는 연산자이다.

null 병합 연산자는 아래 코드와 같이 ??의 형태로 사용된다.

 

형태 1 ) undefined 형태인 var1과 있을 때, 결과값으로 var2가 출력된다.

let var1;
let var2=10;
let var3=20;

let var4=var1??var2;

console.log(var4);

결과값

 

형태 2 ) undefined 형태인 var1과 있을 때, 결과값으로 var3가 출력된다.

let var1;
let var2=10;
let var3=20;

let var5=var1??var3;

console.log(var5);

결과값

 

형태 3 ) 값이 있는 형태인 var2와 var3가 만나면 앞에 있는 var2의 값이 출력된다.

let var1;
let var2=10;
let var3=20;

let var6=var2??var3;

console.log(var6);

결과값

 

형태 4 ) 값이 있는 형태인 var2와 var3가 만나면 앞에 있는 var3의 값이 출력된다.

let var1;
let var2=10;
let var3=20;

let var6=var3??var2;

console.log(var6);

결과값

 


 

[ NULL 병합 연산자 활용하기 ]

만약 아래 코드와 같이 유저의 성명 정보를 불러와야 하는 경우에  null 병합 연산자를 사용해 유저 이름을 불러오고 이름이 등록되어져 있지 않다면(null 또는 undefined일 경우) 유저의 아이디를 대신 불러오는 형식에 사용할 수 있다.

let userName = "황서영";
let userId = "Hwang";

let userInfo = userName??userId;

 

 


728x90
728x90
Comments