01.JavaScript 기초 - 데이터 타입

🌈 데이터 타입(Data-Type)

🔥 기본 데이터 타입(8개)

🔥 자료형의 예외

🔥 형 변환 방법

1. 기본 데이터 타입(8개)

• 데이터 타입은 총 8개로 원시형 7개와 object로 나뉨.
• 원시형의 종류는 string, number, bigint, boolean, symbol, null, undefined 으로 7개임
• 객체는 다양한 종류의 값을 저장할 수 있고, {}를 사용해 만듬
• function도 object의 일종임

1) Number

• JavaScript는 정수(int)와 부동소수점(float)을 처리하는데 Number 데이터 타입을 사용
  • Python에서는 int, float로 데이터 타입을 구분함
• 숫자형은 다양한 연산("+", "-", "/", "*", "//", "%" 등)을 처리할 수 있음
• 일반적인 숫자 외에 Infinity, -Infinity, Nan 같은 특수 값도 숫자형에 포함되어 있음
• 데이터 타입 확인 방법 : 🔍 console.log(typeof 변수명);

// Number
const count = 17;
const size = 17.1;
console.log(`value: ${count}, type: ${typeof count}`); // value: 17, type: number
console.log(`value: ${size}, type: ${typeof size}`); // value: 17.1, type: number
// Number - special numeric values:
const infinity = 1 / 0;
const negativeInfinity = -1 / 0;
console.log(infinity); // Infinity
console.log(negativeInfinity); // -Infinity
// 문자를 숫자로 출력하여라면 NaN 반환
const nAn = "not a number"
console.log(Number(nAn)); // NaN

2) BigInt

• JavaScript는 아주 큰 숫자를 저장할 수 있는 데이터 타입으로 BigInt형을 가지고 있음
• 이에 (253-1)(9007199254740991) 보다 큰 값 혹은 -(253-1) 보다 작은 정수는 '숫자형’을 사용 안됨
• 맨 끝에 n을 붙여 BigInt형으로 변수를 생성할 수 있음

// BigInt
const bigInt = 1234567890123456789012345678901234567890n;
// value: 1.2345678901234568e+39, type: bigint
console.log(`value: ${bigInt}, type: ${typeof bigInt}`)
// 안전하게 저장할 수 있는 최대 값
Number.MAX_SAFE_INTEGER; // 9007199254740991

3) String

• Javascript는 글자형은 지원하지 않고 문자형만 지원
• 문자열로 저장할 때는 3가지 따옴표로 묶음
  a. 큰따옴표 : "Hello"
  b. 작은따옴표 : 'Hello'
  c. 백틱 : ``
• 이모지도 문자형임

const str = "😃";
console.log(`value: ${str}, type: ${typeof str}`); // value: 😃, type: string
const name = "Jaewon";
const greeting = "hello " + name;
console.log(`value: ${greeting}, type: ${typeof greeting}`); // value: hello Jaewon, type: string
const helloJaewon = `${name}!`;
console.log(`value: ${helloJaewon}, type: ${typeof helloJaewon}`); // value: Jaewon!, type: string

4) Boolean

• 논리값 true / false을 저장하는데 쓰이는 boolean형

// boolean
// false : 0, null, undefined, NaN, ''
// true : any other value
const canRead = true;
const test = 3 < 1;
console.log(`value: ${canRead}, type: ${typeof canRead}`); // value: true, type: boolean
console.log(`value: ${test}, type: ${typeof test}`); // value: false, type: boolean

5) Null

• '값이 아예 없는 것', '존재하지 않음'을 나타내는 독립 자료형
• null을 ‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값을 나타내는 데 사용
• null의 데이터 타입은 null이라 나오지 않고, object로 반환됨

let nothing = null;
console.log(`value: ${null}, type: ${typeof null}`); // value: null, type: object

6) Undefined

• 값이 할당되지 않은 상태를 나타내는 독립 자료형
• 변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined가 자동으로 할당

// undefined : 선언은 되었지만 값이 지정되어있지 않은 것
let x = undefined;
let y;
console.log(x); // undefined
console.log(y); // undefined

7) Object

• 복잡한 자료구조를 저장하는데 쓰이는 객체형([], {})
• Object는 모든 데이터 타입을 담을 수 있음.
• string, number, bigInt, boolean, null, undefine을 제외하고 모두 Object(function / object / array 등)로 생각하면 됨

// object, real-life object, data structure
const jaewon = { name: "jaewon", age: 100, sex: "male" };
jaewon.age = 20;
console.log(`value: ${jaewon}, type: ${typeof jaewon}`); // value: [object Object], type: object
console.log(jaewon.age) // 20
//array : array도 object임
const daysOfWeek = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
console.log(daysOfWeek); 
console.log(daysOfWeek[4]); // Fri
//
//object : array와 object가 다른점은 object는 각 value에 부여할 수 있음
const jaewonInfo = {
  name: "jaewon",
  age: 33,
  gender: "Male",
  isHansome: true,
  city: "seoul",
  favMovies: ["Along the gods", "LOTR", "Oldboy"],
  favFood: [{
    name: "Kimchi",
    fatty: false
  }, {
    name: "Cheese burger",
    fatty: true
  }]
}
console.log(jaewonInfo); // {name: "jaewon", age: 33, gender: "Male", isHansome: true, city: "seoul", …}
console.log(jaewonInfo.name) //jaewon
console.log(jaewonInfo.gender) // Male
jaewonInfo.gender = "Female" 
console.log(jaewonInfo.gender)  // Female 
console.log(jaewonInfo.favMovies[1]) // LOTR
console.log(jaewonInfo.favFood[1]) // {name: "Cheese burger", fatty: true}
console.log(jaewonInfo.favFood[1].fatty) // ture

8) Symbol

• 고유 식별자를 만들 떄 사용되는 심볼형
• symbol()에 인자(description) 넣어 변수에 담으면, 데이터 값이 같을지라도 변수를 비교하면 false 반환

// symbol, create unique identifiers for objects : 고유식별자
const symbol1 = Symbol("id");
const symbol2 = Symbol("id");
console.log(symbol1 === symbol2); // false
const gSymbol1 = Symbol.for("id");
const gSymbol2 = Symbol.for("id");
console.log(gSymbol1 === gSymbol2); // true
console.log(`value: ${symbol1.description}, type: ${typeof symbol1}`); // value: id, type: symbol

2. 자료형의 예외

• null은 type을 object로 반환해주는데 이는 언어 자체의 오류임.
• null을 typeof 했을 때 반환 값이 object이지만, null의 data type은 null로 이해해야 함
• 함수는 특별하게 취급되어 function이 반환되지만, 함수도 object의 일부임

// typeof는 값의 자료형이 무엇인지 반환해줌. 그런데 2가지 예외 사항이 있음.
console.log(typeof null) // object
console.log(typeof function(){}) // function

3. 형 변환 방법

• 문자형 변환 방법 : String(value)
• 숫자형 변환 방법 : Number(value), parseInt(value), parseFloat(value)
• 불린형 변환 방법 : Boolean(value)
• 기타 형변환
  • 숫자형이 아닌 자료형에 +를 붙여주면 숫자로 형변환이 이뤄짐
  • 단항연산자의 +는 Number()와 같은 역할을 함
  • 또한 음수에 +를 붙이면 양수로 전환되지 않고, -를 한번 더 붙여야 양수로 변환됨

// 문자형으로 변환
let value = true;
alert(typeof value); // boolean
value = String(value);
alert(typeof value); // string
// 숫자형으로 변환
let str = "12345";
alert(typeof str); // "12345"
let num = Number(str); // 문자 "123"이 숫자 123으로 변환
alert(typeof num); // number
// 숫자가 아닌 문자를 숫자로 변환할 때
let age = Number("나의 나이는 12345");
alert(age); // NaN(숫자가아님), 형 변환이 실패
// 불린형으로 변환
alert( Boolean(1) ); // true
alert( Boolean(-1) ); // true
alert( Boolean(0) ); // false
alert( Boolean("hello") ); // true
alert( Boolean("") ); // false
// 기타 형변환
let x = 1;
console.log( +x ); // 1(숫자에는 아무런 영향을 미치지 않음)
let y = -2;
console.log( +y ); // -2(숫자에는 아무런 영향을 미치지 않음)
let z = -2;
console.log( -z ); // 2(양수로 변환)
// 숫자형이 아닌 피연산자는 숫자형으로 변화됨
console.log(true); // true
console.log(+true); // 1
console.log("");  // (아무것도 없음)
console.log( +"" ); //0
let apples = "2";
let oranges = "3";
console.log( +apples + +oranges ); // 5(+가 Number()로 형변환 일으킴)