🤟
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
  • 06. 비구조화 할당 (구조분해) 문법
  • 비구조화 할당시 기본값 설정
  • 비구조화 할당시 이름 바꾸기
  • 배열 비구조화 할당
  • 깊은 값 비구조화 할당

Was this helpful?

  1. 02.Vanilla-JS

06. 비구조화 할당 (구조분해) 문법

Previous05. 조건문 더 스마트하게 쓰기Next07. spread 와 rest

Last updated 5 years ago

Was this helpful?

06. 비구조화 할당 (구조분해) 문법

이번에는 01장 섹션 06 에서도 배웠던 문법을 잘 활용하는 방법에 대해서 알아보겠습니다.

이전에 배웠던것을 복습해보자면, 비구조화 할당 문법을 사용하면 다음과 같이 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언해 줄 수있었죠?

const object = { a: 1, b: 2 };

const { a, b } = object;

console.log(a); // 1
console.log(b); // 2

그리고, 함수의 파라미터에서도 비구조화 할당을 할 수 있는것도 배웠습니다.

const object = { a: 1, b: 2 };

function print({ a, b }) {
  console.log(a);
  console.log(b);
}

print(object);

그런데 여기서 만약 b 값이 주어지지 않았다고 가정해봅시다.

const object = { a: 1 };

function print({ a, b }) {
  console.log(a);
  console.log(b);
}

print(object);
// 1
// undefined

두번째 출력에서 undefined가 나타날 것입니다.

비구조화 할당시 기본값 설정

이러한 상황에 b 값에 기본 값을 주고 싶다면 이렇게 해줄 수 있습니다.

const object = { a: 1, c: 3 };

function print({ a, b = 2 , c}) {
  console.log(a);
  console.log(b);
  console.log(c);
}

print(object);
// 1
// 2
// 3

이는 꼭 함수의 파라미터에서만 할 수 있는 것은 아닙니다.

const object = { a: 1, c:3 };

const { a, b = 2, c } = object;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

비구조화 할당시 이름 바꾸기

이번에는, 비구조화 할당을 하는 과정에서 선언 할 값의 이름을 바꾸는 방법을 알아보겠습니다.

예를 들어서 다음과 같은 코드가 있다고 가정해봅시다.

const animal = {
  name: '멍멍이',
  type: '개'
};

const nickname = animal.name;

console.log(nickname); // 멍멍이

위 코드에서는 animal.name 값을 nickname 값에 담고 있는데요, 이름이 같다면 그냥 우리가 이전에 배웠던 대로 비구조화 할당을 쓰면 되는데 지금은 이름이 서로 다릅니다.

이러한 상황에서는 : 문자를 사용해서 이름을 바꿔줄 수 있습니다.

const animal = {
  name: '멍멍이',
  type: '개'
};

const { name: nickname } = animal
console.log(nickname); //멍멍이
console.log(animal);   // const animal = {name: '멍멍이', type: '개' };

위 코드는 'animal 객체 안에 있는 name 을 nickname 이라고 선언하겠다.' 라는 의미입니다.

알아두어야 할점! 내가 이름을 변경을 했다고 해서, 원본 데이터를 (오르지날 데이터)를 변경한것은 아닙니다.!!

배열 비구조화 할당

비구조화 할당은 객체에만 할 수 있는 것이 아닙니다. 배열에서 할 수 있어요.

예시 코드를 봅시다.

const array = [1, 2];
const [one, two] = array;

console.log(one);
console.log(two);

이 문법은 배열 안에 있는 원소를 다른 이름으로 새로 선언해주고 싶을 때 사용하면 매우 유용합니다.

객체 비구조화 할당과 마찬가지로, 기본값 지정이 가능합니다.

const array = [1];
const [one, two = 2] = array;

console.log(one);
console.log(two);

깊은 값 비구조화 할당

객체의 깊숙한 곳에 들어있는 값을 꺼내는 방법을 알아봅시다.

예를들어서 다음과 같은 객체가 있다고 가정해봅시다.

const deepObject = {
  state: {
    information: {
      name: 'thdbsgh',
      languages: ['korean', 'english', 'chinese']
    }
  },
  value: 5
};

여기서, name, languages, value 값들을 밖으로 꺼내주고 싶다면 어떻게 해야 할까요? 이럴땐 두가지 해결 방법이 있는데요, 첫번째는 비구조화 할당 문법을 두번 사용하는 것입니다.

const deepObject = {
  state: {
    information: {
      name: 'thdbsgh',
      languages: ['korean', 'english', 'chinese']
    }
  },
  value: 5
};

const { name, languages } = deepObject.state.information;
const { value } = deepObject;

const extracted = {
  name,
  languages,
  value
};

console.log(extracted); // {name: "velopert", languages: Array[3], value: 5}

그런데 잠깐! 지금 extracted 객체를 선언 할 때 이런식으로 했는데요

const extracted = {
  name,
  languages,
  value
}

이 코드는 다음 코드와 똑같습니다.

const extracted = {
  name: name,
  languages: languages,
  value: value
}

만약에 key 이름으로 선언된 값이 존재하다면, 바로 매칭시켜주는 문법입니다. 이 문법은 ES6 의 object-shorthand 문법이라고 부릅니다. (이름은 굳이 알아둘 필요는 없습니다..!)

다시 본론으로 돌아와서, 아까 deepObject 객체에서 names, languages, value 를 추출하는 과정에서 비구조화 할당을 두번 했었죠?

이번엔 두번째 방법, 한번에 모두 추출하는 방법을 알아보겠습니다.

연습 EX1)

const deepObject = {
  state: {
    information: {
      name: 'thdbsgh',
      languages: ['korean', 'english', 'chinese']
    }
  },
  value: 5
};

const { //비구조화 할당 
  state: {
    information: { name, languages }
  },
  value
} = deepObject;

const extracted = {
  name,
  languages,
  value
};

console.log(extracted);

이렇게 하면 깊숙히 안에 들어있는 값도 객체에서 바로 추출 할 수 있답니다.

결과)

{
  name: 'thdbsgh',
  languages: [ 'korean', 'english', 'chinese' ],
  value: 5
}

연습 EX2)

const deepObject = {
    state: {
      information: {
        name: 'thdbsgh',
        languages: ['korean', 'english', 'chinese']
      }
    },
    value: 5
  };
  
  const { name, languages : [first, second, thenc] } = deepObject.state.information;
  const { value } = deepObject
  
  const extracted = {
    name,
    first,
    second,
    thenc,
    value
  };
  
  console.log(extracted);

결과)

// 결과 
{
  name: 'thdbsgh',
  first: 'korean',
  second: 'english',
  thenc: 'chinese',
  value: 5
}

이렇게 깊숙한 객체안에 있는 값을 추출하는 방법을 알아보았는데요, 사람들마다 성향이 다르겠지만, 저는 개인적으로 한번에 다 추출하는 것 보다는 여러번에 걸쳐서 추출하는 것이 더욱 코드가 깔끔하다고 생각합니다. 정해진 답은 없으니 여러분이 편한 방식을 택해서 하세요.

연습 EX3) 비구조화 할당 부분에서 이벤트 시점에 동적으로 값이 변경되어야 할때

다음과 같은 코드를 작성하면

const item = {
    container: '.tl-container',
    length: 10,
    add: 5
}
 
addItem () {
    const { length, add } = item
    let add 
    $('.current').on('click', (e) => {
        const endItem = length + test.add

        $('li.tl-list').each(function (idx, item) { // DOM 중심으로 돌리는 코드
            if (idx < endItem) {
                $(this).removeClass('hide')
            }
        })
        test.add += 1

        $('.ti-btn-number').append(this.templateLength(this.total))
    })
}

이런 에러를 보게 될거에요. 즉 비구조화 할당을 한것은 동적으로 값을 받기위해서 빈 변수를 선언 할수 없습니다.

해결 방법은 간단합니다.

const item = {
    container: '.tl-container',
    length: 10,
    add: 5
}
 
addItem () {
    const { length, add } = item
    let addItem = { add }  // let 이라는 변수에 값을 오브젝트로 넣어주면 됩니다.(추가)
    $('.current').on('click', (e) => {
        const endItem = length + addItem.add // (수)

        $('li.tl-list').each(function (idx, item) { // DOM 중심으로 돌리는 코드
            if (idx < endItem) {
                $(this).removeClass('hide')
            }
        })
        addItem.add += 1 // (수정)

        $('.ti-btn-number').append(this.templateLength(this.total))
    })
}
비구조화 할당