프로그래밍 언어/JavaScript

[자바스크립트 필기] #19 - 스프레드 문법

2021. 8. 12. 22:46

 

*이 필기는 웹 프로그래밍 튜토리얼에서 보고 작성합니다. 

 

스프레드 문법, ... 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. 

*이터러블 한정으로만 쓸 수 있다. 

console.log(...[1, 2, 3]); // [1, 2, 3] -> 1, 2, 3

console.log(...'Hello'); // H e l l o

console.log(...{ a: 1, b: 2}); // 일반 객체는 스프레드 문법의 대상이 될 수 없다.

이 예제처럼 ...[1, 2, 3]은 개별적인 값들의 목록 1 2 3으로 만든다. 즉, 스프레드 문법의 결과는 값이 아니다. 

그래서 이 문법은 다음과 같이 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다. 

  • 함수 호출문의 인수 목록
  • 배열 리터럴의 요소 목록
  • 객체 리터럴의 프로퍼티 목록 

 

1. 함수 호출문의 인수 목록에서 사용하는 경우

배열을 펼쳐서 개별적인 값들의 목록으로 만든 후, 함수의 인수 목록으로 전달해야하는 경우가 있다. 

const arr = [1, 2, 3];

// 스프레드 문법을 사용해 배열 arr을 1, 2, 3으로 펼쳐서 전달
// Math.max(...[1, 2, 3])은 Math.max(1, 2, 3)과 같다. 
const max = Math.max(...arr); // -> 3

 

2. 배열 리터럴 내부에서 사용하는 경우 

 

concat

const arr = [...[1, 2], ...[3, 4]];
console.log(arr); // [1, 2, 3, 4]

splice

const arr1 = [1, 4];
const arr2 = [2, 3];

arr1.splice(1, 0, ...arr2);
console.log(arr1); // [1, 2, 3, 4]

배열 복사 

const origin = [1, 2];
const copy = [...origin];

console.log(copy); // [1, 2]
console.log(copy === origin); // false

이터러블을 배열로 변환

function sum() {
    // 이터러블이면서 유사 배열 객체인 arguments를 배열로 변환
    return [...arguments].reduce((pre, cur) => pre + cur, 0);
}

console.log(sum(1, 2, 3)); // 6

 

여기까지 입니다 - 틀린 점이 있다면 꼭 지적해주세요!

 

 

 

'프로그래밍 언어/JavaScript' 카테고리의 다른 글
  • [자바스크립트 필기] #21 - DOM이란?
  • [자바스크립트 필기] #20 - 디스트럭처링 할당
  • [자바스크립트 필기] #18 - 이터러블
  • [자바스크립트 필기] #17 - Symbol 이란
SpaceCowboy
SpaceCowboy
공부한거 기록하는 블로그입니다!!
SpaceCowboy
공부한거 기록하는 블로그
SpaceCowboy
전체
오늘
어제
  • 분류 전체보기
    • 프로그래밍 언어
      • C Programming
      • JavaScript
    • Computer Science
      • 자료구조
      • 알고리즘
      • 객체지향
    • 프레임워크
      • Nest.js
      • TypeORM
    • Web Programming
    • 블록체인
      • 기초
    • 데브옵스
      • Git
      • Docker

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 논리삭제
  • 자료구조
  • 자바스크립트챌린지
  • 복습
  • softDelete
  • customrepository
  • nestjs
  • typeormseeding
  • 자바스크립트
  • 자바스크립트필기
  • typeorm3.0
  • 재귀
  • 이중연결리스트
  • 자바스크립트 필기
  • JS
  • 자료구조필기
  • CSS
  • HTML
  • TypeORM
  • typeorm0.3

최근 댓글

최근 글

hELLO · Designed By 정상우.
SpaceCowboy
[자바스크립트 필기] #19 - 스프레드 문법
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

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

블로그 게시글

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

모든 영역

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

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