λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
Front-end/JS

22.02.13 λ©΄μ ‘ Q & A

by ciocio 2022. 2. 13.

πŸ“Œ  μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ μžλ£Œν˜•[data type]이 ν•„μš”ν•œ 이유 말해보기

 

λͺ¨λ“  μ–Έμ–΄κ°€ λ‹€ κ·Έλ ‡μ§€λ§Œ, μ›ν•˜λŠ” 값을 λ©”λͺ¨λ¦¬μ— μ €μž₯ν•˜κ³  읽고, μ‚¬μš©ν•˜κ²Œ λœλ‹€.
λ©”λͺ¨λ¦¬μ— 값을 μ €μž₯ν•˜κΈ° μœ„ν•΄μ„  μ €μž₯λ˜λŠ” λ°μ΄ν„°μ˜ 크기λ₯Ό μ•Œμ•„μ•Όν•œλ‹€.
μ €μž₯ν•˜κΈ° μœ„ν•œ 곡간을 ν™•λ³΄ν•΄μ•Όν•˜κΈ° λ•Œλ¬Έμ΄λ‹€.
λ°μ΄ν„°μ˜ 크기λ₯Ό μ•Œ 수 있게 ν•˜λŠ” μ§€ν‘œκ°€ 데이터 νƒ€μž…μ΄λ‹€. -> κ·Έλž˜μ„œ 데이터 νƒ€μž…μ΄ μ€‘μš”ν•˜λ‹€.

 

πŸ“Œ  μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ μžλ£Œν˜•[data type]에 λŒ€ν•΄ 말해보기

μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ λͺ¨λ“  값은 데이터 νƒ€μž…μ„ κ°–λŠ”λ‹€.

 

1. 숫자 νƒ€μž… [number]  |  λͺ¨λ“  수λ₯Ό 64λΉ„νŠΈ μ‹€μˆ˜ 처리.
2. λ¬Έμžμ—΄ νƒ€μž… [string]  |  16λΉ„νŠΈ μœ λ‹ˆμ½”λ“œ 문자둜 ν‘œν˜„.
3. λΆˆλ¦¬μ–Έ νƒ€μž… [boolean]  |  True / False
4. undefined νƒ€μž… [undefined]  |  μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진이 λ³€μˆ˜λ₯Ό μ΄ˆκΈ°ν™”ν•  λ•Œ μ‚¬μš©ν•˜λŠ” κ°’.
5. null νƒ€μž… [null]  |  λ³€μˆ˜μ— 값이 μ—†μŒμ„ μ˜λ„μ μœΌλ‘œ λͺ…μ‹œν•  λ•Œ μ‚¬μš©.
6. μ‹¬λ²Œ νƒ€μž… [symbol]  |  λ‹€λ₯Έ κ°’κ³Ό μ€‘λ³΅λ˜μ§€ μ•ŠλŠ” μœ μΌλ¬΄μ΄ν•œ 값을 생성할 λ•Œ μ‚¬μš©.
7. 객체 νƒ€μž… [object]  |  객체와 λ°°μ—΄ λ“± μ›μ‹œ νƒ€μž…μ„ μ œμ™Έν•œ λ‚˜λ¨Έμ§€ νƒ€μž… 전뢀에 해당됨.

 

7개의 데이터 νƒ€μž…μ€ μ›μ‹œ νƒ€μž…κ³Ό 객체 νƒ€μž…μœΌλ‘œ λΆ„λ₯˜ν•  수 μžˆλ‹€.

 

βœ” μ›μ‹œ νƒ€μž… : 1, 2, 3, 4, 5, 6 [primitive type]

βœ” 객체 νƒ€μž… : 7 [object/reference type]

 

 

1. number νƒ€μž…

 

μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” λͺ¨-λ“  수λ₯Ό 'μ‹€μˆ˜'둜 μ²˜λ¦¬ν•œλ‹€. (μ •μˆ˜λ‘œ ν‘œμ‹œλœλ‹€ 해도 사싀은 μ‹€μˆ˜λ₯Ό μ˜λ―Έν•¨.  ex. 9 === 9.0)

μ •μˆ˜, μ‹€μˆ˜, 2μ§„μˆ˜, 8μ§„μˆ˜, 16μ§„μˆ˜ λ¦¬ν„°λŸ΄ λͺ¨λ‘ 배정밀도 64λΉ„νŠΈ λΆ€λ™μ†Œμˆ˜μ  ν˜•μ‹μ˜ 2μ§„μˆ˜λ‘œ λ©”λͺ¨λ¦¬μ— μ €μž₯λœλ‹€.

 

• Double-precision_floating-point_format (FP64)

IEEE 754 ν‘œμ€€μ— λ”°λ₯Έ λ°©μ‹μœΌλ‘œ 컴퓨터가 'μ‹€μˆ˜'λ₯Ό ν‘œν˜„ν•˜λŠ” ν•˜λ‚˜μ˜ 방법이닀.

 

λ²ˆμ™Έ
• Infinity : μ–‘μ˜ λ¬΄ν•œλŒ€ ex. 10 / 0
• -Infinity : 음의 λ¬΄ν•œλŒ€ ex. 10 / -0
• NaN : Not a Number ex. 10 / 'string'

 

 

2. string νƒ€μž…

 

16λΉ„νŠΈ μœ λ‹ˆμ½”λ“œ 문자(UTF-16)의 μ§‘ν•©μœΌλ‘œ μ „ 세계 λŒ€λΆ€λΆ„μ˜ 문자λ₯Ό ν‘œν˜„ν•  수 μžˆλ‹€.

 

λ²ˆμ™Έ `template literal`
• multi-line string : μ΄μŠ€μΌ€μ΄ν”„ μ‹œν€€μŠ€λ₯Ό μ‚¬μš©ν•˜μ§€ μ•Šκ³ λ„ κ°œν–‰(μ€„λ°”κΏˆ) κ°€λŠ₯
• expression interpolation : `${string}` -> ${ } ν‘œν˜„μ‹μ„ 톡해 λ¬Έμžμ—΄ μ‚½μž… κ°€λŠ₯
• tagged template : λ¬Έμžμ—΄, ν•¨μˆ˜λ‘œ νŒŒμ‹± κ°€λŠ₯

 

μ΄μŠ€μΌ€μ΄ν”„ μ‹œν€€μŠ€μ˜ κ°œν–‰ 문자 비ꡐ : Line Feed(LF : βˆ–n) 와 Carriage Return(CR : βˆ–r)

두 κ°œν–‰ 문자 λͺ¨λ‘ κ³Όκ±° νƒ€μžκΈ°μ—μ„œ μ»€μ„œλ₯Ό μ œμ–΄ν•˜λŠ” λ°©μ‹μ—μ„œ λΉ„λ‘―λŒ.

βˆ–n : μ»€μ„œλ₯Ό μ •μ§€ν•œ μƒνƒœμ—μ„œ 쒅이λ₯Ό ν•œ 쀄 올림

βˆ–r : 쒅이λ₯Ό 움직이지 μ•Šμ€ μƒνƒœμ—μ„œ μ»€μ„œλ₯Ό 맨 μ•žμ€„λ‘œ μ΄λ™μ‹œν‚΄

 

μ˜ν™”μ—μ„œ λ“œλ₯΄λ₯΅ 탁 ν•˜λ©΄μ„œ 쒅이와 μ»€μ„œκ°€ μ›€μ§μ΄λ˜ μž₯면이 λ– μ˜¬λžλ‹€.

 

즉, νƒ€μžκΈ°μ—μ„œλŠ” μ€„λ°”κΏˆμ„ μœ„ν•΄ 라인 ν”Όλ“œμ™€ 캐리지 리턴을 λͺ¨λ‘ μ‚¬μš©ν–ˆμŒ. (CRLF : βˆ–rβˆ–n)

μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œλŠ” βˆ–r와 βˆ–n λͺ¨λ‘ κ°œν–‰μ„ μ˜λ―Έν•˜μ§€λ§Œ, 일반적으둜 βˆ–nλ₯Ό μ‚¬μš©ν•΄ κ°œν–‰ν•œλ‹€.

 

• tagged template μ‚¬μš©λ²•

 

const name = 'lee';
const age = '25';

function myTag(strings, nameExp, ageExp) {
  const str0 = strings[0];
  const str1 = strings[1];
  
  let ageStr;
  if(ageExp > 99){
    ageStr = 'centenarian';
  } else {
    ageStr = 'youngster';
  }
  
  return str0 + nameExp + str1 + ageStr; 
  // ν•¨μˆ˜ λ‚΄μ—μ„œλ„ template literal을 λ°˜ν™˜ν•  수 μžˆλ‹€ .. 였
}

 

tagged template λŠ” μ‹€μ œ μ½”λ“œμ—μ„œλŠ” ν•œλ²ˆλ„ μ‚¬μš©ν•΄λ³Έμ μ΄ μ—†μ–΄ 제일 μƒμ†Œν–ˆλ‹€. ν•˜μ§€λ§Œ 그만큼 신기함도 λ°° !

 

 

3. boolean νƒ€μž…

 

True | False

 

 

4. undefined νƒ€μž…

 

κ°œλ°œμžκ°€ μ˜λ„μ μœΌλ‘œ ν• λ‹Ήν•˜κΈ° μœ„ν•œ 값이 μ•„λ‹ˆλΌ μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진이 λ³€μˆ˜λ₯Ό μ΄ˆκΈ°ν™”ν•  λ•Œ μ‚¬μš©ν•˜λŠ” 값이닀.

μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ 경우, λ³€μˆ˜λ₯Ό μ„ μ–Έν•˜λ©΄ μ•”λ¬΅μ μœΌλ‘œ μ •μ˜κ°€ 이뀄지기 λ•Œλ¬Έμ— μ„ μ–Έκ³Ό μ •μ˜μ˜ 경계가 λͺ¨ν˜Έν•˜λ‹€.

 

• μ„ μ–Έ : μ»΄νŒŒμΌλŸ¬μ—κ²Œ λ‹¨μˆœνžˆ μ‹λ³„μžμ˜ 쑴재만 μ•Œλ¦Ό

• μ •μ˜ : μ»΄νŒŒμΌλŸ¬κ°€ μ‹€μ œλ‘œ λ³€μˆ˜λ₯Ό μƒμ„±ν•˜κ³  λ©”λͺ¨λ¦¬ μ£Όμ†Œμ™€ 연결함

 

μ°Έκ³  > λ³€μˆ˜μ— 값이 μ—†μŒμ„ λͺ…μ‹œν•˜κ³  싢을 땐 null을 ν• λ‹Ήν•˜λŠ” 게 μ’‹λ‹€.

 

 

5. null νƒ€μž…

 

λ³€μˆ˜μ— 값이 μ—†λ‹€λŠ” 것을 μ˜λ„μ μœΌλ‘œ λͺ…μ‹œν•  λ•Œ μ‚¬μš©ν•œλ‹€. (μ˜λ„μ  λΆ€μž¬ intentional absence)

λ³€μˆ˜μ— null을 ν• λ‹Ήν•œλ‹€ = λ³€μˆ˜κ°€ 이전에 μ°Έμ‘°ν•˜λ˜ 값을 더 이상 μ°Έμ‘°ν•˜μ§€ μ•Šκ² λ‹€

= μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 이 κ°’ (λˆ„κ΅¬λ„ μ°Έμ‘°ν•˜μ§€ μ•ŠλŠ” λ©”λͺ¨λ¦¬ 곡간이기 λ•Œλ¬Έμ—) 에 λŒ€ν•΄ 가비지 μ½œλ ‰μ…˜μ„ μˆ˜ν–‰ν•œλ‹€

 

λ³€μˆ˜μ— null 값을 ν• λ‹Ήν•˜λ©΄ 이전 값을 더 이상 μ°Έμ‘°ν•˜μ§€ μ•ŠλŠ”λ‹€λŠ” λœ»μ΄μ–΄μ„œ

카카였 Map API μ“Έ λ•Œ μƒμ„±λœ 마컀λ₯Ό μ§€μšΈ λ•Œ setMap(null) λ©”μ„œλ“œλ₯Ό μΌλ˜κ±°μ˜€κ΅¬λ‚˜ ... 와 !!!

ν•„μš”μ—†λŠ” λ©”λͺ¨λ¦¬λŠ” 가비지 μ»¬λ ‰ν„°λ‘œ λ°”λ‘œλ°”λ‘œ μ‚­μ œ ... πŸ‘πŸ»πŸ‘πŸ»

 

 

6. symbol νƒ€μž…

 

ES6에 μΆ”κ°€λœ 7번째 νƒ€μž…. λ‹€λ₯Έ κ°’κ³Ό μ€‘λ³΅λ˜μ§€ μ•ŠλŠ” μœ μΌλ¬΄μ΄ν•œ 값이닀.

주둜 '객체의 μœ μΌν•œ ν”„λ‘œνΌν‹° ν‚€'λ₯Ό λ§Œλ“€κΈ° μœ„ν•΄ μ‚¬μš©λœλ‹€.

 

μ‹¬λ²Œμ€ ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•΄ μƒμ„±ν•œλ‹€λŠ” νŠΉμ§•μ΄ μžˆλ‹€. (1,2,3,4,5λŠ” ν•΄λ‹Ή 데이터 νƒ€μž…μ˜ λ¦¬ν„°λŸ΄μ„ 톡해 생성함)

μƒμ„±λœ μ‹¬λ²Œκ°’μ€ 외뢀에 λ…ΈμΆœλ˜μ§€ μ•ŠμœΌλ©°, λ‹€λ₯Έ κ°’κ³ΌλŠ” μ ˆλŒ€! μ€‘λ³΅λ˜μ§€ μ•ŠλŠ”λ‹€.

 

 

7. object νƒ€μž…

 

1,2,3,4,5,6 (μ›μ‹œ νƒ€μž…) 의 데이터 νƒ€μž…μ„ μ œμ™Έν•œ λͺ¨λ“  것은 객체 νƒ€μž…μ΄λ‹€ πŸ˜‰

 

 

πŸ“  κ³Όκ±° ν•™μŠ΅ λ‚΄μš© 볡슡

 

ν”„λ‘œμ νŠΈκ°€ λλ‚œ 뒀에 ν•™μŠ΅ν•œ λ‚΄μš©μ„ λ³΅μŠ΅ν•˜λ‹ˆκΉŒ 또 λ³΄μ΄λŠ” 게 λ‹€λ₯΄κ³  .. λ„ˆλ¬΄ μ‹ κΈ°ν•˜λ‹€

 

2021.07.20 - [Front-end/JS] - μžλ°”μŠ€ν¬λ¦½νŠΈ 데이터 νƒ€μž… Data Type

 

μžλ°”μŠ€ν¬λ¦½νŠΈ 데이터 νƒ€μž… Data Type

Achivement Goals βœ… μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ μ›μ‹œ μžλ£Œν˜•κ³Ό μ°Έμ‘° μžλ£Œν˜•μ΄ 무엇인지 μ•Œ 수 μžˆλ‹€. βœ… μ›μ‹œ μžλ£Œν˜• string, number, boolean, undefined의 의미λ₯Ό 이해할 수 μžˆλ‹€. βœ… νƒ€μž…λ§ˆλ‹€ λ‹€λ₯Έ 속성과 λ©”μ†Œλ“œκ°€ 있

code-designer.tistory.com

 

λ°˜μ‘ν˜•

λŒ“κΈ€