📃 프론트엔드 인터뷰 문제 답해보기 #5 JS의 이상한 연산들

📃 프론트엔드 인터뷰 문제 답해보기 #5 JS의 이상한 연산들

Prologue

깃허브를 돌아다니다가 예전에 프론트엔드 개발자 인터뷰 질문이라는 레포지토리를 본적이 있다. 사실 그 당시에는 그냥 스타만 눌러놓고 큰 관심이 없었지만 지금부터 하나씩 풀어보려 합니다.

물론 많은 답들이 이미 이 레포지토리에 작성되어 있긴 한데, 작성되지 않은 것들도 있고 내 답이랑 모범답안을 비교하는 것도 좋을 것 같아서 한번 풀어보려 합니다.

문제 선정

기존 레포지토리에는 문제의 분류가 아래와 같이 되어있습니다.

1. General Questions
2. HTML Questions
3. CSS Questions
4. JS Questions
5. Accessibility Questions (external link)
6. Testing Questions
7. Performance Questions
8. Network Questions
9. Coding Questions
10. Fun Questions

매일 1가지씩 돌아가며 풀 건데, General Questions 항목에서 너무 일반적인 문제는 풀지 않을 것이다. 너무 일반적인 문제의 정의는 사람마다 답이 다를 수 있는 문제입니다.

이를테면...

What did you learn yesterday/this week? (어제/이번주에 무엇을 배웠나요)
What excites or interests you about coding? (무엇이 당신을 코딩하고 싶게 만드나요?)
What is a recent technical challenge you experienced and how did you solve it?(최근에 겪은 기술적인 어려움과 그것을 어떻게 해결했는지 알려주세요)

이러한 것들은 답변하지 않습니다. 이런 문제는 그때그때 답이 달라질 수 있습니다.

참고

나의 답변은 높은 확률로 틀릴 수도 있으며, 아니면 맞게 가다가 중간에 이상한 길로 빠질 수도 있다. 댓글에 자신만의 답을 올려주면 매우 고마울 것 같습니다.

Q: 10 + '20'의 값은 무엇일까요?

원문 : What is the value of foo?

var foo = 10 + '20';

A:

직접 실행해보면 아시겠지만 foo의 값은 1020이 나오게 됩니다.

그 이유는 자바스크립트에서 + 연산자는 문자열을 합치는 concat 기능이 있고 그것을 먼저 고려하기 때문입니다.

+, -, *, / 의 사칙연산중 오직 +만 양쪽 피연산자 중 한쪽에 문자열이 존재할 때 다른 한쪽도 문자열로 바꾸어버립니다.

나머지 연산들은 문자열과 함께 엮였을 때 다른 한쪽에 Number 형변환을 적용하여 연산합니다.

Q: (0.1 + 0.2) == 0.3의 결과는 무엇일까요

(0.1 + 0.2) == 0.3 //?

A:

정답은 false입니다.

자바스크립트는 double-precision 64-bit binary format IEEE 754의 형태로 숫자를 저장합니다.

기본적으로 이진수로 숫자를 저장하는데, 소수를 저장할 때는 가끔 이진수로 완전하게 표현이 불가능한 소수들이 있습니다.

예를 들면 10진수 0.2는 2진수로 표현하려 해도 대략적으로 0.0011 0011 0011...의 반복으로만 표현할 수 있을 뿐 정확히 표현이 불가능합니다.

이러한 특성 덕에 0.1 + 0.2이 올바르게 계산되지 못하고 0.3과 같지도 않다고 나옵니다.

올바른 결과를 위해서는
1. 소수점 반올림 함수를 이용하여도 되고
2. 소수에 10을 곱해 10진수로 만든 뒤에 계산 후 다시 소수로 만드는 방법이 있습니다.

IEEE 754의 내부 구조는
Sign bit: 1 bit
Exponent: 11 bits
Significand precision: 53 bits (52 explicitly stored)
위와 같이 이루어져있습니다.