모던 자바스크립트 Deep Dive | 06장

2025. 1. 30. 17:55·Frontend/모던 자바스크립트 Deep Dive
목차
  1.  
  2. 06장 데이터 타입
  3. 6.1 숫자 타입
  4. 6.2 문자열 타입
  5. 6.3 템플릿 리터럴
  6. 6.4 불리언 타입
  7. 6.5 undefined 타입
  8. 6.6 null 타입
  9. 6.7 심벌 타입
  10. 6.8 객체 타입
  11. 6.9 데이터 타입의 필요성
  12. 6.10 동적 타이핑

 

06장 데이터 타입

데이터 타입 : 값의 종류

자바스크립트(ES6)는 7개의 데이터 타입 제공

• 원시타입

 - 숫자 타입

 - 문자열 타입

 - 불리언 타입

 - undefined 타입

 - null 타입

 - 심벌 타입

• 객체 타입

 

6.1 숫자 타입

  • 정수만 표현하기 위한 데이터 타입이 별도로 존재하지 않음
var integer = 10; //정수
var double = 10.12; //실수
var negative = -20; //음의 정수

 

  • 숫자 타입은 추가적으로 세 가지 특별한 값 표현 가능
  • Infinity : 양의 무한대
  • -Infinity : 음의 무한대
  • NaN : 산술 연산 불가(not-a-number)
console.log(10/0); //Infinity
console.log(10/-0); //-Infinity
console.log(1*'String'); //NaN

 

 

6.2 문자열 타입

  • 텍스트 데이터를 나타내는 데 사용
var string;
string = '문자열'; //작은따옴표
string = "문자열"; //큰따옴표
string = `문자열`; //백틱(ES6)

string = '작은따옴표로 감싼 문자열 내의 "큰따옴표"는 문자열로 인식된다.';
string = "큰따옴표로 감싼 문자열 내의 '작은따옴표'는 문자열로 인식된다.";

 

 

6.3 템플릿 리터럴

  • 백틱을 사용해 표현

6.3.1 멀티라인 문자열

  • 일반 문자열 내에서는 줄바꿈(개행)이 허용되지 않음 ⇨ 백슬래시(\)로 시작하는 이스케이프 시퀀스 사용
  • 템플릿 리터럴 내에서는 줄바꿈이 허용되며, 모든 공백도 있는 그대로 적용됨

 

6.3.2 표현식 삽입

  • 문자열 연산자 +를 사용해 연결
  • 표현식 삽입 : ${ }으로 표현식 감싸기
var first = 'Ung-mo';
var last = 'Lee';

//ES6: 표현식 삽입
console.log(`My name is ${first} ${last}.`); //My name is Ung-mo Lee.
  • 표현식의 평가 결과가 문자열이 아니더라도 문자열로 타입이 강제 변환되어 삽입됨
  • 표현식 삽입은 반드시 템플릿 리터럴 내에서 사용해야 함!

 

6.4 불리언 타입

  • 불리언 타입의 값은 논리적 참, 거짓을 나타내는 true와 false 뿐

 

6.5 undefined 타입

  • var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화
  • 개발자가 의도적으로 할당하기 위한 값이 아니라 자바스크립트 엔진이 변수를 초기화할 때 사용하는 값

 

6.6 null 타입

  • 변수에 값이 없다는 것을 의도적으로 명시할 때 사용
  • 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미
  • 함수가 유효한 값을 반활할 수 없는 경우에도 null을 반환

 

6.7 심벌 타입

  • 변경 불가능한 원시 타입의 값
  • 다른 값과 중복되지 않는 유일무이한 값
  • 객체의 유일한 프로퍼티 키를 만들기 위해 사용
  • Symbol 함수를 호출해 생성
//심벌 값 생성
var key = Symbol('key');
console.log(typeof key); //symbol

//객체 생성
var obj = {};

//이름이 충돌할 위험이 없는 유일무이한 값인 심벌을 프로퍼티 키로 사용한다.
obj[key] = 'value';
console.log(obj[key]); //value

 

 

6.8 객체 타입

  • 앞의 6가지 데이터 타입 이외의 값은 모두 객체 타입

 

6.9 데이터 타입의 필요성

데이터 타입은 왜 필요한 것일까?

 

6.9.1 데이터 타입에 의한 메모리 공간의 확보와 참조

  • 데이터 타입(값의 종류)에 따라 정해진 크기의 메모리 공간을 확보

 

6.9.2 데이터 타입에 의한 값의 해석

  • 데이터 타입이 필요한 이유
  • 값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해
  • 값을 참조할 때 한 번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해
  • 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해

 

6.10 동적 타이핑

6.10.1 동적 타입 언어와 정적 타입 언어

  • 정적 타입 언어(ex. C, C++, Java, Kotlin, Go, Haskell, Rust, Scala ...)
  • 변수를 선언할 때 데이터 타입을 사전에 선언해야 함 ⇨ 명시적 타입 선언
  • 변수 타입을 변경할 수 없으며, 변수에 선언한 타입에 맞는 값만 할당 가능
  • 컴파일 시점에 타입 체크를 수행

 

  • 동적 타입 언어(ex. Javascript, Python, PHP, Ruby, Lisp, Perl ...)
  • 변수는 선언이 아닌 할당에 의해 타입 결정(타입 추론)
  • 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있음 ⇨ 동적 타이핑

 

6.10.2 동적 타입 언어와 변수

  • 동적 타입 언어 또한 구조적인 단점이 있음
  • 동적 타입 언어는 유연성은 높지만 신뢰성은 떨어짐
  • 변수를 사용할 때 주의사항
  • 변수는 꼭 필요한 경우에 한해 제한적으로 사용
  • 변수의 유효 범위(스코프)는 최대한 좁게 만들어 변수의 부작용을 억제
  • 전역 변수는 최대한 사용하지 않기
  • 변수보다는 상수를 사용해 값의 변경을 억제
  • 변수 이름은 변수의 목적이나 의미를 파악할 수 있도록 네이밍

 

'Frontend > 모던 자바스크립트 Deep Dive' 카테고리의 다른 글

모던 자바스크립트 Deep Dive | 04 - 05장  (0) 2025.01.30
모던 자바스크립트 Deep Dive | 01 - 03장  (1) 2025.01.30
  1.  
  2. 06장 데이터 타입
  3. 6.1 숫자 타입
  4. 6.2 문자열 타입
  5. 6.3 템플릿 리터럴
  6. 6.4 불리언 타입
  7. 6.5 undefined 타입
  8. 6.6 null 타입
  9. 6.7 심벌 타입
  10. 6.8 객체 타입
  11. 6.9 데이터 타입의 필요성
  12. 6.10 동적 타이핑
'Frontend/모던 자바스크립트 Deep Dive' 카테고리의 다른 글
  • 모던 자바스크립트 Deep Dive | 04 - 05장
  • 모던 자바스크립트 Deep Dive | 01 - 03장
제주고윤정
제주고윤정
🧇❣️
  • 제주고윤정
    #
    제주고윤정
  • 전체
    오늘
    어제
    • 분류 전체보기 (4)
      • 궁금증 💭 (1)
      • WIT 스터디 (0)
      • Frontend (3)
        • 모던 자바스크립트 Deep Dive (3)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    REST API
    javascript
    모던 자바스크립트 딥 다이브
    Open API
    API
    JS
    GraphQL
    frontend
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
제주고윤정
모던 자바스크립트 Deep Dive | 06장

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.