TIL 21 | JS(타입변환과단축평가)

YB.J·2021년 6월 15일

모던 자바스크립트 Deep Dive

목록 보기

5/16

모던자바스크립트 Deep Dive에서 발췌한 타입변환과단축평가에 대한 내용을 적어보자

var x = 10;
var result = x.toString();
console.log(typeof result, result); // string 10

원시값(변수 x의 값)을 변경하는 것은 아니다
console.log(typeof x, x); // number 10
타입변환이란 기존 원시값을 이용해 다른 새로운 타입의 원시값을 탄생시키는 것

타입변환의 종류
1. 명시적 타입변환(타입 캐스팅) : 개발자가 의도적으로 값의 타입을 변환하는 것
2. 암묵적 타입변환(타입 강제변환) : 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 JS엔진에 의해 타입이 자동변환 되는 것

문자열 연결 연산자의 삽입 : 문자열 연결 연산자의 역할은 문자열의 값을 만드는 것
1. 문자열 연결 연산자의 모든 피연산자는 코드의 문맥 상 모두 문자열 타입이어야 함
2. 그래서 문자열 연결 연산자의 피연산자 중에서 문자열 연결 타입이 아닌 피연산자를 문자열 타입을 암묵적으로 변환 함
3. 예제 : 1+'2' // '12' (문자열)
4. 위 예제의 + 연산자는 피연산자 중 하나 이상이 문자열인 경우, 문자열 연결 연산자로 동작함
템플릿 리터럴 표현식의 삽입 : ES6에서 도입된 템플릿 리터럴 표현식이 사입된 경우 평가결과를 문자열 타입으로 암묵적 변환을 한다
```
`1+1 = ${1+1}` // 1+1 = 2 (타입은 문자열)
```

산술 연산자(-, *, /)의 삽입 : 산술 연산자의 역할은 숫자 값을 만드는 것
1. 산술 연산자의 모든 피연산자는 코드 문맥 상 모두 숫자 타입이어야 함
2. 예제 : 1 - '1' // 0
  1 * '10' // 10
  1 / 'one' // NaN
3. 위의 예제는 전부 값을 산술해야 하기 때문에 문자열 피연산자들이 전부 숫자값으로 변환되었으나, 'one'과 같이 숫자값으로 변경이 불가능한 경우 산술이 불가능하다는 출력결과인 NaN
비교 연산자(<, >, <=, >=)의 삽입 : 비교 연산자의 역할은 Boolean 값을 만드는 것
1. 비교 연산자(<, >, <=, >=)는 피연산자의 크기를 비교하므로 모든 피연산자는 코드의 문맥상 모두 숫자 타입이어야 함
숫자 외의 데이터 타입의 0/1 변환
1. 0으로 변환 : 빈 문자열(' '), 빈 배열([ ]), false, null, '0'
2. 1로 변환 : '1', true
객체외 빈 배열이 아닌 배열, undefined는 변환되지 않아서 NaN이 됨 주의

함수
함수란 어떤 작업을 수행하는 데 필요한 문들의 집합을 정의한 코드 블록이다. 함수는 이름과 매개변수를 가지며, 필요한 때 호출해 코드 블록에 담긴 문들을 일괄적으로 실행할 수 있다.

개발자의 의도에 따라 명시적으로 타입을 변경하는 방법은 다양
1. 표준 빌트인 생성자 함수(String, Number, Boolean)를 new 연산자 없이 호출하는 방법
2. 빌트인 메서드를 사용하는 방법
3. 암묵적 타입변환을 이용하는 방법

불리언 타입이 아닌 값을 불리언 타입으로 변환하는 방법
1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
  Boolean('x'); // true, Boolean(' '); // false, Boolean('false'); // true, Boolean(0); // false, Boolean(1); // true, Boolean(NaN); // false, Boolean(Infinity); // true, Boolean(null); // false, Boolean(undefined); // false, Boolean({}); // true, Boolean([]); // true
2. !부정 논리 연산자를 두 번 사용하는 방법
  !!'x'; // true, !!' '; // false, !!'false'; // true, !!0; // false, !!1; //true, !!NaN; // false, !!Infinity; // true, !!null; // false, !!undefined; // false, !!{}; // true, !![]; true

논리합(||) 또는 논리곱(&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한 쪽으로 평가된다
1. 논리곱 연산자(&&)의 동작
  - 논리곱(&&) 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true로 반환한다
  - 논리곱 연산자는 좌항에서 우항으로 평가가 진행된다
    'Cat' && 'Dog' // "Dog"
  - 'Cat'은 Truthy값이므로 true로 평가. 'Dog'도 Truthy값이므로 true로 평가. 논리곱 연산자는 논리 연산의 결과를 결정하는 두 번째 피연산자, 즉 문자열 'Dog'의 결과를 그대로 반환한다
2. 논리합 연산자(||)의 동작
  - 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환
  - 논리합 연산사도 좌항에서 우항으로 평가가 진행된다
    'Cat' || 'Dog' // "Cat"
  - 논리 연산의 결과를 결정한 첫 번째 피연산자, 즉 문자열 'Cat'의 평가 결과를 반환(피연산자 중 true가 되는 순간 그 값만 반환함)
단축평가 : 표현식을 평가하는 도중에 평가결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말함
1. 논리곱(&&) 연산자와 논리합(||) 연산자는 논리 연산의 결과를 결정하는 피연산자를 타입변환하지 않고 그대로 반환