[JavaScript] 자료형, 변수, 상수 개념 및 사용법

- 개요

안녕하세요. 이번 시간에는 JavaScript에 자료형, 변수, 상수에 대해 알아보겠습니다.

 

프로그래밍언에는 자료형, 변수, 상수가 존재합니다.(없는 언어도 있습니다. :>)

 

하지만 우리가 학습하고자 하는 JavaScript 언어에는 존재합니다. 그렇기 때문에 아주 기초적인 부분을 학습해야 합니다.

 

- 개념

자료형이란 무엇일까요? 자료(데이터), 형(형태)라고 설명할 수 있습니다. "즉 데이터에 형태"라고 생각하시면 됩니다.

 

그럼 어떤 자료형이 있을까요? 자바스크립트에서는 String, Number, BigInt, Boolean, Object, Symbol, null, undefined 타입이 있습니다.

 

이번 시간에는 String, Number, BigInt, Boolean, null, undefined에 대해 설명하겠습니다. (Object, Symbol은 다른 포스팅에 설명하도록 하겠습니다.)

 

기본적으로 우리는 자바스크립트 언어를 어떻게 생각할까요?... (필자는 이런 질문을 왜 할까요??)

 

사실 저는 딱 떠오르는 단어는 타입이 없다. 근데... 사실은 있다... 이런 단어와 문장이 생각이 납니다.

 

여러분은 어떤 단어와 문장이 떠오르나요?. 처음 자바스크립트를 학습하시는 분들은 무슨 (멍) 소리를 하는 거지...?라고 생각하실 겁니다.

 

하지만 다른 언어에 비해 자바스크립트는 변수나 함수를 선언할 때 타입을 설정하지 않습니다. (처음 접하시는 분들은 꼭 기억하세요. :>)

 

- 변수 선언

변수를 선언하는 방식은 var, let, const 키워드가 존재합니다. var는 ES6 이후에는 사용하지 않습니다. (사용할 수 있지만... 비추합니다.)

 

ES6에는 let과 const 키워드와 다양한 기능이 추가됐습니다. 저는 let과 const에 대해 설명하겠습니다.

 

let 키워드는 변수를 선언할 때 사용합니다. 

 

변수? 변수란 무엇일까요?? "변하는 수, 변할 수 있는 수"라고 생각하시면 됩니다. 즉 데이터가 동적으로 변경될 수 있다고 생각하시면 됩니다.

 

그럼 상수는 무엇일까요? 상수란 "변할 수 없는 수"라고 생각하시면 됩니다. 고정적인 값을 선언할 때 사용됩니다.

 

선언 방법

 const name = "Ryan" // 상수
 let age = 15 // 변수

 console.log(name)
 console.log(age)

 age = 25 // 변수에 값을 변경 하고 싶으면 let 키워드를 제외하고 값을 할당하면 됩니다. (변수 = 값)
 console.log(age)

/**
 * - 실행 결과 -
 * Ryan
 * 15
 * 25
 */

 

let으로 선언한 값은 변경이 가능합니다. 그럼 const는 정말 안될까요?... ㅋㅋ (인간은 증명하고 싶은 욕구가 있어요...)

 

 const name = "Ryan" // 상수
 let age = 15 // 변수

 console.log(name)
 console.log(age)

 age = 25 // 변수에 값을 변경 하고 싶으면 let 키워드를 제외하고 값을 할당하면 됩니다. (변수 = 값)
 console.log(age)

 name = "Apeach"
 console.log(name)

 /**
  * - 실행 결과 -
  * Ryan
  * 15
  * 25
  *
  * name = "Apeach"
  *     ^
  *  TypeError: Assignment to constant variable.
  *     at Variable (/Users/sinhangug/ryan/dev/language/javascript.js:15:8)
  *     at Object.<anonymous> (/Users/sinhangug/ryan/dev/language/javascript.js:26:1)
  *     at Module._compile (internal/modules/cjs/loader.js:1085:14)
  *     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
  *     at Module.load (internal/modules/cjs/loader.js:950:32)
  *     at Function.Module._load (internal/modules/cjs/loader.js:790:12)
  *     at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
  *     at internal/main/run_main_module.js:17:47
  */

Error가 발생하는 걸 알 수 있습니다. Error 내용은 무엇일까요 "TypeError: Assignment to constant variable."

 

상수 값에 새로운 값을 할당하려고 했기 때문에 발생한 에러입니다. (const는 상수입니다!.)

 

- 다양한 변수 사용법

String 문자형

문자형을 선언하는 방법에는 3가지가 있습니다.

1. 쌍 따옴표("")
2. 작은따옴표('')
3. 백틱(``)

  const name1 = "Ryan" // 쌍 따옴표
  const name2 = "Ryan" // 작은 따옴표
  const name3 = `Ryan` // 백틱

  console.log(name1)
  console.log(name2)
  console.log(name3)

  const age = 25
  // 백틱은 문자열 안에 변수를 혼합해서 사용이 가능하다.
  const getName = `Ryan에 나이는 ${age}살 입니다.`

  console.log(getName)

  /**
   * - 실행 결과 -
   * Ryan
   * Ryan
   * Ryan
   * Ryan에 나이는 25살 입니다.
   */

 

Number 숫자형

숫자형을 선언하는 방법은 문자열과 다르게 일반 숫자 값을 선언하면 됩니다.

 

그리고 숫자형은 사칙연산이 가능합니다. (더하기, 빼기, 나누기, 곱하기, 나머지)

 

  const one = 1
  const two = 2

  const plus = one + two // 더하기
  const minus = one - two // 빼기
  const multiplication = one * two // 곱하기
  const division = one / two // 나누기
  const percentage = one % two // 퍼센트

  console.log(plus)
  console.log(minus)
  console.log(multiplication)
  console.log(division)
  console.log(percentage)

  /**
   * - 실행 결과 -
   * 3
   * -1
   * 2
   * 0.5
   * 1
   */

숫자형에서 사칙연산을 할 때 조심해야 하는 상황이 발생합니다.

 

첫 번째로 문자형과 숫자형을 + 하게 되면 합쳐집니다. (사실 두 문자열을 합칠 때도 사용됩니다.)

두 번째로 빼기, 곱하기, 나누기를 하게 되면 NaN(Not a Number)을 반환합니다. (숫자가 아니라는 뜻입니다.)

 

  const one = 1
  const two = 2
  
  const name = "Ryan"
  // + 를 하면 사칙연산이 되지않고 문자열과 숫자를 합친다.
  const name1 = name + one
  console.log(name1)

  // 하지만 - * / 연산자를 사용하면 NaN = Not a Number 상태가 나타난다.
  const name2 = name - one
  console.log(name2)

  /**
   * - 실행 결과 -
   * Ryan1
   * NaN
   */

BigInt는 Number 형태에 값을 초월했을 때 사용합니다. (보통은 잘 사용하지 않습니다. 큰 연산이 없거든요...)

 

Boolean 논리형

논리형 자료형은 참과 거짓을 표현합니다. (true 또는 false)

  const bol = true
  const bol2 = false

  console.log(bol)
  console.log(bol2)

  const one = 1
  const two = 2

  console.log("비교 결과")
  console.log(one === two)

  /**
   * - 실행결과 -
   * true
   * false
   * 
   * 비교 결과
   * false
   */

 

null & undefined

마지막으로 null과 undefined에 대해 설명하겠습니다.

 

null은 변수에 null을 할당하면 됩니다. (왜 null을 할당하는 거지?...) 실제 프로그래밍을 하다 보면 우리가 의도적으로 null을 선언하는 경우도 있지만 다양한 API 결과 값을 받아 처리할 때 값이 없어 null을 발생하는 상황도 있습니다.

 

그럼 undefined는 무엇일까요?

 

undefined는 변수를 선언했지만 값을 할당하지 않았을 때 발생합니다.

 

  let undifi //아무 값도 할당하지 않으면 undefined
  const nullObj = null // null 할당하면 null -> null은 사실 object 형태

  console.log(undifi)
  console.log(nullObj)

  /**
   * - 실행 결과 -
   * undefined
   * null
   */

 

만약 let이 아닌 const로 선언했다면 아래와 같은 에러가 발생한다.

const undifi; //아무 값도 할당하지 않으면 undefined
      ^^^^^^

SyntaxError: Missing initializer in const declaration
    at wrapSafe (internal/modules/cjs/loader.js:1001:16)
    at Module._compile (internal/modules/cjs/loader.js:1049:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
    at internal/main/run_main_module.js:17:47

이 부분을 꼭 명시해서 사용해합니다.

 

typeof 타입 확인

자바스크립트는 타입을 지정하지 않았기 때문에 실제 프로그래밍을 하다 보면 불편하다고 느낄 수 있다. 하지만 반대로 적응하면 또 편하다.

 

자바스크립트에서는 내가 선언한 변수에 타입이 무엇인지 확인할 수 있게 해주는 기능이 있다 그게 바로 typeof이다.

 

null과 Array는 자료형이 object이다.(참고)

  const name = "Ryan"
  const age = 15
  const success = true
  let undefi
  const obj = {}

  console.log(typeof name)
  console.log(typeof age)
  console.log(typeof success)
  console.log(typeof undefi)
  console.log(typeof obj)

  /**
   * string
   * number
   * boolean
   * undefined
   * object
   */

 

이번 시간에는 자바스크립트에 자료형, 변수, 상수에 대해 알아봤습니다. 

 

이해가 안 가시는 분들은 댓글을 통해 질문 해주시면 감사하겠습니다. :)