묵혔다 꺼낸 JS - 암시적 변환 (+, -, &&, ||)

이전에는 Falsey와 명시적 변환에 대해서 알아보았다.

이번 포스팅에는 암시적 변환에 대해서 알아보려 한다.

순서는 이러하다.

• +, - 연산자의 암시적 변환
• 불리언 변환, &&과 ||의 비밀

+ , - 연산자의 암시적 변환

이전 포스팅에서 +와 -의 명시적 변환에 대해서 포스팅한 글이 있다. +, -연산자의 명시적 변환에 대해 간단히 읽어 보고 오길 추천한다.

명시적인 변환에서는 String 타입 → Number 타입을 + 또는 - 연산자만으로 해결할 수 있었다.

 

근데 이 +와 -연산자로 어떤 암시적인 변환이 가능할까?

생각보다 가까운 곳에 있을 것이라 생각이 된다. 이러한 코드를 어디선가 한 번쯤은 본 적이 있을 것이다.

 

 

코드를 보고 "아, 이런 게 있었지"라고 생각이 나는 사람도 있을 것이고, "잘 모르겠네요🤷‍♂️"이라고 생각하는 사람도 있을 것이다. (지금부터 알아볼 것이다.)

위의 코드는 원시형 숫자와 "" (빈 문자열)을 더하여 "123"이라는 문자열을 만들어낸다.

 

"아 ㅋㅋ, 이게 왜 암시적 변환이에요?ㅋㅋ🤣"

 

너무 익숙해져서 그럴 수 도 있다고 생각이 들 수 있다고 생각이 든다.

(왜냐? 자바에서도 위의 암시적 변환이 되기 때문이고, 흔히 사용되어 이젠 눈에 익었다고 생각이 되기 때문이다.)

 

처음 보는 사람들을 위해 한번 속을 까 보기로 하자.

먼저 자바스크립트에서는 + 연산자는 보통 숫자를 더하거나, 문자열의 결합에 많이 사용된다. 이것을 기본으로 하고 있다.

하지만 저렇게 숫자 타입과 문자열 타입을 서로 결합할 때 암시적으로 일어나는 일이 123의 toPrimitive() 연산 시 valueOf()에 접근하여 123이라는 값을 toString()으로 문자열로 만들어 뒤의 빈 문자열과 결합하여 "123"이라는 결과를 도출하게 된다.

(toPrimitive는 반드시 원시 값을 반환하는 심벌의 함수다. 아래의 글 참조)

객체를 원시형으로 변환하기

 

 

이렇게 자세하게 까 보니 "그냥 그런가 보다." 했던 생각보다 복잡한 과정을 통해 우리에게 값을 던져줬던 거 같다.

 

다음으로는 - 연산자의 암시적 변환에 대해서 알아보자.

 

 

아까 위와 반대로 이번엔 '123'이라는 문자열이 암시적으로 123이라는 숫자로 변형된 후 0을 빼는 코드다.

결과로 123이라는 값을 가진 숫자를 반환하게 된다.

• 연산자와는 다르게, 실제로 - 연산자는 오직 number타입만을(숫자 연산만을) 취한다.

과연 그러한지 눈으로 확인해 보자.

 

 

(*연산자와 / 연산자 또한 마찬가지로 숫자 연산만을 행한다.)

• 연산자 조금 더보기.

배열을 +연산자끼리 더하면 어떻게 되는지 알아보자.

 

 

배열끼리 인덱스를 통해서가 아닌 통째로 서로 더하니 문자열로 "1,23,4"가 나왔다.

이 또한 배열에서 ToPrimitive연산을 통해서 a와 b에 "1,2" 그리고 "3,4"라는 문자열을 반환하고 그 문자열들을 합쳐 위와 같은 결과를 도출한 것이다.

불리언에서 숫자로 변환, &&과 ||의 비밀

불리언에는 두 가지 값이 존재한다. true와 false라는 친구들이다.

ture와 false로 암시적인 변환은 가능한 값들은 if, for, while, do-while, &&와 ||의 연산 조건문에서 암시적 변환이 이루어진다.

 

 

 

&&, ||의 비밀

 

우리가 if문을 많이 사용하면 코드가 읽기 힘들어지는 경우가 있다. 그럴 경우 가독성을 높이기 위해 짧고 간결하게 && 과 ||를 사용해서 가독성도 높이고 코드의 속도도 향상한다.

일반적으로 &&와 ||는 두 비교 대상을 모두 확인 후 판별하는 것을 알고 있을 것으로 생각되나, && 와 ||는 사실 둘 중 하나의 결과만을 보고 판단한다.

 

&& - AND는 비교대상 A, B 두 개가 있다면 A가 false일 경우, 바로 false를 반환하고, A가 true이면 그때 B를 확인해 true/false를 판단하여 A, B의 비교한 값을 반환한다.

|| - OR 또한 비교대상 A, B 두 개가 있다면 A가 true일 경우, 바로 true를 반환하고, A가 false이면 그때 B를 확인해 true/false를 판단하여 A, B의 비교한 값을 반환한다.

 

 

또한 자바스크립트에서 &&와 ||를 판별 식용으로만 사용하는 것이 아닌 변수를 대입할 때에도 사용이 된다.

 

 

이와 같이 변수 대입시 || 와 &&에 사용할 수 있다.

그런데 지금 결과를 보면 || 같은 경우는 3항 연산자로도 표현이 가능할 것이다. 이 와같이 말이다.

 

 

즉 c에는 a의 값이 들어있다면 a를 쓰고 값이 falsey 하다면 5를 대입한다는 뜻이다.

그리고 e에는 a의 값이 fasley 하다면 a를 대입하고 아니라면(truthy)하다면 5를 대입한다는 뜻이다.

변수 대입시에는 || 연산자가 매우 유용하고 안전한 디폴트 값을 설정할 수 있도록 되어있다.

 

그렇다면 반대로 && 연산자를 저런 형식으로 쓸 필요 없는 무의미한 존재일까?

이에 대한 답변은 그렇지 않다 라고 말할 수 있겠다.

코드를 보고 이해해보자.

 

 

b의 결과로의 과정으로는 a의 boolean 평가 결과 후 truthy면 func()를 안전하게 실행하게 된다.

만약 a가 falsey라면 falsey 상태인 a의 값을 그대로 b에 담게 된다.

&& 연산자를 이용하면 이렇게 반드시 값이 있는 변수를 요구하게 되어, 함수를 실행할 때 필요한 변수에 의지하게 되고, truthy 한 값이면 안전하게 함수를 실행하게 될 것이다.