🤟
Vanilla-JS
  • TRIPLE-PLUS Adout
  • Babel.JS
  • 01.Vanilla-JS
    • 01. Hello JavaScript
    • 02. 변수
      • 02-1.지키면 좋은 룰(더 좋은 스타일을 위해서)
      • 02-2.숫자형꿀팁(수식 줄이기)
    • 03. 연산자
    • 04. 조건문
    • 05. 함수
      • this의 의미 6개 총정리
      • event listener와 constructor
      • 05-1. return:돌려주다
      • 05-2. 형 변환 함수
      • 05-3. Arrow function
    • 06. 객체
    • 07. 배열
      • 07-1. 배열 안에 배열(2차 배열)
      • 07-2. 배열내장 함수(forEach)
      • 07-3. 배열내장 함수(sort)
      • 07-4. 배열내장 함수(map)
      • 07-5. 배열내장 함수(indexOf)
      • 07-6. 배열내장 함수(filter)
      • 07-7. 배열내장 함수(splice, slice)
      • 07-8. 배열내장 함수(shift, unshift, pop, push)
      • 07-9. 배열내장 함수(concat, join)
      • 07-10. 배열내장 함수(reduce)
      • 07-10. 배열내장 함수(reduce)2
    • 08. 반복문
    • 09. Class와 프로토타입
      • 09-1. 프로토타입과 클래스 - 생성자
      • 09-2. 프로토타입과 클래스 - 생성자 상속하기
      • Class & Constructor & Method
      • super
      • Static Method
      • Class Getter, Setter
      • Information Hiding
      • Inheritance & Polymorphism
      • Overriding
      • Abstract Class
      • Interface
    • Math 정리
    • String 정리
    • Array정리
    • Date 정리
      • D-day 구하기
  • 02.Vanilla-JS
    • 01.삼항연산자
    • 02. Truthy and Falsy
    • 03. 단축 평가 논리 계산법
    • 04. 함수 업그레이드 (default parameter/arguments)
    • 05. 조건문 더 스마트하게 쓰기
    • 06. 비구조화 할당 (구조분해) 문법
    • 07. spread 와 rest
      • 함수 파라미터에서의 rest(params)
      • 함수 인자에서의 spread
    • 08. 자바스크립트의 Scope 에 대한 이해
    • 09. Hoisting 이해하기
    • 10. Native DOM 선택
  • 03.비동기 처리
    • 01. fetch, then, catch[Promise] 이해하기
    • 02. 직접 만들어보는 Promise 객체
    • 03. async/await
    • 04. Promise all, Promise.race
  • REST API 제대로 알고 사용하기
    • mongodb Atlas
    • mongodb Atlas(DB)에 접근하려면
    • URL 이름짓기 관습
    • Database에 자료 저장하는 법
    • 게시물마다 번호를 달아 저장하기
    • 게시물마다 번호를 달아 저장하기2
  • JQUERY + SCRIPT 유용한 코드 정리
  • Practice(실습)
    • 카운터 만들기
    • reduce
    • 데이터 자료형 활용하기1
    • 데이터 자료형 활용하기2
    • 데이터 가지고 놀기(응용)1
    • 데이터 가지고 놀기(응용)2
    • REST API
    • 배열 만들기1
    • 배열 만들기2
    • 배열 만들기3
    • 비구조화 할당
    • rest + spread(응용)1
    • rest + spread(응용)2
    • rest + spread(응용)3
    • 반복문 내장함수(응용)1
    • 함수 가지고 놀기(응용)1
    • 서버와의 통신1
    • 서버와의 통신2
    • new Promise(응용)2
    • new Promise(응용)3
    • 자바스크립트 이벤트 위임 핵심 정리
Powered by GitBook
On this page
  • 객체의 데이터들(오리지날 데이터)을 복사해와서 제 사용하기
  • 객체의 데이터들을 배열로 받아오기
  • 객체의 데이터들(오리지날 데이터)을 복사해와서 특정 부분만 수정하기
  • 배열의 원소들을 모두 더한 값을 구하기

Was this helpful?

  1. Practice(실습)

rest + spread(응용)1

객체의 데이터들(오리지날 데이터)을 복사해와서 제 사용하기

const slime = {
    name: '슬라임',
    attribute: 'cute',
    color: 'purple'
};

const { ...rest } = slime; // 복사해오는 코드 
const ex = { so: {...rest} } // 복사해온 코드를 리마인드 하기 

ex.so.name = 'triplexlab' //복사해온 데이터중에 name값을 변경해보자 
console.log(ex.so)    //복사해온 코드를 출력해보자! 
console.log(slime)    //원본 데이터를 출력해보자!
// 결과)
{ name: 'triplexlab', attribute: 'cute', color: 'purple' }
{ name: '슬라임', attribute: 'cute', color: 'purple' }

객체의 데이터들을 배열로 받아오기

// 이런 객체가 있다고 가정해보자
const purpleCuteSlime = {
    name: '슬라임',
    attribute: 'cute',
    color: 'purple'
};

위에 있는 데이터를 배열로 감싸서 받아오자

const { ...restd } = purpleCuteSlime;

function arry(...params) {
   console.log(params)
}

arry(restd);
// 결과)
[ { name: '슬라임', attribute: 'cute', color: 'purple' } ]

객체의 데이터들(오리지날 데이터)을 복사해와서 특정 부분만 수정하기

var person = {
  name: "jane",
  age: 16,
  family: [ //family 부분을 so로 키명을 변경하고 싶다면.
    {
      name: "jack",
      age: 15
    },
    {
      name: "tom",
      age: 40
    },
  ]
};
const { ...res } = person; //객체 데이터 전체를 복사해온다. 
const newPerson = { so : [...res.family] }; //{ 변경하고픈 명: [ 복사해온 데이터.원하는 위치(depth) ]}
console.log(newPerson)
// 결과)
{ so: [ { name: 'jack', age: 15 }, { name: 'tom', age: 40 } ] }
var person = {
  depth_1: {
      depth_2: {
        depth_3: {
          depth_4_1: 'faded',
          depth_4_2: true // 요놈을 바꾸고 싶다!
        },
        depth_3_1: 'lost'
      },
      depth_2_1: {
        depth_3_2: true,
        depth_3_3: false
      }
  }
};
const { ...res } = person;
const newPerson = { ...res.depth_1.depth_2.depth_3 };

newPerson.depth_4_2 = false
console.log(newPerson)
// 결과)
{ depth_4_1: 'faded', depth_4_2: false }

배열의 원소들을 모두 더한 값을 구하기

function sum(...params) { //rest하게 받는것
  return params.reduce((acc, current) => acc + current, 0);
}

const number = [1, 2, 3, 4, 5, 6, 7];
console.log(sum(...number)); //spread하게 넘겨주는
// 결과)
28
Previous비구조화 할당Nextrest + spread(응용)2

Last updated 5 years ago

Was this helpful?