[JS] 문자열 배열을 숫자 배열로 변환하는 방법

 

 

 

JavaScript에서 ["2", "1", "3", "4"] 같은 문자열 배열을 [2, 1, 3, 4]와 같은 숫자 배열로 변환하는 방법을 정리해보겠습니다.

---

✅ 1. map(Number)를 사용한 변환 (가장 간단한 방법)

문자열을 숫자로 변환할 때는 Array.prototype.map()을 활용하여 Number 함수를 적용하면 됩니다.

const strArray = ["2", "1", "3", "4"]; 
const numArray = strArray.map(Number);
console.log(numArray); // [2, 1, 3, 4]

 

📌 설명:

• map(Number)는 배열의 각 요소에 Number() 함수를 적용하여 문자열을 숫자로 변환합니다.
• Number("2") → 2, Number("1") → 1 과 같은 방식으로 변환됩니다.

---

✅ 2. parseInt 대신 Number를 사용하는 이유

일반적으로 parseInt()를 사용할 수도 있지만, 숫자로 변환할 때는 Number()가 더 적절한 경우가 많습니다.

const strArray = ["10", "08", "15"]; 
const numArray1 = strArray.map(Number); 
const numArray2 = strArray.map(str => parseInt(str)); 
console.log(numArray1); // [10, 8, 15] (정상 변환) 
console.log(numArray2); // [10, 8, 15] (같아 보이지만, 일부 경우 문제 발생 가능)

📌 parseInt 사용 시 주의할 점
parseInt()는 문자열을 정수로 변환할 때 기본적으로 10진수로 해석하지만, 숫자 앞에 0이 있는 경우 8진수(혹은 다른 진수)로 해석될 위험이 있습니다.
따라서 숫자 변환이 목적이라면 Number()를 사용하는 것이 더 안전합니다.

---

✅ 3. 숫자가 아닌 값이 포함된 경우 (NaN 방지)

만약 배열에 숫자가 아닌 값이 포함되어 있다면, 변환 과정에서 NaN이 발생할 수 있습니다.
이를 방지하려면 filter()를 함께 사용하여 숫자로 변환 가능한 값만 남겨야 합니다.

const strArray = ["2", "1", "hello", "3", "4"]; 
const numArray = strArray.map(Number).filter(num => !isNaN(num)); 
console.log(numArray); // [2, 1, 3, 4] ("hello"는 제외됨)

📌 설명:

• map(Number)로 변환한 후 isNaN(num)을 활용해 숫자가 아닌 값(NaN)을 필터링합니다.
• "hello" 같은 값은 변환되지 않으므로 제거됩니다.

---

✅ 4. reduce()를 사용한 변환 (대체 방법)

map() 대신 reduce()를 사용하여 숫자 배열을 만들 수도 있습니다.

const strArray = ["2", "1", "3", "4"]; 
const numArray = strArray.reduce((acc, cur) => { const num = Number(cur); if (!isNaN(num)) acc.push(num); return acc; }, []); 
console.log(numArray); // [2, 1, 3, 4]

📌 설명:

• reduce()를 사용하면 배열을 순회하면서 변환과 필터링을 동시에 수행할 수 있습니다.
• Number(cur)로 변환한 후, 유효한 숫자인 경우(!isNaN(num))에만 acc 배열에 추가합니다.

---

🏆 결론: 가장 간단하고 안전한 방법은?

문자열 배열을 숫자 배열로 변환할 때는 map(Number)를 사용하는 것이 가장 직관적이고 효율적입니다.
단, 숫자가 아닌 값이 포함될 가능성이 있다면 filter()를 함께 사용하여 NaN을 제거하는 것이 안전합니다.

 

const strArray = ["2", "1", "hello", "3", "4"]; 
const numArray = strArray.map(Number).filter(num => !isNaN(num)); 
console.log(numArray); // [2, 1, 3, 4]

이 방법을 사용하면 간결하고 오류 없이 문자열 배열을 숫자 배열로 변환할 수 있습니다! 🚀