JS 프로처럼 쓰는 팁

📌 Nullish coalescing operator : 병합연산자

null 병합 연산자(nullish coalescing operator)라고 불리는 ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 '확정되어있는' 변수를 찾을 수 있다.

 

a ?? b의 결과는 아래와 같다.
 
👉 a가 null도 아니고 undefined도 아니면 a
👉 그 외의 경우는 b(a가 null 또는 undefined)

 

nullish 병합 연산자 ??없이 x = a ?? b와 동일한 동작을 하는 코드를 작성하면 다음과 같다.

x = (a !== null && a !== undefined) ? a : b;

//❌ Bad Code 💩
function printMessage(text) {
	let message = text;
	if(text == null || text == undefined) {
		message = 'Nothing to display';
	}
	console.log(message)
}

//✅ Good Code ✨
function printMessage(text) {
	const message = text ?? 'Nothing to display';
	console.log(message)
}
printMessage(null) // 'Nothing to display'
printMessage(undefined) // 'Nothing to display'
printMessage('text') // 'text'
//왼쪽 피연산자가 null이나 undefined일 때, 오른쪽 피연산자를 return한다.
//반대의 경우에는 왼쪽 피연산자가 return된다.
// 💥 OR 연산자(||)는 왼쪽 피연산자가 null, undefined 뿐만 아니라 falsy값이면 오른쪽 피연산자를 return한다.

// 값이 아닌 함수의 실행된 값으로 할당도 가능하다.
const result = getInitialState() ?? fetchFromServer();
console.log(result) // Hello

function getInitialState() {
	return null;
}

function fetchFromServer() {
	return 'Hello';
}

// 💥 Default parameter is only for undefined
function printMessage(text = 'Nothing to display') {
	console.log(message)
}
printMessage(null) // null
printMessage(undefined) // 'Nothing to display'
printMessage('text') // 'text'

📌 Object Destructuring : 구조분해할당

const person = {name: 'Julia', age: 20, phone: '01023456789'}
//❌ Bad Code 1 💩
function displayPerson(person) {
	displayAvatar(person.name)
	displayName(person.name)
	displayProfile(person.name, person.age)
}
//❌ Bad Code 2 💩
function displayPerson(person) {
	const name = person.name;
	const age = person.age;
	displayAvatar(name)
	displayName(name)
	displayProfile(name, age)
}

//✅ Good Code ✨
function displayPerson(person) {
	const {name, age} = person;
	displayAvatar(name)
	displayName(name)
	displayProfile(name, age)
}

📌 Optional Chaining

옵셔널 체이닝(optional chaining) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다.

?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다.

const bob = {
	name: 'julia',
	age: 20,
}

const anna = {
	name: 'julia',
	age: 20,
	job: {
		title: 'Software Engineer'
	}
}

//❌ Bad Code 💩
function displayJobTitle(person) {
	if(person.job && person.job.title) {
		console.log(person.job.title)
	}
}

//✅ Good Code 1 ✨
function displayJobTitle(person) {
	if(person.job?.title) {
		console.log(person.job.title)
	}
}

//✅ Good Code 2 ✨
function displayJobTitle(person) {
	const title = person.job?.title ?? 'No Job Yet';
	console.log(title)
}

❗ 옵셔널 체이닝을 남용하지 말자!

?.는 존재하지 않아도 괜찮은 대상에만 사용해야 한다.

❗ ?.앞의 변수는 꼭 선언되어 있어야 한다.

선언되어있지 않으면 평가시 에러가 발생한다.

❗ ?.은 읽기나 삭제하기에는 사용할 수 있지만 쓰기에는 사용할 수 없다.

?.은 할당 연산자 왼쪽에서 사용할 수 없다.

user?.name = "Violet"; // SyntaxError: Invalid left-hand side in assignment
// 에러가 발생하는 이유는 undefined = "Violet"이 되기 때문이다.

📌 요약

옵셔널 체이닝 문법 ?.은 세 가지 형태로 사용할 수 있다.

1️⃣ obj?.prop – obj가 존재하면 obj.prop을 반환하고, 그렇지 않으면 undefined를 반환함
2️⃣ obj?.[prop] – obj가 존재하면 obj[prop]을 반환하고, 그렇지 않으면 undefined를 반환함
3️⃣ obj?.method() – obj가 존재하면 obj.method()를 호출하고, 그렇지 않으면 undefined를 반환함

✅ 옵셔널 체이닝 문법은 꽤 직관적이고 사용하기도 쉽다.

✅ ?. 왼쪽 평가 대상이 null이나 undefined인지 확인하고 null이나 undefined가 아니라면 평가를 계속 진행한다.
✅ ?.를 계속 연결해서 체인을 만들면 중첩 프로퍼티들에 안전하게 접근할 수 있다.
✅ ?.은 ?.왼쪽 평가대상이 없어도 괜찮은 경우에만 선택적으로 사용해야 한다.
✅ 꼭 있어야 하는 값인데 없는 경우에 ?.을 사용하면 프로그래밍 에러를 쉽게 찾을 수 없으므로 이런 상황에서는 쓰지 말아야 한다.

 

 

---

[출처] 유튜브 '드림코딩 엘리' 의 자바스크립트 강의를 보고 정리한 내용입니다.