자바스크립트(JS) 변수, 상수, 자료형

이번 글에서는 코딩의 가장 기본이 되는 변수와 상수에 대해서 알아보겠습니다.

• 변수란?
  변수의 정의는 데이터를 저장하기 위해 이름을 할당 받은 메모리 공간입니다.
  이렇게 말하면 상당히 어렵게 생각이 들 겁니다. 그래서 한 가지 예를 들어서 설명 해드릴게요.
  우리가 요리를 할 때 여러가지 재료를 준비하게 됩니다. 제육볶음을 만들고 싶으면 돼지고기, 파, 양파, 마늘, 간장 등 많은 재료가 필요하죠. 하지만 이 많은 재료를 한 군데 모아놓고 사용하려면 공간도 더러워지고 정리가 안됩니다.
  그럼 만약 이 과정에서 각 재료를 담아놓는 바구니가 있다면 어떨까요? 각 바구니에 재료들을 구분하여 담아놓으면 사용하기 편할 겁니다. 
  즉, 변수는 이 바구니와 유사하다고 생각할 수 있습니다. 변수라는 바구니에 데이터(숫자, 문자 등)라는 사용할 재료를 담아 놓는 것 입니다. 그리고 데이터라고 말하긴 했지만 변수에 들어가는 값은 변수 값이라고 통칭되어 불립니다.
  이 변수 값은 항상 바뀔 수 있습니다. 사용자가 설정하는 값에 따라 바뀌게 되는 것이죠.
  - 변수 선언 규칙
    우리가 변수를 사용하기 위해선 변수 선언이라는 것을 해주어야 합니다. 이 규칙은 크게 3가지로 나뉩니다.
  
     1. 이름은 의미있게 짓는다.
         - 이름을 의미 있게 짓는다 라고 하면 어느정도 감이 오시는 분들도 있으실 겁니다.
           예를 들어 이름과 나이를 출력해주는 소스가 있다고 생각해 봅시다.
           그러면 이름과 나이를 의미하는 변수를 선언해주어야 합니다. 하지만 이름 변수를 A, 나이 변수를 B라고 선언을
           하면 나중에 그 코드를 다시 보았을 때 A와 B라는 변수가 무엇을 의미하는지 정확히 알 수 없습니다.
           실무에서도 협업이 대부분이기 때문에 항상 다른 사람이 사용할 때도 바로 알아 볼 수 있도록 의미있게 지어줘야
           합니다.
  
     2. 여러 단어를 연결한 변수 이름은 대소문자를 활용한다. (낙타 표기법)
        - 여러 단어를 이을 때는 1번째 단어는 소문자, 2번째 단어는 대문자를 사용하는 방법을 사용합니다.
          예를 들어 birthDay, NowTime 과 같은 느낌으로 말이죠.
          대소문자 사용이 불편하다면 _(밑줄)을 사용하는 방법도 있습니다.
          이 방법도 예를 들면 birth_day, now_time 과 같이 나타낼 수 있습니다.
  
     3. 선언할 수 없는 이름도 있다.
        - 변수를 선언 할 때는 반드시 첫 글자를 문자, _(밑줄), $(달러 기호) 이 3가지 중에 하나를 사용해야 합니다.
          만약 첫 글자를 숫자, .(온점), # 과 같은 규칙에 맞지 않는 것을 사용할 경우 코드에서 오류가 발생하게 됩니다.
  
  
• 상수란?
  상수의 정의는 변하지 않고, 항상 일정한 값을 갖는 수 입니다.
  제가 위에서 변수는 사용자가 설정하는 값에 따라 값이 항상 바뀔 수 있다고 언급했습니다. 하지만 상수는 이 점에서 다릅니다. 상수는 불변(변하지 않는) 값입니다.
  
  이 또한 예를 들어 설명 해드릴게요.
  아래와 같은 코드가 있다고 생각해봅시다.

var age;
var X = 22
age = X + 1

여기서 age와 X라는 변수를 선언하였습니다. age에는 값을 할당 하지 않고 X에는 22라는 값을 할당 해주었습니다.
age = X + 1이라는 식은 X 값에 +1을 하여 age 변수에 삽입하는 명령을 실행 합니다. 그럼 당연히 age에는 23이라는 값이 들어가게 됩니다.
여기서 이렇게 생각할 수 있을 겁니다. "그럼 도대체 상수가 뭔데???" 이 질문에 대한 답은 이미 나와있습니다. 1이라는 값이죠. 제가 위에서 언급 한 것 처럼 상수는 변하지 않는 값이라고 했습니다. 우리가 age = X + 1을 계산할 때 1이라는 값이 변할까요? 절대 바뀌지 않습니다. 프로그래머가 1이라는 값을 다른 값으로 바꾸지 않는 이상 1은 1이라는 값을 코드의 시작과 끝까지 계속 유지 됩니다. 상수는 이러한 코드의 시작부터 끝까지 변하지 않는 값을 의미합니다.

• 자료형
  자료형의 정의는 컴퓨터가 처리하는 자료의 형태입니다.
  위에서 제가 변수를 선언하고 변수 값(자원)을 할당한다고 언급했었습니다. 하지만 자료에도 여러 가지 종류가 있죠?
  숫자(정수, 실수)도 있고 문자도 있습니다. 이렇게 변수의 자료형을 정해주어야 컴퓨터가 그 자료형에 맞게 처리를 할 수 있습니다.
  
  자료형의 종류
  기본형 - number : 숫자를 나타내는 자료형
              - string : 문자열을 나타내는 자료형(' ', " " 사용)
              - boolean : True, False (참과 거짓)을 나타내는 자료형
              - undefined : 자료형을 지정하지 않았을 때 값
              - null : 값이 유효하지 않을 때
  복합형 - array : 하나의 변수에 여러 값을 저장할 수 있는 자료형
              - object : 함수 + 속성
  
  저번 글에서는 undefined, null에 대해서만 언급을 했습니다. 이러한 자료형에 대해서 말씀 드릴게요.
  이에 앞서 먼저 알려드릴 것이 있습니다. typeof를 사용하면 해당 자료형을 알려줍니다. 이를 사용해서 알아볼게요.
  - number
    위에 적어놓은 것과 같이 숫자를 나타내는 자료형 입니다.
    하지만 여기서 한 가지 의아한 점이 생길 수 있습니다. 다른 언어를 써보신 분이라면 눈치 채셨겠지만 아래를 보시면
    정수와 실수의 자료형을 따로 쓰는 것이 아닌 number로 숫자들을 나타냅니다. 예를 들어 C언어에서는 정수는 int,
    실수는 double(float)로 자료형이 나눠집니다. 하지만 자바스크립트에서는 숫자를 통틀어 number라는 자료형으로
    사용합니다.

number 자료형

       - string

         string은 문자열을 나타내는 자료형 입니다.
         자바스크립트에서는 문자열을 나타내는 자료형으로 string을 사용합니다. 마찬가지로 C언어와 비교해서 설명드리면
         C언어에서는 문자열을 나타내는 자료형으로 char을 사용합니다.
         하지만 자바스크립트에서는 string을 사용하니 잘 기억해두세요.

string 자료형

       - boolean
         boolean은 참과 거짓을 구분하여 true or false를 판단하는 자료형 입니다.
         아래와 같이 year 변수에 2023이라는 값을 할당하고 2020과 비교 해봅시다.
         2023이 2020보다 크므로 true, 2020보다 작지 않으므로 false가 출력됩니다. 이 true false의 자료형을 확인하니
         boolean이 출력되는 것을 알 수 있습니다.

boolean 자료형

       - undefined, null
        undefined
         undefined는 자료형이 정의되지 않았을 때의 상태를 말합니다.
         아래의 글에서 언급을 했다 싶이 결과 값을 표시하는데 특별히 표시할 결과 값이 없을 경우 나타납니다.
         null은 처음에 할당된 값이 더이상 유효하지 않음을 의미합니다.
         즉 기존 값이 5라고 지정 되어도 null로 변경 시 5라는 기존 값은 더 이상 유효하지 않기 때문에 null이 출력됩니다.
         이러한 특성 때문에 변수를 초기화 할 때 null을 사용하게 됩니다.
         - array
         array는 배열이라는 뜻으로 한 변수 안에 같은 자료형의 다른 값을 가지고 있는 자료를 넣을 수 있습니다.
         자 이렇게 말하면 어려울 수 있으니 이렇게 생각해볼까요?
         아까 변수는 바구니와 같다고 했습니다. 하지만 그 공간을 사용자가 원하는 만큼 나누어서 값을 넣으면 어떨까요?
         아래와 같이 변수의 공간을 나누어 같은 자료형의 다른 값들을 저장할 수 있습니다.
         * 배열은 [ ](대괄호)를 사용하여 선언합니다.

array(배열)

          그리고 배열은 아래와 같이 특정 순서에 있는 값을 추출해올 수 있습니다.
          배열은 인덱스(목차)구조를 가지고 1부터가 아닌 0부터의 순서를 가집니다.
          그러므로 아래는 0 = 빨강, 1 = 파랑, 2 = 주황, 3 = 보라, 4 = 초록 이 순서로 저장이 되는 것입니다.

배열에서 값 추출하기

         추가적으로 자바스크립트는 다른 언어와 다르게 배열에 문자열, 숫자 같이 서로 다른 자료형도 한 배열에 저장할 수
         있습니다.
         

서로 다른 자료형 배열에 저장

         - object(객체)
         객체는 지금까지 사용한 방법들과 다릅니다. 객체는 키와 값을 콜론(:)으로 짝 짓는 구조입니다.
         아래 소스에서 키는 firstName이며 T가 값이 됩니다. 이 둘을 콜론(:)으로 짝 지어줬습니다.
         이와 같이 선언해야 하며 선언할 때는 { } 중괄호로 묶어주어야 합니다.

object 구조

• 자료형에 대한 주의 사항
  자바스크립트는 C언어와 Java등 과 달리 미리 변수를 지정하지 않습니다. 선언할 때 var로 선언하게 됩니다.
  이러한 구조 때문에 의도한 값이 정확히 들어갔는지 알려주지 않기 때문에 그 값을 정확히 체크해주셔야 합니다.