[JS] 구조 분해 할당

SYhwang·2023년 2월 3일

객체의 구조 분해 할당

모던 자바스크립트에서는 객체의 key 이름을 알면 { key 이름 }으로 변수를 선언하는 구조 분해 할당을 하여 바로 key의 이름으로 된 변수에 value값을 저장할 수 있다.

const aAndBobject = {
	a: 1,
	b: "가나다라"
}

const { a, b }  = aAndBobject;
 
console.log(a); // 1
console.log(b); // "가나다라"

배열의 구조 분해 할당

배열에서는 key가 존재하지 않기 때문에 [ 임의의 변수 이름 ] 을 선언해서 구조 분해 할당이 가능하며, 선언한 변수 안에 배열의 값이 인덱스 순서대로 담기게 된다.

const aAndBArray = [ "가나다", "abc", 3 ];

const [a, b] = aAndBArray;

console.log(a); // "가나다"
console.log(b); // "abc"

`require()` 문에서의 객체 구조분해 할당 응용

// auth.js

const validateToken = async (req, res, next) => {
 // ...이하 코드 내용
}

module.exports = {
  validateToken
};

위는 auth.js 에서 validateToken 이라는 함수를 정의한 후 module.exports = {validateToken} 객체를 이용해 파일 외부로 export 하는 구조이다.
이 함수를 다른 파일에서 사용하기 위해서는 require를 이용해 호출해야 한다.

// app.js

const auth = require('./middleware/auth'); 

console.log(auth) 
 // { validateToken: [AsyncFunction: validateToken] }
 
 auth.validateToken()

auth 라는 변수를 선언하고 middleware/auth 파일을 호출해 할당하였다. 이렇게 일반적인 변수 선언 형태로 모듈을 호출하게 되면 해당 모듈은 module.exports에서 객체로 내보냈듯이 객체 형태로 불러와지게 된다. (key 는 함수명인 "validateToken", value 는 해당 함수 내용)
이 경우 auth 객체 안의 validateToken 함수를 꺼내 사용하기 위해서는 auth.validateToken() ~ 이라는 식으로 모듈명.속성명 을 지정하여 사용해야 한다.
auth 파일 내에 많은 함수가 있고 그 여러 함수를 app.js 안에서 각각 사용해야 한다면 그런 식으로 선언하여 사용하는 편이 나을 수도 있다. (예 : userDao.getUser(), userDao.createUser(), ...)
그러나 validateToken 함수 하나만을 꺼내 쓰는 상황이라면 구조 분해 할당을 이용하는 편이 훨씬 간단하고 컨벤션에도 맞게 사용할 수 있다. 그 경우 호출시 아래처럼 선언하면 된다.

// app.js

const { validateToken } = require('./middleware/auth'); 

console.log(validateToken)  // [AsyncFunction: validateToken] 
 
 validateToken()

결과적으로 함수를 사용할 때마다 모듈명.속성명 을 명시할 필요 없이 validateToken 이라는 함수명만으로 바로 사용 가능하게 된다.

`dataSource.query()` 에서의 배열 구조분해 할당 응용

다음은 자바스크립트에서 mysql과 typeORM을 이용해 raw query 문으로 데이터를 가져오는 getUserByEmail 함수이다. email을 인자로 받아 유저의 id, password 를 user 변수에 저장한다. (여기서 email은 유니크한 값으로, 동일한 이메일을 가진 유저는 없기 때문에 아래 쿼리문의 결과로 나오는 데이터는 0 혹은 1개이다)

const getUserByEmail = async (email) => {

    const user = await appDataSource.query(
      `SELECT 
        id, 
        password
      FROM users
      WHERE email = ?;
      `,
      [email]
    );
    
	console.log(user) //
    [
    	{ id : 1,
          password : "alskdjhfl"
        }
    ]
    
    console.log(user[0].id) // 1
	console.log(user[0].password) //   "alskdjhfl"

    reture user[0]

SELECT 쿼리문 결과 데이터가 하나뿐이더라도 데이터는 배열에 담겨 반환된다. 그러므로 위 코드에서 유저의 값을 사용하려면 user[0].password, user[0].id로 배열의 인덱스를 명시하여 사용해야 한다.
구조 분해 할당을 통해 user 변수를 선언하게 되면 아래와 같다.

const getUserByEmail = async (email) => {

    const [ user ] = await appDataSource.query(
      `SELECT 
        id, 
        password
      FROM users
      WHERE email = ?;
      `,
      [email]
    );
    
	console.log(user) //
    	{ id : 1,
          password : "alskdjhfl"
        }
        
    console.log(user.id) // 1
	console.log(user.password) //   "alskdjhfl"

구조 분해 할당을 이용해 await appDataSource.query() 의 반환값 배열의 [0]번째 정보를 user 라는 변수에 담아주었다.
이제 배열 인덱스를 명시하지 않고도 user.id, user.password 로 유저의 정보에 바로 접근하여 직관적으로 사용할 수 있다!