JavaScript 스니펫: Split & Map

Source: Dev.to

이 작은 JavaScript 코드 조각을 본 적이 있나요? 무슨 마법 같은 일이 일어나고 있는지 궁금했을 겁니다. 겉보기엔 간단해 보이지만, 여기엔 꽤 영리한 트릭이 숨어 있습니다. 하나씩 살펴보겠습니다.

CSV 문자열 나누기

"1,2,3"이라는 문자열은 CSV 파일, 사용자 입력, 혹은 API 응답에서 올 수 있습니다. JavaScript는 이를 하나의 문자열로 취급하며, 세 개의 별도 숫자로 인식하지 않습니다.

// 각 콤마마다 문자열을 나눕니다
const parts = "1,2,3".split(",");
console.log(parts); // ["1", "2", "3"]

결과는 문자열 배열입니다. 지금 바로 더하면 "12"가 나오고 3이 나오지 않습니다.

map(Number) 로 문자열을 숫자로 변환하기

Array.prototype.map 은 각 요소를 순회하면서 변환을 적용합니다. 내장 Number 함수를 전달하면 각 문자열을 숫자 값으로 변환합니다.

// 각 문자열을 숫자로 변환합니다
const numbers = "1,2,3".split(",").map(Number);
console.log(numbers); // [1, 2, 3]

이제 배열에는 실제 숫자가 들어 있어 산술 연산을 할 수 있습니다.

우아한 단축키

map(Number) 는 map(x => Number(x)) 의 축약형입니다. Number 가 이미 단일 인자를 받도록 설계돼 있기 때문에 그대로 map 에 넘겨도 동일한 결과를 얻으며, 타이핑을 몇 번 줄일 수 있습니다.

map(Number) 없이 하면 어떻게 될까?

맵핑 단계를 건너뛰면 문자열 배열만 남게 됩니다:

const withoutMap = "1,2,3".split(",");
console.log(withoutMap); // ["1", "2", "3"]

그 값들에 산술 연산을 시도하면 문자열 연결이 일어납니다:

const withoutMap = "1,2,3".split(",");
console.log(withoutMap[0] + withoutMap[1]); // "12" (문자열 연결)

const withMap = "1,2,3".split(",").map(Number);
console.log(withMap[0] + withMap[1]); // 3 (숫자 덧셈)

map(Number) 가 없으면 JavaScript 가 요소들을 텍스트로 취급하므로, 기대했던 6 대신 "123" 이 나오거나, "10" 이 "2" 앞에 나타나는 등 정렬 오류와 같은 버그가 발생할 수 있습니다.

결론

이 패턴은 실제 JavaScript 코드에서 어디든 등장합니다: CSV 데이터 파싱, URL 파라미터 변환, 폼 입력 처리 등등. .split(",") 와 .map(Number) 의 조합은 구분된 문자열을 사용 가능한 숫자 배열로 바꾸는 간결하고 표현력 있는 방법입니다.

행복한 코딩 되세요!