// 특정 element를 만들어 주는 함수
function createElement(type, height, width){
	const element = document.createElement(type || 'div');
	
	element.style.height = ( height || 100 );
	element.style.width = ( width || 100 );
	
	return element;
}

createElement()

• (height || 100) 좌항 height가 falsy한 값일때 우항이 선택 된다.

하지만???….

const customElement = createElement('div', 0 , 0) 

console.log(customElment.style.height) // 100px
console.log(customElment.style.width) // 100px

// 0 || 10 -> 10
// false || 10 -> 10

• 이렇게 width와 height에 0 을 전달했는데도, default 값인 100이 먹힌다.
  • 이유 : 0은 falsy한 값이기 때문에.

// Falsy한 값
if (false)
if (null)
if (undefined)
if (0)
if (-0)
if (0n)
if (NaN)
if ("")

• 하지만 나는 0도 값으로 인식해서 쓰고 싶다. →

<aside> 💡

결국 OR 연산자를 사용해서 Falsy한 값은 null과 undefined만 갈라내고 싶다.

</aside>

Null 병합 연산자

// 특정 element를 만들어 주는 함수
function createElement(type, height, width){
	const element = document.createElement(type ?? 'div');
	
	element.style.height = ( height ?? 100 );
	element.style.width = ( width ?? 100 );
	
	return element;
}

const customElement = createElement('div', 0, 0);
console.log(customElement.style.width) // 0px

• || → ?? 로 변경하면서 좌항의 값이 Falsy한 값중에서 null이나 undefined일때만 작동한다.

ex) (height ?? 100) height가 null 이나 undefined 일때만 100이 선택된다. 만약에 0 이면 0이 찍힌다.

정리

null or undefined => ??

falsy => ||

• null과 undefined만 평가 하고 싶을때는 ?? ⇒ null 병합 연산자를 사용한다.