[JS] 자바스크립트 구조 분해 할당, map 함수 기초

1. 구조 분해 할당이란?

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식

let a, b, rest;
[a, b] = [10, 20];

console.log(a); // 10

console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest); // [30, 40, 50]

 

 

예시 문제: 한줄로 두 숫자를 입력받아 차이를 출력

https://www.acmicpc.net/problem/1001

 

1) 구조 분해 할당이 아닌 일반적인 배열만 사용한 경우

인풋 배열에 입력을 다 저장해놓고 각각 꺼내는 방식

const readline = require("readline");

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

let input = [];

rl.on("line", (line) => {
  input = line.split(' ');
  rl.close();
}).on("close", () => {
  const a = Number(input[0]);
  const b = Number(input[1]);
  console.log(a - b);
});

 

2) 구조 분해 할당 + map 사용

split으로 쪼갠 값을 map으로 모든 요소를 숫자로 바꾼 뒤, 구조 분해 할당으로 변수에 담는 방식

const readline = require("readline");

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

rl.on("line", (line) => {
  const [a, b] = line.split(' ').map(Number);
  console.log(a - b);
  rl.close();
}).on("close", () => {
  process.exit();
});

 

2. map() 적용

배열의 모든 요소를 하나씩 돌면서, 원하는 규칙(함수)을 적용해 새로운 배열을 만드는 메서드

const array1 = [1, 4, 9, 16];

const map1 = array1.map((x) => x * 2);

console.log(map1); // [2, 8, 18, 32]

 

• 이전 방식: input[0] 꺼내서 Number() 씌움 - 반복작업
• map 방식: line.split(' ')의 결과인 ["1", "2"] 배열에 Number 함수를 통째로 적용해 [1, 2]라는 숫자 배열을 한 번에 만듦

3. 구조 분해 할당 (Destructuring Assignment) 적용

let a, b;

[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

 

• 이전 방식: const a = input[0]; 각각 변수에 대입
• 구조 분해 할당: const [a, b] = input; 배열의 값을 바로 변수에 대입할 수 있다.