JavaScript - Strict Mode & 변수/상수 & 자료형

2023. 7. 15. 16:07·📘 Frontend/Javascript

Strict Mode

자바스크립트는 꽤 오랫동안 호환성 이슈 없이 발전해왔습니다. 기존의 기능을 변경하지 않으면서 새로운 기능이 추가되었죠.


덕분에 기존에 작성한 코드는 절대 망가지지 않는다는 장점이 있었습니다. 하지만 자바스크립트 창시자들이 했던 실수나 불완전한 결정이 언어 안에 영원히 박제된다는 단점도 생겼습니다.


이런 상황은 ECMAScript5(ES5)가 등장하기 전인 2009년까지 지속되었습니다. 그런데 새롭게 제정된 ES5에서는 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었습니다. 기존 기능을 변경하였기 때문에 하위 호환성 문제가 생길 수 있겠죠? 그래서 변경사항 대부분은 ES5의 기본 모드에선 활성화되지 않도록 설계되었습니다. 대신 use strict라는 특별한 지시자를 사용해 엄격 모드(strict mode)를 활성화 했을 때만 이 변경사항이 활성화되게 해놓았습니다.


use strict

지시자 "use strict", 혹은 'use strict'는 단순한 문자열처럼 생겼습니다.

하지만 이 지시자가 스크립트 최상단에 오면 스크립트 전체가 “모던한” 방식으로 동작합니다.

이 use strict는 함수 본문 맨 앞에 올 수도 있습니다.

funtion() {
    'use strict';
}

한번 use strict가 적용되면 돌이킬 방법은 없으니 신중하게 사용해야 합니다.

하지만 개발을 할떄 클래스, 모듈을 당연히 이용할텐데 이럴 경우 use strict는 생략해도 됩니다.


변수와 상수

let, const 키워드를 사용하며,

let은 가변, const는 불변 변수를 선언할때 사용합니다.

const는 보통 변수 선언을 대문자로 합니다.


한줄에 여러 변수 선언

let user = 'Kim'm age = 25, message = 'Hello';

자료형

자바스크립트에서 값은 항상 문자열이나 숫자형 같은 특정한 자료형에 속합니다.

8가지 기본 자료형이 있습니다.


숫자형

  • 숫자형 값의 끝에 n이 붙으면 BigInt 자료형입니다
    • 내부 표현 방식 때문에 자바스크립트에선 (253-1)(9007199254740991) 보다 큰 값 혹은 -(253-1) 보다 작은 정수는 '숫자형’을 사용해 나타낼 수 없습니다.
    • BigInt형은 표준으로 채택된 지 얼마 안 된 자료형으로, 길이에 상관없이 정수를 나타낼 수 있습니다.
    • BigInt형 값은 정수 리터럴 끝에 n을 붙이면 만들 수 있습니다.
  • 숫자형에는 일반적인 숫자 외에 Infinity, -Infinity, NaN같은 특수 숫자 값이 포함됩니다.
    • Infinity는 어떤 숫자보다 더 큰 특수 값, 무한대를 나타냅니다.
    • Infinity 자체를 직접 참조할 수 있습니다.
    • NaN은 정의되지 않은 수학 연산을 사용하면 발생합니다. (ex: 문자열 + 숫자)

alert(1/0); // 무한대
alert(Infinity); // 무한대 직접 참조
alert('A' + 2); // NaN 발생

문자형

자바스크립트에선 문자열(string)을 따옴표로 묶습니다.

let str = "Hello";
let str2 = 'Hello2';
let str3 = `can embed another ${str}`;

따옴표는 세 종류가 있습니다.

  1. 큰따옴표: "Hello"
  2. 작은따옴표: 'Hello'
  3. 역 따옴표(백틱, backtick): `Hello`

큰따옴표와 작은따옴표는 ‘기본적인’ 따옴표로, 자바스크립트에서는 이 둘에 차이를 두지 않습니다.

역 따옴표로 변수나 표현식을 감싼 후 ${…}안에 넣어주면, 아래와 같이 원하는 변수나 표현식을 문자열 중간에 손쉽게 넣을 수 있습니다.


let name = "Kim";

// 변수를 문자열 중간에 삽입
alert(`Hello, ${name}!`);

// 표현식을 문자열 중간에 삽입
alert(`The Result is ${1+2}`);

불린형

불린형(논리 타입)은 true와 false 두 가지 값밖에 없는 자료형입니다.

불린형은 긍정(yes)이나 부정(no)을 나타내는 값을 저장할 때 사용합니다. true는 긍정, false는 부정을 의미합니다.

너무 잘 아니까 넘어가겠습니다.


Null 값

null 값은 지금까지 소개한 자료형 중 어느 자료형에도 속하지 않는 값입니다.

null 값은 오로지 null 값만 포함하는 별도의 자료형을 만듭니다.


자바스크립트의 null은 자바스크립트 이외 언어의 null과 성격이 다릅니다.

다른 언어에선 null을 '존재하지 않는 객체에 대한 참조’나 '널 포인터(null pointer)'를 나타낼 때 사용합니다.


하지만 자바스크립트에선 null을 ‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값을 나타내는 데 사용합니다.

let age = null;은 나이(age)를 알 수 없거나 그 값이 비어있음을 보여줍니다.


Undefined 값

undefined 값도 null 값처럼 자신만의 자료형을 형성합니다.

undefined는 '값이 할당되지 않은 상태’를 나타낼 때 사용합니다.

변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined가 자동으로 할당됩니다.


let age;

alert(age); // Undefined가 출력됩니다.

개발자가 변수에 undefined를 명시적으로 할당하는 것도 가능하긴 합니다.

하지만 권장하지 않는 방법이며, Null 값을 넣는걸 추천합니다.


객체와 심볼

객체(object)형은 특수한 자료형입니다.

객체형을 제외한 다른 자료형은 문자열이든 숫자든 한 가지만 표현할 수 있기 때문에 원시(primitive) 자료형이라 부릅니다.

반면 객체는 데이터 컬렉션이나 복잡한 개체(entity)를 표현할 수 있습니다.


심볼(symbol)형은 객체의 고유한 식별자(unique identifier)를 만들 때 사용됩니다.


typeof 연산자

typeof 연산자는 인수의 자료형을 반환합니다.

자료형에 따라 처리 방식을 다르게 하고 싶거나 변수의 자료형을 빠르게 알아내고자 할 때 유용합니다.


typeof 연산자는 두 가지 형태의 문법을 지원합니다.

  1. 연산자: typeof x
  2. 함수: typeof(x)

괄호가 있든 없든 결과가 동일합니다.

typeof x를 호출하면 인수의 자료형을 나타내는 문자열을 반환합니다.


typeof undefined // undefined

typeof 0 // number

typeof 10n // bigint

typeof true // boolean

typeof "foo" // string

typeof Symbol("id") // symbol

typeof Math // object

typeof null // object

typeof alert // funtion

요약

자바스크립트에는 여덟 가지 기본 자료형이 있습니다.

  • 숫자형 – 정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용합니다. 정수의 한계는 ±253 입니다.
  • bigint – 길이 제약 없이 정수를 나타낼 수 있습니다.
  • 문자형 – 빈 문자열이나 글자들로 이뤄진 문자열을 나타낼 때 사용합니다. 단일 문자를 나타내는 별도의 자료형은 없습니다.
  • 불린형 – true, false를 나타낼 때 사용합니다.
  • null – null 값만을 위한 독립 자료형입니다. null은 알 수 없는 값을 나타냅니다.
  • undefined – undefined 값만을 위한 독립 자료형입니다. undefined는 할당되지 않은 값을 나타냅니다.
  • 객체형 – 복잡한 데이터 구조를 표현할 때 사용합니다.
  • 심볼형 – 객체의 고유 식별자를 만들 때 사용합니다.

typeof 연산자는 피연산자의 자료형을 알려줍니다.

  • typeof x 또는 typeof(x) 형태로 사용합니다.
  • 피연산자의 자료형을 문자열 형태로 반환합니다.
  • null의 typeof 연산은 "object"인데, 이는 언어상 오류입니다. null은 객체가 아닙니다.
저작자표시

'📘 Frontend > Javascript' 카테고리의 다른 글

JavaScript - Function  (0) 2023.07.16
Javascript - Nullish 병합 연산자  (0) 2023.07.16
Javascript - Operators & Condition  (0) 2023.07.16
JavaScript - Type Conversion (Primitive Type Only)  (0) 2023.07.15
JavaScript - Alert & Prompt & Confirm을 이용한 상호작용  (0) 2023.07.15
'📘 Frontend/Javascript' 카테고리의 다른 글
  • Javascript - Nullish 병합 연산자
  • Javascript - Operators & Condition
  • JavaScript - Type Conversion (Primitive Type Only)
  • JavaScript - Alert & Prompt & Confirm을 이용한 상호작용
신건우
신건우
조용한 개발자
  • 신건우
    우주먼지
    신건우
  • 전체
    오늘
    어제
    • 분류 전체보기 (422)
      • 📘 Frontend (71)
        • Markup (1)
        • Style Sheet (2)
        • Dart (8)
        • Javascript (12)
        • TypeScript (1)
        • Vue (36)
        • React (2)
        • Flutter (9)
      • 📘 Backend (143)
        • Java (34)
        • Concurrency (19)
        • Reflection (1)
        • Kotlin (29)
        • Python (1)
        • Spring (42)
        • Spring Cloud (5)
        • Message Broker (5)
        • Streaming (2)
        • 기능 개발 (5)
      • 💻 Server (6)
        • Linux (6)
      • ❌ Error Handling (11)
      • 📦 Database (62)
        • SQL (31)
        • NoSQL (2)
        • JPQL (9)
        • QueryDSL (12)
        • Basic (4)
        • Firebase (4)
      • ⚙️ Ops (57)
        • CS (6)
        • AWS (9)
        • Docker (8)
        • Kubernetes (13)
        • MSA (1)
        • CI & CD (20)
      • 📚 Data Architect (48)
        • Data Structure (10)
        • Algorithm (8)
        • Programmers (17)
        • BaekJoon (5)
        • CodeUp (4)
        • Design Pattern (4)
        • AI (0)
      • ⚒️ Management & Tool (8)
        • Git (7)
        • IntelliJ (1)
      • 📄 Document (10)
        • Project 설계 (6)
        • Server Migration (3)
      • 📄 책읽기 (2)
        • 시작하세요! 도커 & 쿠버네티스 (2)
      • 🎮 Game (4)
        • Stardew Vally (1)
        • Path of Exile (3)
  • 블로그 메뉴

    • 링크

      • Github
    • 공지사항

    • 인기 글

    • 태그

      Lock #Thread #Concurrency
      GStreamer #Pipeline
      React #Markdown
    • 최근 댓글

    • 최근 글

    • hELLO· Designed By정상우.v4.10.0
    신건우
    JavaScript - Strict Mode & 변수/상수 & 자료형
    상단으로

    티스토리툴바