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"을 그대로 반환한다.
쇼트서킷은 성능상의 이점을 가져다줄 수 있지만 연산자의 결과값을 제대로 예상하지 못할 경우, 원인을 찾기가 어려울 수 있다.
따라서 연산자의 결과값에 대해 정확하게 이해하고 개발하는 것이 중요할 것 같다.
'Read > Morden Javascript Deep Dive' 카테고리의 다른 글
[Modern Javascript Deep Dive] 13~15장 인사이트 정리 (0) | 2024.01.11 |
---|---|
[Modern Javascript Deep Dive] 10~12장 인사이트 정리 (0) | 2023.12.20 |
[Modern Javascript Deep Dive] 8장 제어문 (0) | 2023.02.09 |
[Modern Javascript Deep Dive] 7장 연산자 (0) | 2023.02.08 |
[Modern Javascript Deep Dive] 6장 데이터 타입 (0) | 2023.02.03 |