일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- cc4
- 티스토리챌린지
- 3d
- modeling
- HTML
- animating
- 개발
- ANIMATION
- ue5
- 마야
- 오블완
- visualstudio
- js
- Costume
- autodesk
- JavaScript
- reallusion
- 언리얼엔진
- unreal
- c++
- C
- 3dmodeling
- 프로그래밍
- character
- 애니메이팅
- iclone
- UnrealEngine
- 개발블로그
- C언어
- charactercreator
- Today
- Total
개발나라 스용공주
[JavaScript] NULL과 Undefined 차이점 / NULL 병합 연산자 본문
이번 글은 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;
'WEB > JavaScript' 카테고리의 다른 글
[JavaScript] 화살표 함수를 사용해 함수 표현 간소화하기 (0) | 2024.11.24 |
---|---|
[JavaScript] 삼항 연산자 (0) | 2024.11.23 |
[JavaScript] 비주얼스튜디오 코드(Visual Studio Code) - 유용한 플러그인 설치 (0) | 2024.11.21 |
[JavaScript] jQuery 메서드 종류와 이론 설명 (0) | 2024.10.26 |
[JavaScript] jQuery 기본 구조 설명 (3) | 2024.10.26 |