[posts update]: 2024-09-21 21:30:17 | changed: 1

posts/아티클/javascript의_알면_뻔하지만_몰랐을_수도_있는_동작.md

@@ -1,15 +1,24 @@
 # javascript의 알면 뻔하지만 몰랐을 수도 있는 동작
 
+![](https://res.cloudinary.com/practicaldev/image/fetch/s--ZDtqrBOj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/damiancipolat/js_vs_memes/blob/master/doc/js_thanks.png%3Fraw%3Dtrue)
+*javascript의 유명한 특이 동작들. 이 글에서는 위 사진에는 없는 경우들을 다룬다.*
+
+
 javascript는 우리에게 익숙한 언어지만, 그 속에는 알아두면 유용하지만 쉽게 간과할 수 있는 동작들이 숨어 있다. 어떤 것들은 너무 당연하게 느껴져서 별다른 고민 없이 지나치기도 하고, 또 다른 것들은 특정 상황에서만 드러나기 때문에 한 번도 문제를 겪지 않았다면 알기 어려울 수도 있다. 이번 글에서는 **알면 뻔하지만 몰랐다면 계속 모를 수도 있는 자바스크립트의 동작**들을 살펴보려고 한다.
 
+
 ## 배열에 비교 연산자를 사용하면 어떻게 될까
 
+![](https://www.javascripttutorial.net/wp-content/uploads/2016/11/JavaScript-Comparison-Operators.png)
+
 개발 중 실수로 배열인지 모른 채 배열에 대소비교 연산자(`>`, `<`)를 적용한 적이 있었다. 단순한 테스트 케이스에서는 정상적으로 작동하는 것처럼 보였기 때문에 문제를 인지하지 못했지만, 이후 배열의 요소가 변하면서 문제가 발생했고, 그제야 오류를 발견할 수 있었다.
 
 왜 처음에는 문제가 보이지 않았을까?
 
 결론부터 말하자면, **배열에 비교 연산자가 적용되면 배열이 문자열로 변환되어 비교가 이루어지기 때문**이다.
 
+### 상세
+
 javascript 의 비교 연산자(`>`, `<`, `>=`, `<=`)는 숫자뿐만 아니라 문자열을 비교하는 데도 사용할 수 있다. 만약 비교 연산자의 피연산자 중 하나가 객체라면, javascript 는 이를 원시 값으로 변환하려고 시도하는데, 이때 비교연산자의 경우 **숫자 우선 변환 알고리즘**(prefer-number algorithm)이 적용된다.
 
 숫자 우선 변환 알고리즘은 먼저 객체의 `.valueOf()` 메서드를 호출한다. 만약 반환된 값이 원시 값(숫자, 문자열 등)이면 그 값이 사용된다. 그러나 대부분의 경우 배열의 `.valueOf()` 메서드는 배열 객체 자체를 반환한다. 이 경우, 자바스크립트는 자동으로 `.toString()` 메서드를 호출하여 배열을 문자열로 변환한다.
@@ -27,6 +36,7 @@ javascript 에서 문자열은 유니코드 코드 포인트를 기준으로 비
 
 이처럼 배열을 비교할 때 문제가 발생하는 이유는 배열이 자동으로 문자열로 변환되기 때문이다. 배열을 비교할 때는 이러한 변환 과정을 염두에 두고, 정확한 비교를 위해 배열의 각 요소를 명시적으로 처리하는 것이 중요하다.
 
+
 ## finally vs return
 
 `return`은 **함수의 실행을 종료**하고, 주어진 값을 함수 호출 지점으로 반환한다. 반면, `finally` 블록은 코드의 제어 흐름 상 **반드시 실행**된다.
@@ -76,6 +86,7 @@ console.log(a());
 >>> a
 ```
 
+
 ## x !== x 가 true 인 경우가 있다?
 
 javascript 에는 값이 일치하는지 확인하기 위한 두 가지 비교 연산자가 있다.
@@ -87,14 +98,19 @@ javascript 에는 값이 일치하는지 확인하기 위한 두 가지 비교 
 
 javascript 에서 원시 타입과 객체 타입을 생각해봐도 이런 경우가 존재하기 어려워 보인다. 하지만 정답은 다음과 같다.
 
+
 ```js
 NaN !== NaN // true
 ```
 
+
 이는 javascript `number` 타입이 [IEEE 754](https://en.wikipedia.org/wiki/IEEE_754)라고 하는 컴퓨터에서 부동소수점을 표현하는 표준을 따르는 배정밀도 64비트 이진 부동소수점 형식 *(double-precision 64-bit binary floating-point format)* 를 값으로 가지기 때문이다.
 
 > [IEEE 754](https://en.wikipedia.org/wiki/IEEE_754)에서는 ±0, 무한대, 그리고 `NaN`(Not a Number) 등의 기호를 정의하고, 이 수들에 대한 연산 방식을 규정하고 있다.
 
+
+![](https://dandkim.com/static/8da4668def0c4ccef925da76031f29b1/4b190/confused3.jpg)
+
 특히, `NaN`은 수학적으로 정의되지 않는 연산(예: 0을 0으로 나눈 경우)에 대한 결과로, 컴퓨팅 시스템에서 사용된다. 이에 따라 javascript에서는 `NaN`과 관련된 비교 규칙이 다음과 같이 정의된다.
 
 |NaN ≥ _x_|NaN ≤ _x_|NaN > _x_|NaN < _x_|NaN = _x_|NaN ≠ _x_|
@@ -111,8 +127,10 @@ Object.is(NaN, NaN) // true
 
 `Object.is()`가 `==` , `===` 와 다른 점 중 하나이다. `Object.is()`는 `==`처럼 여러 강제가 있지도 않고,  `===`와 다르게 NaN 을 동일하게 비교한다.
 
+
 ## 자료 출처
 
+
 https://stackoverflow.com/questions/62717437/behavior-of-greater-than-and-another-inequality-comparison-operators-on-arra
 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness
 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#the_finally_block