JavaScript Spread Operator:가이드

avaScript 확산 연산자는 인수를 허용하는 구문으로 배열을 확장합니다. 스프레드 연산자는 일반적으로 개체를 복제하거나 배열을 병합하거나 목록의 내용을 함수로 전달하는 데 사용됩니다.

스프레드 연산자. 아니요, 토스트와는 관련이 없습니다. JavaScript에서 Spread 연산자는 특정 의미를 갖습니다. iterable 객체의 내용에 액세스하는 방법입니다. 이것은 토스트에 스프레드를 붙여넣는 것만큼 재미있지 않을 수 있지만 알아두면 매우 유용한 도구입니다.

이 가이드에서는 JavaScript 확산 연산자와 그 작동 방식에 대해 이야기할 것입니다. 시작하는 데 도움이 되는 몇 가지 일반적인 사용 사례를 살펴보겠습니다.

자바스크립트 스프레드 연산자란 무엇입니까?

JavaScript 확산 연산자를 사용하면 반복 가능한 객체의 내용에 액세스할 수 있습니다. 스프레드 연산자는 액세스하려는 이터러블의 이름이 뒤에 오는 세 개의 점(줄임표) 집합입니다. 이 연산자는 JavaScript ES6에서 도입되었습니다.

반복 가능한 객체의 세 가지 유형은 배열, 객체 리터럴 및 문자열입니다. for 루프를 사용하면 이러한 모든 유형의 데이터를 반복하고 이에 대해 공통 프로세스를 실행할 수 있습니다.

반복 가능한 객체는 동일한 프로세스를 여러 번 실행할 수 있기 때문에 유용합니다. 문자열을 반복하고 특정 문자를 바꿀 수 있습니다. 배열을 반복하고 배열에 저장된 모든 값의 합계를 생성할 수 있습니다.

스프레드 연산자의 구문은 다음과 같습니다.

var names = ["John", "Lisa", "Harry"];
var new_names = [...names, "Leslie"];
console.log(new_names);

이 구문에서 ...names를 사용하여 "names" 목록의 내용을 "new_names"라는 목록에 전달합니다. "new_names" 목록에는 "names" 목록의 모든 항목과 새 이름 Leslie가 포함됩니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

스프레드 연산자의 세 가지 일반적인 사용 사례는 다음과 같습니다.

이터러블의 복사본을 만듭니다.
새 iterable에 항목을 추가합니다.
인수 목록을 함수에 전달합니다.

스프레드 구문은 목록의 모든 개별 요소를 나타냅니다.

Spread Operator JavaScript:Iterable 사본 만들기

스프레드 연산자는 이터러블을 복제하는 효과적인 방법입니다. 이 문제에 접근하는 다른 방법이 있지만 스프레드 연산자는 사용하기 정말 쉽습니다. iterable의 복사본을 만들려면 세 개의 점과 만들고자 하는 배열의 이름을 지정하십시오.

마지막 예에서 이것이 배열에서 어떻게 작동하는지 보여주었습니다. 또한 Spread 연산자를 사용하여 JavaScript 개체를 복제할 수 있습니다.

const lemon_drizzle = {
	name: "Lemon Drizzle",
	price: 1.95,
	vegan: true
}

const new_lemon_drizzle = {...lemon_drizzle};
console.log(new_lemon_drizzle);

우리 코드는 JavaScript 콘솔에 다음을 출력합니다:

{ name: "Lemon Drizzle", price: 1.95, vegan: true }

이 예에서 몇 가지 중요한 구별을 해야 합니다. JavaScript 개체의 복사본을 만들고 있습니다. 즉, 대괄호([]) 대신 중괄호({})를 사용해야 합니다.

둘째, 단일 배열을 지정하는 대신 객체를 지정했습니다. 이 개체에는 각각 "Lemon Drizzle" 컵케이크와 관련된 3개의 키와 값이 포함되어 있습니다.

자바스크립트 확산:새 Iterable에 항목 추가

스프레드 연산자의 사용 사례는 이터러블 복사로 끝나지 않습니다! 더 탐색할 것이 있습니다. 스프레드 연산자는 일반적으로 한 iterable에서 다음 iterable로 항목을 추가하는 데 사용됩니다. 다음 예를 고려하십시오.

const cupcakes = [
	'Lemon Drizzle',
	'Chocolate Chip',
	'Vanilla Iced'
];

const new_cupcakes = [...cupcakes, 'Red Velvet', 'Raspberry Dark Chocolate'];
console.log(new_cupcakes);

코드 반환:

["Lemon Drizzle", "Chocolate Chip", "Vanilla Iced", "Red Velvet", "Raspberry Dark Chocolate"]

"new_cupcakes"라는 원래 JavaScript 배열의 복사본을 만들었으며 여기에는 몇 가지 추가 값도 포함되어 있습니다.

동일한 구문을 사용하여 두 이터러블을 병합할 수도 있습니다. 스프레드 연산자를 사용하여 대괄호 안에 두 개의 iterable을 지정하기만 하면 됩니다.

const old_menu = [
	'Lemon Drizzle',
	'Chocolate Chip',
	'Vanilla Iced'
];

const new_menu = [
	'Red Velvet',
	'Raspberry Dark Chocolate'
]

const final_menu = [...old_menu, ...new_menu];
console.log(final_menu);

코드 반환:

["Lemon Drizzle", "Chocolate Chip", "Vanilla Iced", "Red Velvet", "Raspberry Dark Chocolate"]

이전과 동일한 결과가 반환되지만 이번에는 두 개의 배열을 병합했습니다.

자바스크립트 확산:함수에 인수 전달

JavaScript 함수에 여러 인수를 전달할 때 스프레드 연산자를 사용하는 것이 도움이 될 수 있습니다. 다음 예를 고려하십시오.

function placeOrder(name, order, price) {
	console.log('Name: ' + name);
	console.log('Order: ' + order);
	console.log('Price: ' + price);
}

placeOrder('Geoff', 'Red Velvet', 1.85);

코드 반환:

Name: Geoff
Order: Red Velvet
Price 1.85

placeOrder라는 함수를 선언했습니다. () 3개의 인수를 받아 콘솔에 출력합니다. 각 값 앞에는 각 인수에 포함된 내용을 설명하는 레이블이 옵니다.

이 코드가 작동하는 동안 배열에 인수를 지정하고 스프레드 연산자를 사용하여 함수에 전달할 수 있습니다.

function placeOrder(name, order, price) {
	console.log('Name: ' + name);
	console.log('Order: ' + order);
	console.log('Price: ' + price);
}

const order = ['Geoff', 'Red Velvet', 1.85];

placeOrder(...order);

코드 반환:

Name: Geoff
Order: Red Velvet
Price 1.85

이 코드의 출력은 동일하지만 코드 작동 방식이 다릅니다. 함수에 값을 직접 전달하는 대신 목록에 해당 값을 지정합니다. 그런 다음 스프레드 연산자를 사용하여 해당 값을 함수에 전달합니다.

결론

Spread 연산자는 JavaScript 전반에 걸쳐 널리 사용됩니다. iterable 객체를 쉽게 복사하고, 새로운 iterable에 항목을 추가하고, 함수에 인수를 전달할 수 있습니다. 스프레드 연산자의 구문은 세 개의 점과 액세스하려는 반복 가능한 개체입니다.

이제 전문가처럼 JavaScript 스프레드 연산자를 사용할 준비가 되었습니다!

최고의 JavaScript 학습 리소스, 책 및 코스에 대한 조언은 JavaScript 학습 방법 문서를 확인하십시오.