[JS] 타입 변환과 단축 평가

서로·2024년 4월 6일
0

JS

목록 보기
3/15
post-thumbnail

자바스크립트의 모든 값은 타입이 있다!
값의 타입은 변환할 수 있는데, 개발자가 의도적으로 값의 타입을 변환하는 것을
명시적 타입 변환 혹은 타입 캐스팅이라 한다.

그러나 개발자의 의도와는 상관없이 표현식을 평가하는 도중에
자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다.
이를 암묵적 타입 변환 혹은 타입 강제 변환이라 한다.

기존 원시 값은 immutable이기 때문에
타입 변환을 하면 기존의 값이 변경되는 게 아니라
다른 타입의 새로운 원시 값을 생성하고 이를 메모리에 저장한다.

➊ 암묵적 타입 변환

㉠ '10' + 2	// '102'
㉡ 5 * '10'	// 50
㉢ !0		// true

위는 암묵적 타입 변환의 예시이다.
표현식을 평가할 때 코드의 문맥에 부합하지 않는 다양한 상황이 발생할 수 있다.

㉠ 문자열과 숫자를 더하고 있으므로 문맥에 부합하지 않는다.
㉡ 숫자와 문자열을 곱하고 있으므로 문맥에 부합하지 않는다.
㉢ 숫자 0을 논리적 부정하고 있으므로 문맥에 부합하지 않는다.

이때 자바스크립트는 에러를 발생시키지 않고 암묵적 타입 변환한다.

㉠ 덧셈 기호는 문자열 연결 연산자로 동작하여 숫자 2를 문자열 '2'로 타입 변환한다.
➡️ '10' + '2' = '102'
㉡ 곱셈 기호는 피연산자로 숫자를 받기 때문에 문자열 '10'을 숫자 10으로 타입 변환한다.
➡️ 5 * 10 = 50
㉢ !의 피연산자는 boolean 타입이어야 하므로 숫자 0을 false로 타입 변환한다.
➡️ !false = true

아래처럼 암묵적 타입 변환을 할 수 없는 경우도 있으니 참고하자!

1 / 'one'	// NaN

'one'으로 숫자 1을 나눌 수 없으므로 표현식의 평가 결과는 NaN이다.

이처럼 암묵적 타입 변환을 활용하면 parseInt(), toString() 같은 함수를 사용하지 않아도 타입 변환할 수 있다.

① 문자열 타입으로 변환

1 + ''		// '1'
NaN + ''	// 'NaN'
true + ''	// 'true'

위는 자바스크립트가 암묵적 타입 변환하는 특성을 활용하여
개발자가 명시적으로 문자열 타입으로 변환하는 사례다.

숫자 혹은 boolean 값에 빈 문자열(' ')을 더함으로써 피연산자를 문자열로 변경하는 것이다.

② 숫자 타입으로 변환

// 단항 산술 연산자를 이용하는 방법
+'0'		// 0
+'-1'		// -1
+false		// 0

// * 산술 연산자를 이용하는 방법
'0' * 1		// 0
'-1' * 1	// -1
true * 1	// 1

위는 자바스크립트가 암묵적 타입 변환하는 특성을 활용하여
개발자가 명시적으로 숫자 타입으로 변환하는 사례다.

단항 산술 연산자 혹은 * 산술 연산자의 피연산자가 숫자 타입이어야 한다는 점을 이용함으로써 피연산자를 숫자로 변경하는 것이다.

③ boolean 타입으로 변환

!!'x'		// true
!!''		// false
!!0			// false
!!NaN		// false
!!null		// false
!!undefined	// false

! 부정 논리 연산자를 두 번 사용하면 boolean 타입으로 변환할 수 있다.
이때, boolean으로 암묵적 타입 변환되는 값을 Falsy 값이라 한다.
Falsy 값 이외의 모든 값은 Truthy 값이며 true로 암묵적 타입 변환된다.

➋ 단축 평가

논리합( || ) 또는 논리곱( && ) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다.

위 말이 처음엔 와닿지 않을 수 있다. 예시를 통해 이해를 돕도록 하겠다.

① 논리곱 연산자 ( && )

'Cat' && 'Dog'	// 'Dog'

'Cat'과 'Dog'은 Truthy 값이기 때문에 위 표현식의 평가 결과로 true를 예상할 수 있다.
그러나 실제 평가 결과는 'Dog'이다.

왜 그럴까 🤔❓

논리곱 연산자는 좌항에서 우항으로 평가가 진행된다.
첫 번째 피연산자 'Cat'은 Truthy 값이므로 true로 평가된다.
하지만 이 시점까지는 위 표현식을 평가할 수 없으며,
두 번째 피연산자가 위 표현식의 평가 결과를 결정한다.

이때, 논리곱 연산의 결과를 결정하는 두 번째 피연산자인 'Dog'를 그대로 반환한다!

② 논리합 연산자 ( || )

'Cat' || 'Dog'	// 'Cat'

논리합 연산자도 동일하게 동작한다!
논리합 연산자는 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환한다.

첫 번째 피연산자 'Cat'은 Truthy 값이므로 true로 평가된다.
이 시점에 두 번째 피연산자까지 평가하지 않아도 위 표현식이 true라는 것을 알 수 있다.

이때, 논리합 연산의 결과를 결정하는 첫 번째 피연산자인 'Cat'을 그대로 반환한다.

이처럼 표현식을 평가하는 도중에 평가 결과가 확정된 경우
나머지 평가 과정을 생략하는 것을 단축 평가라고 한다.

끝!

잘못된 정보, 오탈자를 발견하면 편하게 댓글로 말씀해주세요!
질문 또한 환영합니다 🤗

profile
읽기 쉬운 코드와 글을 작성해요 📝

0개의 댓글