JS is weird
A fun and tricky JavaScript quiz
jsisweird.com
자바스크립트만의 매력이라고 할 수 있는 요상한 문법들을 다룬 사이트가 있다
JS is weird 라는 사이트는
'연산'과 '타입 변환'을 중심으로 자바스크립트 문제 25개를 풀 수 있는 곳이다
평소에 생각하지 못했던 문법들이 나와서 심심할 때 재미 삼아 풀어볼 만하다!
오늘은 그 중에서 생각해 볼 만한 문제 8개를 풀이해보려고 한다
1. true + false
👉 1
"+" 연산시 boolean 은 number 타입으로 변환된다.
그러면 1 + 0 이 되니까, 결과는 1이다.
2. [,,,].length
👉 3
빈 공간에는 undefined 가 들어간다.
마지막의 ,는 trailing comma이다.
따라서 undefined로 채워진 값이 3개이기 때문에 3이라는 결과가 반환된다.
참고로 trailing comma 란, 한국어로 후행 콤마로 배열이나 객체의 항목 마지막에 단순히 붙이는 것이다.
후행 콤마가 있으면 나중에 신규 값 추가 시, 기존 line의 수정 없이 코드를 작성할 수 있다는 편리함이 있다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Trailing_commas
Trailing commas - JavaScript | MDN
Trailing commas ("final commas"라고도 불립니다)는 새로운 엘리먼트나 매개변수, 속성을 JavaScript 코드에 추가할 때 유용합니다. 새로운 속성을 추가할 때, 마지막 줄에 trailing comma가 있다면 그 줄을 수
developer.mozilla.org
3. [1, 2, 3] + [4, 5, 6]
👉 "1,2,34,5,6"
배열에 '+' 연산 시, string 타입으로 변환된다.
Object 나 Array처럼 프로토타입에 toString() method 가 있으면 string으로 형변환된다.
배열을 문자열로 변환하면 각 값에 ,(쉼표)로 연결된 문자열이 반환된다. (공백 x)
[1, 2, 3] => '1,2,3'
[4, 5, 6] => '4,5,6'
즉, '1,2,3' + '4,5,6' 이므로
중간 값들이 그대로 붙여진 "1,2,34,5,6" 이 반환되는 것이다.
4. 0.2 + 0.1 === 0.3
👉 false
0.2 + 0.1는 0.30000000000000004이다.
그 이유는 자바스크립트의 number가 64비트 부동소수점으로 표현되기 때문에 정확한 값으로 산출되지 않는다.
따라서 false다.
자바스크립트가 숫자를 저장하는 방식 64비트 부동소수점에 대해 잘 모른다면
https://realzzu.tistory.com/199
[JS] 자바스크립트의 64비트 부동소수점 알아보기
Javascript에서 숫자는 64비트 부동소수점 형식으로 저장된다. 64비트 부동소수점이 어떤 건지 알아야0.1 + 0.2 === 0.3 이 오류라는 것을 이해할 수 있다! 64비트 부동소수점이 어떤건지 각각의 단어를
realzzu.tistory.com
위 글을 보고 도움이 되었으면 좋겠다 ! 🤔
5. 10,2
👉 2
comma operator (쉼표 연산자)는 마지막 피연산자의 값을 반환한다.
따라서 2가 반환된다.
6. !!""
👉 false
!! 연산자는 논리 연산자로, 여러 타입의 데이터를 모두 boolean으로 형변환한다.
truthy 한 값을 true로, falsy 한 값을 false로 바꿔주는 것이다.
"" 는 falsy 한 값이므로 !! 연산자를 통해 false로 바뀐다.
11. "" - - ""
👉 0
+ 연산자와 다르게, - 연산자는 Number 타입으로 우선 형변환된다.
“” ⇒ 0
0 - (-0)
0-0
= 0
24. "" && -0
👉 ""
&& (논리적 and 연산자)는 왼쪽에서 오른쪽으로 평가한다.
“” ⇒ false 니까 오른쪽으로 가지 못하고 flasy 한 해당 값을 반환한다.
3 && 5 ⇒ 5를 반환한다.
사실 타입스크립트를 쓰면 정확하게 값의 변환을 제한할 수 있지만
그래도 이런 자바스크립트의 데이터 타입들에 대해 자세히 알면 오류 파악에도 도움이 되니
틀린 부분들은 알아가는 것도 좋을 것 같다!
참고로 문제를 풀고 나면, 자체적으로 사이트에서 해설도 제공해 준다
'Front-end > JavaScript' 카테고리의 다른 글
| [JS] 자바스크립트의 64비트 부동소수점 알아보기 (1) | 2024.09.14 |
|---|---|
| [JS] 모듈(Module)이란? 그리고 모듈 시스템을 알아보자 (0) | 2024.02.23 |
| <input> 이벤트의 실행 순서는? onChange, onKeyDown, onKeyPress, onKeyUp, onInput (0) | 2024.01.29 |
| [JS] 변수가 왜 '암묵적'으로 undefined로 초기화가 된다는 걸까? (0) | 2023.12.10 |
| [JS] 페이지 이동하기 (location.href/replace, window.open) (4) | 2023.09.09 |
