Programing Language/[Javascript]

[Javascript] Spread 연산자 너 누군데

2025. 2. 22. 02:08
목차
  1. Spread Operator 기본 문법
  2. 배열에서의 spread 연산자
  3. 객체에서의 spread 연산자

 

컴포넌트 만들 때, props 로 자주 등장하는 "..." 에 대해 더 깊이 알아가보려 합니다

 

 

 

 

ES6에서는  '...'  다소 특이한 형태의 문법이 추가되었습니다.

이 표시는 Spread Operator(스프레드 오퍼레이터, 스프레드 연산자, 전개 구문, 펼침 연산자...)를 나타내는 것으로,

배열, 함수, 객체 등을 다루는 데 있어서 매우 편리하고 재미있는 새로운 기능을 제공합니다.

 

 

Spread Operator 기본 문법

 

스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체 (Iterable Object)를 개별 요소로 분리할 수 있습니다.

 

 

 

배열에서의 spread 연산자

 

1️⃣ 배열 병합

기존에는 두 배열을 하나의 배열로 병합하려고 한다면, concat 메서드를 사용하여 병합했습니다.

ex) 

const Ilike = ['apple', 'banana'];
const Ilove = ['grape', 'peach'];

const All = Ilike.concat(Ilove);

console.log(All); 

// ['apple', 'banana', 'grape', 'peach']

 

 

ES6에서는 spread 연산자를 활용해 보다 간편하고 깔끔하게 병합이 가능합니다.

const Ilike = ['apple', 'banana'];
const Ilove = ['grape', 'peach'];

const All = [...Ilike, ...Ilove];

console.log(All); 

// ['apple', 'banana', 'grape', 'peach']

 

 

2️⃣ 배열 복사

JavaScript에서 배열을 새로운 변수에 할당하는 경우 새로운 배열은 기존 배열을 참조합니다.

따라서 새로운 배열을 변경하는 경우 원본 배열 역시 변경됩니다.

 

let arr1 = ['민정','웹파트']; 
let arr2 = arr1; 

arr2.push('YB'); 

console.log(arr2); // [ "민정", "웹파트", "YB" ]


// 원본 배열도 변경된다.
console.log(arr1); // [ "민정", "웹파트", "YB" ]

 

 

 

ES6의 Spread 연산자를 사용하면, 다음과 같이 새로운 복사된 배열을 생성할 수 있습니다.

let arr1 = ['민정','웹파트']; 
let arr2 = [...arr1]; 

arr2.push('YB'); 

console.log(arr2); // [ "민정", "웹파트", "YB" ]

// 원본 배열은 변경되지 않는다.
console.log(arr1); // [ "민정", "웹파트"]

 

 

 

 

우린 객체에서 가장 많이 활용할 것이기 때문에.. 대망의

객체에서의 spread 연산자

 

객체에서도 Spread operator 를 이용하여 복사, 업데이트가 가능합니다.

첫번째 예제는 프로퍼티를 추가한 것이고, 두번째 예시는 프로퍼티 오버라이드를 함으로써 객체가 업데이트되는 것을 이용하였습니다.

let currentState = { name: '민정', part: 'web'};

currentState = { ...currentState, age: 20}; 
console.log(currentState)      

// 값 추가
// 출력 -> {name: "민정", part: "web", age: 20}

currentState = { ...currentState, name: '민정', age: 23}; 
console.log(currentState); 

// 객체 프로퍼티 오버라이드
// 출력 -> {name: "민정", part: "web", age: 23}

 

 

 

 

더 깊은 값을 변경하고 싶다면, 다음과 같은 방법으로 "..." 연산자를 사용합니다.

앞으로 api 로 받은 데이터 객체를 다룰 일이 많기 때문에, 이런 연산자를 잘 익혀두었다가 사용하면 좋을 것 같습니다!

const object = {
    a : {
        b: {
            target : 123,
            c : "cc"
        },
        d : "dd"
    },
    e : "ee"
}

// a,b,c,d,e 는 그대로 두고 target만 변경

const newObject = {
     ...object,
     a : {
         ...object.a,
         b : {
             ...object.a.b,
             target : 456
         }
     }
};

 

저작자표시 (새창열림)
  1. Spread Operator 기본 문법
  2. 배열에서의 spread 연산자
  3. 객체에서의 spread 연산자
orange_mj
orange_mj
orange_mj
programing
orange_mj
전체
오늘
어제
  • 분류 전체보기
    • Goormthon Univ 2기
    • LikeLion 11기, 12기 (멋쟁이사자처럼)
    • Programing Language
      • [python]
      • [C++]
      • [Javascript]
    • Forensic
      • Basic
      • NOX
      • 앱 분석, Database 복호화
    • 부채널
      • Machine Learning
      • AES
      • Side Channel analysis
    • WEB
      • React
    • MapleStory Worlds Super Hac..
      • 기본 개념
      • 응용
    • Github
    • APP
      • REACT_NATIVE

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

최근 댓글

hELLO · Designed By 정상우.
orange_mj
[Javascript] Spread 연산자 너 누군데
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.