[JS] 형변환

형변환은 자료형을 변환한다는 것이다.
자료형에 따라 사용할 수 있는 메서드가 다르기 때문에, 형변환이 필요한 순간들이 있다.

명시적 형변환

명시적(눈에 보이게) 데이터 타입을 바꿔주는 것

Number

let a=Number('1'); //1
a=Number.parseInt('2');

String

let a=String(undefined); //'undefined'

Boolean

let a=Boolean(10<1); //false

암묵적 형변환

하지만 현업에서는 암묵적 형변환을 더 많이 쓴다!

문자열 (String)

문자열 변환은 대부분 뒤에 문자열('')을 더해주면된다!

숫자-> 문자열

console.log(숫자+'');

boolean -> 문자열

console.log(true+'');

객체-> 문자열

console.log({}+'');//object Object
console.log({'점심':'김치찌개'}+'');//object Object

숫자 (Number)

문자열->숫자

앞에 연산자를 붙여준다.(주로 +를 붙여줌)

console.log(+'3');//3
console.log(+'');//0

boolean->숫자

console.log(+true);//1
console.log(+false);//0

객체 -> 숫자

객체는 숫자로 표현할 수 없다ㅠㅠ

console.log(+{});//NaN

2개 이상 이루어진 배열도 숫자로 표현할 수 없다. (단, 빈 배열은 0으로 변환 가능하다)

console.log(+[1,2]);//NaN
console.log(+[1]);//1
console.log(+[]);//0

null, undefined

console.log(+null); //0
console.log(+undefined); //NaN

'', null, [], false => 0으로 변환
{}, [Not Empty,..], undefined =>NaN으로 변환

Boolean

false : false, 0, '', null, undefined, NaN

이 친구들은 if문 등 boolean이 들어가는 자리에서 사용 시 false로 해석된다.
이들은 falsey한 값으로 불린다.

나머지는 True로 변환된다.(빈 객체도 true다!)

if (NaN){
    console.log('---'); //실행되지 않는다
    }

console.log(Boolean(1)); //true

단축평가

이 두개의 경우는 뒤에 value를 상관하지 않고 결과를 바로 반환한다.

true: true || value 
false : false && value
value : true && value
		false || value

console.log('Book' && false &&'Movie'); //1) false
console.log('Book' && 'Movie'); //2) Movie
console.log('' || 'Book'||'Movie'); //3) Book

논리연산자의 종류(and, or)에 따라, 반환 순서가 달라진다.
And는 모든 조건이 참이어야 하기 때문에, 탐색이 끝나는 지점에서 값을 반환시킨다.

1의 경우, false에서 탐색이 끝나기 때문에 false가,
2의 경우 Movie에서 탐색이 끝나기 때문에 Movie가,
3의 경우 Book에서 true를 만족시키기 때문에 탐색을 종료하고 Book을 반환한다.

단축평가와 함축적 표현

단축평가를 통해서는 조건식을 함축적으로 표현이 가능하다.

//이 방식을
if(!condition){
  result = 'data';
}
//이렇게 줄일 수 있다!
result = condition || 'data';

단축평가와 에러 방지

단축평가는 연산 횟수를 줄이는 데에도 도움이 되지만,
0이나 null에 대해 안정성을 부여할 수 있다.
단축평가를 다음과 같이 활용이 가능하다.

function shortcutFunction1(str = ''){
	return str.length;
}
function shortcutFunction2(str){
	str = str || '';
  	return str.length;
}

//다음과같이 인자에 아무것도 넣지 않으면 에러가 나지 않지만...
shortcutFunction1();
//shortcutFunction1일때에는 에러가 터진다.
shortcutFunction2(null);
shortcutFunction2(NaN);
shortcutFunction2(0);