js) Destructuring

상황

위와 같이 쓰인 코드가 있었다. 

이에 나는

conn = dbMockHelper.conn;

를 왜 썼는지를 의아해했다. { conn } = dbMockHelper 라고 왜 줄여서 쓰지 않았을까라고 생각하면서.

 

잘못된 생각 하나

구조 분해 할당은 100% 호환 가능한 개념이 아니라는 것.

각 필요에 맞게 써야하는거다.

 

다 시도하며 깨우친 개념들

시도 1

내가 원하는 대로 { conn } = dbMockHelper 라고 고쳐주었다. 

실제 실행했을 때. 근데 30번째줄에 잘못 적었다;;; { conn } = dbMockHelper으로 줬어야. 

 

오류가 난다. 

-> 앞에 변수 선언을 해줘야.

30번째줄에 잘못 적었다;;; { conn } = dbMockHelper으로 줬어야. 

30번째줄에 잘못 적었다;;; { conn } = dbMockHelper으로 줬어야. 

 

왜 const는 되고, let은 안될까?

-> ESLint가 친절하게 알려주고 있는 것. 어차피 conn이라는게 지금 말고 아래 어디서도 reassigned 되지 않으니, const를 써라~ 하고

 

 

 

시도 2

 

const {conn} = dbMockHelper 라고 적어줘도 오류가 남

-> 아래 테스트 케이스 3군데서 다 conn을 사용중인데 읽어들일 수 없기 때문.

-> 테스트 케이스 전역에서 읽어주기 위해서는 describe 아래 부분에 넣어줘야 한다. 

 

 

시도 3

그래서 describe 아래로 옮겨주면?

에러가 난다. 

cf) 참고

테스트 코드에서 에러 보는 방법

Test Result 부분 -> 전체 코드 실행에 대해 보여줌. (descibe 부분도 여기에서 확인)

---spec 부분 -> 난 여기가 describe 부분 보여지는 곳이라 생각했는데 아님.

그리고 그 아래 각각의 it 테스트 케이스 -> 각가의 테스트 결과 확인

 

이 에러 이유는 아래 코드 때문임

await dbMockHelper.mockDB();

mockDB 함수를는 transactionConnection도 가지고 오고, 뭐도 가지고 오고... 이런걸 '한 곳에서' 처리하도록 만든 함수임. conn도 그렇게 담겨있는건데 여기 이 함수를 두고 위에서 const {conn} = dbMockHelper를 해버리면 undefined 되는 것. 

null
정의가 되어 있지만 값이 null인 것
 
undefinded
정의가 아에 안되어있는 것

 

---

 

테스트코드 전역에서 쓰이라면 decribe 부분에 - let으로 변수를 주는게 맞음. 

그리고 before 부분에 아래 2가지 방법 중 한 가지를 선택

1)

conn = dbMockHelper.conn;

2)

({ conn } = dbMockHelper);

- 이 경우는 변수의 선언과 분리하여 변수에 값을 할당하는 경우 

   아래 개념과 매칭

 

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