Contents
배열 구조 분해배열 구조 분해 할당을 진짜 제대로 한번 써보자. 블로그를 찾아보니
전부다 무시하는 부분은 포스팅이 안되어있다.
제대로 포스팅하여 보시는 분들에게 제대로 설명해보고 저도 제대로 이해해보려합니다.
모든 설명은
MDN을 기반으로 작성하였습니다.배열 구조 분해
기본 변수 할당
var foo = ["one", "two", "three"]; var [red, yellow, green] = foo; console.log(red); // "one" console.log(yellow); // "two" console.log(green); // "three"
자 이 부분을 잘 확인해보자.
foo라는 변수에 지금 [] 배열이 들어가있다. string으로 되어 있는 "one", "two", "three" 가 포함되어있다. 자 이제 구조 분해 할당이 시작된다.
var [red, yellow, green] = foo; 자 여기를 보면 red, yellow, green 으로 구조분해할당이 되어있다. 이게 바로 구조 분해 할당인데 이때 다 콘솔로 찍어보면 각각의 값들이 들어가 있는 것을 확인할 수 있다.간단하게 기본 적인 구조 분해 할당을 보았다면 아래로 특색있게 풀어보자.
선언에 분리한 할당
var a, b; [a, b] = [1, 2]; console.log(a); // 1 console.log(b); // 2
변수의 선언이 분리 되면 어떨까? 자 위에 var로 선언 된 a와 b가 존재한다.
[a, b]로 선언 되어 있는 곳에 1, 2를 넣어준다. 그런 후에 log로 찍었을 때 a에는 1이 b에는 2가 들어가있는 것을 확인할 수 있다.
기본 값
var a, b; [a = 5, b = 7] = [1]; console.log(a); // 1 console.log(b); // 7
자 여기서 보면 변수에 할당을 진행해주는 부분을 확인할 수 있다. mdn에서 보면 만약에 할당을 안해주면 undefined로 대신한다라고 하여 아래 실험해보았다.
위와 같은 조건에서 b에대한 기본 값 선언을 하지 않았을 때 콘솔로그를 확인할 수 있다.
변수 값 교환하기
자 위에 기본 값도 변경하면 당연 변수 값도 변환이 가능할 것이다.
var a = 1; var b = 3; [a, b] = [b, a]; console.log(a); // 3 console.log(b); // 1
a와 b에 값이 변경 된 것을 확인 할 수 있다.
함수가 반환한 배열 분석
function f() { return [1, 2]; } var a, b; [a, b] = f(); console.log(a); // 1 console.log(b); // 2
자 함수 f()를 생성하였다.
그 후 함수를 호출과 동시에 [a, b]로 구조 분해 할당을 진행하였다.
자 위에 1, 2 를 기본값으로 지정했기에 콘솔에 문제없이 a와 b의 값이 찍힌 것을 확인할 수 있다.
일부 반환 값을 무시하기
다른 블로그에는 전혀 설명되진 않았지만 MDN에는 설명이 되어있는 부분이다.
아래와 같이 반환 값을 무시할 수 있다.
function f() { return [1, 2, 3]; } var [a, , b] = f(); console.log(a); // 1 console.log(b); // 3
자 여기서 주목해야하는 부분은
var [a, , b] = f(); 이 부분이다.가장 중요하다고 생각하는데 [a, ,b] 이부분에 가운데 아무것도 없이 넘어간 b를 볼 수 있다.
자 출력을 보면 a는 1로 b는 3이다 그럼?
a, b인덱스는? 이라고 하면? → 정답은 a는 0 b는 1의 인덱스다.
배열은 인덱스를 기준으로 구조분해할당하고있다.
[, ,] = f();
이와 같이 모두 무시할 수 도있다.
예시로 내가 배움을 받았던 회사의 코드를 보자.
const [ modelType = '', shipNo = '', itemType = '', glue2ReportNo, , , , , , , panelCnt, ] = qrText.split('/');
자 파라미터로 받은 qrText를 지금 split로 / 기준으로 배열에 담고있다.
// qrText: MARK3/HN3275/FPA1-82/2/3043/1003/370.4/2724/684/88/4 // qrText: ['MARK3','HN3275','FPA1-82','2','3043','1003','370.4','2724','684','88','4']
이런 형식으로 쪼개지는 것을 확인할 수 있다.
근데? 질문해보자 항상 qrText가 제대로 들어온다는 것을 가정할 수 있는가?
정답은 아니다. 그렇기에 초기값을 ‘’ 빈 문자열로 놔둬 안전하게 만들어 놓았다.
이렇게 배열 구조 분해 할당을 알아보고 복기해보았다.
Share article