어리바리 신입 개발자의 얼렁뚱땅 개발 기록 ✨
23.03.16 / 데이터 타입 (타입과 값의 구분, 타입 변환, 출력) 본문
728x90
{ java script의 데이터 타입 }
- 데이터 타입을 선택해서 사용해야하는 java와 다르게 java script는 값에 의해 데이터 타입이 결정된다.
- typeof 키워드로 자료형을 확인 할 수 있다.
let student = '김학생';
console.log(typeof student, 'student변수의 자료형');
// 변수 student에 입력된 '김학생'이라는 문자열이 아닌
// '김학생'의 데이터 타입인 string 이 출력된다.
- parse 함수로 자료형을 변환 할 수 있다. (parseInt : 문자열 -> 정수 / parseFloat : 문자열 -> 실수)
[ 원시 타입 ]
< 1. 문자열 타입 / String >
- 자바스크립트의 문자열타입은 UTF-16
- 작은 따옴표, 큰 따옴표, 백틱으로 감싸서 표현, 일반적으로 작은 따옴표 사용.
- 작은 따옴표, 큰 따옴표, 백틱(``)으로 감싸지지 않은 문자열은 키워드나 식별자로 인식.
* 서로 다른 문자열을 연결하는 방법
1. + 연산자 사용
int a = 5; int b = 3; int sum = a+b; console.log('a와 b의 합은' + sum + ' 입니다.');
2. 백틱(``) 사용 : 백틱을 사용하면 문자열에 표현식 삽입이 가능하다. -> `문자열 ${표현식}` (주로 사용한다.)
int a = 5; int b = 3; console.log(`a와 b의 합은 ${a+b} 입니다.`);
< 2. 숫자 타입 / Number >
- 자바스크립트의 숫자타입은 모든 수를 실수로 처리
* 실수를 정수로 만들어주는 함수 parseInt()와 Math.floor()
parseInt는 소수점 자리는 무조건 절삭해서 정수로 만든다.
Math.floor는 소수점 자리는 무조건 반내림해서 정수로 만든다.
let num1 = 10.34; let num2 = -10.34; let num3 = 10.56; let num4 = 10.66; let num5 = -10.56; console.log(num1, num2); // 10.34 -10.34 출력 (기본적으로 실수) console.log(parseInt(num1), parseInt(num2)) // 10 -10 10 10 -10 출력 (절삭) //음수 방향으로 가장 가까운 정수로 변환 console.log(Math.floor(num1), Math.floor(num2)) // 10 -11 10 10 -11 출력 (반내림) //양수 방향으로 가장 가까운 정수로 변환 console.log(Math.round(num1), Math.round(num2)) // 10 -10 11 11 -11 출력 (반올림)
- 똑같은 숫자, 다른 데이터 타입
let num1 = 100; // 데이터 타입 숫자
let num2 = '200'; // 숫자지만 '' 안에 들어있어 문자열
- 데이터 타입은 숫자로 나오지만 산술연산불가능한 NaN(Not a Number)
var result = 1 * 'a';
'a'는 숫자가 아닌 문자열이기 때문에 result는 NaN이 된다.
typeof result를 통해 타입을 확인하면 number로 나오긴 하지만
값이 아니기 때문에 비교 연산자로 비교할 수 없고 산술도 불가능하다.
< 3. 논리 타입 / Boolean >
- true / 1 혹은 false / 0 값만 담긴다.
- 값이 담겨있으면 참 담겨있지 않으면 거짓.
- 주로 프로그램을 제어하는 조건문에 사용된다.
- console.log(typeof true); // boolean 출력
- Boolean() 함수를 통해 값이 참인지 거짓인지 확인할 수 있다
let isBoolean3 = Boolean(0); //거짓
let isBoolean4 = Boolean(1); //참
let isBoolean5 = Boolean('가'); //참
let isBoolean6 = Boolean(''); //거짓
let isBoolean7 = Boolean(NaN); //거짓
let isBoolean8 = Boolean(null); //거짓
let isBoolean9 = Boolean(undefined); //거짓
< 4. null 타입 >
- null 타입의 값은 오로지 null 뿐
- 메모리에 할당된 공간을 더이상 참조하지 않겠다
- 의도적으로 변수에 값이 없다는 것을 명시하고 싶을 때 사용
- 함수가 호출되었으나 유효한 값을 반환할 수 없는 경우 null 반환
- null은 typeof를 사용해 데이터 타입을 확인하면 object로 나온다. (자바스크립트 설계상의 오류)
그래서 typeof를 사용해 'null'과 데이터 타입이 같은지 확인하면 false가 나온다.
그래서 typeof 없이 값 자체를 비교해야 true가 나온다.
let exNull = null;
console.log(typeof exNull); // object 출력
console.log(typeof exNull == 'null'); // false 출력
console.log(exNull == null); // true 출력
< 5. undefined 타입 >
- var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화 된다. (호이스팅)
- 변수(메모리에 할당된 공간)는 존재하지만 초기값이 자바스크립트 엔진에 의해 undefined 값을 할당한 상태
let exundefined = undefined;
console.log(typeof exundefined); // undefined 출력
console.log(typeof exundefined == 'undefined'); // true 출력
< 6. 심볼 타입 >
- [Symbol('변수이름')] 형태로 사용 가능 (이와 같은 형태는 java script에서만 사용된다.)
다른 사람이 내가 입력한 정보를 수정 불가능하게 해준다.
프로퍼티 어트리뷰트라는 기능이 있긴하지만 그렇게 되면 다른 정보까지 수정을 불가능하게 만들 수 있다.
[ 객체 타입 ]
- 흔히 말하는 객체, 함수, 배열이 객체 데이터 타입에 포함된다.
- 원시 타입에 속하지 않는 타입은 모두 객체 타입이다.
[ 원시 타입과 객체 타입의 비교 ]
< 원시 타입 >
원시 타입의 값 : 변경 불가능
원시 값을 변수에 할당할 경우 : 변수에 실제 값을 저장한다.
원시 값을 갖는 변수를 다른 변수에 할당할 경우 : 원시 값이 복사되어 전달된다. (값에 의한 전달)
< 객체 타입 >
객체 타입의 값 : 변경 가능 객체 값을 변수에 할당할 경우 : 변수에 참조 값을 저장한다. 객체를 가리키는 변수를 다른 변수에 할당할 경우 : 참조 값이 복사되어 전달된다. (참조에 의한 전달)
[ 데이터 타입의 변환 ]
< 명시적 타입 변환 (타입 캐스팅) >
값의 타입을 개발자 의도에 따라 변환
String('');
Number('');
let num = String(100); console.log(typeof num); // string 출력 //원래 100인 숫자인데 문자열로 바꿔 줌 let num = Number('100'); console.log(typeof num); // number 출력 //원래 작은 따옴표에 들어 있는 숫자는 문자열인데 숫자로 바꿔 줌
< 명시적 타입 변환 (타입 캐스팅) >
개발자의 의도와 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 자동 변환
피연산자 중 하나라도 문자열일 경우 + 연산자는 문자열 연결 연산자로 동작한다.
let str = 10 + '20' ; // 20은 문자열이기 때문에 +는 산술 연산자기 아닌 문자열 연결 연산자가 된다. console.log(str); // 10과 20을 더한 30이 아닌 1020 출력 console.log(typeof str); // string 출력
+ 연산자는 단항일 경우 숫자타입으로 강제 변환
단, 숫자로 된 문자열, 불리언 타입, null 타입을 제외한 나머지 타입은 NaN으로 표기된다.
let num = + '20' ; // 숫자로 된 문자열인 20은 숫자타입으로 강제 변환한다. console.log(typeof num); // number 출력 (숫자로 된 문자열이기 때문에 NaN으로 표기 X)
Boolean('');
let bool = Boolean('1'); // true 출력 // 문자열 1을 true로 바꿔 줌

728x90
'Front - end > JS' 카테고리의 다른 글
| 23.03.24 / 객체 타입, this, 매개변수와 인자 (0) | 2023.03.24 |
|---|---|
| 23.03.23 / 배열 (자바와 비교해서..) (0) | 2023.03.23 |
| 23.03.16 / 연산자 (종류와 우선순위) (0) | 2023.03.16 |
| 23.03.16 / ★★ 변수 (변수 선언, 식별자, 변수 호이스팅) (0) | 2023.03.16 |
| 23.03.16 / Node.js 설치 및 javascript 란? (0) | 2023.03.16 |