Notice
Recent Posts
Recent Comments
Link
«   2026/07   »
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
Tags
more
Archives
Today
Total
관리 메뉴

어리바리 신입 개발자의 얼렁뚱땅 개발 기록 ✨

23.03.16 / 데이터 타입 (타입과 값의 구분, 타입 변환, 출력) 본문

Front - end/JS

23.03.16 / 데이터 타입 (타입과 값의 구분, 타입 변환, 출력)

낫쏘링 2023. 3. 16. 15:18
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