자바스크립트 강의 EP_12 | 데이터타입 | ES6+ 최신 문법 | DOM API | BOM API

자바스크립트의 데이터 타입은 무엇이며, 어떻게 구분할 수 있나요?

자바스크립트의 데이터 타입은 값의 종류를 의미하며, 크게 기본 타입(Primitive Type)과 객체 타입(Object Type)으로 구분 할 수 있습니다

기본 타입과 객체 타입의 특징은 무엇인가요?

• 기본 타입: 숫자, 문자열, 불리언, null, undefined, 심볼과 같이 '값이 하나만 있는 것'을 말합니다
• 객체 타입: 기본 타입이 아닌 모든 것을 객체 타입이라고 하며, '값을 여러 개 가질 수 있고' 이 값들을 그룹핑한 '참조 값'을 가집니다

자바스크립트의 핵심 데이터 타입을 명확하게 이해하고 싶은 개발자들을 위한 필수 강의입니다. 숫자, 문자열, 불리언 같은 기본 타입(Primitive Type)의 종류와 특징은 물론, 자바스크립트만의 특별한 숫자 값(Infinity, NaN)과 문자열 표현 방식(백틱 활용)까지 실습을 통해 상세히 배울 수 있습니다. 특히, 값이 없는 상태를 나타내는 null과 undefined의 미묘한 차이를 명확히 구분하고, 여러 값을 담을 수 있는 객체 타입(Object Type)이 참조 값(Reference Type)으로 동작하는 원리를 이해함으로써, 자바스크립트의 유연한 데이터 처리 방식을 깊이 있게 파악할 수 있습니다.

1. 자바스크립트 데이터 타입 개요

1. 데이터 타입의 정의: 값의 종류를 의미한다.
   1. 예시: 숫자 타입, 문자열 타입

1. 자바스크립트 데이터 타입 분류: 크게 두 가지로 나뉜다.
   1. 기본 타입 (Primitive Type): 값이 하나만 있는 것을 말한다.
      1. 종류: 숫자(Number), 문자열(String), 불리언(Boolean), null, undefined, 심볼(Symbol)
   2. 객체 타입 (Object Type): 기본 타입이 아닌 모든 것을 객체 타입이라고 한다.

2. 기본 타입 (Primitive Type) 상세 설명

2.1. 숫자 타입 (Number Type)

1. 숫자 타입 선언: let 또는 const 키워드를 사용하여 정수나 소수를 할당한다.
   1. 자바(Java)와의 차이점: 자바는 정수/소수, 크기에 따라 선언 방법이 다르지만, 자바스크립트는 유연하게 선언할 수 있다.
      1. 자바 예시: 소수는 float 또는 double, 큰 정수는 long, 작은 정수는 int, short, byte 등으로 선언한다.
   2. 실습 예시:
      1. dataType.js 파일 생성 및 use strict 선언
      2. index.js 파일에서 dataType.js로 변경 후 라이브 서버 실행
      3. 정수 선언: let number1 = 10;
      4. 소수 선언: let number2 = 3.14;
      5. 콘솔 출력 결과: 10, 3.14

1. 특별한 숫자 값: 자바스크립트에는 일반적인 아라비아 숫자 외에 특별한 숫자 값이 존재한다.
   1. Infinity: 양수를 0으로 나눌 경우 반환되는 값으로, 숫자 타입이다.
   2. -Infinity: 음수를 0으로 나눌 경우 반환되는 값으로, 숫자 타입이다.
   3. NaN (Not a Number): 숫자가 아닌 값을 숫자로 나누려고 시도할 때 반환되는 값으로, 숫자 타입이다.
      1. 예시: "hello" / 2
      2. typeof 연산자: 변수의 데이터 타입을 확인할 때 사용한다.
         1. typeof NaN의 결과는 number이다.

2.2. 문자열 타입 (String Type)

1. 문자열의 정의: 텍스트 데이터를 의미한다.

1. 문자열 표현 방식: 세 가지 방법으로 표현할 수 있다.
   1. 싱글 쿼테이션 ('')
   2. 더블 쿼테이션 ("")
   3. 백틱 기호 (` ``): ES6에서 도입된 문법이다.

1. 백틱 기호의 편리성 (ES6 문법)
   1. 변수 삽입 (템플릿 리터럴): 문자열 내부에 달러($)와 중괄호 {}를 사용하여 변수를 직접 삽입할 수 있다.
      1. 기존 방식 (플러스 연산자 사용): 문자열과 변수를 + 연산자로 연결해야 하며, 이는 문자열을 연결하는 역할을 한다.
      2. 백틱 사용 방식: 안녕하세요, 제 이름은 name입니다.나이는name입니다.나이는${name}입니다. 나이는 ${age}살이에요.와 같이 깔끔하게 표현할 수 있다.
   2. 개행 표현: 백틱 기호 안에서는 엔터(Enter)를 통해 줄바꿈을 직접 표현할 수 있다.

1. 문자열 리터럴과 숫자형 리터럴:
   1. 문자열을 표현하는 방식을 문자열 리터럴 방식이라고 한다.
   2. 숫자를 표현하는 방식을 숫자형 리터럴 표현 방식이라고 한다.

1. 이스케이프 표현 방식: 문자열 내부에서 특수 문자를 표현할 때 사용한다.
   1. 줄바꿈 (`

)<em></em>: 문자열 안에서 줄바꿈을 표현할 때 역슬래시 n`을 사용한다.

1. 쿼테이션 표현 (\' 또는 \"): 문자열을 감싸는 쿼테이션과 동일한 쿼테이션을 문자열 내부에 표현할 때 역슬래시를 앞에 붙여 사용한다.
   1. 예시: '제 이름은 홍길동입니다.\'프로그래머\''
   2. Prettier와 같은 포매터는 자동으로 더블 쿼테이션으로 변경하여 내부 싱글 쿼테이션을 처리하기도 한다.

2.3. 불리언 타입 (Boolean Type)

1. 불리언의 정의: 진실(true) 또는 거짓(false) 두 가지 값만 나타낼 수 있다.
   1. 실습 예시:
      1. const isProgrammer = true;
      2. const isDesigner = false;
      3. typeof 연산자로 확인 시 boolean 타입으로 출력된다.
   2. 활용: 제어문(예: if문)에서 조건 분기를 표현할 때 많이 사용된다.

2.4. 심볼 타입 (Symbol Type)

1. 심볼의 정의: ES6에서 도입된 새로운 데이터 타입으로, 유일한 값을 표현할 때 사용한다.
   1. 생성 방법: Symbol() 함수를 통해 생성한다.
      1. 예시: let myJob = Symbol("프로그래머");
   2. 유일성: 같은 문자열로 심볼을 생성하더라도 두 심볼은 서로 다른 값으로 간주된다.
   3. 활용: 실무에서 많이 사용되지는 않지만, 유일한 값을 표현해야 할 때 구글링하여 사용할 수 있다.

2.5. null과 undefined 타입

1. 공통점: 둘 다 값이 비어있는 상태를 의미하는 프리미티브 타입이다.

1. 차이점:
   1. null: 값이 없는 상태를 의도적으로 표현할 때 사용한다.
      1. 실습 예시: const userName = null;
      2. typeof null의 결과: object로 출력되는데, 이는 자바스크립트의 구현 버그이다.
         1. MDN 문서에 따르면 null은 자바스크립트의 원시 값 중 하나로, 의도적으로 값이 비어 있음을 표현한다.
      3. 활용 예시: DOM API에서 존재하지 않는 요소를 검색할 때 null이 반환된다.
         1. 예시: document.querySelector('h1') (H1 요소가 없을 경우)
   2. undefined: 값을 할당하지 않은 상태를 의미한다.
      1. 실습 예시: let message2; (변수 선언 후 값을 할당하지 않음)
      2. const로 선언 시 값을 할당하지 않으면 에러가 발생한다.
      3. let으로 선언 시 값을 할당하지 않으면 undefined가 출력된다.
      4. 주의사항: 빈 값을 표현하기 위해 undefined를 직접 할당하는 것은 모순이므로 권장되지 않는다.

1. 이해의 중요성: 초반에 완벽하게 이해하기 어렵다면, 둘 다 "값이 없는 상태" 정도로 이해하고 실제 프로그래밍을 통해 점진적으로 이해하는 것이 좋다.

3. 객체 타입 (Object Type)

1. 객체의 정의: 여러 값을 담을 수 있는 데이터 타입이다.

1. 자바스크립트 내장 객체 종류:
   1. Object 객체: 일반적인 객체.
   2. Array 객체: 데이터에 순서가 있는 객체.
   3. Date 객체: 날짜 표현을 돕는 객체.
   4. Math 객체: 수학적 계산을 돕는 객체.
   5. 그 외: 오류 객체, 텍스트 처리 객체 등 다양한 객체들이 존재한다.

1. 객체 타입의 핵심 특징: 여러 값을 가질 수 있음
   1. 기본 타입과의 차이:
      1. 기본 타입은 하나의 변수에 하나의 값만 저장한다.
         1. 예시: name 변수에 "홍길동" 문자열 하나, age 변수에 25 숫자 하나.
      2. 객체 타입은 하나의 변수에 여러 값을 가질 수 있다.
   2. 객체 (Object) 예시: person 객체는 name (문자열), age (숫자), isProgrammer (불리언), say (함수/메소드) 등 다양한 값을 가질 수 있다.
      1. 객체가 갖고 있는 값을 프로퍼티(Property)라고 한다.
      2. 함수는 메소드(Method)라고 한다.
   3. 배열 (Array) 예시: 대괄호 []로 정의하며, 콤마로 구분된 여러 값을 가질 수 있다.
      1. length 속성: 배열의 길이를 반환한다.
      2. push() 메소드: 배열에 값을 추가한다.

1. 객체 타입의 동작 원리: 참조 값 (Reference Type)
   1. 기본 타입의 메모리 저장 방식:
      1. 값 자체가 메모리에 저장되고, 변수는 그 값을 직접 가리킨다.
      2. 예시: name = "홍길동"일 때, "홍길동"이 메모리에 올라가고 name 변수가 이 값을 직접 가리킨다.
   2. 객체 타입의 메모리 저장 방식:
      1. 객체가 가진 여러 값들은 메모리상에 그룹화되어 저장된다.
      2. 이 그룹화된 값들의 메모리 주소 체계(참조 값)가 생성되고, 변수는 이 주소 체계를 가리킨다.
      3. 따라서 객체 타입은 참조 타입(Reference Type)이라고도 불린다.
   3. 핵심 요약: 기본 타입은 값을 직접 가리키고, 객체 타입은 여러 값을 그룹화한 참조 값(주소)을 가리킨다.

자바스크립트 강의 EP_13 | 배열(Array) | ES6+ 최신 문법 | DOM API | BOM API 바로가기

자바스크립트 강의 EP_13 | 배열(Array) | ES6+ 최신 문법 | DOM API | BOM API - 하나이프 블로그