당신은 자바스크립트를 안다? 모른다?

Haz·2024년 7월 14일
1

개발여행기

목록 보기
27/32
post-thumbnail
post-custom-banner

자바스크립트 문제 | console.log의 출력값을 맞히시오

우선 영상으로 문제를 한 번 쭉 풀어보고 오면 저절로 "어이쿠" 소리를 내고 있는 나 자신을 발견할 수 있다. 결론적으로 6개 맞췄는데, 한두 개는 찍어서 맞춘 거라...😁 정말 자바스크립트는 알면 알수록 신기할 따름이다.



1. 자바스크립트의 소수점 계산

이건 이미 알고 있었던 부분이라 쉽게 맞혔다. 부동 소수점 계산이 제대로 되지 않는다는 점은 타임 스탬프에서 이미 경험적으로 체감했기 때문이다.

영상에도 나오지만 초등학생이 봐도 true가 나와야할 소수점 계산이 false가 나오는 정확한 이유는 이진법으로 정확히 표현할 수 없는 소수의 경우 계산에 오차가 발생하기 때문이다. 소수 중의 일부는 10진수를 2진수로 변환하면 무한소수가 된다. 무한소수를 유한한 범위(메모리의 한계) 내에서 표현하게되면 근사값으로 표시할 수 밖에 없게 되고, 이로 인해서 계산값의 멱등성이 보장되지 않는 것이다.

우리가 생각하는 정답을 확인하려면 toFixed() 메서드를 사용하거나, Math 객체의 메서드를 활용하거나, 소수를 정수로 만들어 계산한 후 다시 자릿수만큼 10의 배수로 나눠 원하는 결과값을 인위적으로 만드는 수밖에 없다.

2. NaN을 String으로 만들기

보면서 가장 황당했던 문제다. 당연히 오류가 나야할 것 같은데 NaN string으로 찍히다니···. 오류를 반환하는 NaN의 타입을 이용한 신기한 문제였다. 물론 banana를 이렇게 찍는 사람은 없겠지만 말이다😂

3. 부등호 연산

연속된 부등호 연산을 하는 문제였는데, 처음 한 부등호 연산의 결과를 다시 부등호 연산을 하기 위해서 truefalse 값이 정수로 어떻게 표현되는지를 알아야하는 문제였다. 이에 대해서는 알고 있었기 때문에 가볍게 맞혔다.

4. String.raw

일반적으로 잘 쓰지 않는 메서드이기 때문에 낯선 분들이 많을 것 같았고, 나 역시도 그랬지만 단어 뜻으로 찍어봤다. 역시나 이스케이프 문자까지도 일반 문자열로 반환하는 메서드였다.

5. []의 정수형 타입 변환

주로 타입 변환과 관련된 문제들이 많았다. 아무래도 자바스크립트라는 언어의 특성 상 형 변환이 임의로 일어나기 때문에 이로 인한 에러가 많아서 그런 것 같다. 해설도 가장 오래 들여다 본 문제였다.

자바스크립트에서 배열은 객체 타입이기 때문에 객체 타입의 정수형 타입 변환 문제였고, 빈 배열은 정수형 0으로 치환된다. isFalse 변수의 경우는 이미 ![]로 먼저 불리언 연산이 되기 때문에 객체의 진리값이 늘 true라는 점을 활용해 false가 된다는 걸 알아야 했다. 또한 false는 정수형으로 변환됐을 때 0이 되는 걸 활용해야한다는 점까지 완벽하게 형 변환을 정복할 수 있는 문제였다.

6. sort()

코테를 준비하다보면 가장 먼저 알게 되는 배열 메서드들 중 하나다. 배열 내 값들을 정렬하는 메서드고 보통 숫자를 정렬시킬 때 사용하기 때문에 아무 생각 없이 매개변수로 오름차순인지, 내림차순인지 반영해서 사용한다.

그래서 이 문제도 당연히 그렇겠지 생각했는데 문제를 다시 보니 메서드에 전달하는 매개변수 값이 없는 단순 sort() 메서드가 아닌가?

그렇다면 어떻게 될 지 고민해야하는 문제였다. 다행히 MDN에서 봐둔 적이 있었고, sort()는 사실 숫자형을 정렬하는 메서드가 아니라 문자열로 원소들을 변환한 후 사전 순서대로 비교하는 메서드라는 걸 알고 있었다.

메서드가 대중적으로 쓰이는 활용법과 근본적인 활용법이 다를 경우의 차이를 알고 있는지 확인하는 문제라 재미있었다.

7. false의 정수형

앞에서 이미 많이 다룬 문제다. false를 정수형으로 바꾸면 0이 되고, 비교하는 변수가 '0'으로 문자열이지만 == 연산자는 자료형이 달라도 표현된 값이 같으면 같은 것으로 판단하는지 알아보는 문제였다.

8. 배열에 원소 추가하기

정보처리기사를 공부하면서도 자주 접한 문제다. 이미 선언된 배열에 배열 길이 이상인 index에 새로운 원소를 추가하고, 그랬을 때 중간에 빈 원소의 값은 뭐가 될 지 알아보는 문제!

9. 070 + 010?

숫자 앞에 0이 붙으면 삭제하는 코드나 짜봤지, 이럴 경우 어떻게 처리가 되는지에 대해서는 고민해본 적이 없어서 신선한 문제였다.

0이 숫자 제일 앞에 올 경우 10진법 세상에 사는 우리로서는 0을 없애고 그 다음 자리수부터 숫자로 판단하지만, 자바스크립트에서는 이를 8진법으로 계산한다(주어진 숫자에 8이 포함되지 않았을 경우에만).

CS를 공부하더라도 보통 2진법이나 10진법에 익숙해져있기 때문에 이런 경우를 접하기 어려운데 새로운 상식을 익히는 문제였다.

10. instanceof

타입을 확인하는 연산자 중 instanceof는 생성자의 프로퍼티에 확인하고 싶은 것이 포함되어있는지, 프로토타입 체이닝까지 활용해 알아보는 연산자다.

즉, 아무리 string 변수가 String 객체의 메서드를 활용할 수 있다고 해도 실질적으로 new String() 생성자를 통해서 만들어진 변수가 아니라면 결과값이 false로 반환된다.

단순 타입이 아니라 생성자로 만들어진 변수값인지를 확인하는 연산자라는 걸 확인하는 문제였다.

profile
나도 재밌고, 남들도 재밌는 서비스 만들어보고 싶다😎
post-custom-banner

0개의 댓글