[JavaScript] 08. 타입 변환

🟡 1. 타입 변환

- 자바스크립트 모든 값에는 타입이 있습니다. 개발을 하다 보면 데이터 타입이 자동으로 변환이 되거나, 개발자가 의도적으로 데이터 타입을 바꾸는 경우가 있습니다. 개발자가 의도적으로 바꾸는 것을 명시적 타입 변환(Explicitcoercion) 또는 타입 캐스팅(Type casting)이라고 합니다. 데이터 타입이 자동으로 변환되는 것을 암묵적 타입 변환(Implicit coercion) 또는 타입 강제 변환(Type coercion)이라고 합니다.

// 명시적 타입 변환 (개발자가 변경하는 것)
let x = 10;

let str_x = x.toString(); // 숫자 타입을 문자 타입으로 변경(캐스팅)
console.log(typeof(str_x)); // 'string'




// 암묵적 타입 변환 (자동적으로 변경되는 것)
let y = 10;

let str_y = 10 + '억'; // 숫자에 문자열을 더하면 새로운 문자열이 생성
console.log(typeof(str_y)); // 'string';

- 명시적 타입 변환, 암묵적 타입 변환 둘 다 변수에 할당된 값의 타입을 변경하는 것이 아닌, 변경한 타입의 새로운 값을 할당하는 것입니다. 그러고 나서 변경되기 전에 할당된 값들이 다른 변수에서 쓰고 있지 않다면 가비지 콜렉터(청소부)에 의해서 메모리에서 제거됩니다.

 

 

🟡 2. 암묵적 타입 변환

 - 암묵적 타입 변환이 발생하면 문자열, 숫자, boolean과 같은 원시 타입 중 하나의 타입으로 자동 변환됩니다.

 

🟣 2.1 문자열 타입으로 변환 (숫자에서 문자로)

// 문자열 연결 연산자
1 + "2" // "12"

10 + " " // "10"

 - 숫자 타입에 문자열을 더하면 새로운 문자열 타입이 반환됩니다.

 

🟣 2.2 숫자 타입으로 변환 

1 - '10' // -9

1 * '10' // 10

1 / '10' // 0.1

+'' // 0

+'0' // 0

// boolean
+true // 1
+false // 0


// null 
+null // 0

- 숫자 타입과 문자 타입을 산수 연산(+제외)을 하면 문자 타입이 암묵적 타입 변환에 의해서 숫자 타입으로 변환이 된 후 연산이 이루어집니다. 

- 문자, boolean, null 타입 등 앞에 +연산자를 붙이면 암묵적 타입 변환으로 인해 숫자 타입으로 변환됩니다. true 값은 1, false 값은 0이 되고, null 값도 boolean 타입에선 false이므로 0으로 변환됩니다.

 

🟣 2.3 boolean 타입으로 변환

 - if문이나 for문과 같은 제어문의 조건식은 boolean 값을 반환해야 됩니다. 그래서 자바스크립트 엔진은 제어문의 조건식의 평가 결과가 boolean 값이 아니라면 암묵적 타입 변환을 진행합니다.

if('') {
	console.log('빈 문자열');
}

if(true) {
	console.log('boolean');
}

if(0) {
	console.log('숫자');
}

if('str') {
	console.log('문자열');
}

if(null) {
	console.log('null타입');
}

// boolean
// 문자열

- 위 예시와 같이 boolean 값이 아닌 타입이 조건식에 들어가면 암묵적 타입 변환이 일어나는데, 이때 Truthy값(참으로 인식할 값) 또는 Falsy값(거짓으로 인식할 값)으로 구분되어 Truthy는 true로 Falsy는 false로 변환됩니다.

Truthy	Falsy
- true - 문자열 (빈 문자열 제외) : '안녕하세요' - 숫자 (0, -0은 제외) : 1, 2, -1, -20 - 배열 : [], [1, 2, 3, 4] - 객체 : {}, {a:1, b:2, c:3}	- false - undefined - null - 0, -0 - NaN - "" , '' (빈문자열)

 

 

 

🟡 3. 명시적 타입 변환

 

🟣 3.1 문자열 타입으로 변환

 - 문자열 타입으로 변환하는 방법은 주로 3가지가 있습니다.

 1. String 생성자를 사용.
 2. Object.prototype.toString 메서드 사용.
 3. 문자열 연결 연산자 사용.

// 1. String 생성자를 사용.

console.log(String(1)); // '1'
console.log(String(true)); // 'true'


// 2. Object.prototype.toString 메소드 사용.
console.log((1).toString()); // '1'
console.log((true).toString()); // 'true'

// 3. 문자열 연결 연산자 사용.
console.log(1+''); // '1'
console.log(true+''); // 'true'

 

 

🟣 3.2 숫자 타입으로 변환

 - 숫자 타입으로 변환하는 방법은 4가지가 있습니다.

 1. Number 생성자를 사용.
 2. parseInt, parseFloat 함수 사용.
 3. 단항 연결 연산자 사용.
 4. 산술 연산자 사용.

// 1. Number 생성자를 사용.
console.log(Number('10')); // 10
console.log(Number(true)); // 1
console.log(Number('가나다')); // NaN


// 2. parseInt, parseFloat 함수 사용. (문자열만 변환 가능)
console.log(parseInt('10')); // 10
console.log(parseInt(true)); // NaN
console.log(parseInt('가나다')); // NaN

console.log(parseFloat('6.17')); // 6.17
// parseInt는 소수점 제거됨
console.log(parseInt('6.17')); // 6


// 3. 단항 연결 연산자 사용.
console.log(+'10'); // 10
console.log(+'6.17'); // 6
console.log(+true); // 1



// 4. 산술 연산자 사용.
console.log('-1' * 2); // -2
console.log('20' / 4); // 5
console.log('4' % 3); // 1
console.log(true * 10); // 10

 

 

🟣 3.3 boolean 타입으로 변환

 - boolean 타입으로 변환하는 방법은 2가지가 있습니다.

 1. Boolean 생성자를 사용.
 2. !부정 논리 연산자를 사용.

// 1. Boolean 생성자를 사용.
console.log(Boolean(10)); // true
console.log(Boolean('가나')); //true
console.log(Boolean(0)); // false
console.log(Boolean(null)); // false
console.log(Boolean({}));        // true
console.log(Boolean([]));        // true


// 2. !부정 논리 연산자를 사용.
console.log(!'x'); // false
console.log(!!'x'); // true

console.log(!0); // true
console.log(!!0); // false

console.log(!null); // true
console.log(!!null); // false

 

 

 

📝 정리 

• 타입 변환에는 명시적 타입 변환과 암묵적 타입 변환이 있습니다.
• 개발자가 직접 타입을 변경하는 것을 명시적 타입 변환이라 합니다.
• 자바스크립트 엔진에 의해서 자동적으로 타입이 변경되는 것을 암묵적 타입 변환이라고 합니다.

 

긴 글 읽어주셔서 감사합니다 :) 
틀린 내용이 있거나, 덧붙일 내용이 있다면 언제든지 댓글 달아주세요!
제 글이 조금이나마 읽으신 분들에게 도움이 되도록 노력하겠습니다
다음 편에 봬요~