1. variable 변수

1-1. 변수 할당

코드

let name = 'abc'// name 변수에 'abc' 할당
console.log(name)
name = 'hello'
console.log(name)

• 어플리케이션마다 쓸 수 있는 메모리가 제한적으로 할당됨
  
• name 변수가 가리키고 있는 메모리 어딘가에 abc를 저장함
  • 이 변수가 가리키는 메모리에 다른 값을 넣어 변경할 수 있게 됨
  • 가리키고 있는 포인터를 통해 값을 변경할 수 있음
    -> let은 재할당 가능

결과

2. Block Scope

• block({}) 안에 코드를 작성하게 되면 밖에서는 코드를 볼 수 없음

코드

{
  let name = 'abc' // name 변수에 'abc' 할당
  console.log(name)
  name = 'hello'
  console.log(name)
}
console.log(name)

결과

• block 안에 콘솔은 출력되고, block 밖에 콘솔은 출력되지 않음

3. global scope

• block 밖에서 정의하는 변수 : global scope
• global한 변수는 어플리케이션이 실행 ~ 끝 시간 동안 항상 메모리에 탑재되어 있음
  • 최소한으로 쓰는 것이 좋음
  • class, 함수, if, for에서 쓰는 것이 좋음

코드

let globalName = 'global name'
{
  let name = 'abc' // name 변수에 'abc' 할당
  console.log(name)
  name = 'hello'
  console.log(name)
  console.log(globalName)
}
console.log(globalName)

결과

4. let

• let : Mutable(변경 가능)

4-1. var은 쓰면 안됨

• var는 선언하기 전에 값을 넣을 수 있음
  • let은 오류남 (오류 나는 것이 정상)

코드

// var (don't ever use this!)
console.log(age)
age = 4
console.log(age)
var age

• age를 선언하기 전 값을 대입할 수 있음
  • 처음에 age를 출력하면 오류가 아니라 undefined라고 뜸

결과

let은 var 처럼 할 경우 오류남(정상)

코드

age2 = 4
let age2

결과

• age2를 선언하기 전 값을 대입했다고 오류 뜸
  • 오류 뜨는 것이 정상임

var hoisting

• hoisting
  • 어디에 선언하든 상관 없이 항상 맨 위로 올려줌

var는 block scope이 없음

• block scope을 무시함

코드

// block scope을 무시함
{
  age3 = 4
  var age3
}

console.log(age3)

결과

5. constants

• const 는 가리키는 포인터가 잠겨 있음
  • 값을 선언함과 동시에 할당한 뒤로는 값을 변경 못함
  • Immutable(변경 불가능)
• 값을 할당한 다음 변경되지 않는 데이터들에 사용
  • 보안성
  • 쓰레드를 동시에 변하지 않게
  • 사람의 실수를 방지

6. number

• 숫자는 타입의 크기 상관없이 number 하나면 됨

코드

const count = 17 // integer
const size = 17.1 // decimal number
console.log(`value: ${count}, type: ${typeof count}`)
console.log(`value: ${size}, type: ${typeof size}`)

결과

7. special numeric values

• 특수 숫자 값 : infinity, -infinity, NaN
• 숫자인지 아닌지 확인하지 않고 값을 나눌 경우 에러가 발생하기 때문
  • variable한 값인지 확인해야함

코드

const infinity = 1 / 0
const negativeInfinity = -1 / 0
const nAn = 'not a number' / 2
console.log(infinity)
console.log(negativeInfinity)
console.log(nAn)

• infinity : 정수를 0으로 나눔
• -infinity : 음수를 0으로 나눔
• NaN : 문자를 숫자로 나눔 -> 숫자가 아닌

결과

8. string

• 한 글자든 여러 글자든 string

코드

// string
const char = 'c'
const brendan = 'berendan'
const greeting = 'hello ' + brendan
console.log(`value: ${greeting}, type: ${typeof greeting}`)
const helloBob = `hi ${brendan}!`
console.log(`value: ${helloBob}, type: ${typeof helloBob}`)

결과

9. symbol

• symbol
  • map이나 다른 자료구조에서 고유한 식별자가 필요하거나
  • 동시다발적으로 일어나야하는 코드에서 우선 순위를 주고 싶을 때
  • 고유한 식별자가 주어짐
    • string은 고유한 식별자로 간주됨
    • symbol은 동일한 이름이지만 다른 식별자임

코드

// symbol, create unique identifiers for objects
const symbol1 = Symbol('id')
const symbol2 = Symbol('id')
// 동일한 심볼로 작성해도 고유한 식별자로 주어짐
console.log(symbol1 === symbol2) //false

// 동일한 심볼을 만들고 싶을 때
const gSymbol1 = Symbol.for('id')
const gSymbol2 = Symbol.for('id')
console.log(gSymbol1 === gSymbol2) // true

• Symbol로 동일한 이름을 넣어도 고유한 식별자가 주어짐
• Symbol.for할 경우 다른 식별자가 만들어짐

결과

symbol의 변수를 선언할 때 symbol.description을 써야 함

• 변수를 출력할 때, 변수명만 적을 경우 에러 발생

코드

console.log(`value: ${symbol1}, type: ${typeof symbol1}`)

결과

코드

console.log(
  `value: ${symbol1.description}, type: ${typeof symbol1.description}`
)

결과

10. Dynamic typing

• 변수를 선언할 때 어떤 타입인지 선언하지 않아도 됨
  • runtime 프로그램이 동작할때 어떤 타입인지 할당된 값에 따라 타입이 변경될 수 있음

코드

// Dynamic typing : dynamically typed language
let text = 'hello' // 문자열을 넣으면 string이 됨
console.log(text.charAt(0)) //h
console.log(`value: ${text}, type: ${typeof text}`)
text = 1 // 숫자를 넣으면 문자열에서 number가 됨
console.log(`value: ${text}, type: ${typeof text}`)
text = '7' + 5 // 더하기 연산자 -> 숫자를 감싼 문자열과 숫자를 더하면 문자열로 반환함
console.log(`value: ${text}, type: ${typeof text}`)
text = '7' / '5' // 나누기 연산자 -> 문자열이여도 숫자 나누기 숫자로 반환함
console.log(`value: ${text}, type: ${typeof text}`)
// text가 숫자로 변경돼서 다음은 오류가 발생함
console.log(text.charAt(0))

• 1. text에 hello 문자열을 넣으면 string이 됨
• 2. 똑같은 text에 숫자 1을 넣으면 number가 됨
• 3. text에 문자열 더하기 숫자하면 string이 됨
• 4. text에 문자열 나누기 문자열 하면 number로 됨
• 5. 현재 text는 number 타입이 돼서 text.charAt을 해도 string이 아니기 때문에 에러 발생

결과

* 정리

• variable
  • 변수는 선언되면 변수의 포인터가 메모리를 가리킴
  • 메모리에는 값이 할당되어 있음
• Block Scope
  • {} 을 하면 {} 안에 있는 변수는 {} 밖에서 호출 못 함
• global scope
  • {} 밖에 선언한 변수
  • global scope은 {}의 안에서도 밖에서도 호출 가능
• let
  • 변수 선언 후 호출해야 함
    • 호출 먼저 하면 오류 남
  • var
    • 이건 사용하면 안됨
    • var hosting 때문에 변수를 먼저 호출해도 실행됨
    • hosting : 작성 순서 상관없이 실행되는 것을 먼저 맨 위로 보냄
• constants
  • const는 메모리가 가리키는 포인터를 잠가두기 때문에
  • 한번 값을 할당하면 변경 못함
• number
  • 타입과 크기가 없이 변수에 숫자를 넣으면 number
• special numeric values
  • 숫자 나누기 0을 하면 무한대로
  • 음수 나누기 0을 하면 음수 무한대로
  • 문자를 숫자로 나누면 NaN
• string
  • 문자열이든 문자든 모두 string
• symbol
  • 같은 문자를 할당해도 고유한 주소값을 가짐
  • Symbol.for 하면 동일한 주소값을 가짐
  • symbol을 출력할 때는 symbol.defendency 해야함
• Dynamic typing
  • 어떤 변수에 어떤 값을 할당하느냐에 따라 타입이 바뀜
  • name 이라는 변수에 문자를 넣으면 string
    • 숫자를 넣으면 number
    • '5' + 7 -> '57'이라는 string
    • '10' / 2 -> 5 라는 number

해당 내용은 다음 자료를 참고했습니다.
자바스크립트 3. 데이터타입, data types, let vs var, hoisting | 프론트엔드 개발자 입문편 (JavaScript ES5+)