[Modern Javascript Deep Dive] 8~9장 인사이트 정리

Read/Morden Javascript Deep Dive

[Modern Javascript Deep Dive] 8~9장 인사이트 정리

helloyukyung 2023. 11. 11. 19:20

Modern Javascript Deep Dive 8~9장을 읽으며 얻은 인사이트를 추가로 공부하면서 정리해 보자.

1. 표현식과 문

표현식과 문은 어떻게 구분할 수 있을까? 가장 간단한 방법은 변수에 할당해보는 것이다.
문은 값이 아니기 때문에 변수에 할당할 수 없다.

const foo = const bar
const foo = true ? 'hi' : 'hello'

변수 선언 문 -> 값 x
삼항 조건 연산자 표현식 -> 값 o
조건 문 -> 값 x

2. Number()와 parseInt()의 차이

Number()와 parseInt() 둘 다 숫자 타입이 아닌 값을 숫자 타입으로 변환해 줄 수 있는 함수다.
하지만 아래와 같은 차이가 존재한다.

숫자와 다른 문자가 섞였을 때

Number()의 경우 변환을 하지 않고 NaN을 반환하는 반면
parseInt() 숫자만 찾아내고, 찾아낸 숫자만 숫자타입으로 변환하여 반환해 준다.

Number("12px") // NaN
parseInt("12px") // 12

truthy, falsy 값이 들어왔을 때

Number()의 경우 문자열 타입뿐만 아니라 불리언 타입도 숫자 타입으로 변환해 줄 수 있는 반면(단 undefined는 NaN 반환),
parseInt()의 경우 문자열 타입만 숫자 타입으로 변환해 주기 때문에 NaN을 반환한다.

Number("") // 0
parseInt("") // NaN

만약, next에서 params에 있는 값을 숫자타입으로 변환해 본다고 가정해 보자

  const searchParams = useSearchParams()
  const productId = parseInt(searchParams.get('productId'))

  const NumberProductId = Number(productId) // ?
  const parseIntProductId = parseInt(productId) // ?

useId값에 null이 들어온다면, NumberUseId는 숫자 0, parseIntUseId는 NaN을 반환할 것이다.
(ts를 사용한다면, parseIntProductId는 Error가 뜬다.)
따라서 상황에 따라 적절한 숫자 변환 함수를 사용해야겠다는 생각이 들었다.

3. 단축평가(short-circuit evaluation)

단축평가(short-circuit evaluation)는 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 과정을 말한다.
쇼트서킷(short-circuit)은 불필요한 연산을 생략함으로써 성능을 개선할 수 있다.
논리연산자(논리합(&&), 논리곱(||))는 쇼트서킷 연산방식을 제공한다.

논리합(&&) 연산자

논리합(&&) 연산자는 두 개의 피연산자가 모두 true로 평가될 때 ture를 반환한다.

"cat" && "dog"

좌항의 "cat"은 turthy 한 값이므로 ture로 평가된다.
하지만 위 시점까지는 표현식을 평가할 수 없다. 우항까지 평가해 보아야 표현식을 평가할 수 있다.
이때, 우항의 피연산자가 표현식의 평가 결과를 결정한다.

false && anything

반면 이번에는 좌항의 값이 false로 평가된다.
이 시점에서 우리는 표현식을 false로 평가할 수 있다.
따라서 이때 논리합 연산자는 우항(anything)을 평가하지 않고 논리 연산의 결과를 false로 반환한다.

논리곱(||) 연산자

논리곱(||) 연산자는 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환한다.

"cat" || "dog"

좌항의 "cat"은 turthy 한 값이므로 true로 평가된다.
이 시점에서는 우항의 피연산자를 평가해보지 않아도 위 표현식을 표현할 수 있다.
따라서 이때 논리곱 연산자는 논리 연산의 결과를 결정한 좌항의 피연산자 "cat"을 그대로 반환한다.

쇼트서킷은 성능상의 이점을 가져다줄 수 있지만 연산자의 결과값을 제대로 예상하지 못할 경우, 원인을 찾기가 어려울 수 있다.
따라서 연산자의 결과값에 대해 정확하게 이해하고 개발하는 것이 중요할 것 같다.