JavaScript에서 문자 숫자를 숫자로 변환하기: 마법 같은 비법 대공개! 🎩✨

안녕하세요, 코딩 마법사 여러분! 오늘은 JavaScript에서 문자열로 된 숫자를 진짜 숫자로 변환하는 방법을 알려드릴게요. 이건 마치 고무 오리를 진짜 오리로 바꾸는 마법 같은 작업이에요. (물론 코딩 세계에서 말이죠!) 🦆➡️🦢

이야기를 시작하기 전에 한 가지 질문을 던질게요. "5"와 5는 같을까요? 🤔
NO! "5"는 문자열이고, 5는 숫자입니다. 두 가지는 완전히 다른 존재예요. 이 둘을 제대로 다루지 못하면 코드는 바로 삐걱거리고, 콘솔은 빨간 에러로 물들겠죠. 😱 그러니 오늘 알려드릴 방법들을 꼭 기억해 두세요!

---

🛠️ 방법 1: parseInt와 parseFloat로 간단하게 해결!

이건 마치 마법 지팡이 같아요. 숫자로 보이는 문자열을 딱 보면, 그걸 숫자로 바꿔줍니다.

const strNumber = "123";
const realNumber = parseInt(strNumber, 10);

console.log(realNumber); // 123
console.log(typeof realNumber); // "number"

parseInt는 정수로 변환하고, parseFloat는 소수점까지 깔끔하게 처리해줘요.

const floatString = "123.45";
const floatNumber = parseFloat(floatString);

console.log(floatNumber); // 123.45
console.log(typeof floatNumber); // "number"

하지만 조심하세요! 만약 문자열이 이상한 값을 포함하고 있으면... 🤯

const weirdString = "123abc";
console.log(parseInt(weirdString)); // 123

숫자 앞부분만 가져오고 나머지는 버려요. 정말로 필요한 값인지 꼭 확인하세요!

---

🛠️ 방법 2: Number() 함수로 한 방에 끝내기!

Number() 함수는 마치 엄격한 선생님 같아요. 문자열 전체를 딱 검사해서, "숫자 아니면 무효!"라는 규칙을 지켜요.

const strNumber = "456";
const realNumber = Number(strNumber);

console.log(realNumber); // 456
console.log(typeof realNumber); // "number"

근데, 이 선생님도 완벽하지는 않아요. 이상한 문자열을 넣으면 무조건 NaN(Not a Number)을 내놓습니다.

const weirdString = "456abc";
console.log(Number(weirdString)); // NaN

그래도 좋은 점은, 숫자가 아닌 경우 확실히 "문제가 있어요!"라고 알려준다는 거죠.

---

🛠️ 방법 3: + 연산자로 변환하기 (초간단 비법!)

이 방법은 진짜 심플하고, 약간 비밀스러운 맛이 있어요. 문자열 앞에 **+**만 붙이면 끝나요!

const strNumber = "789";
const realNumber = +strNumber;

console.log(realNumber); // 789
console.log(typeof realNumber); // "number"

이건 마치 "나 사실 숫자야!"라고 선언하는 느낌이랄까요. 하지만 또 조심! 이상한 값이 들어가면 역시 NaN이 튀어나옵니다.

---

🛠️ 방법 4: ~~로 변환하는 고급 트릭!

만약 "정수 변환만 필요하다"면, 이 방법도 고려해 보세요. 비트 연산자 ~를 두 번 쓰는 거예요. 너무 신기하지 않나요?

const strNumber = "123.45";
const realNumber = ~~strNumber;

console.log(realNumber); // 123
console.log(typeof realNumber); // "number"

이 방법은 소수점을 그냥 무시하고 정수만 남겨요. 깔끔하고 빠르지만, "소수점 날아가도 괜찮아!"라는 확신이 필요합니다.

---

🎭 번외편: JSON 트릭으로 변환하기

조금 장난스러울 수 있지만, 문자열이 숫자로만 이루어져 있다면 이 방법도 가능해요!

const strNumber = "999";
const realNumber = JSON.parse(strNumber);

console.log(realNumber); // 999
console.log(typeof realNumber); // "number"

다만, JSON 파싱이라 너무 복잡한 문자열엔 쓰지 마세요. 숫자가 아니면 에러를 뱉을 수도 있어요.

---

🚀 어떤 방법을 선택할까요?

상황에 따라 다릅니다!

• 숫자만 포함된 문자열이라면 Number()나 +를 추천.
• 앞뒤로 불필요한 문자가 섞여 있다면 parseInt 또는 parseFloat가 더 안전.
• 소수점 제거하고 정수만 필요하다면 ~~ 같은 트릭도 OK.

---

😄 한마디 더!

문자와 숫자의 세계는 정말 다채로워요. 그만큼 실수도 많이 할 수 있죠. "왜 내 값이 NaN이지?" 하며 밤을 새운 경험, 다들 있으시죠? 😂 하지만 오늘 배운 내용을 잘 활용하면, 그런 실수를 줄이고 자신감 있게 코드를 작성할 수 있을 거예요!

자, 이제 여러분 차례입니다! 오늘 배운 방법 중 가장 마음에 드는 걸 사용해서 실습해 보세요. 그리고 궁금한 점이 생기면 언제든 댓글로 물어봐 주세요! 🤗

행복한 코딩 되세요! 💻✨