다진 Javascript (6)

Kyle·2022년 6월 12일
0

Javascript

목록 보기
6/11
post-thumbnail

✔모던 자바스크립트 9장

참고 - https://poiemaweb.com/

타입변환과 단축평가

1. 타입 변환이란?

https://velog.io/@imjkim49/자바스크립트-데이터-타입-정리

자바스크립트의 모든 값은 데이터 타입을 갖는데, 이러한 타입은

  • 자바스크립트 엔진에 의해 암묵적으로 - 암묵적 타입 변환 or 타입 강제 변환

  • 개발자에 의해 의도적으로 - 명시적 타입 변환 or 타입 캐스팅

변환 될 수 있다.

2. 암묵적 타입 변환

자바스크립트 엔진에 의해 암묵적으로 타입을 변환하는 것

// 표현식이 모두 문자열 타입이여야 하는 컨텍스트
'10' + 2               // '102'
`1 * 10 = ${ 1 * 10 }` // "1 * 10 = 10"

// 표현식이 모두 숫자 타입이여야 하는 컨텍스트
5 * '10' // 50

자바스크립트 엔진은 컨텍스트를 고려하여 암묵적 타입 변환을 통해 표현식을 평가한다.

이때, 원시 타입 중 하나로 타입을 자동 변환하게 된다.

2-1. 문자열 타입으로 변환

문자열 연결 연산자의 역할 = 문자열 값을 만드는 것

👉 문자열 연결 연산자의 피연산자는 컨텍스트 상 문자열 타입이여야 한다.

👉 자바스크립트 엔진은 문자열 연결 연산자의 피연산자 중에서 문자열 타입이 아닌 피연산자를 문자열 타입으로 암묵적 타입 변환

// 숫자 타입
0 + ''              // "0"
NaN + ''            // "NaN"

// 불리언 타입
true + ''           // "true"
false + ''          // "false"

// null 타입
null + ''           // "null"

// undefined 타입
undefined + ''      // "undefined"

// 심볼 타입
(Symbol()) + ''     // TypeError: Cannot convert a Symbol value to a string

// 객체 타입
(function(){}) + '' // "function(){}"
Array + ''          // "function Array() { [native code] }"

2-2. 숫자 타입으로 변환

1) 산술 연산자의 역할 = 숫자 값을 만드는 것

👉 산술 연산자의 피연산자는 컨텍스트 상 숫자 타입이여야 한다.

👉 자바스크립트 엔진은 산술 연산자의 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입(불가능할 경우엔 NaN)으로 암묵적 타입 변환

2) 비교 연산자의 역할 = 불리언 값을 만드는 것

👉 비교 연산자는 피연산자의 크기를 비교하므로 피연산자는 컨텍스트 상 숫자 타입이여야 한다.

👉 자바스크립트 엔진은 비교 연산자의 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환

// 문자열 타입
+''             // 0
+'0'            // 0

// 불리언 타입
+true           // 1

// undefined 타입
+undefined      // NaN

// 심볼 타입
+Symbol()       // TypeError: Cannot convert a Symbol value to a number

// 객체 타입
+{}             // NaN
+[]             // 0
💡 빈 문자열(‘’), 빈 배열([]), null, false는 0으로, true는 1로 변환되고, 객체와 빈 배열이 아닌 배열, undefined는 변환되지 않아 NaN이 된다.

2-3. 불리언 타입으로 변환

조건식(if 문, for 문 등) = 불리언 값, 즉 논리적 참, 거짓을 반환해야 하는 표현식

👉 자바스크립트 엔진은 제어문의 조건식, 평가 결과를 불리언 타입으로 암묵적 타입 변환

👉 불리언 타입이 아닌 값을 Falsy 값(거짓으로 인식할 값) 또는 Truthy 값(참으로 인식할 값)으로 구분

Falsy 값(거짓으로 인식할 값)

  • false
  • undefined
  • null
  • 0, -0
  • NaN
  • ’’ (빈문자열)
if (!false)     console.log(false + ' is falsy value');
if (!undefined) console.log(undefined + ' is falsy value');
if (!null)      console.log(null + ' is falsy value');
if (!0)         console.log(0 + ' is falsy value');
if (!NaN)       console.log(NaN + ' is falsy value');
if (!'')        console.log('' + ' is falsy value');

Truthy 값(참으로 인식할 값)

  • Falsy 값 이외의 값

3. 명시적 타입 변환

개발자의 의도에 의해 명시적으로 타입을 변경하는 것

3-1. 문자열 타입으로 변환

  • String 생성자 함수를 new 연산자 없이 호출하는 방법

  • Object.prototype.toString 메소드를 사용하는 방법

  • 문자열 연결 연산자를 이용하는 방법

// 1. String 생성자 함수를 new 연산자 없이 호출하는 방법
// 숫자 타입 => 문자열 타입
console.log(String(1));        // "1"
console.log(String(NaN));      // "NaN"
// 불리언 타입 => 문자열 타입
console.log(String(true));     // "true"

// 2. Object.prototype.toString 메소드를 사용하는 방법
// 숫자 타입 => 문자열 타입
console.log((1).toString());        // "1"
console.log((NaN).toString());      // "NaN"
// 불리언 타입 => 문자열 타입
console.log((true).toString());     // "true"

// 3. 문자열 연결 연산자를 이용하는 방법
// 숫자 타입 => 문자열 타입
console.log(1 + '');        // "1"
console.log(NaN + '');      // "NaN"
// 불리언 타입 => 문자열 타입
console.log(true + '');     // "true"

3-2. 숫자 타입으로 변환

  • Number 생성자 함수를 new 연산자 없이 호출하는 방법

  • parseInt, parseFloat 함수를 사용하는 방법(문자열만 변환 가능)

  • + 단항 연결 연산자를 이용하는 방법

  • * 산술 연산자를 이용하는 방법

// 1. Number 생성자 함수를 new 연산자 없이 호출하는 방법
// 문자열 타입 => 숫자 타입
console.log(Number('0'));     // 0
console.log(Number('-1'));    // -1
// 불리언 타입 => 숫자 타입
console.log(Number(true));    // 1

// 2. parseInt, parseFloat 함수를 사용하는 방법(문자열만 변환 가능)
// 문자열 타입 => 숫자 타입
console.log(parseInt('0'));       // 0
console.log(parseFloat('10.53')); // 10.53

// 3. + 단항 연결 연산자를 이용하는 방법
// 문자열 타입 => 숫자 타입
console.log(+'0');     // 0
console.log(+'-1');    // -1
// 불리언 타입 => 숫자 타입
console.log(+true);    // 1

// 4. * 산술 연산자를 이용하는 방법
// 문자열 타입 => 숫자 타입
console.log('0' * 1);     // 0
console.log('-1' * 1);    // -1
// 불리언 타입 => 숫자 타입
console.log(true * 1);    // 1

3-3. 불리언 타입으로 변환

  • Boolean 생성자 함수를 new 연산자 없이 호출하는 방법

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

// 1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
// 문자열 타입 => 불리언 타입
console.log(Boolean('x'));       // true
console.log(Boolean(''));        // false
console.log(Boolean('false'));   // true
// 숫자 타입 => 불리언 타입
console.log(Boolean(0));         // false
console.log(Boolean(1));         // true
console.log(Boolean(NaN));       // false
console.log(Boolean(Infinity));  // true
// null 타입 => 불리언 타입
console.log(Boolean(null));      // false
// undefined 타입 => 불리언 타 입
console.log(Boolean(undefined)); // false
// 객체 타입 => 불리언 타입
console.log(Boolean({}));        // true
console.log(Boolean([]));        // true

// 2. ! 부정 논리 연산자를 두번 사용하는 방법
// 문자열 타입 => 불리언 타입
console.log(!!'x');       // true
console.log(!!'');        // false
console.log(!!'false');   // true
// 숫자 타입 => 불리언 타입
console.log(!!0);         // false
console.log(!!1);         // true
console.log(!!NaN);       // false
console.log(!!Infinity);  // true
// null 타입 => 불리언 타입
console.log(!!null);      // false
// undefined 타입 => 불리언 타입
console.log(!!undefined); // false
// 객체 타입 => 불리언 타입
console.log(!!{});        // true
console.log(!![]);        // true

4. 단축평가

&&(논리곱), ||(논리합)  연산자는 왼쪽부터 오른쪽으로 평가를 진행하는데, 중간에 평가 결과가 나오면 오른쪽 끝까지 가지 않고 논리 평가를 결정한 피연산자의 평가 결과를 그대로 반환해 버리는 것

  • 객체가 null인지 확인하고 프로퍼티를 참조할 때
  • 함수의 인수(argument)를 초기화할 때
  1. &&(논리곱)은 두개의 피연산자가 모두 true로 평가될 때 true를 반환
'Cat' && 'Dog' // “Dog”
  • 첫번째 피연산자 ‘Cat’은 Truthy 값이므로 true로 평가된다. 하지만 이 시점까지는 위 표현식을 평가할 수 없다. 두번째 피연산자까지 평가해 보아야 위 표현식을 평가할 수 있다.
  • 두번째 피연산자 ‘Dog’은 Truthy 값이므로 true로 평가된다. 이때 두개의 피연산자가 모두 true로 평가되었다. 이때 논리곱 연산의 결과를 결정한 것은 두번째 피연산자 ‘Dog’다.
  • 논리곱 연산자 &&는 논리 연산의 결과를 결정한 두번째 피연산자의 평가 결과 즉, 문자열 ‘Dog’를 그대로 반환한다.
  1. ||(논리합)은 두개의 피연산자 중 하나만 true로 평가되어도 true를 반환
'Cat' || 'Dog' // 'Cat'
  • 첫번째 피연산자 ‘Cat’은 Truthy 값이므로 true로 평가된다. 이 시점에 두번째 피연산자까지 평가해 보지 않아도 위 표현식을 평가할 수 있다.
  • 논리합 연산자 ||는 논리 연산의 결과를 결정한 첫번째 피연산자의 평가 결과 즉, 문자열 ‘Cat’를 그대로 반환한다.

profile
불편함을 고민하는 프론트엔드 개발자, 박민철입니다.

0개의 댓글