WebProgramming/JS

[JS] 구조 분해(Destructuring), 전개 연산자(...)(spread, rest)

2022. 6. 11. 15:34
목차
  1. 객체의 구조분해
  2. 배열의 구조분해
  3. 전개 연산자( ... ) ( spread)

객체의 구조분해

객체 안의 값을 추출해 변수 혹은 상수로 선언 ; 기존 A['a'] or A.a -> a라고 사용 가능

- a대신 e라는 변수명으로 사용

- d의 기본값 'korea'부여

const A={
    a:"a'",
    a:"b'",
    C:"c'"
}
const {a:e,b,c,d='Korea'}=A

 

배열의 구조분해

A배열에서 ,,l,m을 인덱스 순서대로 아이템들을 각각 변수로 부여함 ; 기존 A[2] -> l라고 사용 가능

- , , 로 A배열의 'a','b'는 생략

const A=['a','b','c']
const[,,l,m]=A

- 구조 분해를 이용한 값 바꾸기

let a = 1;
let b = 2;
[a, b] = [b, a];

 

전개 연산자( ... ) ( spread)

...A ; A라는 배열/객체 모든 요소를 가져옴 (그냥 A일 경우 A[0]만 가져옴)

toObject ; 객체로 변환

toObject(a,b,...c) ; a,b에 각각 하나씩 할당하고 나머지는 c에 할당

({a':a,b':b,c'}) ; a는 a'매게변수에 할당, b는 b'매게변수에 할당, 나머지는 c'매게변수에 할당. c'처럼 매게변수 이름만 넣을 수 있음

const newArray=[...oldArray,1,2]
const newObject = {...oldObject, newProp:5}
const filter = (...args) =>  args.filter(el=>el===1); 
console.log(filter(1,2,3)) // [1]
저작자표시 (새창열림)

'WebProgramming > JS' 카테고리의 다른 글

[TS] TypeSCript이란? & 타입  (0) 2022.06.12
[JS] JSON  (0) 2022.06.11
[JS] 정규표현식  (0) 2022.06.11
[JS] import,export ; 모듈 가져오기,내보내기  (0) 2022.06.11
[JS] 원시 데이터, 참조형 데이터 / 얕은 복사와 깊은 복사  (0) 2022.06.11
[JS] 메소드(String, Math, Array, Object)  (0) 2022.06.10
[JS] 생성자 함수(Prototype), Class 상속  (0) 2022.06.06
[JS] 함수  (0) 2022.06.04
  1. 객체의 구조분해
  2. 배열의 구조분해
  3. 전개 연산자( ... ) ( spread)
'WebProgramming/JS' 카테고리의 다른 글
  • [JS] 정규표현식
  • [JS] import,export ; 모듈 가져오기,내보내기
  • [JS] 원시 데이터, 참조형 데이터 / 얕은 복사와 깊은 복사
  • [JS] 메소드(String, Math, Array, Object)
피터s
피터s
1년차 프론트엔드 개발자입니다 😣 아직 열심히 배우는 중이에요! 리액트를 하고있어요 :) - gueit214@naver.com - https://github.com/gueit214
피터s
피터의 성장기록
피터s
전체
오늘
어제
  • 분류 전체보기 (200)
    • 코딩 테스트 (25)
      • 프로그래머스 (16)
      • LeetCode (8)
      • 백준 (1)
    • 개발 독서 일지 (1)
    • 기업 분석 (4)
    • 개발 일지 (19)
      • 최신기술 도전기 (1)
      • 에러 처리 (5)
      • 개발 일지 (12)
    • 개발 일상 (36)
      • 개발 회고 (22)
      • 개발 이야기 (12)
      • 개발 서적 (1)
    • 취업 관련 지식 (11)
    • 알고리즘 (17)
    • WebProgramming (84)
      • WebProgramming (8)
      • HTML (5)
      • CSS (8)
      • JS (21)
      • React (40)

블로그 메뉴

  • About
  • 2022년 개발 성장기
  • 앞으로의 계획
  • github
  • 일상 blog

공지사항

인기 글

태그

  • 카카오 채용연계형 인턴십
  • Union-find
  • lv3
  • 함수
  • Retry
  • 해커톤
  • 스터디 후기
  • Kakao Tech Internship
  • 구름
  • 누적합
  • 개발 회고
  • 카카오
  • 개발 is life
  • dfs
  • 반복문
  • KAKAO BLIND
  • 구름톤
  • 개발 일상
  • 1년 회고
  • BFS
  • 1일 1커밋 후기
  • LV2

최근 댓글

최근 글

hELLO · Designed By 정상우.
피터s
[JS] 구조 분해(Destructuring), 전개 연산자(...)(spread, rest)
상단으로

티스토리툴바

개인정보

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

단축키

내 블로그

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

블로그 게시글

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

모든 영역

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

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