[번역] 👋 이제는 스프레드 연산자를 보내주고 default-composer를 사용하세요

2023.06.27 — Translate, JavsScript — 8 min read

이 게시물은 원본 아티클인 👋 Say Goodbye to Spread Operator: Use Default Composer 를 한글로 번역한 게시글입니다. 게시물 내용의 저작권은 원작자 Aral Roca 에게 있습니다.

자바스크립트에서 객체를 사용할 때 비어있는 문자열/객체/배열, null 또는 undefined 속성에 대해 기본값을 설정해야하는 것이 일반적입니다. 중첩된 객체를 다룰 때는 이 상황이 더욱 복잡해지고, 복잡한 프로그래밍 로직이 필요합니다. 그러나 "default-composer" 라이브러리를 사용하면, 작업을 더 간단하고 쉽게 바꿀 수 있습니다.

"default-composer" 가 뭔가요?

"default-composer"는 가벼운(~300B) 자바스크립트 라이브러리로, 중첩된 객체에서 기본 값을 설정할 수 있습니다. 이 라이브러리는 존재하는 객체의 비어있는 문자열/객체/배열, null 또는 undefined 값들을 정의된 기본값으로 대체합니다. 이는 기본값을 설정하는 코드의 양을 줄이고 프로그래밍 로직을 간단하게 바꿀 수 있게 도와줍니다.

스프레드 연산자와 Object.assign 보다 좋은 점

...spread operator와 Object.assign 또한 객체의 기본값을 설정하는 데 사용할 수 있지만, "default-composer" 는 이 메소드보다 몇 가지 이점을 제공합니다.

중첩된 객체에서 사용 가능합니다. 반면에 스프레드 연산자와 Object.assign()은 오로지 얕은 객체에서만 동작합니다.
스프레드 연산자 또는 Object.assign()보다 더 간결하고 읽기 쉽습니다. 기존 메소드들은 특히 중첩된 객체에서 기본 값을 설정할 때 정말 많은 코드와 읽기 어려운 코드가 됩니다.
기본값으로 설정 할 속성을 스프레드 연산자 또는 Object.assign()보다 더 세밀하게 제어할 수 있습니다.

우리가 이러한 원본 객체를 가지고 있다고 생각해보세요:

const original = {
	name: '',
	score: null,
	address: {
		street: '',
		city: '',
		state: '',
		zip: '',
	},
	emails: [],
	hobbies: [],
	another: 'anotherValue',
};

그리고 이 객체의 기본값은 다음과 같습니다:

const defaults = {
	name: 'John Doe',
	score: 5,
	address: {
		street: '123 Main St',
		city: 'Anytown',
		state: 'CA',
		zip: '12345',
	},
	emails: ['john.doe@example.com'],
	hobbies: ['reading', 'traveling'],
};

우리는 이 객체의 "", null, [], undefined, {}와 같은 원본 값들을 기본 값으로 변경하고 싶습니다. 따라서, 방법은 아래와 같습니다.

console.log(results);
/**
 * {
 * "name": "John Doe",
 * "score": 5,
 * "address": {
 *   "street": "123 Main St",
 *   "city": "Anytown",
 *   "state": "CA",
 *   "zip": "12345"
 * },
 * "emails": [
 *   "john.doe@example.com"
 * ],
 * "hobbies": [
 *   "reading",
 *   "traveling"
 * ],
 * "another": "anotherValue"
 **/

아마도 스프레드 연산자를 사용하면 이렇게 해야할 겁니다:

const results = {
	...defaults,
	...original,
	name: original.name || defaults.name,
	score: original.score ?? defaults.score, // "??" beacause 0 is valid
	address: {
		...defaults.address,
		...original.address,
		street: original.address.street || defaults.address.street,
		city: original.address.city || defaults.address.city,
		state: original.address.state || defaults.address.state,
		zip: original.address.zip || defaults.address.zip,
	},
	emails: original.emails.length ? original.emails : defaults.emails,
	hobbies: original.hobbies.length ? original.hobbies : defaults.hobbies,
};

그리고 Object.assign을 사용하면 이럴 것입니다:

const results = Object.assign({}, defaults, original, {
	name: original.name || defaults.name,
	score: original.score ?? defaults.score, // "??" beacause 0 is valid
	address: Object.assign({}, defaults.address, original.address, {
		street: original.address.street || defaults.address.street,
		city: original.address.city || defaults.address.city,
		state: original.address.state || defaults.address.state,
		zip: original.address.zip || defaults.address.zip,
	}),
	emails: original.emails.length ? original.emails : defaults.emails,
	hobbies: original.hobbies.length ? original.hobbies : defaults.hobbies,
});

특히 크고 무거운 중첩된 객체에서 이를 유지하는 것은 매우 귀찮습니다.

defaultComposer를 사용하면 우리는 이것만 하면 됩니다:

import defaultComposer from 'default-composer'; // 300B
// ...
const results = defaultComposer(defaults, original);

유지하고 정말 쉽네요. 그렇죠? 😉

만약 우리의 프로젝트에 다른 속성과 다른 동작을 하는 특별한 속성이 있으며, 이 속성에 대해 다른 대체 로직을 원한다면 어떻게 해야 할까요? 기본적으로 defaultComposer는 기본값을 감지하는 설정이 제공되지만, 필요에 따라 원하는 대로 수정할 수 있습니다.

import { defaultComposer, setConfig } from 'default-composer';

setConfig({
	// This function is executed for each value of each key that exists in
	// both the original object and the defaults object.
	isDefaultableValue: (
		// - key: key of original or default object
		// - value: value in the original object
		// - defaultableValue: pre-calculed boolean, you can use or not,
		//   depending if all the rules of the default-composer library are correct
		//   for your project or you need a totally different ones.
		{ key, value, defaultableValue }
	) => {
		if (key === 'rare-key') {
			return defaultableValue || value === 'EMPTY';
		}

		return defaultableValue;
	},
});

결론

저는 자바스크립트에서 중첩된 객체의 기본값 설정을 할 때 "default-composer" 라이브러리를 사용하는 방법을 소개했습니다.

이 라이브러리는 용량이 작으며, 스프레드 연산자와 Object.assign 메소드보다 간결하고 읽기 쉬운 코드를 제공합니다. 또한 이는 기본 값을 설정할 때 더 세부적으로 속성을 제어할 수 있습니다.

이번 아티클에서는 라이브러리를 사용해 어떻게 하면 간단하게 중첩된 객체를 관리할 수 있는지 예시를 제공했습니다.

마지막으로, 다른 대체 로직이 필요한 특수한 케이스를 처리할 수 있도록 라이브러리를 설정할 수 있음을 설명했습니다. 전체적으로 "default-composer"는 자바스크립트에서 중첩된 객체의 기본 값을 설정하는 작업을 간단하게 만드는데 유용한 라이브러리입니다.

역주 의견

여기서부터는 저(himprover)의 의견 입니다.

이는 dev.to에서 200개 이상의 좋아요를 받은 아티클입니다.

그래서 그런지 얖선 다른 아티클보다 번역이 훨신 수월했습니다.

글을 잘 정리해서 작성하는 것은 다른 국가로 언어를 번역하는 데에도 중요한 것 같습니다.