[멋쟁이 사자처럼 프론트엔드 스쿨] 26일차 TIL - 데이터 타입

🍰 오늘도 자바스크립트 진도를 잔뜩.

🍴 자료형

: 총 여덟 가지 자료형. 동적 타입(dynamicallyt typed) - 자료의 타입은 있지만 변수에 저장되는 값은 언제든지 바꿀 수 있음.

1️⃣ 숫자형(Number)

: 정수 및 부동 소수점 숫자 나타냄

• 2**53 -1(9007199254740991)까지 안전하게 사용 가능

• 관련된 연산: +, -, *, /
• 특수 숫자 값(special numeric value) : Infinity, -Infinity, NaN

2️⃣ BigInt

: 일반 숫자 뒤에 n 붙이기

3️⃣ 문자형(String)

: string을 따옴표로 묶음

• " "
• ' '
• ` `(백틱) => 변수가 들어올 여지 있을 때 사용

let nickName = '뫄뫄';
let age = 20;

`안녕 나는 ${nickName}이야. 내 나이는 ${age}이야.` 
// 안에 변수 집어넣는 형태가 보간법

4️⃣ 불린형(Boolean)

: true와 false 두 가지 값이 있는 자료형

• 긍정 - true
• 부정 - false

let isBigger = 5 < 1;
console.log(isBigger); // false

5️⃣ null 

: 어느 자료형에도 속하지 않는 값.

• 의도적으로 비워둔 값
• 비어있거나 알 수 없는 상태 => null 할당

6️⃣ undefined

: null처럼 자신만의 자료형 형성

• 값이 할당되지 않은 상태
• undefined를 직접 할당하는 건 권장 X

7️⃣ 객체(Object)

: 키-값 쌍의 집합 나타내는 자료형

• 배열, 함수, 날짜, 정규 표현식 등도 객체의 특별한 형태
• 객체를 제외한 나머지 자료형은 원시 타입(primitive type) - 한 가지만 표현

const user = {
  name: 'lee',
  age: 20,
  sum: function (a, b) { // 키가 함수의 이름. sum이라는 메서드
    a + b;
  },
};

메서드

: 객체 안에 함수를 포함하고 있는 형태

• 객체 내에서 함수를 정의하는 방법 세 가지

const user = {
  sayHi: function () { // 1: normal function 제일 무거움
    return 'hello';
  },
  sayHi2: () => { // 2: arrow function
    return 'hi'; // 메서드 안에서 함수 쓸 때는 arrow 주로 사용
  },
  sayHi3() {
    return 'hola'; // 3: concise method(간결한) 제일 가벼움
  },
};

• 3번째 버전을 가장 많이 사용. 왜?

=> 1번은 프로토타입을 내부적으로 포함하고 있어서 무거움.

=> this 사용 시 2번은 window가 나옴. 3번은 자기 자신이 나옴.

요약: 간결하고 가볍고 this가 내가 선택한 대상을 뜻해서 3번째 함수 형태를 사용함.

8️⃣ 심볼(Symbol)

: 고유하고 변경 불가능한 값을 나타내는 자료형

• 주로 객체의 고유한 식별자 만들 때 사용

const id = Symbol('uuid');
const id2 = Symbol('uuid');
// 둘은 완전히 다름
// 새로운 메모리를 계속 쌓아올림

 

🍴 Typeof 연산자

: 인수의 자료형 반환

• 연산자: typeof x
• 함수: typeof(x)

🍴 함수(Function) - 객체형

: 주로 재사용을 위해

• return하지 않으면 undefined(어떤 값도 내보내지 않음)

🍴 자바스크립트는 객체로 시작해서 객체로 끝남

: 여덟 가지 자료형 모두 객체로부터 파생. 

생성자 함수(Constructor Function)

: new 키워드를 사용하여 새로운 객체 생성

const str = new String('hello'); // constructor function
const hello = 'hello'; // string literal

const object = new Object({ name: 'lee' }); // constructor function
const obj = { // object literal
  name: 'lee',
};

const newArray = new Array(1, 2, 3); // constructor function
const arr = [1, 2, 3]; // array literal

• null과 undefined는 어디에도 속하지 않음.
• null과 undefined를 제외한 모든 데이터 타입은 객체이고, 생성자 방식으로 만들어지지만 편의를 위해 literal로 사용됨

🍴  형 변환(Type Conversion)

: 함수와 연산자에 전달되는 값 - 적절한 자료형으로 자동 변환됨

• 암시적 형 변환 - 컴파일러나 인터프리터가 자동으로 데이터 타입을 변환하는 것

/* 문자열과 숫자 간 변환 */
const result1 = "5" + 2;  // 문자열 "5"와 숫자 2를 더하면 문자열로 변환됩니다.
console.log(result1); // "52"

const result2 = "5" - 2;  // 문자열 "5"에서 숫자 2를 빼면 숫자로 변환됩니다.
console.log(result2); // 3

/* 불리언과 숫자 간 변환 */
const result3 = true + 1; // true는 숫자 1로 변환됩니다.
console.log(result3); // 2

const result4 = false + 1; // false는 숫자 0으로 변환됩니다.
console.log(result4); // 1

/* null과 undefined의 변환 */
const result5 = null + 1; // null은 숫자 0으로 변환됩니다.
console.log(result5); // 1

const result6 = undefined + 1; // undefined는 NaN(Not-a-Number)으로 변환됩니다.
console.log(result6); // NaN

/* 비교 연산 시의 형 변환 */
console.log("5" == 5); // true, 문자열 "5"가 숫자 5로 변환되어 비교됩니다.
console.log("5" === 5); // false, ===는 타입을 비교하므로 변환이 일어나지 않습니다.

console.log(null == undefined); // true, 둘 다 값이 없음을 의미하므로 true
console.log(null === undefined); // false, 타입이 다르므로 false

• 명시적 형 변환 - 코드에서 명시적으로 데이터 타입을 변환하도록 지시하는 것

let value = true;
alert(typeof value); // boolean

console.log(parseInt('123abc')); // 123
console.log(parseInt('abc123')); // NaN

value = String(value); // 변수 value엔 문자열 "true"가 저장
alert(typeof value); // string

alert(Boolean("hello")); // 문자열(true)
alert(Boolean("")); // 빈 문자열(false)

🍴 값 반환 여부

• 식 - 반환함
• 문 - 반환하지 않음(정확하게는 undefined를 반환)
• 할당 연산자 => 값을 반환함

let a = 1;
let b = 2;

let c = 3 - (a = b + 1); // 괄호 안에서 할당 연산자기 때문에 3 반환
// 만약 괄호에서 식이 끝나서 undefined가 나왔으면 3-undefined=NaN

alert( a ); // 3
alert( c ); // 0