[JavaScript] 3. Data Type, let VS var, hoisting

2022. 2. 19. 16:30·IT/WILT

 

0. 프로그래밍에서 가장 중요한 것?

  입력, 연산, 출력, CPU에 최적화된 연산, 메모리 사용의 최소화

 

 

1. Variable : let

  변경할 수 있는 값. JS에서 변수의 선언은 오직 let으로만 할 수 있다. 이전까지는 var를 사용했으나, ES6부터 let을 사용하게 되었다.

 

  대부분의 프로그래밍 언어에서는 변수를 선언한 후 값을 할당할 수 있는데, var는 선언하지 않고 값을 할당하거나 출력할 수 있었다. 이를 var hoisting이라 한다. 면접에서 물어볼 수 있으니 기억해두자. 또한, var는 block scope를 무시해서 어디서든 출력할 수 있다. 이러한 단점과 위험부담 때문데 let이 나오게 되었다.

var hoisting : move declaration from bottom to top. 어디에 변수를 선언했는지 상관없이 항상 제일 위로 선언을 끌어올려주는 것.
'use strict';

let globalName = 'global'; // 전역변수(global scope)
{						// block scope 할당
    let name = 'Apple'; // 변수 name 선언 및 값 할당
    console.log(name);
    name = 'Banana'; // 변수 name에 다른 값 할당
    console.log(name);
}
// console.log(name); block scope이 맞지않아 실행안됨
console.log(globalName);

 

 

2. Constants : const

  한 번 할당하면 값이 절대 바뀌지 않는 변수. Immutable 데이터 타입이라고도 한다. 반대로, 값이 계속 변경될 수 있는 것은 Mutable이다. 앞의 let이 Mutable 데이터 타입이다. 웬만하면 Immutable 데이터 타입을 사용하는게 좋은데, 그 이유로는 보안성과 쓰레드 안전성, 그리고 개발자의 실수를 줄이기 위해서이다.

Immutable data types : premitive types, frozen objects (i.e. object.freeze())
Mutable data types : all objects by default are mutable in JS

Favor immutable data type always for a few reasons:
 - Security
 - Thread safety
 - Reduce human mistakes

 

 

3. Variable Types

  어떤 프로그래밍 언어든 Primitive type과 Object type으로 나뉘어져 있다. Primitive type은 더이상 나누어질 수 없는 single item을 말한다. Object type은 single item들을 묶어서 한 container로 관리할 수 있게 해주는 것을 말한다. 또한, JS에서는 Function도 data type 중의 하나이다. first-class function을 지원하는데, 이 말은 function도 값처럼 변수에 할당이 가능하다는 뜻이다. 다행스럽게도, JS에서는 let으로 모든 값을 변수에 Dynamic하게 할당할 수 있다.

 

 Number Type

  JS에서 모든 숫자는 number type으로 분류된다. -2^53 ~ 2^53의 범위를 가진다. 그러나 조금 특별한 숫자가 있는데, Infinity와 -Infinity, NaN이 있다. 이들은 양의 값을 0으로 나누거나, 음의 값을 0으로 나누거나, string type을 나눴을 때 출력된다. 그런데 최근에 bigInt라는 type이 추가되었다. 숫자의 끝에 n만 붙이면 bigInt로 간주된다. 아직 일부 브라우저에서만 지원한다.

 

String Type

  JS에서 모든 문자는 string type으로 분류된다. 문자 하나이던, 문자열이던 상관없다. 따옴표 대신 Backtick(`) 기호를 사용해 문자열 안에 변수의 값을 집어넣을 수 있는 것을 template literals(string)라고 한다.

 

const char = 'c';
const brendan = 'brendan';
const greeting = 'hello ' + brendan;
console.log(`value: ${greeting}, type: ${typeof greeting}`);
const helloBob = `hi ${brendan}!`; // template literals
console.log(`value: ${helloBob}, type: ${typeof helloBob}`);

 

Boolean Type

  false와 true로 나뉜다. 0, null, undefined, NaN, ''(empty string)는 모두 false로 간주된다. 그 외의 값은 모두 true로 간주된다.

 

Null과 Undefined

  null은 아무것도 아닌 값이라고 개발자가 지정할 때 쓰는 값이다. undefined은 변수를 선언하고 아무런 값이 할당되지 않은 상태를 말한다.

let nothing = null;

let x;
let y = undefined;

 

Symbol Type

  고유한 식별자가 필요할 때 사용된다. Symbol은 동일한 string으로 여러개를 작성했어도 다른 Symbol로 간주되기 때문에, 고유한 식별자로서 유용하게 사용된다.

const s1 = Symbol('id');
const s2 = Symbol('id');
console.log(s1 === s2); // false 출력

const gs1 = Symbol.for('id');
const gs2 = Symbol.for('id');
console.log(gs1 === gs2); // true 출력

console.log(`value: ${s1.description}`); // symbol을 출력하려면 .description을 사용해야함

 

 

4. Dynamic Typing : dynamically typed language

  C나 JAVA는 statically typed language이다. 변수를 선언할 때 type이 결정된다. 그러나, type을 선언하지 않는 JS는 Runtime Program이 동작할 때 할당된 값에 따라서 type이 변경될 수 있다. 유연하다는 장점이 있지만, Runtime Error가 발생하기 쉽다는 장점이 있다. 때문에, JS에 type을 정리한 언어가 바로 TypeScript이다.

'IT > WILT' 카테고리의 다른 글

[JavaScript] 5. 함수의 선언과 표현, Arrow Function  (0) 2022.02.22
[JavaScript] 4. 코딩의 기본 operator  (0) 2022.02.20
[JavaScript] 2. 콘솔 출력, script async와 defer의 차이점  (0) 2022.02.18
[JavaScript] 1. 자바스크립트의 역사와 현재, 그리고 미래  (0) 2022.02.17
WILT를 시작하며  (0) 2022.02.17
'IT/WILT' 카테고리의 다른 글
  • [JavaScript] 5. 함수의 선언과 표현, Arrow Function
  • [JavaScript] 4. 코딩의 기본 operator
  • [JavaScript] 2. 콘솔 출력, script async와 defer의 차이점
  • [JavaScript] 1. 자바스크립트의 역사와 현재, 그리고 미래
KimCookieYa
KimCookieYa
무엇이 나를 살아있게 만드는가
  • KimCookieYa
    쿠키의 주저리
    KimCookieYa
  • 전체
    오늘
    어제
    • 분류 전체보기 (573) N
      • 혼잣말 (87)
      • TIL (2)
      • 커리어 (24)
        • Sendy (21)
        • 외부활동 기록 (2)
      • 프로젝트 (186)
        • 티스토리 API (5)
        • 코드프레소 체험단 (89)
        • Web3 (3)
        • Pint OS (16)
        • 나만무 (14)
        • 대회 (6)
        • 정글 FE 스터디 (16)
        • MailBadara (12)
        • github.io (1)
        • 인공지능 동아리, AID (5)
        • 졸업과제 (18)
        • OSSCA 2024 (1)
      • 크래프톤 정글 2기 (80)
      • IT (168) N
        • 코딩 (4)
        • CS (18)
        • 에러 (5)
        • 블록체인 (23)
        • Front-End (39) N
        • 알고리즘&자료구조 정리 (3)
        • 코딩테스트 (3)
        • BOJ 문제정리 (41)
        • WILT (12)
        • ML-Agents (4)
        • 강화학습 (1)
        • Android (0)
        • LLM (2)
      • 전공 (1)
        • 머신러닝 (1)
      • 자기계발 (20)
        • 빡공단X베어유 (2)
        • 독서 (15)
  • 블로그 메뉴

    • 홈
    • 방명록
    • Github
    • Velog
    • 관리
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    자바스크립트
    코드프레소
    Flutter
    docker
    NEAR Protocol
    부산대
    Pint OS
    numpy
    졸업과제
    해커톤
    react
    나만무
    사이드프로젝트
    니어프로토콜
    크래프톤정글
    JavaScript
    핀토스
    리액트
    MailBadara
    딥러닝
    OS
    글리치해커톤
    pintos
    머신러닝
    위상정렬
    블록체인
    RNN
    알고리즘
    프로그래머스
    파이썬
  • hELLO· Designed By정상우.v4.10.3
KimCookieYa
[JavaScript] 3. Data Type, let VS var, hoisting
상단으로

티스토리툴바