구조 분해 할당(destructuring assignment)

 

구조분해 할당 ...... 의문의 시작점

---

백엔드 수업중 눈에 띄는 의문점이 하나있었다.

const { isLoggedIn } = require('../lib/middleware');
const weatherUtil = require('../lib/weatherUtil');

모듈을 쓰기 위해서 코드 상단에 모듈을 불러오는 require 처리를 해주어야 하는데

하나는 변수를 중괄호 처리해서 불러오고, 하나는 괄호 없이 변수로만 불러 온다는 점이었다. 

 

차이점은 불러오는 모듈에서 특정 메서드를 참조하기 위해 불러오는지, 아니면 모듈 자체의 기능이 필요한지 였다.

또한 한가지 알게된 사실은 자바스크립트에서 {} (=중괄호 )는 객체 구조 분해 할당(destructuring assignment)을

나타낸다는 점이었다.

 

 

 isLoggedIn은 ../lib/middleware 모듈에서 isLoggedIn 변수를 추출하고, 

weatherUtil은 ../lib/weatherUtil 모듈을 가져온다.

 

 

const { isLoggedIn } = require('../lib/middleware');

 

require('../lib/middleware')에서 반환된 객체의 isLoggedIn 속성(=middleware의 property key이자 메서드)을 추출하여 변수 isLoggedIn에 할당하는 것을 의미함.

즉, ../lib/middleware 모듈에서 isLoggedIn을 가져와 변수로 사용하고자 할 때 사용한다.

 

 

 

 

const weatherUtil = require('../lib/weatherUtil');

require('../lib/weatherUtil')에서 반환된 값을 직접 변수 weatherUtil에 할당하는 것을 의미한다.

 

# weatherUtil이 함수, 클래스, 객체 또는 모듈 자체일 수 있음.

# 함수 또는 클래스일 경우에는 이후에 괄호를 사용하여 호출할 수 있음.

 

 

그러므로....

 

  isLoggedIn은 해당 모듈에서 isLoggedIn이라는 이름으로 내보내진 개별 변수일 때 비구조화 할당을 사용하고, weatherUtil은 모듈 자체를 가져올 때 사용하는 변수이다.

 

 

 

 

그렇다면  구조분해 할당이란?

 

 

 

1. 객체의 속성을 개별 변수로 추출하는 방법이다. 

 > 객체의 특정 속성에 더 간편하게 접근할수 있다.

 

// 객체 생성
const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

// 객체 구조 분해 할당
const { name, age, city } = person;

// 추출된 변수 사용
console.log(name); // 'John'
console.log(age); // 30
console.log(city); // 'New York'

 

 

 

2.변수 이름을 재정의할 수 있다.

 

// 객체 비구조화 할당 및 변수 이름 변경
const { name: personName, age: personAge, city: personCity } = person;

 

 

// 변수 이름 변경 후 사용
console.log(personName); // 'John'
console.log(personAge); // 30
console.log(personCity); // 'New York'

변경된 변수이름으로 변수호출해도 동일 값 얻을수 있다.

 

 

 

 

 

 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

구조 분해 할당 - JavaScript | MDN