HyunHo's blog

JavaScript Review 👀 - 2화

JavaScript Review 👀 - 2화

변수와 원시 타입을 알아보자

최현호's photo
최현호
·

3 min read

Table of contents

먼저 변수가 저장되는 메모리에 대해 알아봅시다.

메모리(Memory)

프로그래밍은 컴퓨터 위에서 동작 합니다.

컴퓨터를 구성하는 요소 중 3가지만 살펴보면

  • 하드 디스크 : 파일이나 애플리케이션을 저장하는 저장 장치

  • CPU : 저장 장치에서 데이터를 연산해주는 장치

  • 메모리 : 데이터를 빠르게 읽고 사용하기 위한 장소

그 중 사용자의 동작을 처리하기 위해서는 메모리 상에 데이터를 보관하고 읽고 사용 합니다.

메모리는 메모리 셀이라는 각각의 칸이 연속으로 이루어져 있습니다.

memory

  • 메모리 셀은 1byte(8bit) 로 만들어져 있습니다.

변수(Variable)

그 전에, 애플리케이션을 실행하면 크게 3 가지 동작을 하게 됩니다.

  1. 입력(input) 을 받아서 - 마우스, 키보드 등

  2. 필요한 데이터를 처리(process) 한 후 - 코드의 로직으로

  3. 출력(output) 합니다. - 모니터, 저장소에 저장, 네트워크 통신 등

그 중 처리 과정을 하기 위해서는 데이터를 보관하기 위한 변수가 필요 합니다.

즉, 변수는

  • 값을 저장하는 공간

  • 자료를 저장할 수 있는 이름이 주어진 장소

자바스크립트에서는 변수 선언을 위해 let 을 주로 사용 합니다.

let a; // 변수 선언

let a = 1; // 변수 선언과 값의 할당

a = 2; // 값의 재할당

let 으로 변수를 선언하면 발생하는 과정

let a = 1 변수를 선언하고 할당하면

  1. 메모리 어딘가 1이라는 데이터가 메모리 셀에 저장되어 있습니다.

  2. 메모리는 각 메모리 셀 마다 해당하는 메모리 주소를 가지고 있습니다.(맨 위 그림 참고)

  3. 그리고 a 라는 변수명은 메모리 주소를 가르키고 있는 것 입니다.

a 는 변수 이름 또는 식별자라고 부릅니다.

메모리 주소를 변수 이름으로 사용하지 않는 이유는 기억하기 어렵고 데이터 유추가 쉽지 않습니다.

변수 이름을 잘 지어보자

변수에 어떤 값 이 들어 있는지 잘 나타낼 수 있게 의미있는 이름을 짓는게 좋습니다.

✅ 변수 이름으로 사용 가능

  • 0-9, a-z, A-Z

  • 언더바(_)

  • 대소문자 구분

  • 영어를 사용

  • 자바스크립트에서는 카멜 케이스를 주로 사용

let appleBanana; // 카멜 케이스

⚠️ 변수 이름을 사용 할 수 없는 것

let for; // ❌
let if; // ❌

  • 숫자로 시작 ❌

  • 특수문자 ❌ (_, $ 는 예외)

let 12a; // ❌
let &&;  // ❌

변수가 담을 수 있는 데이터 타입

자바스크립트는 두 가지의 데이터 타입으로 나뉩니다.

  1. 원시 타입
  • 단일 데이터(number, string, boolean, null, undefined, symbol)
  1. 객체 타입
  • object(원시타입이 아닌 모든 것을 객체 타입이라고 볼 수 있습니다.), function

number 타입

자바스크립트에서는 다른 언어처럼 선언이 까다롭지 않고 숫자만 대입하면 됩니다.

let int = 223; // 정수
let negative = -223; // 음수
let double = 22.3 // 실수
let binary = 0b1212121 // 2진수
let octal = 0o1223; // 8진수
let hex = 0x7b; // 16진수

⚠️ 예외 상황

console.log(0 / 2); // 0
console.log(2 / 0); // Infinity
console.log(2 / -0); // -Infinity
console.log(2 / "hi"); // NaN(Not a Number)

string

문자열을 나타낼 때는 '' , "", `` 를 사용합니다.

let myName = "";

myName = "hello";
console.log(myName); // hello

myName = "'hello'";
console.log(myName); // 'hello'

boolean

참과 거짓, 두 가지만 있습니다.

  • !! 를 값 앞에 붙이면 값을 true, false 로 변환 할 수 있습니다.
let a = true;
let b = false;


// Falshy
console.log(!!0)
console.log(!!-0)
console.log(!!")
console.log(!!undefined)
console.log(!!null)
console.log(!!NaN)


// Truthy
console.log(!!1)
console.log(!!-1)
console.log(!!'hello')
console.log(!!{})
console.log(!!Infinity)

null & undefined

비슷한듯 다른 두 타입 입니다.

  • 변수를 선언하고 초기화 하지 않은 경우에는 undefined

  • null 로 명시적으로 할당하면 변수는 비어있다는걸 의미 합니다.

let apple;
console.log(apple); // undefined

apple = null;
console.log(apple); // null

typeof 를 통해 더 살펴보면

console.log(typeof null); // object
console.log(typeof undefined); // undefined

객체 타입은 다음 포스팅에서 정리하겠습니다.

JavaScript