๋๋จธ์ง ๋งค๊ฐ๋ณ์๋ฅผ ํ์ฉํ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐฐ์ด ํจํด ๋งค์นญ์ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ์ ์์๋ณด์ธ์. ์ค์ฉ์ ์ธ ์์ ๋ก ๋ฐฐ์ด์ ํจ๊ณผ์ ์ผ๋ก ๊ตฌ์กฐ ๋ถํดํ์ฌ ๋ ๊น๋ํ๊ณ ๊ฐ๋ ์ฑ ์ข์ ์ฝ๋๋ฅผ ์์ฑํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ๋ง์คํฐํ๊ธฐ: ๋๋จธ์ง ๋งค๊ฐ๋ณ์๋ฅผ ์ฌ์ฉํ ๋ฐฐ์ด ํจํด ๋งค์นญ
์๋ฐ์คํฌ๋ฆฝํธ์ ๋ฐฐ์ด ๊ตฌ์กฐ ๋ถํด๋ ๋๋จธ์ง ๋งค๊ฐ๋ณ์์ ๊ฒฐํฉํ์ฌ ๊ฐ๋ ฅํ ํจํด ๋งค์นญ ๋ฉ์ปค๋์ฆ์ ์ ๊ณตํฉ๋๋ค. ECMAScript 2015(ES6)์์ ๋์ ๋ ์ด ๊ธฐ๋ฅ์ ๊ฐ๋ฐ์๊ฐ ๊ฐ๊ฒฐํ๊ณ ๊ฐ๋ ์ฑ ์ข์ ๋ฐฉ์์ผ๋ก ๋ฐฐ์ด์์ ๊ฐ์ ์ถ์ถํ ์ ์๊ฒ ํด์ค๋๋ค. ์ด ๋ธ๋ก๊ทธ ํฌ์คํธ์์๋ ๋ค์ํ ์๋๋ฆฌ์ค์ ์ ์ฉํ ์ ์๋ ์ค์ฉ์ ์ธ ์์ ์ ์ฌ์ฉ ์ฌ๋ก๋ฅผ ์ ๊ณตํ๋ฉฐ, ๋๋จธ์ง ๋งค๊ฐ๋ณ์๋ฅผ ์ฌ์ฉํ ๋ฐฐ์ด ํจํด ๋งค์นญ์ ๋ณต์กํ ๋ด์ฉ์ ์๋ดํฉ๋๋ค.
๋ฐฐ์ด ๊ตฌ์กฐ ๋ถํด ์ดํดํ๊ธฐ
๋๋จธ์ง ๋งค๊ฐ๋ณ์๋ฅผ ์ดํด๋ณด๊ธฐ ์ ์ ๋ฐฐ์ด ๊ตฌ์กฐ ๋ถํด์ ๊ธฐ๋ณธ์ ์ดํดํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ๊ตฌ์กฐ ๋ถํด๋ฅผ ์ฌ์ฉํ๋ฉด ๋ฐฐ์ด์ ๊ฐ(๋๋ ๊ฐ์ฒด์ ์์ฑ)์ ๊ฐ๋ณ ๋ณ์๋ก ๋ถํดํ ์ ์์ต๋๋ค.
๊ธฐ๋ณธ ๊ตฌ์กฐ ๋ถํด:
๋ค์ ๋ฐฐ์ด์ ์๊ฐํด ๋ณด์ธ์:
const numbers = [1, 2, 3, 4, 5];
๊ตฌ์กฐ ๋ถํด๋ฅผ ์ฌ์ฉํ๋ฉด ๋ค์๊ณผ ๊ฐ์ด ์ฒ์ ์ธ ๊ฐ์ ์์๋ฅผ ์ถ์ถํ ์ ์์ต๋๋ค:
const [first, second, third] = numbers;
console.log(first); // Output: 1
console.log(second); // Output: 2
console.log(third); // Output: 3
์ผํ๋ฅผ ์ฌ์ฉํ์ฌ ์์๋ฅผ ๊ฑด๋๋ธ ์๋ ์์ต๋๋ค:
const [one, , three, , five] = numbers;
console.log(one); // Output: 1
console.log(three); // Output: 3
console.log(five); // Output: 5
๋๋จธ์ง ๋งค๊ฐ๋ณ์ ์๊ฐ
๋๋จธ์ง ๋งค๊ฐ๋ณ์(...)๋ฅผ ์ฌ์ฉํ๋ฉด ๋ฐฐ์ด์ ๋๋จธ์ง ์์๋ค์ ์๋ก์ด ๋ฐฐ์ด๋ก ์บก์ฒํ ์ ์์ต๋๋ค. ์ด๋ ๋ฐฐ์ด์ ์ ํํ ๊ธธ์ด๋ฅผ ๋ชจ๋ฅด๊ฑฐ๋ ์ฒ์ ๋ช ๊ฐ์ ์์๋ง ์ถ์ถํด์ผ ํ ๋ ํนํ ์ ์ฉํฉ๋๋ค.
๊ตฌ์กฐ ๋ถํด์ ํจ๊ป ๋๋จธ์ง ๋งค๊ฐ๋ณ์ ์ฌ์ฉํ๊ธฐ:
๋์ผํ numbers ๋ฐฐ์ด์ ์ฌ์ฉํ์ฌ ์ฒซ ๋ฒ์งธ ์์์ ๋๋จธ์ง ์์๋ค์ rest๋ผ๋ ์ ๋ฐฐ์ด์ ์บก์ฒํด ๋ณด๊ฒ ์ต๋๋ค:
const [first, ...rest] = numbers;
console.log(first); // Output: 1
console.log(rest); // Output: [2, 3, 4, 5]
์ด ์์ ์์ first์๋ ๊ฐ 1์ด ํ ๋น๋๊ณ , rest์๋ ๋๋จธ์ง ์์๋ค์ ํฌํจํ๋ ์ ๋ฐฐ์ด [2, 3, 4, 5]๊ฐ ํ ๋น๋ฉ๋๋ค.
์ค์ฉ์ ์ธ ์ฌ์ฉ ์ฌ๋ก
๋๋จธ์ง ๋งค๊ฐ๋ณ์๋ฅผ ์ฌ์ฉํ ๋ฐฐ์ด ํจํด ๋งค์นญ์ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ๋ฐ์์ ์๋ง์ ์ค์ฉ์ ์ธ ์์ฉ ๋ถ์ผ๋ฅผ ๊ฐ์ง๋๋ค. ๋ช ๊ฐ์ง ์๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
1. ํจ์ ์ธ์
๋๋จธ์ง ๋งค๊ฐ๋ณ์๋ ํจ์ ์ ์์์ ๊ฐ๋ณ ๊ฐ์์ ์ธ์๋ฅผ ๋ฐ๊ธฐ ์ํด ์ฌ์ฉ๋ ์ ์์ต๋๋ค.
function sum(first, ...numbers) {
let total = first;
for (const num of numbers) {
total += num;
}
return total;
}
console.log(sum(1, 2, 3, 4, 5)); // Output: 15
console.log(sum(10, 20, 30)); // Output: 60
์ด ์์ ์์ sum ํจ์๋ ์ต์ ํ๋์ ์ธ์(first)๋ฅผ ๋ฐ๊ณ , ๊ทธ ๋ค์ ์ถ๊ฐ์ ์ธ ์ธ์๋ค์ numbers ๋ฐฐ์ด๋ก ์์งํฉ๋๋ค.
2. ์ฒซ ๋ฒ์งธ ์์ ์ ๊ฑฐํ๊ธฐ
์ผ๋ฐ์ ์ธ ์ฌ์ฉ ์ฌ๋ก๋ ๋ฐฐ์ด์ ๋๋จธ์ง ๋ถ๋ถ์ ๋ณด์กดํ๋ฉด์ ์ฒซ ๋ฒ์งธ ์์๋ฅผ ์ ๊ฑฐํ๋ ๊ฒ์ ๋๋ค.
const data = ['header', 'data1', 'data2', 'data3'];
const [, ...actualData] = data;
console.log(actualData); // Output: ['data1', 'data2', 'data3']
์ด๋ ์ฒซ ๋ฒ์งธ ์์๊ฐ ๊ฑด๋๋ฐ์ด์ผ ํ ํค๋๋ ๋ฉํ๋ฐ์ดํฐ์ธ ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํ ๋ ์์ฃผ ์ฌ์ฉ๋ฉ๋๋ค.
3. ๋ช ๋ น์ค ์ธ์ ์ฒ๋ฆฌ
๋ช ๋ น์ค ์ธ์๋ฅผ ์ง์ํ๋ Node.js๋ ๋ค๋ฅธ ์๋ฐ์คํฌ๋ฆฝํธ ํ๊ฒฝ์์๋ ๊ตฌ์กฐ ๋ถํด์ ๋๋จธ์ง ๋งค๊ฐ๋ณ์๋ฅผ ์ฌ์ฉํ์ฌ ํด๋น ์ธ์๋ค์ ํ์ฑํ ์ ์์ต๋๋ค.
// Assuming command-line arguments are passed as follows:
// node script.js --option1 value1 --option2 value2
const args = process.argv.slice(2); // Remove 'node' and script path
function parseArguments(args) {
const options = {};
for (let i = 0; i < args.length; i += 2) {
const option = args[i].replace('--', '');
const value = args[i + 1];
options[option] = value;
}
return options;
}
const parsedArgs = parseArguments(args);
console.log(parsedArgs);
// Example Output:
// { option1: 'value1', option2: 'value2' }
์ด ์์ ๋ ๊ธฐ๋ณธ์ ์ธ ์ ๊ทผ ๋ฐฉ์์ ๋ณด์ฌ์ฃผ์ง๋ง, ์ค์ ์ ํ๋ฆฌ์ผ์ด์ ์์๋ ๋ ์ ๊ตํ ์ธ์ ํ์ฑ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์์ฃผ ์ฌ์ฉ๋ฉ๋๋ค. ๊ทธ๋ฌ๋ ๊ฐ๋ณ ๊ธธ์ด ์ธ์ ๋ชฉ๋ก์ ์ฒ๋ฆฌํ๊ธฐ ์ํด ๋๋จธ์ง ๋งค๊ฐ๋ณ์๋ฅผ ์ฌ์ฉํ๋ ์์น์ ๋์ผํ๊ฒ ์ ์ง๋ฉ๋๋ค.
4. ๋ฐฐ์ด ์กฐ์ ๋ฐ ๋ณํ
๋๋จธ์ง ๋งค๊ฐ๋ณ์๋ ํน์ ์์๋ฅผ ๋ณด์กดํ๋ฉด์ ๋ฐฐ์ด์ ๋ณํํ๋ ๋ฐ ์ ์ฉํฉ๋๋ค.
function transformArray(first, second, ...rest) {
const transformedRest = rest.map(item => item.toUpperCase());
return [first, second, ...transformedRest];
}
const originalArray = ['a', 'b', 'c', 'd', 'e'];
const transformedArray = transformArray(...originalArray); // Spread syntax to pass as individual arguments
console.log(transformedArray); // Output: ['a', 'b', 'C', 'D', 'E']
์ด ์์ ์์ transformArray ํจ์๋ ์ฒ์ ๋ ์์๋ฅผ ๋ณด์กดํ๋ฉด์ rest ๋ฐฐ์ด์ ์์๋ค์ ๋๋ฌธ์๋ก ๋ณํํฉ๋๋ค.
5. ์ฌ์ฉ์ ์ ์ ๋ฐฐ์ด ๋ฉ์๋ ๊ตฌํ
๋๋จธ์ง ๋งค๊ฐ๋ณ์๋ฅผ ์ฌ์ฉํ์ฌ ๋ด์ฅ ๋ฐฐ์ด ๋ฉ์๋์ ๊ธฐ๋ฅ์ ํ์ฅํ๋ ์ฌ์ฉ์ ์ ์ ๋ฐฐ์ด ๋ฉ์๋๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค.
Array.prototype.customSlice = function(start, ...rest) {
const end = rest.length > 0 ? rest[0] : this.length;
const result = [];
for (let i = start; i < end; i++) {
result.push(this[i]);
}
return result;
};
const myArray = [10, 20, 30, 40, 50];
const slicedArray = myArray.customSlice(1, 4);
console.log(slicedArray); // Output: [20, 30, 40]
์ค์ ์ฐธ๊ณ : ๋ด์ฅ ํ๋กํ ํ์ ์ ์์ ํ๋ ๊ฒ์ ํธํ์ฑ ๋ฌธ์ ๋ ์ฝ๋์ ๋ค๋ฅธ ๋ถ๋ถ์์ ์๊ธฐ์น ์์ ๋์์ ์ ๋ฐํ ์ ์์ผ๋ฏ๋ก ์ ์คํ๊ฒ ์ํํด์ผ ํฉ๋๋ค.
๋๋จธ์ง ๋งค๊ฐ๋ณ์์ ๊ธฐ๋ณธ๊ฐ ๊ฒฐํฉํ๊ธฐ
ํจ์ ์ ์์์ ๋๋จธ์ง ๋งค๊ฐ๋ณ์์ ๊ธฐ๋ณธ๊ฐ์ ๊ฒฐํฉํ ์๋ ์์ต๋๋ค.
function greet(name = 'Guest', ...titles) {
const titleString = titles.length > 0 ? ` (${titles.join(', ')})` : '';
return `Hello, ${name}${titleString}!`;
}
console.log(greet('Alice', 'Dr.', 'PhD')); // Output: Hello, Alice (Dr., PhD)!
console.log(greet('Bob')); // Output: Hello, Bob!
console.log(greet()); // Output: Hello, Guest!
์ด ์์ ์์ name ๋งค๊ฐ๋ณ์๋ ๊ธฐ๋ณธ๊ฐ 'Guest'๋ฅผ ๊ฐ์ง๋ฉฐ, titles ๋งค๊ฐ๋ณ์๋ ์ถ๊ฐ์ ์ธ ์ธ์๋ค์ ๋ฐฐ์ด๋ก ์์งํฉ๋๋ค.
์ ์ญ์ ๊ณ ๋ ค์ฌํญ ๋ฐ ๋ชจ๋ฒ ์ฌ๋ก
์ ์ญ ํ๋ก์ ํธ์์ ๋๋จธ์ง ๋งค๊ฐ๋ณ์๋ฅผ ์ฌ์ฉํ ๋ฐฐ์ด ํจํด ๋งค์นญ์ ์ฌ์ฉํ ๋ ๋ค์ ์ฌํญ์ ๊ณ ๋ คํ์ญ์์ค:
- ์ฝ๋ ๊ฐ๋ ์ฑ: ์ฝ๋๊ฐ ์ ๋ฌธ์ํ๋์ด ์๊ณ , ํนํ ๋ค์ํ ๋ฐฐ๊ฒฝ์ ๊ฐ๋ฐ์๋ค์ด ์ดํดํ๊ธฐ ์ฝ๋๋ก ํด์ผ ํฉ๋๋ค. ์๋ฏธ ์๋ ๋ณ์ ์ด๋ฆ๊ณผ ์ฃผ์์ ์ฌ์ฉํ์ฌ ์ฝ๋์ ๋ชฉ์ ์ ์ค๋ช ํ์ธ์.
- ์ค๋ฅ ์ฒ๋ฆฌ: ์๊ธฐ์น ์์ ์ ๋ ฅ์ด๋ ์ฃ์ง ์ผ์ด์ค๋ฅผ ์ ์์ ์ผ๋ก ์ฒ๋ฆฌํ๊ธฐ ์ํด ์ ์ ํ ์ค๋ฅ ์ฒ๋ฆฌ๋ฅผ ๊ตฌํํ์ธ์. ์ด๋ ์ธ๋ถ ์์ค๋ ์ฌ์ฉ์ ์ ๋ ฅ ๋ฐ์ดํฐ๋ฅผ ๋ค๋ฃฐ ๋ ํนํ ์ค์ํฉ๋๋ค.
- ์ฑ๋ฅ: ์ฝ๋์ ์ฑ๋ฅ ์ํฅ์ ์ผ๋์ ๋์ด์ผ ํฉ๋๋ค. ํนํ ํฐ ๋ฐฐ์ด๋ก ์์ ํ ๋๋ ๋์ฑ ๊ทธ๋ ์ต๋๋ค. ์ ํ๋ฆฌ์ผ์ด์ ์๋๋ฅผ ์ ํ์ํฌ ์ ์๋ ๋ถํ์ํ ๋ฐ๋ณต์ด๋ ๊ณ์ฐ์ ํผํ์ธ์.
- ํ์งํ: ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ฌ๋ฌ ์ธ์ด๋ฅผ ์ง์ํ๋ ๊ฒฝ์ฐ, ์ฝ๋๊ฐ ์ ์ ํ๊ฒ ํ์งํ๋๊ณ ๋ชจ๋ ํ ์คํธ์ ๋ฉ์์ง๊ฐ ํด๋น ์ธ์ด๋ก ๋ฒ์ญ๋์๋์ง ํ์ธํ์ธ์.
- ์ ๊ทผ์ฑ: ์ฅ์ ๊ฐ ์๋ ์ฌ๋๋ค๋ ์ฌ์ฉํ ์ ์๋๋ก ์ ๊ทผ์ฑ์ ์ผ๋์ ๋๊ณ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ค๊ณํ์ธ์. ์ฌ๊ธฐ์๋ ์ด๋ฏธ์ง์ ๋ํ ๋์ฒด ํ ์คํธ ์ ๊ณต, ์ ์ ํ ์๋งจํฑ HTML ์ฌ์ฉ, ์ ํ๋ฆฌ์ผ์ด์ ์ ํค๋ณด๋ ์ ๊ทผ์ฑ ๋ณด์ฅ ๋ฑ์ด ํฌํจ๋ฉ๋๋ค.
์ ๊ฐ ๊ตฌ๋ฌธ๊ณผ์ ๋น๊ต
๋๋จธ์ง ๋งค๊ฐ๋ณ์์ ์ ๊ฐ ๊ตฌ๋ฌธ(์ญ์ ...)์ ๊ตฌ๋ณํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ๋ ๊ตฌ๋ฌธ์ ๋์ผํ ๋ฌธ๋ฒ์ ๊ณต์ ํ์ง๋ง, ๋ค๋ฅธ ๋ชฉ์ ์ ๊ฐ์ง๋๋ค.
- ๋๋จธ์ง ๋งค๊ฐ๋ณ์: ํจ์ ์ ์๋ ๊ตฌ์กฐ ๋ถํด ํ ๋น์์ ๋๋จธ์ง ์์๋ค์ ๋ฐฐ์ด๋ก ๋ชจ์ผ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค.
- ์ ๊ฐ ๊ตฌ๋ฌธ: ๋ฐฐ์ด์ด๋ ์ดํฐ๋ฌ๋ธ์ ๊ฐ๋ณ ์์๋ก ํผ์น๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค.
// Rest Parameter
function myFunction(a, b, ...rest) {
console.log(rest); // Output: [3, 4, 5]
}
myFunction(1, 2, 3, 4, 5);
// Spread Syntax
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // Output: [1, 2, 3, 4, 5]
๋ธ๋ผ์ฐ์ ํธํ์ฑ
๋ฐฐ์ด ๊ตฌ์กฐ ๋ถํด์ ๋๋จธ์ง ๋งค๊ฐ๋ณ์๋ ์ต์ ๋ธ๋ผ์ฐ์ ์ Node.js์์ ๋๋ฆฌ ์ง์๋ฉ๋๋ค. ๊ทธ๋ฌ๋ ๊ตฌํ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ง์ํด์ผ ํ๋ ๊ฒฝ์ฐ, Babel๊ณผ ๊ฐ์ ํธ๋์คํ์ผ๋ฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ฝ๋๋ฅผ ํธํ ๊ฐ๋ฅํ ํ์์ผ๋ก ๋ณํํด์ผ ํ ์ ์์ต๋๋ค.
๊ฒฐ๋ก
๋๋จธ์ง ๋งค๊ฐ๋ณ์๋ฅผ ์ฌ์ฉํ ๋ฐฐ์ด ํจํด ๋งค์นญ์ ์ฝ๋์ ๊ฐ๋ ์ฑ๊ณผ ์ ์ง๋ณด์์ฑ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ๊ฐ๋ ฅํ๊ณ ๋ค์ฌ๋ค๋ฅํ ๊ธฐ๋ฅ์ ๋๋ค. ๋ฐฐ์ด ๊ตฌ์กฐ ๋ถํด์ ๊ธฐ๋ณธ๊ณผ ๋๋จธ์ง ๋งค๊ฐ๋ณ์์ ์ญํ ์ ์ดํดํจ์ผ๋ก์จ, ๋ณต์กํ ๋ฐ์ดํฐ ๊ตฌ์กฐ๋ฅผ ํจ๊ณผ์ ์ผ๋ก ์ฒ๋ฆฌํ๋ ๋ ๊ฐ๊ฒฐํ๊ณ ํจ์จ์ ์ธ ์ฝ๋๋ฅผ ์์ฑํ ์ ์์ต๋๋ค.
๊ตญ์ ์ ์ธ ์ฌ์ฉ์๋ฅผ ์ํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ๋ฐํ ๋๋ ์ฝ๋ ๊ฐ๋ ์ฑ, ์ค๋ฅ ์ฒ๋ฆฌ, ์ฑ๋ฅ, ํ์งํ, ์ ๊ทผ์ฑ ๋ฑ ์ ์ญ์ ์ธ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๊ณ ๋ คํ๋ ๊ฒ์ ์์ง ๋ง์ญ์์ค.
์ด๋ฌํ ๊ธฐ์ ๋ค์ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ๋ฐ ์ํฌํ๋ก์ฐ์ ํตํฉํจ์ผ๋ก์จ, ๋ฐฐ์ด ํจํด ๋งค์นญ์ ๋ชจ๋ ์ ์ฌ๋ ฅ์ ๋ฐํํ๊ณ ๋ ๊ฒฌ๊ณ ํ๊ณ ํ์ฅ ๊ฐ๋ฅํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ์ ์์ต๋๋ค.