[Javascript] 자바스크립트 자료형과 형변환

 

Javascript - 자바스크립트 자료형과 형변환

 

   목차

1. Javascript 자료형
2. 자료형 확인을 위한 typeof 연산자
3. 형변환
   • 암시적 형변환
   • 명시적 형변환

 

 

1. Javascript 자료형

 

1)  기본타입 (Primitive Type)

1. number : 숫자 자료형으로 정수과 실수 모두를 나타냅니다 
2. string : 문자열 자료형으로 " ", ' ', ` ` 를 사용할 수 있습니다. ` ` 사용시 변수 포맷팅이 가능합니다.
3. boolean : 논리 자료형으로 true 또는 false 값을 가질수 있습니다. (false는 0, null, undefiend, NaN, '')
4. null : 값을 할당하지 않았음을 명시적으로 할당하는 값입니다.
5. undefined : 선언만 하고 값을 할당하지 않았을 경우 가지고 있는 값입니다.
6. symbol : 유일한 식별자를 만들기 위해 사용합니다.

 

2) 참조타입 (Reference Type)

1. object : 객체 자료형으로 { }안에 여러개의 값을 key와 value로 저장할 수 있습니다. 
2. Array : 배열 자료형으로 [ ]안에 여러개의 값을 순차적으로 저장할 수 있습니다. (엄밀히 말하면 배열처럼 동작하는 객체임)

 

 

 

2. 자료형 확인을 위한 typeof 연산자

 

자바스크립트에서 변수의 자료형을 확인하고 싶을때는 아래 예제와 같이 typeof 연산자를 사용하여 확인 할 수 있습니다 .

 

let age = 20;
let info_age = `나이는 ${age}세 입니다`;
let isPerson = true;
let name = null;
let height;
let s1 = Symbol('id');
let s2 = Symbol('id');
let user = { name: '홍길동', age: 20 }
let number = [1, 2, 3, 4];

console.log('1:', typeof (age), age);
console.log('2:', typeof (info_age), info_age);
console.log('3:', typeof (isPerson), isPerson);
console.log('4:', typeof (name), name);
console.log('5:', typeof (height), height);
console.log('6:', typeof (s1), s1);
console.log('7:', s1 === s2);
console.log('8:', typeof (user), user);
console.log('9:', typeof (number), number);

 

[실행결과]

 

 

 

3. 형변환

 

자바스크립트에서 함수나 연산자를 통해 전달받은 값들은 상황에 따라 자동으로 형변환이 이루어집니다. 이를 암시적 형변환이라고 하는데 이러한 자동 형변환은 개발자가 의도하지 않은 결과를 초래할 수 있습니다. 이러한 이유로 개발자는 의도적으로 원하는 형변환을 실행해 주는데 이것을 명시적 형변환이라고 합니다. 

 

 

1) 암시적 형변환

 

아래 예제를 보면 함수나 연산자를 통해 전달받은 값들은 상황에 따라 자동으로 형변환이 이루어집니다. 이를 암시적 형변환이라고 합니다.  

 

console.log("01. number  + number : ", typeof (100 + 100), 100 + 100);
console.log("02. number  + string : ", typeof (100 + "100"), 100 + "100");
console.log("03. string  + string : ", typeof ("100" + "100"), "100" + "100");
console.log("04. boolean + string : ", typeof (true + "100"), true + "100");
console.log("05. boolean + number : ", typeof (true + 100), true + 100);
console.log("06. boolean + number : ", typeof (false + 100), false + 100);
console.log("");
console.log("07. number  * number : ", typeof (100 * 100), 100 * 100);
console.log("08. number  * string : ", typeof (100 * "100"), 100 * "100");
console.log("09. string  * string : ", typeof ("100" * "100"), "100" * "100");
console.log("10. boolean * string : ", typeof (true * "100"), true * "100");
console.log("11. boolean * number : ", typeof (true * 100), true * 100);
console.log("12. boolean * number : ", typeof (false * 100), false * 100);

 

[실행결과]

 

 

2) 명시적 형변환

 

이와 같은 자동 형변환은 개발자가 의도하지 않은 결과를 초래할 수 있습니다. 이러한 이유로 개발자는 의도적으로 원하는 형변환을 실행해 주는데 이것을 명시적 형변환이라고 합니다. 

1. Number( ) : 숫자형으로 형변환 합니다.
2. parseInt( ) : 정수로 형변환 합니다. (숫자+문자로 되어 있는 경우, 숫자만 형변환하여 반환)
3. parsefloat( ) : 실수로 형변환 합니다. (숫자+문자로 되어 있는 경우, 숫자만 형변환하여 반환)
4. String( ) : 문자열로 형변환 합니다. 
5. toString( ) : 문자열로 형변환 합니다. (2진수, 8진수, 16진수로 변환하여 반환 가능)
6. Boolean( ) : 불린형으로 형변환 합니다.

 

console.log('01. Number("10.12")       :', typeof(Number("10.12")), Number("10.12"));
console.log('02. parseInt("10.12")     :', typeof(parseInt("10.12")), parseInt("10.12"));
console.log('03. parseFloat("10.12")   :', typeof(parseFloat("10.12")), parseFloat("10.12"));
console.log('04. Number("10.12원")     :', typeof(Number("10.12원")), Number("10.12원"));
console.log('05. parseInt("10.12원")   :', typeof(parseInt("10.12원")), parseInt("10.12원"));
console.log('06. parseFloat("10.12원") :', typeof(parseFloat("10.12원")), parseFloat("10.12원"));
console.log('07. Number(true)          :', typeof(Number(true)), Number(true));
console.log('08. Number(false)         :', typeof(Number(false)), Number(false));
console.log('09. Number("")            :', typeof(Number("")), Number(""));
console.log('10. Number(null)          :', typeof(Number(null)), Number(null));
console.log('11. Number(undefined)     :', typeof(Number(undefined)), Number(undefined));
console.log("");

let num = 10;
console.log('09. String(10)            :', typeof(String(10)), String(10));
console.log('10. num.toString()        :', typeof(num.toString()), num.toString());
console.log('11. num.toString(2)       :', typeof(num.toString(2)), num.toString(2));
console.log('12. num.toString(8)       :', typeof(num.toString(8)), num.toString(8));
console.log('13. num.toString(16)      :', typeof(num.toString(16)), num.toString(16));
console.log("");

console.log('14. Boolean(100)          :', typeof(Boolean(100)), Boolean(100));
console.log('15. Boolean("abc")        :', typeof(Boolean("abc")), Boolean("abc"));
console.log('16. Boolean(0)            :', typeof(Boolean(0)), Boolean(0));
console.log('17. Boolean("")           :', typeof(Boolean("")), Boolean(""));
console.log('18. Boolean(null)         :', typeof(Boolean(null)), Boolean(null));
console.log('19. Boolean(undefined)    :', typeof(Boolean(undefined)), Boolean(undefined));
console.log('20. Boolean(NaN)          :', typeof(Boolean(NaN)), Boolean(NaN));

 

[실행결과]