[Java Script] 09. 타입 변환과 단축평가 (feat. 옵셔널 체이닝 연산자)

** 본 글은 모던 자바스크립트 DEEP DIVE 를 읽고 정리한 글입니다.
** 본인이 책 내용의 이해를 돕기 위해 정리한 글이며, 부정확한 정보전달이 있을 수 있습니다. 
** 피드백은 언제나 환영입니다!

 

 

---

1. 타입 변환 

타입 변환에 앞서...

이 책 (모던 자바스크립트 Deep Dive) 에서는 타입의 변환 방식에 따라 암묵적 타입 변환과 명시적 타입 변환을 나누고 있습니다.
근데 자세히 보아도 두 타입 변환 방법의 차이를 발견하지 못하였고,
개인적으로 암묵적인 방법보다 명시적으로 타입을 변환하는 것이 오히려 코드에서 목적성이 더 잘 드러나, 코드 가독성이 좋아진다고 생각합니다.
때문에 현재 글 에서는 두 타입 변환 종류에 대해 따로 나누지 않고 타입 변환의 방법만 다루겠습니다.

* 참고

타입 변환은 원본 값을 변환시키지 않습니다.

이 점은 따로 알아두고 타입 변환 방법을 알아보도록 합시다.

var one = 1;
var strOne = one.toString();
console.log(one, strOne); // 시작 전에 콘솔창에 한번 출력해봅시다.

 

1. 문자열(string) 타입으로 변환

문자열 타입 변환은 세 가지 방법이 있다.

1.  +  문자열 연결 연산자 이용
2. String() 메서드 이용
3. toString() 메서드 이용

 

바로 예제로 알아보자.

// 1. 문자열 연결 연산자.
1 + "" // '1';
1 + "2" // '12';
NaN + "" // "NaN";
true + "" // "true";

// 2. String() 메서드 이용
String(1) // '1'
String(NaN) // 'NaN'
String(false) // 'false'

// 3. toString() 메서드 이용
1.toString(); // '1'
1232133.toString(); // '1232133'

1번 방법은 이미 타입과 동적 타이핑에서 설명했던 부분이다.

2번과 3번은 자바스크립트의 기본 메서드를 이용하는 방법이다.

자신이 편한 메서드를 사용하자.

 

2. 숫자(number) 타입으로 변환

숫자 타입은 문자열보다 한 가지 많은 네 가지 방법이 있다.

1. 단항 산술 연산자 이용
2.  *  산술 연산자 이용
3. Number() 메서드 이용
4. parseInt / parseFloat() 메서드 이용

/ 1. 단항 산술 연산자 이용
+'1123' // 1123
+'string' // NaN
+true
-'10.53' // -10.53
-'Infinity' // Infinity

// 2. * 산술 연산자 이용
'10' * 2 // 20
'test' * 10 // NaN
true * 5 // 5, true는 1로 변환되어 계산된다
false * 100 // 0, false 는 0으로 변환되어 계산된다.

// 3. Number 이용
Number('10') // 10
Number(true) // 1

// 4. parseInt, parseFloat 이용. 이건 문자열만 변환 가능하다.
parseInt('10') // 10
parseInt('10.1') // 10, 정수만 출력된다.
parseFloat('10.1') // 10.1, 실수를 출력가능하다.
parseFloat('5') // 5, 정수로 출력도 된다.

사용 방법과 형태가 위 문자열 변환과 거의 같기 때문에 1~3번 까지는 따로 설명할 부분이 없다.

다만 pasreInt 와 parseFloat 의 경우 엄격하게 문자 -> 숫자 변환만 허용된다.

또한 parseInt는 정수형, parseFloat은 실수형 을 반환하는데,

원래 정수와 실수를 묶어 number 타입으로 표현하는 자바스크립트에서는 조금 낮설 수 있으니 유의하자.

 

3. 불리언(boolean) 타입으로 변환

불리언 타입 변환은 두 가지 방법이 있다 (나도 처음알았다.)

1. Boolean() 메서드 사용
2.  !  부정 논리 연산자를 두번 사용하기

사실 불리언 타입 변환은 값 자체가 true / false로 평가되는 경우 그대로 조건식에 사용하기 때문에 잘 사용해본 적이 없다.

때문에 값이 false로 평가되는 4가지의 유형만 알고 있다면 굳이 깊게 볼 필요도 없다고 생각한다.

1. ‘’ (빈 문자열)
2. 0, -1 (0과 음수)
3. null
4. undefined

마지막으로 예제만 보고 가자.

// 1. Boolean 메서드 사용하기
// 이 메서드는 온갖 타입을 다 넣을 수 있는데, false를 반환하는 타입만 제외하면 다 true니 겁먹지말자.
Boolean(1) // true
Boolean('string') // true
Boolena({}) // true
// ... 아무튼 true
Boolean(0), Boolean(-1) Boolean('') Boolean(null) Boolean(undefined) // false

// 2. !! 사용하기
!!1 // true
!!0 // false
// 결과는 위와 같으니 생략한다.

 

 

 

2. 단축 평가

들어가기 앞서...

제가 찾지 못한 것 일수도 있지만, 이 책에는 단축평가 자체에 대한 설명이 따로 없었습니다.

때문에 나름대로 고민한 결과, 단축평가는 다른 (짧은) 문법을 사용하여 조건문과 비슷한 결과를 내는 것 이라고 정의하였습니다.

물론 공식적인 설명이 아니므로 참고 후 잊으시면 됩니다.

부디 이해에 도움이 되었으면 좋겠습니다.

 

아무튼 단축평가의 유형을 하나씩 알아보자.

 

1. 논리 연산자를 이용한 단축평가

시작 전에 논리 연산자를 떠올리고 가자.

true && true // true
true && false // false
true || false // true
false || false // false

앞서 AND 와 OR 방식을 이용하여 true / false 를 반환했던 연산자들이다.

오늘은 이 연산자로 이용하여 조건문을 구성해볼거다.

아래는 논리 연산자에 문자열을 넣어 단축평가를 사용한 예시이다.

"Cat" && "Dog" // Dog
false && "Dog" // false
"Cat" || "Dog" // Cat
false || "Dog" // Dog

 

 

예시를 보면 위와 같이 true / false 결과가 아니라 문자열 값 을 반환한다.

이렇게 값이 반환되는 원칙은 해당 연산자가 true로 결정 되었을 때에 값 이다.

다시 순서를 상세하게 보자.

1. "Cat" && "Dog"
   a. "Cat" → "Dog" 순서로 평가된다.
   b. Dog까지 평가 결과 해당 연산자는 true 이다.
   c. Dog를 반환한다
2. false && "Dog"
   a. false → “Dog” 순서로 평가된다.
   b. false 평가 결과 해당 연산자는 false 이다.
   c. false를 반환한다.
3. "Cat" || "Dog"
   a."Cat" → "Dog"순서로 평가된다.
   b. Cat 평가 결과 해당 연산자 true 이다.
   c. Cat을 반환한다
4. false || "Dog"
   a. false → “Dog” 순서로 평가된다.
   b. Dog까지 평가 결과 해당 연산자는 true 이다.
   c. Dog을 반환한다.
   

그 외에도 여러 예제가 있겠지만 직접 생각해보자. 꼭 이해가 되었으면 좋겠다.

 

위 로직이 이해되었다면, 단축평가와 조건문을 사용하는 실제 예시를 한번 보자.

var score = 9;
var result = '';

// if 문
if (score > 7) result = '통과';
else result = "재시험";

// 단축평가
result = (score > 7) && '통과' // 앞 조건이 true일 때 통과가 할당된다.
result = (score > 7) || '재시험'; // 앞 조건이 false 일 때 재시험이 할당된다.

이런식으로 사용 될 수 있다.

이런 단축평가를 처음 접한다면

"굳이 조건문이 아니라 이렇게 코드를 써아하나?" 싶겠지만,

실제로 React를 사용할 때 자주 쓰이는 패턴이다.

 

때문에 내 설명이 개차반이라 이러한 코드 이해가 어려운 분들이라면

다른 글을 한번 참고해서라도 한번 더 도전해보고, 그래도 어렵다면 React를 배울 때 다시 도전해보자 😀

 

객체에서 단축평가 활용하기

리액트를 배우지 않는다면 단축평가를 배울 필요가 필요 없을까?
객체에서 사용 예제로 좀 더 쓰임새를 증명(?)해보자.

var pie = {
	name: "pie",
	age: 27
}
var chan;

console.log("name?", pie.name)
console.log("name?", chan.name)

 

상황: 객체 형태로 회원들을 만들어 출력해보는 중인데, 깜빡하고 chan 은 만들다가 말아버렸다.
이런 상황에선 에러가 뜬다.

위 코드를 그대로 콘솔창에 옮겨보면 동일한 오류가 출력된다.

이럴 때 단축평가로 오류를 막아보자.

... // 위 선언코드 재활용
console.log("name?", pie && pie.name) // pie 
console.log("name?", chan && chan.name) // undefined​

 

이렇게 출력한다면 chan 을 출력할 때 undefined 이 나오긴 했지만, 그래도 오류는 나지않고 잘 출력된다

 

2. 옵셔널 체이닝 연산자

옵셔널 체이닝 연산자 는  ES11(ECMAScript2020) 에서 도입 된 새로운 문법이다.

이는 아까 기껏(?) 설명했던 논리합 단축평가와 비슷한 기능을 간편하게 이용할 수 있다.

정확한 기능은 피연산자가 undefined 이나 null 일 때는 undefined를 반환하고,

그 외에는 객체 프로퍼티 를 반환한다.(객체 프로퍼티는 추후에 좀 더 자세히 알아보자.)

// 논리합과 비슷한 경우
var pie = {
	name: "pie",
	age: 27
} 
var chan;
// 재활용

console.log(pie?.name); // pie
console.log(chan?.name) // undefined

// 논리합과 다른 경우
var str = '';
var t = str && str.length;
console.log(t); // '' (빈 문자열)은 false로 취급되어 ''를 바로 반환한다.

var tt = str?.length;
console.log(tt); // 정상적으로 ''의 길이인 0을 반환한다.

위 예제에서 논리합과 다른 경우를 보면

논리합에서는 좌항의 피연산자가 false로 평가되는 값이라면 좌항의 피연산자를 그대로 반환하지만

옵셔널 체이닝에서는 빈 배열은 undefined 이나 null 에 해당하지 않기 때문에 str.legnth 값을 반환한다.

 

3. null 병합 연산자

null 병합 연산자 또한 ES11(ECMAScript2020) 에서 도입 된 새로운 문법이다.

이는 옵셔널 체이닝 연산자와 반대라고 생각하면 되는데,

null이나 undefined 값 에서만 우항(뒤)의 피연산자를 반환하고

그 외에 상황에서는 좌항(앞)의 피연산자를 반환한다.

var a = null ?? "a";
var b = false ?? "b";
console.log(a, b); // a, false

이러한 null 병합 연산자는 변수의 기본값(default value) 처럼 설정할 때 유용하다고 한다.

var name = "pie"
var age;

console.log(name ?? "이름이 없습니다");
console.log(age ?? "나이가 없습니다");

이런식으로 기본값을 설정할 수 있지만…글쎄, 잘은 모르겠다.

 

---

오늘의 후기

20 페이지도 안되는 짧은 분량이라 방심했는데, 2시간 넘게 고생하면서 겨우 정리한 내용이다.

최근 옵셔널 체이닝 연산자는 종종 사용했으나 null 병합 연산자는 완전 처음 들어본 개념이라

이걸 어떻게 쓰는지, 왜 나왔는지, 왜 쓰는지 등 유심히 봐야 할 부분이 많았다.

 

이런 노력에도 아직까지 다 이해하지 못했지만...오늘은 여기까지 하고 넘어가고,

나중에 실무에서 사용하게 될 때 다시 한번 정리하고 싶다.