[JavaScript] 기본개념 03

해당 벨로그는 드림코딩의 자바스크립트 기초 강의 (ES5+) 3강을 보고 작성한 글입니다.

3강은 데이터타입, data types, let vs var, hoisting 등에 대해서 배운다.

Variable

ES6 에 추가된 개념 let

let name = “ellie” → name 변수를 선언한후, ellie 라는 값을 name 에 할당함

name = “hello” → name 변수에 hello 라는 값을 재할당함

어플리케이션을 실행하면, 어플리케이션마다 쓸 수 있는 메모리가 할당된다.

메모리는 텅텅 비어져 있는 박스라고 생각하면된다. 어플리케이션마다 사용할 수 있는 박스들의 개수가 제한적으로 할당된다.

let name → let 이라는 키워드를 이용해서 name 이라는 변수를 정의하게 되면, 1개의 박스를 가르키게 되는 포인터가 생성된다.

name 이라는 변수가 가르키는 메모리 어딘가에 ellie 라는 값을 저장할 수 있다.

name 변수가 가르키고 있는 메모리에 다른 값을 넣어 저장할 수 있다.

Block scope

중괄호{} 를 이용해서 코드를 블럭 안에 작성하게 되면, 블럭(Block scope) 밖에서 블럭 안에 있는 코드를 볼 수 없다.

블럭 밖에서 console.log(name) 을 작성해 결과를 확인하면, 아무 값도 출력되지 않음을 확인할 수 있다.

• 전역 변수(global scope) - 블럭을 사용하지 않고 파일 내부에 바로 정의해서 사용하는 변수를 전역 변수(global scope) 라고 부른다. 전역 변수는 어느 곳에서나 접근이 가능하다. 블럭 밖에서 블럭 안의 전역 변수가 보인다.
• 전역 변수는 어플리케이션이 실행된 순간부터, 끝날때까지 항상 메모리에 탑재되어 있다. 그래서 전역 변수를 최소한으로 사용하는 것이 좋다.

자바스크립트에서 변수를 선언할 수 있는 키워드는 let 하나뿐이다.

ES6 전에는 변수 선언시 var 라는 키워드를 사용했지만, 현재는 거의 사용되지 않는다.

Mutable Data (변수) → var & let

• var
  • 변수 선언 전에 값을 할당할 수 있다. → var hoisting
    • var hoisting → 어디에 선언되었는지 상관없이, 항상 제일 위로 선언을 끌어올린다.
    • hoisting 의 의미는 끌어올려주다 라는 의미
  • 값을 할당하기 전에 변수를 출력할 수 있다. → undefined 출력됨
    • undefined → ‘변수는 정해져 있지만, 값이 아직 할당되지 않았다.’ 는 의미
  • var 는 block scope 가 없다.
    • var 는 block 을 철저히 무시하는 속성을 가지고 있다.
    • 변수 age 를 block scope 에 선언했음에도 불구하고, 블럭 밖에서 age 를 부를 수 있다.

• let
  • let 을 이용해 변수를 선언하기 전에 값을 할당하면 안된다.
  • 변수를 위해서 var 대신 let 키워드를 사용해야 한다.

Immutable Data, Constant (상수) → const

• constants 는 값을 한번 할당하면 절대 값이 바뀌지 않는다.
• constant의 선언된 변수는 가르키고 있는 포인터가 잠겨 있다.
• 그래서 constant 변수를 선언하고 값을 할당한 이후에 절대 값을 바꿀 수 없다.
• constant 는 immutable 데이터 타입이고, (let,var) 는 mutable 데이터 타입으로 나눈다.
• 개발자들은 웬만하면 값을 할당한 다음에 다시는 변경되지 않는 데이터 타입을 주로 사용하라고 추천하고 있다.
• immutable 데이터 사용을 권장하는 이유
  • 보안상 이유 → 한번 값을 할당하면 값을 변경할 수 없기 때문에 보안적으로 안전하다.
  • thread 안전성 → 어플리케이션이 실행되면, 한가지 프로세스가 할당되고, 그 프로세스 안에는 여러 thread 들이 동시에 돌아가 어플리케이션을 좀 더 효율적으로 동작가능하게 한다. 다양한 thread 들이 동시에 1개의 변수에 접근해서 값을 변경할 수 있는 것이 가능한데, 이 점은 보안상 위험할 수 있기 때문에 가능한 한 immutable 데이터 사용을 권장하는 것이다.
  • 실수 방지 → 고정된 값으로 개발해야 실수와 오류를 줄일 수 있다.

Variable types

자바스크립트 데이터 타입에는 어떤 것들이 있는지 알아보자.

어떤 프로그래밍 언어든 primitive 타입과 object 타입 2가지로 변수가 나뉜다.

• primitive, single item → 더 이상 작은 단위로 나눠질 수 없는 1가지 아이템을 말한다.
  • number, string, bollean, null, undefined, symbol
• object, box container → 여러 아이템을 묶어서 한 단위(box) 로 관리할 수 있는 것을 object 라고 한다.
• function → (first-class function) function 도 다른 데이터 타입처럼 변수에 할당이 가능하다. 또 그렇기 때문에 함수의 인자(파라미터)로 전달이 되고, 리턴 타입으로도 함수가 리턴되는 것이 가능하다.

primitive 타입

Number

• 타입스크립트에서 number 사용하는 것 빼고는 , 자바스크립트에선 따로 number 를 명시하지 않는다.
• 자바스크립트는 정수나 실수에 관계없이 number 타입으로 할당된다.
• 자바스크립트에서 연산할 때 값이 타당한지 확인한 후에 연산을 하는 것이 좋다.
• 최근에 bigInt 라는 타입이 추가되었다. 숫자 끝에 n 을 붙이면 bigInt 로 인식한다.

String

• 자바스크립트에서는 하나의 문자든 문자열이든 다 string 타입으로 인식한다.
• 플러스(+) 기호를 통해 문자열끼리 붙일 수 있다.
• template literals (string) → 백틱(`) 과 ${} 기호를 이용하면, 변수의 값이 자동적으로 붙여져 나온다.

Boolean

• true / false
• false : 0, null, undefined, NaN, ‘’
• true : any other value

Null & Undefined

• Null → 텅텅 비어있는 empty 값. 아무것도 아님.
• Undefined → 선언은 되었지만 값이 지정되어 있지 않음. 텅텅 비었는지 값이 지정되어 있는지 정해지지 않는 상태.

Symbol

자료구조에서 고유한 식별자가 필요하거나 혹은 동시다발적으로 일어날 수 있는 코드에서 우선순위를 주고 싶을 때 사용되는 키워드이다.

간혹 식별자를 string 을 이용하는 경우가 있다. string 은 다른 모듈이나 파일에서 동일한 string 을 썼을 때 동일한 식별자로 간주된다.

• 반대로 symbol 은 동일한 id 를 이용해 symbol 을 만들었지만, 2가지의 심볼은 다른 경우이다.
• symbol 은 동일한 id(string) 를 이용해 symbol 을 만들었어도, 다른 심볼로 만들어지기 때문에 주어지는 string 에 상관없이 고유한 식별자를 만들때 사용된다.
• string 이 똑같은 동일한 심볼을 만들고 싶을 때는 for() 을 사용하면 된다. → 주어진 심볼에 맞는 스트링을 만들어준다.
• 심볼은 그대로 출력하면 에러가 난다. → symbol.description 을 사용하면 결과 볼 수 있다.

Object 타입

우리가 일상에서 볼 수 있는 물건과 물체들을 대표할 수 있는 박스 형태를 말한다.

그냥 변수 age 는 아무것도 설명이 되지 않지만, ellie 라는 object 를 만들어서 ellie 의 이름은 ellie 고 나이는 20살 이다. 라고 말할 수 있다.

현재 ellie 는 const 로 선언되어서, 한번 할당된 오브젝트는 다시는 다른 오브젝트로 변경이 불가하다.

ellie 는 const 로 정의되어서 ellie 가 가르키고 있는 메모리의 포인터는 잠겨있어, 다른 오브젝트로 할당이 불가능하다.

ellie 오브젝트 내부의 name, age 라는 변수들이 존재한다. 이 변수들은 다른 값들로 할당이 가능하다.

Dynamic typing

• C 나 Java 는변수를 선언할 때 어떤 타입인지 결정해서 타입을 같이 선언하는 Statically typed language (정적 타입 언어) 이다. → 컴파일 시 변수의 타입이 결정됨
• 자바스크립트는 dynamically typed language (동적 타입 언어) 라고 부른다. → 런타임 시 변수의 타입이 결정됨. 선언 시 어떤 타입인지 선언하지 않고, 프로그램이 동작할 때(런타임) 할당된 값에 따라서 타입이 변경됨.
• dynamically typed language (동적 타입 언어) 는 좋은 아이디어가 있을 때, 유연하게 사용할 수 있는 언어이다.

문자열 7 과 플러스(+) 가 있으니까, 숫자 5 를 string 으로 변환해서 문자열끼리 합해지는 결과를 확인할 수 있다.

string 끼리 나누면 숫자들을 나누는 나누기(/) 연산이라고 인식한다. ‘’ 안에 있는 것이 실제로 숫자임을 인식해서 숫자끼리 나누기 연산을 수행한다.

• 자바스크립트는 런타임에서 타입이 정해지기 때문에, 이 것 관련해 에러가 발생하는 경우가 굉장히 많다.
• dynamically typed language (동적 타입 언어) 의 이 오류가 너무 많아서 typescript 가 등장했다.
• 타입스크립트는 자바스크립트 위에 타입이 더 올려진 언어이다.

<정리>

• variable (let) → rw(read/write) variable 은 메모리를 쓰고 읽는 것이 가능하다. let name 에 ellie 라고 값을 할당한 다음에 hello 로 값을 변경가능한 것이 variable 은 메모리에 읽고 쓰기가 가능하기 때문이다.
  

• constant (const) → r(read only)

  

  const 를 선언해서 값을 할당한 뒤에는 자물쇠가 생겨버려서 읽기만 가능하고, 다시 다른 값을 쓰는 것이 불가능하다.

변수의 값이 바뀌어야 할 이유가 딱히 없다면 웬만해서는 const 를 사용하는 것을 권장한다.

메모리가 저장되는 방식은 primitive, object 2가지 방식이 존재한다.

primitive 타입, object 타입 인지에 따라서 메모리에 값이 다른 방식으로 저장된다.

primitive 타입 → 값 자체가 메모리에 저장된다.

object 타입 → 데이터가 너무 커서 메모리에 한번에 다 올라갈 수 없다.

그래서 const ellie 라고 선언한 후에 object 를 할당하면, ellie 가 가르키는 곳에는 reference 가 있다. reference 는 실제 오브젝트를 가르키고 있는 곳이다. reference 를 통해서 실제로 오브젝트가 담겨있는 메모리를 가르키게 된다.

const ellie 라고 선언하면 ellie 가 가르키고 있는 포인터만 잠겨서 ellie 가 다른 오브젝트를 가르키는 변경이 불가능하지만, ellie 의 이름과 나이는 계속 변경이 가능하다.

⇒ primitive 타입은 value 로 값이 저장되고, object 타입은 object 을 가르키는 reference 가 메모리에 저장된다.

데이터 타입에는 immutable data types , mutable data types 2가지가 있다.

immutable data types 에는 data 자체를 절대 변경하지 못한다. primitive types 같은 경우, 한번 ellie 라는 string 을 정의하게 되면 ellie 를 통째로 메모리에 올렸다가 다른 string 으로 변경이 가능하다. 하지만, ellie 라는 string 자체를 i 를 빼고 다른 문자로 바꾸거나 데이터 자체를 변경하는 것은 불가능하다.

그리고 오브젝트 중에서도 꽁꽁 얼어있는 오브젝트가 있다. 이런 오브젝트로 변경이 불가능하기 때문에 이런 데이터들을 immutable data types 라고 한다.

mutable data types 은 변경이 가능한 데이터 타입이다. 이 타입은 자바스크립트의 모든 오브젝트들이 mutable data types 에 속한다.

ellie 라는 오브젝트를 선언하고 나서 그 안에 있는 이름이나 나이를 변경할 수 있다. 그래서 오브젝트는 계속 스스로 변경이 가능하다. 자바스크립트에는 모든 오브젝트들이 기본적으로 변경가능하다.

예를 들면, 자바스크립트에서 배열은 mutable data types 에 속한다. 가끔 배열은 immutable data types, mutable data types 2가지가 따로 분리되어 데이터 타입이 존재하기도 한다.