모던 자바스크립트 Deep Dive - 9.타입 변화와 단축 평가 & 수업내용 추가 정리

지영·2021년 12월 5일
JavaScriptdeepdive
0

JavaScript

목록 보기
6/37
post-thumbnail
post-custom-banner

타입 변화와 단축 평가

9.1 - 타입 변환이란?

  • 자바스크립트의 모든 값은 타입이 있다.
  • 개발자의 의도에 따라 다른 타입으로 값을 변환할 수 있으며, 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅 이라 한다.
let x = 10;

//명시적 타입 변환
//숫자를 문자열로 타입 캐스팅

let str = x.toString();
console.log(typeof str, str)// string 10

// x변수의 값이 변경된 것은 아니다.
console.log(typeof x, x) //number 10
  • 혹은 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다
  • 이를 암묵적 타입 변환 또는 타입 강제 변환이라 한다.
let str = x + '';
console.log(typeof str, str); // string 10

// x 변수의 값이 변경된 것은 아니다.
console.log(typeof x, x); // number 10

9.2 - 암묵적 타입 변환

//피연산자가 모두 문자열 타입이어야 하는 문맥
 '10' + 2 // '102'

//피연산자가 모두 숫자 타입이어야 하는 문맥
5 * '10' // 50

//피연산자 또는 표현식이 불리언 타입이어야 하는 문맥
!0 // true
if(1) {}
  • 자바스크립트는 가급적 에러를 발생시키지 않도록 암묵적 타입 변환을 통해 평가식을 평가한다
  • 암묵적 타입 변환이 발생하면 문자열, 숫자, 불리언과 같은 원시 타입 중 하나로 타입을 자동 변환한다

9.2.3- 불리언 타입으로 변환

  • 자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy값(참으로 평가되는 값) 또는 Falsy한 값(거짓으로 평가되는 값)으로 구분한다
    -> 암묵적으로 타입이 변환된다

    false로 평가되는 Falsy한 값들

    • false
    • undefined
    • null
    • 0, -0
    • NaN
    • ''(빈 문자열)

9.3 - 명시적 타입 변환

  • 개발자의 의도에 따라 명시적으로 타입을 변경하는 방법이다. String, Number, Boolean 등등..

9.3.2- 문자열 타입으로 변환

  • String 생성자 함수를 new 연산자 없이 호출하는 방법
  • Object.prototpye.toString 메소드를 사용하는 방법
  • 문자열 연결 연산자 이용하는 방법
// 1. String 생성자 함수를 new 연산자 없이 호출하는 방법
// 숫자타입 -> 문자타입
String(1); // "1"
String(NaN); // "NaN"

// 불리언 타입 => 문자열 타입
String(true); //"true"
String(false); //"false"

// 2. toString 메소드 사용
(1).toString(); //"1"
(NaN).toString(); // "NaN"

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

9.3.2- 숫자 타입으로 변환

  • Number 생성자 함수를 new 연산자 없이 호출하는 방법
  • parseInt, parseFloat 함수를 이용
  • +단항 산술 연산자 이용
  • *산술 연산자 이용
// 1. Number 함수 이용
// 문자열 => 숫자타입
Number('0'); // 0
Number('-1'); // -1

// 불리언 타입 => 숫자타입
Number(true); // 1
Number(false); // 0

// 2. parseInt, parseFloat 사용(문자열만 변환 가능)
parseInt('0'); // 0
parseInt('-1'); // -1

// 3. + 단항 연산자
+'0'; // 0
+'-1'; // -1
// 불리언 타입도 가능함

// 4. * 산술 연산자 이용
// 문자열 => 숫자타입
'0' * 1; // 0
'-1' * 1; // -1

9.3.2- 불리언 타입으로 변환

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

// 문자열 타입 => 불리언 타입
!!'x'; // true
!!''; // false
!!'false'; // true
// 숫자 타입 => 불리언 타입
!!0; // false
!!1; // true
!!NaN; // false
!!Infinity; // true
// null 타입 => 불리언 타입
!!undefined; // false
// 객체 타입 => 불리언 타입
!!{}; // true
!![]; // true

9.4 - 단축 평가

9.4.1- 논리 연산자를 사용한 단축 평가

  • 논리합(||) 또는 논리곱 (&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가
'Cat' && 'Dog' // "Dog"
  • 논리곱(&&) 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환하며, 좌항에서 우항으로 평가가 진행
  • 논리곱 연산자는 논리 연산의 결과를 결정하는 두 번째 피연산자 'Dog'를 그대로 반환합니다.
'Cat' || 'Dog' // "Cat"
  • 논리합(||) 연산자는 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환하며, 좌항에서 우항으로 평가가 진행
  • 논리합 연산자는 논리 연산의 결과를 결정한 첫 번째 피연산자, 문자열 'Cat'을 그대로 반환
  • 논리곱(&&) 연산자와 논리합(||) 연산자는 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환하는데, 이를 단축 평가라고 한다
  • 단축 평가는 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다
  • 어떤 조건이 Truthy값일 때 무언가를 해야한다면 논리곱 연산자(&&) 표현식으로 if문을 대체할 수 있다
var done = true;
var message = '';

//주어진 조건이 true일 때
if (done) message = '완료';

//done이 true라면 message에 '완료'할당
message = done && '완료';
console.log(message); //완료
  • 조건이 Falsy값일 때 무언가를 해야한다면 논리합 연산자(||) 표현식으로 if문을 대체할 수 있다
var done = false;
var message = '';

//주어진 조건이 false일 때
if (done) message = '미완료'

//done이 false라면 message에 '미완료'할당
message = done || '미완료';
console.log(message); //미완료
  • 삼항 조건 연산자는 if...else문을 대체할 수 있다
var done = true;
var message = '';
// if...else문
if (done) message = '완료'
else	  message = '미완료'
console.log(message); //완료
// 삼항 조건 연산자는 if...else문을 대체할 수 있다
message = done ? '완료' : '미완료';
console.log(message); //완료

9.4.2- 옵셔널 체이닝 연산자

  • 옵셔널 체이닝 연산자 ?.는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다
var elem = null;

// elem이 null또는 undefined이면 undefined 반환, 그렇지 않으면 우항의 프로퍼티 참조를 이어감
var value = elem?.value;
console.log(value); // undefined
  • 옵셔널 체이닝 연산자?.는 객체를 가리키기를 기대하는 변수가 null또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 유용하다
  • 하지만 옵셔널 체이닝 연산자?.는 좌항 피연산자가 false로 평가되는 Falsy 값이라도 null또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다
var str = '';

var length = str?.length;
console.log(length); // 0

9.4.3- null 병합 연산자

  • null 병합 연산자 ??는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다
var foo = null ?? 'default string';
console.log(foo); // "default string"
  • null 병합 연산자 ??는 변수에 기본값을 설정할 때 유용하다

단축 평가

옵셔널 체이닝 연산자

  • ?.가 붙은 것이 undefined나 null이 아닌 경우
    -> 옵셔널 체이닝 연산자가 붙은 것 뒤의 값까지 접근한다
  • 객체 안에 어떤 프로퍼티가 없을 경우 undefined가 출력된다
  • 만약 undefined의 어떤 프로퍼티에 접근한다면 에러가 출력되는데,
    이러한 상황을 방지하기 위해 만약 옵셔널 체이닝 연산자가 undefined나 null 앞에 붙었다면 뒤의 값에 접근하지 않고 → undefined를 반환한다

null 병합 연산자

  • null과 undefined는 falsy한 값이라 처리가 어렵다
  • null 연산자를 사용해서 null과 undefined를 걸러내줄 수 있어 많이 사용한다
  • 피연산자가 null이나 undefined라면 null연산자(??)우항의 값으로 변환해주고 null이나 undefined이 아니라면 피연산자의 값을 그대로 놔둔다

✍️연습문제 - 값을 예상해보세요

const foo = 0;
const bar = '안녕하세요';  //빈문자가 아니라 true한 값
const jar = true;

console.log(foo && bar); // 0
console.log(foo || bar); // '안녕하세요'
console.log(bar || foo); // '안녕하세요'

console.log(jar || bar); // true
console.log(jar && foo); // 0
profile
지영
천천히 운영되는 개발 블로그
이전 포스트

모던 자바스크립트 Deep Dive - 08.제어문 & 수업내용 추가 정리

다음 포스트

Web API

post-custom-banner

0개의 댓글