1. Spread Syntax란?
- 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 요소(배열의 경우) 또는 인수(함수의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다.
- 쉽게 말해, 선언되어 하나의 객체로 묶인 요소들을 다시 전개해주는 것을 말한다. 코드로 살펴보자.
2. Spread Syntax 예제
배열에서의 전개 연산자
let hobby1 = ["게임", "헬스", "독서"];
let hobby2 = ["코딩", "스노우보드", "댄스"];
const hobby = [hobby1, hobby2];
const hobbySpread = [...hobby1, ...hobby2];
console.log(hobby);
console.log(hobbySpread);
/*****************************결과값*****************************
[ [ '게임', '헬스', '독서' ], [ '코딩', '스노우보드', '댄스' ] ]
[ '게임', '헬스', '독서', '코딩', '스노우보드', '댄스' ]
****************************************************************/
함수에서의 전개 연산자
const s1 = "Lee";
const s2 = "Choi";
const s3 = "GO";
const s4 = "Park";
const students = [s1, s2, s3, s4];
const loc = [{ 시: "Seoul" }, { 구: "Kang-Nam" }];
students.forEach((student) => {
console.log(...loc, student);
});
/*****************************결과값*****************************
{ '시': 'Seoul' } { '구': 'Kang-Nam' } Lee
{ '시': 'Seoul' } { '구': 'Kang-Nam' } Choi
{ '시': 'Seoul' } { '구': 'Kang-Nam' } GO
{ '시': 'Seoul' } { '구': 'Kang-Nam' } Park
****************************************************************/
HTML 파일로 결과를 확인해보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
let hobby1 = ["게임", "헬스", "독서"];
let hobby2 = ["코딩", "스노우보드", "댄스"];
const hobby = [hobby1, hobby2]; // 그대로 담는다
hobby.forEach((item, index) => {
document.write(`취미${index + 1} : ${item} <br />`);
});
document.write("<hr />");
const hobbySpread = [...hobby1, ...hobby2]; // 찢어서 담는다
hobbySpread.forEach((item, index) => {
document.write(`취미${index + 1} : ${item} <br />`);
});
</script>
</body>
</html>
전개 연산자를 사용하지 않은 결과값(위)과 전개 연산자를 사용해서 만든 결과값(아래)이 다름을 알 수 있다. 요소를 묶인 채로 사용할 것이냐 다시 개별적으로 사용할 것이냐에 따라 전개 연산자를 사용할 것인지를 판단해야한다.
전개 연산자를 잘 활용하면 배열과 객체를 자유자재로 수정, 활용할 수 있다.
이것은 JavaScript만의 강점이니 잘 연습해서 활용할 수 있어야한다.
반응형
'JAVASCRIPT > ES6' 카테고리의 다른 글
| [JS] 비동기 처리 (1) - Promise (1) | 2023.02.04 |
|---|---|
| [JS] Currying (0) | 2023.02.03 |
| [JS] Prototype (0) | 2023.02.01 |
| [JS] 일급 객체와 일급 함수 (First-class Object & Function) (0) | 2023.01.30 |
| [JS] JSON (JavaScript Object Notation) (0) | 2023.01.29 |
댓글