일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- CSS
- 자바스크립트 상속
- 자바스크립트 클래스
- css 포지션
- 자바스크립트 promise
- 리액트 함수형 컴포넌트
- css3
- html 코드
- 자바스크립트 scope
- 티스토리챌린지
- 웹 개발 트렌드
- 자바스크립트 클로저
- 자바스크립트 생성자 함수
- 자바스크립트
- 프론트엔드
- HTML
- css position
- 자바스크립트 프로미스
- 프론트엔드 리액트
- 자바스크립트 실행 컨텍스트
- 오블완
- 자바스크립트 반복문
- javascript
- 자바스크립트 async await
- 리액트 개념
- html 주석
- javascript closure
- javascript opreator
- javascript opreators
- 자바스크립트 연산자
- Today
- Total
Multi Developer SuHo
자바스크립트 Type Conversion(타입 변환) 본문
모든 내용과 소스들은 다음과 같은 강의 플랫폼에서 응용하여 작성하였습니다.
출처: https://inf.run/xNcEg
자바스크립트에서 타입변환에서는 두가지로 분류됩니다. 명시적 타입변환과, 암묵적 타입변환입니다.
[무료] [코드팩토리] [입문] 9시간만에 끝내는 코드팩토리의 Javascript 무료 풀코스 - 인프런 | 강의
이 강의 하나만으로 인기 Javascript 프레임워크들과 Typescript를 배울 수 있는 기본을 다질 수 있습니다., 자바스크립트 문법 마스터,9시간 만에 무료로 할 수 있어요! ✨ 자바스크립트 문법,한 강의
www.inflearn.com
먼저 명시적 타입변환이란? 데이터의 형식을 개발자가 강제로 변환하는 프로세스를 의미합니다.
그리고 암묵적 타입변환이란? 개발자의 의도와는 상관없이 JavaScript 엔진에 의해 암묵적으로 타입이 자동적으로 변환되는 것을 의미합니다.
명시적 타입변환에 대한 예제소스를 보겠습니다.
let age = 32;
// 명시적
let stringAge = age.toString(); //Number의 값을 String으로 변환
console.log(typeof stringAge, stringAge);
age 라는 변수에 32를 할당하고 age는 Number(숫자)이고 값을 String으로 변환할려면 다음과 같이 소스를 작성해야합니다.
개발자가 age.toString()이라는 함수를 사용하였고 age의 값을 String으로 변환하라는 의미하기 때문에 명시적 타입변환 이라고 볼 수 있습니다.
다음은 암묵적 타입변환에 대한 예제소스 입니다.
// 암묵적
let test = age + ''; //숫자에다가 글자를 더하면 string Type이 된다
console.log(typeof test, test);
여기에서는 명시적 타입변환과는 달리 함수사용이 전혀없고 'age' 는 Number 즉 숫자를 의미하므로 숫자에 글자를 더하면 String Type(문자열 타입)이 된다는 것을 나타냅니다. 이는 JavaScript 엔진에 의해 자동적으로 타입이 바뀐다고 보면 됩니다.
암묵적 타입 변환 예제소스 입니다
console.log('100'+ 10); // 100은 string 값이고 더하기 10를 했을때 어느 한쪽으로 타입을 변경해야하니까 오른쪽에 2의 값이 string으로 변환된다
console.log('100' *10); // String에는 곱한다는 개념이 없어서 숫자로 100이 타입이 강제적으로 변환된다
console.log('100' - 10); // String에는 빼기가 없으니까 100이 숫자가 되면서 타입이 변환된다
주석에 설명이 되어 있습니다. 다음은 명시적 타입 변환 몇가지 소스만 더 추가하고 Boolean 타입 변환으로 넘어가겠습니다.
console.log(typeof (100).toString(), (100).toString());
console.log(typeof (true).toString(), (true).toString());
console.log(typeof (Infinity).toString(), (Infinity).toString());
// 숫자 타입으로 변환
console.log(typeof parseInt('0'), parseInt('0')); //parseInt : 정수로 변환하라는 의미
console.log(typeof parseFloat('9.99'), parseFloat('9.99')); //parseFloat 실수로 변환하라는 의미
console.log(typeof +'1', +'1');
다음은 Boolean 타입 변환입니다. Boolean 타입은 true와 false로 참,거짓으로 값을 받습니다.
console.log(!!''); //String값 같은 경우에는 Boolean 타입으로 변환 했을때 값이 있냐 없느냐에 따라 값이 정해진다
console.log(!!0);
console.log(!!'0');
console.log(!!'false');
console.log(!!false);
console.log(!!undefined);
console.log(!!null);
console.log(!!{}); //오브젝트는 Boolean 값으로 변환했을때 자바스크립트에선 true이다
console.log(!![]);
String 값에서 boolean 타입으로 변환할때는 값이 있느냐, 없느냐에 따라 값이 정해집니다.
이렇게 3가지만 외우시면 편합니다.
/**
* 1) 아무 글자도 없는 String
* 2) 값이 없는 경우
* 3) 숫자 0일때
*
* 모두 false를 반환한다.
*/
감사합니다.
'JavaScript' 카테고리의 다른 글
자바스크립트 Array Method(배열 메서드) (0) | 2023.09.13 |
---|---|
자바스크립트 함수(function) (0) | 2023.09.09 |
자바스크립트 if 문과 Switch문 (1) | 2023.08.09 |
자바스크립트 삼항 조건 연산자(ternary conditional operator), 논리연산자(logical operator), 단축평가(short-circuit evaluation) (0) | 2023.08.04 |
자바스크립트 할당 연산자 " = "(assignment operator) 와 비교 연산자(comparison operator) (0) | 2023.07.27 |