자바스크립트 ES6 #9 타입변환과 단축평가

 

#타입 #압묵적타입변환 #명시적타입변환 # 단축변환 #옵셔널체이닝 #null병합연산자

 

---

 

Javascript의 모든 값에는 타입이 존재한다.

 

타입

 

- 개발자의 의도에 따라 다른 타입으로 변환하는 것을 명시적타입변환  또는 타입캐스팅이라 한다.

 

- 엔진에 의해 암묵적으로 타입이 자동변환 되는 것을 암묵적타입변환 또는 타입강제변환이라 한다.

 

- 타입변경이란 기존 원시값을 사용해 다른 타입의 새로운 원시값을 생성하는 것이다.

 

- 암묵적 타입변환이 가독성면에서 유리한 부분이 있지만 개발자는 자동으로 일어나는 타입변환을 예측할 수 있어야한다.

 

// 명시적 타입 변환, 타입 캐스팅
var x = 10;
var str = x.toString();
console.log(typeof x); // number
console.log(typeof str); // string

// 암묵적 타입 변환, 타입 강제 변환
var y = 10;
var str2 = y + "";
console.log(typeof y); // number
console.log(typeof str2); // string

 

---

 

암묵적타입변환

 

Javascript 엔진은 표현식을 평가할때 개발자의 의도와는 상관없이 문맥을 고려해 암묵적으로 타입을 변경할 수 있다.

 

문자열타입으로 변환

 

// + 연산자는 좌우의 피연산자 중 하나라도 string타입일 경우 문자열 연결 연산자로 작용한다.
// 좌측의 number타입 1은 암묵적으로 String 타입 1로 변환된다.
1 + "2"; // "12"

//템플릿 리터럴의 표현식 삽입은 표현식의 평가 결과를 문자열 타입으로 암묵적 변환한다.
`1 + 1 = ${1 + 1}`;

 

숫자타입으로 변환

 

// 산술연산자중 + 를 제외한 - * / 는 항상 숫자 값을 도출한다.
// 이를 위해 좌우의 피연산자를 모두 암묵적으로 숫자로 변환한다.
// 피연산자를 숫자로 변환할 수 없을 경우 평가 결과는 NaN이 된다.

1 - "1"; // 0
1 * "10"; // 10
1 / "one"; //NaN

// 비교연산자의 역할은 불리연 값을 만드는 것이다.
// 이를 위해 좌우의 피연산자를 모두 암묵적으로 숫자로 변환한다.

// + 단항 연산자는 피연산자가 숫자타입이 아니면 피연산자를 숫자 타입으로 암묵적 변환한다.

+""; //0
+"0"; // 0
+"1"; // 0
+"string"; //NaN
+true; //1
+false; //0
+null; //0
+undefined; //NaN
+Symbol(); //Can not conver Symbol type to number type
+{}; //NaN
+[]; //0
+[10, 20]; //NaN
+(function())//NaN

 

불리언 타입으로 변환

 

Javascript 엔진은 조건문의 조건식의 평가결과를 암묵적으로 불리언타입으로 변환한다.

 

다음과 같은 값은 Falsy 한 값으로 평가된다.

 

- false

 

- undefined

 

- null

 

- 0,-0

 

- NaN

 

- ''

 

---

 

명시적타입변환

 

표준 빌트인 생성자 함수, 빌트인 메서드, 암묵적 타입 변환 등을 활용해 명시적으로 값의 타입을 변경할 수 있다.

 

문자열타입으로 변환

 

// String 생성자함수를 new 연산자 없이 호출하는 방법
String(1); // "1"
String(true); // "true"
String(NaN); // "NaN"

//Obeject.prototype.toString 메서드를 활용하는 방법
(1).toString(); //'1'
NaN.toString(); //'NaN'
Infinity.toString(); //'Infinity'

// 문자열 연결을 통한 암묵적 변환
1 + ""; // "1"
NaN + ""; //"NaN"

 

숫자타입으로 변환

 

// Number 생성자함수를 new 연산자 없이 호출하는 방법
Number("0"); // 0
Number(true); // 1

// parseInt, parseFloat 함수를 사용하는 방법
parseInt("0"); // 0
parseFloat("10.53"); //10.53

// + 단항 산술연산자를 활용하는 방법
+"0"; //0
+true; //1
+false; //0

// * 산술 연산자를 활용하는 방법
"0" * 1; // 1
true * 1; //1
false * 1; // 0

 

불리언타입으로 변환

 

// Boolean 생성자함수를 new 연산자 없이 호출하는 방법
Boolean("x"); //true
Boolean(""); //false
Boolean(0); //false
Boolean(1); //true
Boolean(NaN); // false
Boolean(Infinity); // true

// 부정논리연산자를 두 번사용하는 방법

!!"x"; // true
!!null; //true
!!undefined; // false
!!{}; //true
!![]; //true

 

---

 

단축평가

 

논리합, 논리곱 연산자의 표현식은 언제나 2개의 피연산자의 타입중 하나로 평가된다.

 

- 논리곱의 경우 좌항의 평가결과만으로 전체 연산결과를 알 수 없기때문에 우항의 평가결과가 전체 연산결과의 값으로 도출된다.

 

- 논리합의 경우 좌항이 true면 우항의 평가결과에 관계없이 전체 연산결과가 true 이므로 좌항의 평가결과가 전체 연산결과의 값으로 도출된다.

 

- 논리합의 경우 좌항이 false면 좌항의 평가결과만으로 전체 연산결과를 알 수 없기때문에 우항의 평가결과가 전체 연산결과의 값으로 도출된다.

 

"Cat" && "Dog"; //Dog

"Cat" || "Dog"; //Cat

 

단축평가는 표현식을 평가하는 도중 평가 결과가 확정된 경우 나머지 평가결과를 생각하는 것을 말한다.

 

- true || anything : true

 

- false || anything : anything

 

- true && anything : anything

 

- false && anything : false

 

단축평가를 사용하면 if 문을 대체할 수 있다.

 

- Truty한 상황일때 무언가를 해야한다면 논리 곱으로 표현할 수 있다.

 

- Falsy한 상황일때 무언가를 해야한다면 논리 합으로 표현할 수 있다.

 

- 객체를 할당하기를 기대하는 변수가 null 또는 undefined 인지 확인하고 프로퍼티 참조

 

// Truty한 상황일때 무언가를 해야한다면 논리 곱으로 표현할 수 있다.
var done = true;
var message = "";
message = done && "완료";
console.log(message); // "완료"

// Falsy한 상황일때 무언가를 해야한다면 논리 합으로 표현할 수 있다.
var done = false;
var message = "";
message = done || "완료";
console.log(message); // "완료"

// 객체를 할당하기를 기대하는 변수가 null 또는 undefined 인지 확인하고 프로퍼티 참조
var elem = null;
var value = elem && elem.value;
console.log(value); // null
elem = { value: "not null" };
value = elem && elem.value;
console.log(value); // not null

// 함수 매개변수의 기본값을 설정할때
function getStringLength(str) {
  const res = str || "no param";
  return res;
}

console.log(getStringLength()); // no param
console.log(getStringLength("param")); // param

 

---

 

옵셔널체이닝

 

옵셔널체이닝연산자(?) 는 좌항의 피연산자가 null 또는 undefined일 경우 undefined 값을 반환하고  아닐경우 좌항에 대한 우항 프로퍼티를 참조한다.

 

- 논리합을 이용한 단축평가는 0 , '' 를 항상 Falsy한 값으로 평가하기 때문에 이 값을 좌항의 변수의 값으로 사용할수 없다.

 

- 옵셔널체이닝연산자는 null 과 undefined 만을 Falsy한 값으로 평가하기 때문에 이 값을 좌항의 변수의 값으로 사용할수 있다.

 

let str = null;
var value = str?.length;
console.log(value); // null

// 옵셔널체이닝은 ""를 falsy 한 값으로 판단하지 않음
str = "";
value = str?.length;
console.log(value); // 0

 

---

 

null병합연산자

 

좌항의 피연산자가 null 또는 undefIend 일 경우 우항의 피연산자를 반환하고 아닐경우 좌항의 피 연산자를 반환한다.

 

- 변수의 기본값을 설정할 때 유리하다.

 

// 좌항의 값이 Falsy 하면 우항의 값을 반환한다.
var foo = "" ?? "default string";
console.log(foo); // default string