자료형 과 형변환

자료형 (data)

• 원시타입(primitive types): Number, String, Boolean, null, undefined, symbols( Es6추가, 변경 불가능한 유일한 값)
• 참조 타입(reference types): object(object, array, map, set, function (변경가능)

// 변경 불가능한 원시타입
let x = 'hello';
console.log(x[0]); // 'h'호출은 가능

x[0] = 'd'; // h를 d 로 변경 시도
console.log(x);  // 똑같이 'hello' 출력. 변경되지 않음
  
  
// 변경 가능한 참조타입
let arr = [10, 20, 30];
arr[0] = 50;

console.log(arr); // [50,20,30] 변경된 배열

프로그래밍에서 프로그램이 처리할 수 있는 모든 것을 '자료' 라고 부르며, 자료 형태에 따라 나눠 놓은 것을 '자료형'이라고 한다.

가장 기본적인 자료형에는 숫자, 문자열, 불 이 있다.

 

문자열 자료형 (string)

기본적으로 "(큰 따옴표), '(작은따옴표),`(백틱)을 감싼 형태

const name1 = "Mike";
const name2 = 'Mike';
const name3 = `Mike`;

const message1 = "I\' a body";
//따옴표를 문자 그대로 출력하고 싶을땐 \(역슬래쉬)를 붙이면 됨

const message2 = `My name is ${name1}`;
console.log(message2)
출력되는 값 > "My name is Mike"
//`(백틱)은 문자열 내부에 변수를 표현해줄때 사용

* ${} < 변수를 넣을때 사용

 

숫자 자료형 (number)

소수점이 있는 숫자와 없는 숫자를 모두 같은 자료형으로 인식. 숫자를 입력하면 숫자 자료가 만들어진다.

const age = 30;
const PI = 3.14;

console.log(1 + 2) // + 더하기
console.log(10 - 3) // - 빼기
console.log(3 * 2) // * 곱하기
console.log(4 / 2) // / 나누기
console.log(6 % 4) // % 나머지

const X = 1 / 0
console.log(X)
//결과값: infinity (무한대)

const name = "Mike";
const Y = name/2;
console.log(Y);
//결과값: NaN (not a number의 약어 숫자가 아니라는뜻)

 

불 자료형 (boolean)

불 자료형은 논리적인 요소를 나타내고  true, false 2가지로만 구성 또한 두 대상을 비교할 수 있는 비교 연산자를 사용해 불을 만들 수 있음

const a = true; // 참
const b=  false; // 거짓


// 예시
const name = 'Mike';
const age = 30;

console.log(name === 'Mike'); // 결과값: true
console.log(age > 40); // 결과값: false

 

null 과 undefined

null 은 존재하지 않는 값 을 의미, undefined는 값이 할당되지 않음을 의미

let age;
console.log(age); // 값을 할당하지 않을 경우 'undefined' 출력

let user = null; // user 는 존재하지 않음을 의미

 

typeof 연산자

변수의 연산자를 알아낼 수 있음. 다른 개발자가 또는 api 통해 가져온 변수의 자료형을 볼 경우 주로 사용됨

const name = 'Mike';

console.log(typeof 3) // "number"
console.log(typeof name) // "string"
console.log(typeof true) // "boolean"
console.log(typeof "xxx") // "string"
console.log(typeof null) // "object"
console.log(typeof undefined) // "undefined"

* 위 예시에서 null 은 object (객체형)으로 출력되지만 null은 객체형이 아님 

 

이 외 알면 좋을것들

문자형 은 + 를 할 수 있음, 숫자형 + 문자형을 하게 되면 문자형으로 변경됨

const name = 'mike';
const age = 30;

const a = "나는";
const b = "입니다.";

console.log(a + name + b); // "나는  Mike 입니다."
console.log(a + age + "살" + b) // "나는 30살 입니다."

 

형변환

기본적으로 문자형 + 문자형 = 문자형, 숫자형 + 숫자형 = 숫자형을 출력하는데 문자형 + 숫자형을 더하면 문자형이 반환됨 자동으로 형이 변함 [자동 형변환]  + 연산자는 숫자형으로 자동으로 형변환하지만 *, / 같은 경우는 문자형으로 자동으로 숫자형으로 변환함 이런 작업들은 에러를 낼수 있기 때문에 내가 의도적으로 형변환 시키는게 좋음 이런걸 [명시적 형변환] 이라고함

String()   : 문자형으로 변환

Number() : 숫자형으로 변환

Boolean() : 불린형으로 변환

console.log(
  String(3),  // "3" 문자형으로 반환
  Number("문자"), // NaN 숫자가 아님으로 반환
  Boolean(0), // false 로 반환
  )

 

<숫자형에서 주의 할점>

1. 문자형을 숫자형으로 반환하려고 할땐 위의 예제처럼 'NaN' 으로 반환됨

2. null 은 0으로, undefined 는 NaN 으로 반환함

3. 숫자형에서 더 안전하게 변형을 위한 함수가 있음 parselnt() 괄호 사이에 '10dflskj' 이렇게 넣어도 깔끔하게 10만 출력

console.log(
  Number("문자형"), // NaN 으로 반환
  Number(null), // 0 으로 반환
  Number(undefined), // NaN 으로 반환
  )

 3. true = 1, false = 0 으로 반환

 

console.log(
  Number(true), // 1로 반환
  Number(false), // 0 으로 반환
  )

Boolean 형 같은 경우엔 false 만 기억하면 됨 아래 값은 모두 false 가 되고 이 외에는 true로 반환함

• 숫자 0
• 빈 문자열''
• null
• undefined
• NaN

console.log(
  Boolean(0), // 숫자 0  > false 값으로 반환
  Boolean(''), // 공백 문자  > false 값으로 반환
  Boolean(undefined), // undefined  > false 값으로 반환
  Boolean(null), // null  > false 값으로 반환
  Boolean(NaN), // NaN > false 값으로 반환
  )

<Boolean형 주의할점>

console.log(
  Boolean(0), // 숫자 0 은 false
  Boolean("0"), // 문자 0 은 true
  Boolean(''), // 빈문자열은 false
  Boolean(' '), // 공백이 들어가 있으면 true
  )