자바스크립트 자료형 데이터타입

2022.04.20

JS 타입 (자료형 Data Type)

---

원시형과 참조형
데이터의 불변성으로 구분
원시형이 할당될 때에는 변수에 값(value) 자체가 담긴다
참조형이 할당될 때는 보관함의 주소(reference)가 담긴다

원시자료형(Primitive data type)

• 문자(String)
• 숫자(Number)
• 불린(Boolean)
• 심볼(Symbol)
• null
• undefined
• Bigint

참조자료형(Reference data type)

• 객체(object)
• 배열(array)
• 함수(function)

문자(String)

'Hello'
"Hello"
`Hello` //보간법. 어떤 데이터를 중간에 끼워넣을때 ${}
const abc = 'ABC'
console.log(`Hello ${abc}`) // Hello ABC

const abc = 'ABC'
변수=그릇. 특정한 메모리를 참조하는 이름. 메모리주소

숫자(Number)

NaN(Not a Number): 수치 연산을 해서 정상적인 값을 얻지 못할 때 출력되는 값

const a = 1
const b = undefined
console.log(a * b) //NaN 
console.log(typeof(a * b)) //number

불린(Boolean)

true
false

null

값은 있지만 없다고 명시적으로 써주는것
null로(값이)할당된 상태. 즉 자료형이 정해진(defined)상태
존재하지 않는, 비어 있는, 알 수 없는 값을 _명시적_으로 나타냄

undefined

암시적으로 아무것도 없을 의미
어떠한 값으로도 할당되지 않아 자료형이 정해지지(undefined)않은 상태
값이 할당되지 않은 상태를 _암시적_으로 나타냄

null == undefined가 ture로 나오는 이유

자바스크립트 ==(동등연산자)의 자동 형변환 기능때문에
자바스크립트 ===(일치연산자)를 사용하면 결과가 다르게 나오는걸 확인가능. 일치연산자는 메모리주소로 비교함

console.log(null == undefined) // true
console.log(null === undefined) // false
console.log(1 == '1') // true
console.log(1 === '1') // false

심볼(Symbol)

유일한 식별자(ID) 데이터 이름을 만들때 사용

const a = Symbol('Hello') // 설명
const b = Symbol('Hello') // 설명
console.log(a == b) //false
// 객체 리터럴 {} 을 사용해 객체를 만든 경우, 대괄호를 사용해 심볼형 키를 만들어야 함
const user = {
    name: 'Sunny',
      [a]: 123
}

BigInt

제약 없이 정수를 다룰 수 있게 해주는 정수

console.log(123n) // 뒤에 n
console.log(1n + 2n) // 3n

console.log(Number(1n + 2n)) //3

배열

대괄호[]안에 자료형들이 들어갈 수 있음

const a = [1, '2', 3, {}, () => {}]
배열은 0부터 시작. index번호라 부르며 index번호로 조회하는걸 indexing(인덱싱)이라 부름
console.log(a[3]) // {}
// 리터럴 방식: 기호를 통해서(배열, 객체, 문자)데이터를 생성하는 것
const a = new Array ('apple', 'banana', 'cherry' )
const a = ['apple', 'banana', 'cherry' ]

객체(Object)

// key: Value
const obj = {
  a: 'Apple',
  b: 'banana',
  'casdfsad@#$%#$ASDasdf': 'cherry',
  b: 'berry'
}
console.log(obj['casdfsad@#$%#$ASDasdf']); //cherry
console.log(obj.a) //점 표기법 Apple
console.log(obj['a']) //괄호(bracket) 표기법 Apple
//value에는 다양한 데이터들이 들어갈 수 있다
//키가 중복되면 마지막에 써있는 키만 적용된다

코드의 변수나 함수등에 언더바(_) 사용하는 이유?

스코프 구분에 따른 표시(숨기는 용도로 많이씀).
해당 콘텍스트에 선언하여 사용되는 고유의 스코프영역에서만 사용할 것임을 직관적으로 알림

함수(Function)

함수도 하나의 데이터다
명령을 감싸는 역할을 하며 입구를 만들고 출구로 반환(return)을 할 수 있음
함수의 선언과 표현

함수 선언(호이스팅가능). 기명함수
function ab() {
}
함수 표현(호이스팅불가능). 어딘가에 할당하고 있다. 익명함수
const ab = function () {
}

Truthy & Falsy

Trutyh: true 같은
Falsy: false 같은

// Falsy
if (false)       
if (null)
if (undefined)
if (0)
if (-0)
if (NaN)
if ('')
if (0n)

자료형 확인

• typeof 데이터
• 데이터.constructor
• Object.prototype.toString.call(데이터)

변수

const, let, var
데이터를 담아놓는 하나의 그릇. 즉, 메모리에 있는 주소를 들고 있는
const와 let중 어떤걸 쓸지 고민될 떄 우선 const를 쓰고 재할당이 필요할 때 let쓰기

1. const(상수: 변하지 않는값 constant)
   • 유효범위: 블록 레벨
   • 재할당: 불가능
   • 중복 선언: 불가능
   • 호이스팅(Hoisting): 불가능
   • 전역 등록: 불가능
2. let(변수: variable. 변하는 값)
   • 유효범위: 블록 레벨
   • 재할당: 가능
   • 중복 선언: 불가능
   • 호이스팅(Hoisting): 불가능
   • 전역 등록: 불가능
3. var(쓰지 마세요 추억으로 사라질 거에요)
   • 유효범위: 함수 레벨
   • 재할당: 가능
   • 중복 선언: 가능
   • 호이스팅(Hoisting): 가능
   • 전역 등록: 가능

• 유효범위(scope)
  블록스코프: 중괄호 {}로 감싸진 범위
  함수스코프: 블록 스코프 중 함수 function(){}범위를 갖는 스코프
• 재할당
• 중복선언(똑같은 변수이름이 두개이상일때)
• 호이스팅(Hoisting)
  JS는 위에서 부터 아래로 읽어내려가는 형식인데 밑에있는걸 위로 끌어올려서 선언시키는것
  즉, 선언부를 유효한범위의 최상위로 끌어올리는 현상
• 전역(Global)선언시 전역 객체(window)의 속성으로 등록