데이터 νƒ€μž…(Data Types)

데이터 νƒ€μž…μ€ ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄μ˜ 기본적인 κ΅¬μ„±μš”μ†Œμž…λ‹ˆλ‹€.
데이터 νƒ€μž…μ˜ 기본적인 λ‚΄μš©κ³Ό 데이터 νƒ€μž…μ˜ μ’…λ₯˜λ₯Ό μ•Œμ•„λ³΄κ³ μž ν•©λ‹ˆλ‹€.

1. 데이터 νƒ€μž…

데이터 νƒ€μž…μ΄λž€ λ³€μˆ˜λ₯Ό μ„ μ–Έν•  λ•Œ, μˆ«μžλ‚˜ λ¬Έμžμ—΄ λ˜λŠ” 이 μ™Έμ˜ 것듀을 λ³€μˆ˜μ— μ €μž₯ν•˜λŠ” 데이터 μ’…λ₯˜λ₯Ό λ§ν•©λ‹ˆλ‹€.

Cλ‚˜ Java 와 같은 ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄μ—λŠ” μ •μˆ˜ νƒ€μž… λ³€μˆ˜(int), λΆ€λ™μ†Œμˆ˜μ  νƒ€μž… λ³€μˆ˜(double) 등이 μžˆμ–΄ κ·Έ λ³€μˆ˜μ˜ νƒ€μž…κ³Ό μΌμΉ˜ν•˜λŠ” λ°μ΄ν„°λ§Œ μ €μž₯이 κ°€λŠ₯ν•©λ‹ˆλ‹€. 이와 같이 λ³€μˆ˜μ— νƒ€μž…μ΄ μžˆλŠ” μ–Έμ–΄λ₯Ό 정적 νƒ€μž… μ–Έμ–΄(static typed language) 라고 ν•©λ‹ˆλ‹€.

ν•˜μ§€λ§Œ μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” λ³€μˆ˜μ— νƒ€μž…μ΄ μ—†μœΌλ―€λ‘œ, λͺ¨λ“  νƒ€μž…μ˜ 데이터λ₯Ό μ €μž₯ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μ•„λž˜μ™€ 같이 μ‹€ν–‰ν•  λ•Œ λ³€μˆ˜μ— μ €μž₯된 데이터 νƒ€μž…μ„ λ™μ μœΌλ‘œ λ°”κΏ€ 수 μžˆλ‹€λŠ” 것이죠. 이와 같은 μ–Έμ–΄λ₯Ό 동적 νƒ€μž… μ–Έμ–΄(dynamic typed language) 라고 ν•©λ‹ˆλ‹€.

✍ example

var num = '921';
console.log(num); // ➑ 921

num = '숫자';
console.log(num); // ➑ 숫자

2. 데이터 νƒ€μž… λΆ„λ₯˜

데이터 νƒ€μž…μ€ 크게 κΈ°λ³Έν˜•κ³Ό μ°Έμ‘°ν˜• 두 κ°€μ§€λ‘œ λ‚˜λˆŒ 수 μžˆμŠ΅λ‹ˆλ‹€.

βœ” Primitive Type (κΈ°λ³Έν˜•, λ˜λŠ” μ›μ‹œ νƒ€μž…) : 값을 κ·ΈλŒ€λ‘œ ν• λ‹Ή

  • Number
  • String
  • Boolean
  • null
  • undefined
  • +ES6: Symbol

βœ” Reference Type (μ°Έμ‘° νƒ€μž…) : 값이 μ €μž₯된 μ£Όμ†Œκ°’μ„ ν• λ‹Ή (참쑰함)

  • Object
    • Array
    • Function
    • RegExp(μ •κ·œν‘œν˜„μ‹)
    • +ES6: map, set, weakmap, weakset

3. Primitive Type (κΈ°λ³Έ νƒ€μž…)

πŸ“Ž Number(숫자)

λ§Žμ€ ν”„λ‘œκ·Έλž˜λ° 언어듀은 μ •μˆ˜ νƒ€μž… / μ‹€μˆ˜ νƒ€μž…μ„ κ΅¬λΆ„ν•˜μ§€λ§Œ, μžλ°”μŠ€ν¬λ¦½νŠΈμ—λŠ” νƒ€μž…μ΄ μ—†μ–΄ 숫자λ₯Ό λͺ¨λ‘ 64λΉ„νŠΈ λΆ€λ™μ†Œμˆ˜μ μœΌλ‘œ ν‘œν˜„ν•©λ‹ˆλ‹€. (μ‹€μˆ˜ ν•˜λ‚˜λ‘œλ§Œ ν‘œν˜„!)

맀우 큰 μˆ˜λ‚˜ μž‘μ€ 수λ₯Ό ν‘œν˜„ν•  λ•Œμ—λŠ” e ν‘œκΈ°λ²•μ„ μ‚¬μš©ν•©λ‹ˆλ‹€.

πŸ“Ž String(λ¬Έμžμ—΄)

큰 λ”°μ˜΄ν‘œ(")λ‚˜ μž‘μ€ λ”°μ˜΄ν‘œ(')둜 λ‘˜λŸ¬μ‹ΈμΈ 문자의 집합을 λ§ν•©λ‹ˆλ‹€.
큰 λ”°μ˜΄ν‘œλŠ” μž‘μ€ λ”°μ˜΄ν‘œ 속에, μž‘μ€ λ”°μ˜΄ν‘œλŠ” 큰 λ”°μ˜΄ν‘œ μ†μ—μ„œ ν‘œν˜„λ©λ‹ˆλ‹€.

✍ example

var str = "이것은 '데이터 νƒ€μž…'에 κ΄€ν•œ μ„€λͺ…이닀.";
var str2 = '이것은 "데이터 νƒ€μž…"에 κ΄€ν•œ μ„€λͺ…이닀.';
console.log(str); // ➑ 이것은 '데이터 νƒ€μž…'에 κ΄€ν•œ μ„€λͺ…이닀.
console.log(str2); // ➑ 이것은 "데이터 νƒ€μž…"에 κ΄€ν•œ μ„€λͺ…이닀.
var num = "" // ➑ 빈 λ¬Έμžμ—΄μ„ 의미

πŸ“Ž Boolean(μ°Έ/거짓)

Boolean νƒ€μž…μ€ true(μ°Έ), false(거짓) 쀑 ν•˜λ‚˜μ˜ λ¦¬ν„°λŸ΄ 값을 κ°€μ§‘λ‹ˆλ‹€. trueλŠ” 1, falseλŠ” 0의 값을 가지며 쑰건뢀 ν…ŒμŠ€νŠΈμ— μ‚¬μš©λ˜κΈ°λ„ ν•©λ‹ˆλ‹€.

✍ example

var isFinished = true;
var isEditing = false;

πŸ‘‰ Bool λ³€μˆ˜ 이름 μ œλŒ€λ‘œ 짓기 μœ„ν•œ μ΅œμ†Œν•œμ˜ μ˜μ–΄ 문법
λ³€μˆ˜λͺ… μ§“λŠ” 방법은 μœ„ μ‚¬μ΄νŠΈλ₯Ό μ°Έκ³ ν•˜μ‹œλ©΄ 도움이 될 것 κ°™μŠ΅λ‹ˆλ‹€.

πŸ“Ž null / undefined

null은 아무것도 μ—†μŒμ„ μ˜λ―Έν•˜λ©°, μ˜λ„μ μœΌλ‘œ λΉ„μ–΄μžˆλŠ” 값을 넣을 λ•Œ μ‚¬μš©ν•©λ‹ˆλ‹€.undefinedλŠ” μ΄ˆκΈ°ν™”λ˜μ§€ μ•Šμ•˜κ±°λ‚˜ 아직 값이 ν• λ‹Ήλ˜μ§€ μ•Šμ•˜μŒμ„ μ˜λ―Έν•©λ‹ˆλ‹€. λ‘˜μ˜ 차이λ₯Ό κΌ­ μ•Œμ•„μ•Ό ν•˜λ©°, nullκ³Ό undefinedλŠ” 동등 μ—°μ‚°μž(==)와 일치 μ—°μ‚°μž(===)둜 비ꡐ할 λ•Œ κ·Έ 결괏값이 λ‹€λ₯΄λ―€λ‘œ μ£Όμ˜ν•΄μ•Ό ν•©λ‹ˆλ‹€.

✍ example

null ==  undefined; // ➑ true
null === undefined; // ➑ false

4.Reference Type (μ°Έμ‘° νƒ€μž…)

πŸ“Ž Object

객체(Object)λŠ” λ‹€μˆ˜μ˜ ν”„λ‘œνΌν‹°(property)λ‚˜ λ©”μ†Œλ“œ(method)λ₯Ό ν•˜λ‚˜μ˜ μ΄λ¦„μœΌλ‘œ 묢어놓은 μΌμ’…μ˜ 집합체라고 ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

객체λ₯Ό μ„ μ–Έν•  λ•Œμ—λŠ” μ€‘κ΄„ν˜Έ{}λ₯Ό μ‚¬μš©ν•˜λ©°, 이름(key):κ°’(value)의 ν˜•νƒœλ‘œ μž‘μ„±ν•©λ‹ˆλ‹€. 이 데이터 ν•œ 쌍(이름:κ°’)을 객체의 ν”„λ‘œνΌν‹°λΌκ³  ν•©λ‹ˆλ‹€.

✍ example

var foo = {
  name: "Rocky",
  age: 4,
};
console.log(foo.name); // ➑ Rocky
console.log(foo.age); // ➑ 4

κ°μ²΄μ—λŠ” μ•„λž˜μ˜ ν•­λͺ©λ“€μ΄ ν¬ν•¨λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€. (κΈ°λ³Έ νƒ€μž…μ„ μ œμ™Έν•œ λ‚˜λ¨Έμ§€λ₯Ό λͺ¨λ‘ 객체둜 μ •μ˜ν•  수 μžˆμŠ΅λ‹ˆλ‹€.)

πŸ‘‰ Array

πŸ‘‰ Function

πŸ‘‰ RegExp

β€Ό κ°μ²΄λŠ” 이 κΈ€ ν•˜λ‚˜λ‘œ μ„€λͺ…ν•˜κΈ°μ—λŠ” λ„ˆλ¬΄λ‚˜ λ§Žμ€ λ‚΄μš©μ΄ 있고, 정말 μ€‘μš”ν•˜κΈ° λ•Œλ¬Έμ— κ°„λ‹¨ν•˜κ²Œλ§Œ μ„€λͺ…ν•˜μ˜€κ³ , κΈ°νšŒκ°€ λœλ‹€λ©΄ λ”°λ‘œ 글을 μž‘μ„±ν•΄λ³΄λ €κ³  ν•©λ‹ˆλ‹€πŸ™‚

5. 두 νƒ€μž…μ˜ μ°¨μ΄πŸ€”

λ³€μˆ˜λ₯Ό μ„ μ–Έν•˜λ©΄ 데이터가 λ‹΄κΈΈ 곡간을 ν™•λ³΄ν•˜κ³ , ν™•λ³΄λœ λ°μ΄ν„°μ˜ μ£Όμ†Œκ°’μ„ 가지고
λ³€μˆ˜λͺ…κ³Ό 맀칭
μ‹œν‚€λŠ” 선언과정은 λ™μΌν•˜λ‚˜, ν• λ‹Ήκ³Όμ •μ—μ„œ 차이가 μžˆμŠ΅λ‹ˆλ‹€.

κΈ°λ³Έν˜•μ€,

✍ μ˜ˆμ‹œ μ½”λ“œ

var a;
a = 10;

λ³€μˆ˜ aλ₯Ό μ„ μ–Έν•˜λ©΄ 데이터가 λ‹΄κΈΈ 곡간(μž„μ˜μ˜ μ£Όμ†Œ)λ₯Ό ν™•λ³΄ν•˜κ³ , ν™•λ³΄λœ λ°μ΄ν„°μ˜ μ£Όμ†Œκ°’μ„ 가지고 λ³€μˆ˜λͺ…κ³Ό λ§€μΉ­μ‹œν‚΅λ‹ˆλ‹€.
그리고 맀칭된 μ£Όμ†Œλ‘œ μ΄λ™ν•˜μ—¬ 데이터 10을 μ €μž₯ν•©λ‹ˆλ‹€.

μ •λ¦¬ν•˜λ©΄
: λΉ„μ–΄μžˆλŠ” 데이터 곡간 확보 -> λ³€μˆ˜λͺ…κ³Ό 맀칭 -> 맀칭 μ£Όμ†Œμ— 데이터 μ €μž₯

μ°Έμ‘°ν˜•μ€,

βœμ˜ˆμ‹œ μ½”λ“œ

var obj = {
  a: 1,
  b: 'hi',
}

ν”„λ‘œνΌν‹°λŠ” λ³€μˆ˜μ™€ λΉ„μŠ·ν•œ μ„±μ§ˆμ„ κ°–κ³  μžˆμ–΄ λ³€μˆ˜λͺ…κ³Ό μ‹€μ œ 데이터가 μ£Όμ†Œκ°’μ„ 톡해 μ—°κ²°λœ κ²ƒμ²˜λŸΌ key와 value도 같은 λ™μž‘μ„ ν•©λ‹ˆλ‹€.

μš°μ„  각 ν”„λ‘œνΌν‹°λͺ…κ³Ό(μ—¬κΈ°μ„œλŠ” a와 b) ν•΄λ‹Ή ν”„λ‘œνΌν‹°μ˜ κ°’(1, hi)이 λ‹΄κΈΈ μ£Όμ†Œλ₯Ό λ§€μΉ­ν•˜κΈ° μœ„ν•œ 곡간(μž„μ˜μ˜ μ£Όμ†Œ)을 ν™•λ³΄ν•©λ‹ˆλ‹€. ν”„λ‘œνΌν‹°μ™€ ν™•λ³΄λœ μ£Όμ†Œλ₯Ό λ§€μΉ­μ‹œν‚¨ λ‹€μŒ, 이제 각각의 μ£Όμ†Œκ°’λ§ˆλ‹€ 데이터λ₯Ό ν• λ‹Ήν•©λ‹ˆλ‹€. 이런 과정을 데이터곡간에 κΈ°λ³Έν˜• 데이터가 λ‹΄κΈΈ λ•ŒκΉŒμ§€ λ°˜λ³΅ν•©λ‹ˆλ‹€.

κ²°κ΅­, μ°Έμ‘°ν˜• λ°μ΄ν„°λŠ” κΈ°λ³Έν˜• λ°μ΄ν„°μ˜ 집합이라고 λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€.

μ •λ¦¬ν•˜λ©΄
: λΉ„μ–΄μžˆλŠ” 데이터 곡간 확보 ➜ 객체 속 ν”„λ‘œνΌν‹°μ— λŒ€ν•œ 곡간을 또 λ‹€μ‹œ 확보 ➜ 객체의 ν”„λ‘œνΌν‹°λͺ…κ³Ό μ£Όμ†Œλ₯Ό 맀칭 ➜ ν™•λ³΄ν–ˆλ˜ 두 번째 μ£Όμ†Œμ— 데이터 ν• λ‹Ή

마치며

ν˜Ήμ‹œλ‚˜ 잘λͺ» μž‘μ„±λœ λΆ€λΆ„μ΄λ‚˜ 빠진 뢀뢄이 μžˆλ‹€λ©΄ λŒ“κΈ€λ‘œ μ•Œλ €μ£Όμ„Έμš”! μ½μ–΄μ£Όμ…”μ„œ κ°μ‚¬ν•©λ‹ˆλ‹€πŸ˜Š

🧐좜처 및 참고자료

β–ͺ [mdn : JavaScript] : (https://developer.mozilla.org/ko/docs/Web/JavaScript)
β–ͺ [tcpschool] : (http://tcpschool.com/javascript/js_datatype_variable)
β–ͺ [μΈν”„λŸ°] : Javascript 핡심 κ°œλ… μ•Œμ•„λ³΄κΈ° - JS Flow
β–ͺ λͺ¨λ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ μž…λ¬Έ
image.png