diff --git "a/JAVASCRIPT/\353\202\250\354\235\200\354\227\264.md" "b/JAVASCRIPT/\353\202\250\354\235\200\354\227\264.md" new file mode 100644 index 0000000..2881af3 --- /dev/null +++ "b/JAVASCRIPT/\353\202\250\354\235\200\354\227\264.md" @@ -0,0 +1,381 @@ +### 🌳 λͺ©μ°¨ +- [μ‹€ν–‰μ»¨ν…μŠ€νŠΈ](#μ‹€ν–‰μ»¨ν…μŠ€νŠΈ)
+ - μ‹€ν–‰μ»¨ν…μŠ€νŠΈλž€? + - λ ‰μ‹œμ»¬ ν™˜κ²½μ˜ λŒ€ν‘œμ μΈ ꡬ성 μš”μ†Œ + - μ‹λ³„μž κ²°μ •μ΄λž€? + - μŠ€μ½”ν”„ 체인의 λ™μž‘ 원리 + - μ†ŒμŠ€μ½”λ“œμ˜ 평과와 μ‹€ν–‰ κ³Όμ • + - λ ‰μ‹œμ»¬ ν™˜κ²½ vs λ ‰μ‹œμ»¬ μŠ€μ½”ν”„ + - λ ‰μ‹œμ»¬ μŠ€μ½”ν”„μ™€ 동적 μŠ€μ½”ν”„μ˜ μ°¨μ΄λŠ”? + +- [Closure](#closure) + - μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œμ˜ 일반적인 ν΄λ‘œμ Έλž€? + - ν΄λ‘œμ €μ˜ μž₯점과 단점 + +- [λ³€μˆ˜](#λ³€μˆ˜) + - λ³€μˆ˜ ν˜Έμ΄μŠ€νŒ… + - var, let, const + - TDZ(Temporal Dead Zone)μ΄λž€? + +- [this](#this) + - thisλž€? + - λ°”μΈλ”©μ΄λž€? + - call, apply, bind의 차이 + - μ•„λž˜μ— 좜λ ₯λ˜λŠ” 값은 λ¬΄μ—‡μΈκ°€μš”? (λ²ˆμ™Έ) + - λ¬Έμ œκ°€ μžˆλ‹€λ©΄ μ™œ λ¬Έμ œκ°€ λ°œμƒν•˜κ³ , ν•΄κ²°ν•˜λŠ” 방법은 λ¬΄μ—‡μΈκ°€μš”? (λ²ˆμ™Έ) + - this 바인딩과 λ ‰μ‹œμ»¬ μŠ€μ½”ν”„μ˜ 차이점은? + - this 바인딩 μš°μ„ μˆœμœ„ + +- [μžλ£Œν˜•](#μžλ£Œν˜•) + - μ›μ‹œ νƒ€μž… + - 객체 νƒ€μž… + - 데이터 νƒ€μž…μ„ λ‚˜λˆ„λŠ” μ΄μœ λŠ” 무엇인가? + +- [μ—°μ‚°μž](#μ—°μ‚°μž) + - μ‚°μˆ  μ—°μ‚°μž + - 비ꡐ μ—°μ‚°μž + - μ•„λž˜ μ—°μ‚°μ˜ κ²°κ³ΌλŠ” 무엇인가? + +--- + +
+ +## πŸ“Œ μ‹€ν–‰μ»¨ν…μŠ€νŠΈ + +### μ‹€ν–‰μ»¨ν…μŠ€νŠΈλž€? + +μ‹€ν–‰μ»¨ν…μŠ€νŠΈλŠ” μ†ŒμŠ€μ½”λ“œλ₯Ό μ‹€ν–‰ν•˜λŠ” 데 ν•„μš”ν•œ ν™˜κ²½μ„ μ œκ³΅ν•˜κ³ , μ½”λ“œμ˜ μ‹€ν–‰ κ²°κ³Όλ₯Ό μ‹€μ œλ‘œ κ΄€λ¦¬ν•˜λŠ” μ˜μ—­μ΄λ‹€. + +JavaScript의 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ(Execution Context)λŠ” JavaScript μ—”μ§„μ—μ„œ ꡬ문을 ν•΄μ„ν•˜κ³  μ‹€ν–‰ν•˜λŠ” λ™μ•ˆ ν™œμš©λ˜λŠ” λ©”λͺ¨λ¦¬ κ³΅κ°„μž…λ‹ˆλ‹€. μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” μŠ€μ½”ν”„μ™€ ν•¨κ»˜ 각각의 ν•¨μˆ˜, 블둝, μ „μ—­ μ½”λ“œμ— λŒ€ν•œ ν™˜κ²½μ„ κ΅¬μ„±ν•˜κ³ , μ—”μ§„μ—μ„œ 각각의 ꡬ문을 μ‹€ν–‰ν•  수 μžˆλ„λ‘ ν•©λ‹ˆλ‹€. + +μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” μ‹λ³„μžλ₯Ό λ“±λ‘ν•˜κ³  κ΄€λ¦¬ν•˜λŠ” μŠ€μ½”ν”„μ™€ μ½”λ“œ μ‹€ν–‰ μˆœμ„œ 관리λ₯Ό κ΅¬ν˜„ν•œ λ‚΄λΆ€ λ§€μ»€λ‹ˆμ¦˜μœΌλ‘œ, λͺ¨λ“  μ½”λ“œλŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό 톡해 μ‹€ν–‰λ˜κ³  κ΄€λ¦¬λœλ‹€. + +μ‹λ³„μžμ™€ μŠ€μ½”ν”„λŠ” μ‹€ν–‰ μ»¨ν…ŒμŠ€νŠΈμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μœΌλ‘œ κ΄€λ¦¬ν•˜κ³  μ½”λ“œ μ‹€ν–‰ μˆœμ„œλŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμœΌλ‘œ κ΄€λ¦¬ν•œλ‹€. + +JavaScript 엔진은 μ΅œμ΄ˆμ— ν•˜λ‚˜μ˜ μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό μƒμ„±ν•˜κ³ , ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•  λ•Œλ§ˆλ‹€ μƒˆλ‘œμš΄ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μƒμ„±λ©λ‹ˆλ‹€. 각 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” ν• λ‹Ήλœ λ³€μˆ˜μ™€ ν•¨μˆ˜ 객체λ₯Ό ν¬ν•¨ν•˜μ—¬, μ—”μ§„μ—μ„œ μ–Έμ œλ“ μ§€ μ ‘κ·Όν•  수 μžˆλ„λ‘ ν•©λ‹ˆλ‹€. 싀행이 λλ‚œ ν›„μ—λŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” 제거되며, λ©”λͺ¨λ¦¬μ—μ„œ μ œκ±°λ©λ‹ˆλ‹€. + +### λ ‰μ‹œμ»¬ ν™˜κ²½μ˜ λŒ€ν‘œμ μΈ ꡬ성 μš”μ†Œ + +1. ν™˜κ²½ λ ˆμ½”λ“œ (Environment Record) + + μŠ€μ½”ν”„μ— ν¬ν•¨λœ μ‹λ³„μžλ₯Ό λ“±λ‘ν•˜κ³  λ“±λ‘λœ μ‹λ³„μžμ— λ°”μΈλ”©λœ 값을 κ΄€λ¦¬ν•˜λŠ” μ €μž₯μ†Œ. ν™˜κ²½ λ ˆμ½”λ“œλŠ” μ†ŒμŠ€μ½”λ“œμ˜ νƒ€μž…μ— 따라 κ΄€λ¦¬ν•˜λŠ” λ‚΄μš©μ΄ 차이가 μžˆλ‹€. + +2. μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘°(Outer Lexical Environment Reference) + + μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘°λŠ” μƒμœ„ μŠ€μ½”ν”„λ₯Ό 가리킨닀. μ΄λ•Œ μƒμœ„ μŠ€μ½”ν”„λž€ μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½, 즉 ν•΄λ‹Ή μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό μƒμ„±ν•œ μ†ŒμŠ€μ½”λ“œλ₯Ό ν¬ν•¨ν•˜λŠ” μƒμœ„ μ½”λ“œμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ„ 의미. μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘°λ₯Ό 톡해 단방ν–₯ λ§ν¬λ“œ 리슀트인 μŠ€μ½”ν”„ 체인을 κ΅¬ν˜„ν•œλ‹€. + +### μ‹λ³„μž κ²°μ •μ΄λž€? + +λ™μΌν•œ μ΄λ¦„μ˜ μ‹λ³„μžκ°€ λ‹€λ₯Έ μŠ€μ½”ν”„μ— μ—¬λŸ¬ 개 μ‘΄μž¬ν•  μˆ˜λ„ μžˆλ‹€. λ”°λΌμ„œ μ–΄λŠ μŠ€μ½”ν”„μ˜ μ‹λ³„μžλ₯Ό μ°Έμ‘°ν•˜λ©΄ λ˜λŠ”μ§€ κ²°μ •ν•  ν•„μš”κ°€ μžˆλŠ”λ°, 이것을 μ‹λ³„μž 결정이라 ν•œλ‹€. μ‹λ³„μž 결정을 μœ„ν•΄ μ‹λ³„μžλ₯Ό 검색할 λ•ŒλŠ” μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ—μ„œ μ‹λ³„μžλ₯Ό κ²€μƒ‰ν•˜κΈ° μ‹œμž‘ν•œλ‹€. λ§Œμ•½ μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ—μ„œ μ‹λ³„μžλ₯Ό 검색할 수 μ—†μœΌλ©΄ μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘°κ°€ κ°€λ¦¬ν‚€λŠ” λ ‰μ‹œμ»¬ ν™˜κ²½, 즉 μƒμœ„ 슀포크둜 μ΄λ™ν•˜μ—¬ μ‹λ³„μžλ₯Ό κ²€μƒ‰ν•œλ‹€. + +### μŠ€μ½”ν”„ 체인의 λ™μž‘ 원리 + +ν˜„μž¬ μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ—μ„œ μ‹λ³„μžλ₯Ό 검색할 수 μ—†μœΌλ©΄ μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘°κ°€ κ°€λ¦¬ν‚€λŠ” λ ‰μ‹œμ»¬ ν™˜κ²½, 즉 μƒμœ„ μŠ€μ½”ν”„λ‘œ μ΄λ™ν•˜μ—¬ μ‹λ³„μžλ₯Ό κ²€μƒ‰ν•˜λŠ” 것. + +### μ†ŒμŠ€μ½”λ“œμ˜ 평과와 μ‹€ν–‰ κ³Όμ • + +μ†ŒμŠ€μ½”λ“œ 평가 κ³Όμ •μ—μ„œλŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό μƒμ„±ν•˜κ³  λ³€μˆ˜, ν•¨μˆ˜ λ“±μ˜ μ„ μ–Έλ¬Έλ§Œ λ¨Όμ € μ‹€ν–‰ν•˜μ—¬ μƒμ„±λœ λ³€μˆ˜λ‚˜ ν•¨μˆ˜ μ‹λ³„μžλ₯Ό ν‚€λ‘œ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ κ΄€λ¦¬ν•˜λŠ” μŠ€μ½”ν”„(λ ‰μ‹œμ»¬ ν™˜κ²½μ˜ ν™˜κ²½ λ ˆμ½”λ“œ)에 λ“±λ‘ν•œλ‹€. μ†ŒμŠ€μ½”λ“œ 평가 과정이 λλ‚˜λ©΄ λΉ„λ‘œμ†Œ 선언문을 μ œμ™Έν•œ μ†ŒμŠ€μ½”λ“œκ°€ 순차적으둜 μ‹€ν–‰λ˜κΈ° μ‹œμž‘ν•œλ‹€. μ΄λ•Œ μ†ŒμŠ€μ½”λ“œ 싀행에 ν•„μš”ν•œ 정보, 즉 λ³€μˆ˜λ‚˜ ν•¨μˆ˜μ˜ μ°Έμ‘°λ₯Ό μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ κ΄€λ¦¬ν•˜λŠ” μŠ€μ½”ν”„μ—μ„œ κ²€μƒ‰ν•΄μ„œ μ·¨λ“ν•œλ‹€. 그리고 λ³€μˆ˜ κ°’μ˜ λ³€κ²½ λ“± μ†ŒμŠ€μ½”λ“œμ˜ μ‹€ν–‰ κ²°κ³ΌλŠ” λ‹€μ‹œ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ κ΄€λ¦¬ν•˜λŠ” μŠ€μ½”ν”„μ— λ“±λ‘ν•œλ‹€. + +### λ ‰μ‹œμ»¬ ν™˜κ²½ vs λ ‰μ‹œμ»¬ μŠ€μ½”ν”„ + +λ ‰μ‹œμ»¬ ν™˜κ²½μ€ μ½”λ“œκ°€ 싀행될 λ•Œ, μ–΄λ–€ λ³€μˆ˜μ™€ ν•¨μˆ˜κ°€ μ •μ˜λ˜μ–΄ μžˆλŠ”μ§€λ₯Ό κΈ°μ–΅ν•˜λŠ” 객체이닀. λ ‰μ‹œμ»¬ ν™˜κ²½μ€ μ–Έμ œλ“ μ§€ μ½”λ“œμ—μ„œ μ ‘κ·Ό κ°€λŠ₯ν•œ λ³€μˆ˜μ™€ ν•¨μˆ˜μ˜ λͺ©λ‘μ„ μ œκ³΅ν•œλ‹€. + +λ ‰μ‹œμ»¬ μŠ€μ½”ν”„λŠ” λ ‰μ‹œμ»¬ ν™˜κ²½μ—μ„œ λ³€μˆ˜μ™€ ν•¨μˆ˜μ— λŒ€ν•œ μ ‘κ·Ό κΆŒν•œμ„ μ •μ˜ν•œλ‹€. μŠ€μ½”ν”„λŠ” λ³€μˆ˜μ™€ ν•¨μˆ˜μ— μ ‘κ·Όν•  수 μžˆλŠ” μ˜μ—­μ„ κ²°μ •ν•˜λ©°, μŠ€μ½”ν”„λŠ” λ³€μˆ˜μ™€ ν•¨μˆ˜μ˜ 유효 λ²”μœ„λ₯Ό κ²°μ •ν•œλ‹€. μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ μŠ€μ½”ν”„λŠ” ν•¨μˆ˜λ₯Ό μ–΄λ””μ„œ β€˜μ„ μ–Έβ€™ ν•˜μ˜€λŠ”μ§€μ— 따라 κ²°μ •λœλ‹€. + +즉, λ ‰μ‹œμ»¬ ν™˜κ²½μ€ λ³€μˆ˜μ™€ ν•¨μˆ˜μ˜ λͺ©λ‘μ„ μ œκ³΅ν•˜κ³ , λ ‰μ‹œμ»¬ μŠ€μ½”ν”„λŠ” μ–΄λ–€ λ³€μˆ˜μ™€ ν•¨μˆ˜μ— μ ‘κ·Όν•  수 μžˆλŠ”μ§€λ₯Ό κ²°μ •ν•œλ‹€. 두 개의 κ°œλ…μ€ μ„œλ‘œ μ—°κ΄€λ˜μ–΄ μžˆμ§€λ§Œ, λ‹€λ₯Έ 큰 κ°œλ…μ„ κ°€μ§€κ³  μžˆλ‹€. + +이λ₯Ό κ΅¬ν˜„ν•œ 것이 β€œμ‹€ν–‰ μ»¨ν…ŒμŠ€νŠΈβ€μ΄λ©°, μ½”λ“  μ½”λ“œλŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ—μ„œ ν‰κ°€λ˜κ³  μ‹€ν–‰λœλ‹€. + +### λ ‰μ‹œμ»¬ μŠ€μ½”ν”„μ™€ 동적 μŠ€μ½”ν”„μ˜ μ°¨μ΄λŠ”? + +μƒμœ„ μŠ€μ½”ν”„λ₯Ό κ²°μ •ν•˜λŠ” λ°©λ²•μœΌλ‘œ ν•¨μˆ˜λ₯Ό μ–΄λ””μ„œ β€˜ν˜ΈμΆœβ€™ ν•˜μ˜€λŠ”κ°€μ™€ ν•¨μˆ˜λ₯Ό μ–΄λ””μ„œ β€˜μ„ μ–Έβ€™ν•˜λŠ” κ°€ 두 κ°€μ§€ νŒ¨ν„΄μ΄ μ‘΄μž¬ν•˜λŠ”λ°, 첫 번째 방식을 동적 μŠ€μ½”ν”„, 두 번째 방식을 λ ‰μ‹œμ»¬ μŠ€μ½”ν”„λΌκ³  ν•œλ‹€. + +
+ +## πŸ“Œ Closure + +### Closureλž€? + +JavaScript의 ClosureλŠ” ν•¨μˆ˜μ™€ κ·Έ ν•¨μˆ˜κ°€ μ„ μ–Έλœ μŠ€μ½”ν”„ μ‚¬μ΄μ—μ„œ μƒμ„±λœ νŠΉμˆ˜ν•œ 관계λ₯Ό λ§ν•©λ‹ˆλ‹€. ClosureλŠ” ν•¨μˆ˜κ°€ μ •μ˜λ  λ•Œ κ·Έ μŠ€μ½”ν”„μ— μžˆλŠ” λͺ¨λ“  λ³€μˆ˜μ™€ ν•¨μˆ˜μ— λŒ€ν•œ μ ‘κ·Ό κΆŒν•œμ„ κ°–λŠ” ν•¨μˆ˜λ₯Ό μƒμ„±ν•©λ‹ˆλ‹€. + +즉, ClosureλŠ” ν•¨μˆ˜κ°€ μ„ μ–Έλœ μŠ€μ½”ν”„μ—μ„œ μ •μ˜λœ λ³€μˆ˜μ— μ•‘μ„ΈμŠ€ ν•  수 μžˆλŠ” ν•¨μˆ˜λ₯Ό μ˜λ―Έν•©λ‹ˆλ‹€. ClosureλŠ” μŠ€μ½”ν”„ μ²΄μΈμ—μ„œ μ •μ˜λœ λ³€μˆ˜λ₯Ό "κΈ°μ–΅"ν•˜κ³ , κ·Έ λ³€μˆ˜λ₯Ό κ°€μ§€κ³  μžˆλŠ” ν•¨μˆ˜κ°€ μ–Έμ œλ“ μ§€ μ‚¬μš© κ°€λŠ₯ν•˜κ²Œ ν•©λ‹ˆλ‹€. + +Closuresλ₯Ό μ‚¬μš©ν•˜λ©΄ μŠ€μ½”ν”„μ—μ„œ μ •μ˜λœ λ³€μˆ˜λ₯Ό 숨길 수 있고(정보은닉), μƒˆλ‘œμš΄ 곡간을 λ§Œλ“€μ–΄ λ³€μˆ˜μ™€ ν•¨μˆ˜μ˜ 접근을 μ œν•œ(μΊ‘μŠν™”)ν•  수 μžˆμŠ΅λ‹ˆλ‹€. ClosureλŠ” 자주 λ‹€λ₯Έ 객체와 ν•¨κ»˜ μ‚¬μš©λ˜μ–΄ 객체의 내뢀적인 μƒνƒœλ₯Ό μœ μ§€ν•˜λŠ”λ° μ‚¬μš©λ©λ‹ˆλ‹€. + +### μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œμ˜ 일반적인 ν΄λ‘œμ Έλž€? + +쀑첩 ν•¨μˆ˜μ˜ μƒμœ„ μŠ€μ½”ν”„μ˜ μ‹λ³„μžλ₯Ό μ°Έμ‘°ν•˜κ³  있고 쀑첩 ν•¨μˆ˜κ°€ μ™ΈλΆ€ ν•¨μˆ˜λ³΄λ‹€ 더 였래 μœ μ§€λ˜λŠ” κ²½μš°μ— ν•œμ •ν•˜λŠ” 것 + +### ν΄λ‘œμ €μ˜ μž₯점과 단점 + +μž₯점: μƒνƒœκ°€ μ˜λ„μΉ˜ μ•Šκ²Œ λ³€κ²½λ˜μ§€ μ•Šλ„λ‘ μ•ˆμ „ν•˜κ²Œ μ€λ‹‰ν•˜κ³  νŠΉμ • ν•¨μˆ˜μ—κ²Œλ§Œ μƒνƒœ 변경을 ν—ˆμš©ν•˜μ—¬ μƒνƒœλ₯Ό μ•ˆμ „ν•˜κ²Œ λ³€κ²½ν•˜κ³  μœ μ§€ν•˜κΈ° μœ„ν•΄ μ‚¬μš©ν•œλ‹€. + +단점: λ©”λͺ¨λ¦¬λ₯Ό μ†Œλͺ¨ν•œλ‹€. outer와 inner ν•¨μˆ˜μ˜ 경우 outer ν•¨μˆ˜κ°€ μ’…λ£Œλ˜μ—ˆμŒμ—λ„ inner ν•¨μˆ˜κ°€ μ’…λ£Œλ  λ•ŒκΉŒμ§€ λ©”λͺ¨λ¦¬μ—μ„œ ν•΄μ§€λ˜μ§€ μ•Šκ³  있기 λ•Œλ¬Έ. + +
+ +## πŸ“Œ λ³€μˆ˜ + +### λ³€μˆ˜ ν˜Έμ΄μŠ€νŒ… + +λ³€μˆ˜ 선언문이 μ½”λ“œμ˜ μ„ λ‘λ‘œ λŒμ–΄ μ˜¬λ €μ§„ κ²ƒμ²˜λŸΌ λ™μž‘ν•˜λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ 고유의 νŠΉμ§•μ„ λ³€μˆ˜ ν˜Έμ΄μŠ€νŒ…μ΄λΌν•œλ‹€. μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 λ³€μˆ˜ 선언이 μ†ŒμŠ€μ½”λ“œμ˜ 어디에 μžˆλ“  상관없이 λ‹€λ₯Έ μ½”λ“œλ³΄λ‹€ λ¨Όμ € μ‹€ν–‰ν•œλ‹€. μ†ŒμŠ€μ½”λ“œμ˜ 평가 κ³Όμ •μ—μ„œ μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 λ³€μˆ˜ 선언을 ν¬ν•¨ν•œ λͺ¨λ“  선언문을 μ†ŒμŠ€μ½”λ“œμ—μ„œ μ°Ύμ•„λ‚΄ λ¨Όμ € μ‹€ν–‰ν•œλ‹€. λ”°λΌμ„œ λ³€μˆ˜ 선언이 μ†ŒμŠ€μ½”λ“œμ˜ 어디에 μœ„μΉ˜ν•˜λŠ”μ§€μ™€ 상관없이 μ–΄λ””μ„œλ“ μ§€ λ³€μˆ˜λ₯Ό μ°Έμ‘°ν•  수 μžˆλ‹€. + +사싀 λ³€μˆ˜ 선언뿐 μ•„λ‹ˆλΌ var, let, const, function, function\*, class ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•΄μ„œ μ„ μ–Έν•˜λŠ” λͺ¨λ“  μ‹λ³„μžλŠ” ν˜Έμ΄μŠ€νŒ…λœλ‹€. λͺ¨λ“  선언문은 λŸ°νƒ€μž„ 이전 λ‹¨κ³„μ—μ„œ λ¨Όμ € μ‹€ν–‰λ˜κΈ° λ•Œλ¬Έμ΄λ‹€. + +### var, let, const + +var, let constλŠ” JavaScript의 λ³€μˆ˜λ₯Ό μ„ μ–Έν•˜λŠ” ν‚€μ›Œλ“œμ΄λ‹€. μ„Έ ν‚€μ›Œλ“œμ˜ 차이점은 λ‹€μŒκ³Ό κ°™λ‹€. + +1. var + - ES6 이전 λ²„μ „μ—μ„œ μ‚¬μš©λ˜λ˜ λ³€μˆ˜ μ„ μ–Έ 방식 + - ν•¨μˆ˜ μŠ€μ½”ν”„λ₯Ό κ°€μ§„λ‹€. + - λ³€μˆ˜ μž¬μ„ μ–Έκ³Ό μž¬ν• λ‹Ήμ΄ κ°€λŠ₯ν•˜λ‹€. + - λ³€μˆ˜ ν˜Έμ΄μŠ€νŒ…μ΄ λ°œμƒν•œλ‹€. +2. let + - ES6μ—μ„œ λ„μž…λ˜μ–΄ 블둝 μŠ€μ½”ν”„λ₯Ό κ°€μ§„λ‹€. + - λ³€μˆ˜ μž¬μ„ μ–Έμ΄ λΆˆκ°€λŠ₯ν•˜λ‹€. + - ν˜Έμ΄μŠ€νŒ…μ΄ λ°œμƒν•˜μ§€ μ•ŠλŠ” 것 처럼 λ™μž‘ν•œλ‹€. + - μž¬ν• λ‹Ήμ΄ κ°€λŠ₯ν•˜λ‹€. +3. const + - ES6μ—μ„œ λ„μž…λœ μƒμˆ˜ μ„ μ–Έ 방식이닀. + - 블둝 μŠ€μ½”ν”„λ₯Ό κ°€μ§„λ‹€. + - λ³€μˆ˜ 값이 λ³€ν•˜μ§€ μ•ŠλŠ”λ‹€. + - λ³€μˆ˜ μž¬μ„ μ–Έμ΄ λΆˆκ°€λŠ₯ν•˜λ‹€. + - ν˜Έμ΄μŠ€νŒ…μ΄ λ°œμƒν•˜μ§€ μ•ŠλŠ” 것 처럼 λ™μž‘ν•œλ‹€. + +### TDZ(Temporal Dead Zone)μ΄λž€? + +TDZλŠ” let, const ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•˜μ—¬ λ³€μˆ˜λ₯Ό μ„ μ–Έν•˜μ˜€μ„ λ•Œ, ν•΄λ‹Ή λ³€μˆ˜κ°€ μ„ μ–Έλ˜κΈ° 전에 μ ‘κ·Όν•˜λ €κ³  ν•  λ•Œ λ°œμƒν•˜λŠ” ν˜„μƒμ΄λ‹€. + +TDZλŠ” λ³€μˆ˜κ°€ μ„ μ–Έλœ μœ„μΉ˜μ—μ„œλΆ€ν„° λ³€μˆ˜κ°€ μ΄ˆκΈ°ν™”λ  λ•ŒκΉŒμ§€μ˜ ꡬ간을 μ˜λ―Έν•œλ‹€. 즉, λ³€μˆ˜κ°€ μ„ μ–Έλ˜μ—ˆμ§€λ§Œ μ΄ˆκΈ°ν™”λ˜κΈ° μ „κΉŒμ§€λŠ” λ³€μˆ˜λ₯Ό μ‚¬μš©ν•  수 μ—†λ‹€. 이 κ΅¬κ°„μ—μ„œ λ³€μˆ˜μ— μ ‘κ·Όν•˜λ©΄ β€œReferenceError” 였λ₯˜κ°€ λ°œμƒν•œλ‹€. + +TDZλŠ” let, const ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•˜λŠ” λ³€μˆ˜μ—λ§Œ 적용되며, var ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•˜λŠ” λ³€μˆ˜λŠ” μ†ŒμŠ€μ½”λ“œ 평가 λ‹¨κ³„μ—μ„œ μ΄ˆκΈ°ν™”κ°€ μ§„ν–‰λ˜μ–΄ undefinedκ°€ ν• λ‹Ήλ˜κΈ° λ•Œλ¬Έμ— 였λ₯˜κ°€ λ°œμƒν•˜μ§€ μ•ŠλŠ”λ‹€. + +TDZλŠ” λ³€μˆ˜μ˜ μŠ€μ½”ν”„λ₯Ό λͺ…ν™•ν•˜κ²Œ ν•˜κΈ° μœ„ν•΄ λ„μž…λœ κ°œλ…μœΌλ‘œ, λ³€μˆ˜κ°€ μ„ μ–Έλ˜μ§€ μ•Šμ€ μƒνƒœμ—μ„œ μ‚¬μš©λ  경우 μ—λŸ¬λ₯Ό λ°œμƒμ‹œμΌœ ν”„λ‘œκ·Έλž¨μ˜ μ•ˆμ •μ„±μ„ λ†’μ΄λŠ” 역할을 ν•œλ‹€. + +
+ +## πŸ“Œ This + +### thisλž€? + +JavaScriptμ—μ„œ thisλŠ” ν˜„μž¬ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ 주체λ₯Ό λ‚˜νƒ€λ‚΄λŠ” μ˜ˆμ•½μ–΄μ΄λ‹€. ν•¨μˆ˜λ‚˜ λ©”μ†Œλ“œ λ‚΄λΆ€μ—μ„œ this ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•˜λ©΄, ν•΄λ‹Ή ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•œ 객체에 λŒ€ν•œ μ°Έμ‘°λ₯Ό κ°€λ₯΄ν‚¨λ‹€. thisλŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ— 따라 μ°Έμ‘°ν•˜λŠ” 객체가 달라지기 λ•Œλ¬Έμ—, this의 값은 λ™μ μœΌλ‘œ κ²°μ •λœλ‹€. + +일반적으둜, ν•¨μˆ˜λ₯Ό μ „μ—­ μŠ€μ½”ν”„μ—μ„œ ν˜ΈμΆœν•˜λ©΄ thisλŠ” μ „μ—­ 객체λ₯Ό 가리킨닀. ν•˜μ§€λ§Œ, ν•¨μˆ˜λ₯Ό 객체의 λ©”μ†Œλ“œλ‘œ ν˜ΈμΆœν•˜λ©΄, thisλŠ” ν•΄λ‹Ή 객체λ₯Ό 가리킨닀. λ˜ν•œ, ν•¨μˆ˜λ₯Ό μƒμ„±μžλ‘œ ν˜ΈμΆœν•˜λ©΄ thisλŠ” μƒˆλ‘œ μƒμ„±λ˜λŠ” 객체λ₯Ό 가리킨닀. 그리고 call, apply, bind λ©”μ„œλ“œλ₯Ό 톡해 첫 번째 μΈμžμ— thisλ₯Ό 직접 할당해쀄 수 μžˆλ‹€. + +ES6μ—μ„œλŠ” ν™”μ‚΄ν‘œ ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•˜λ©΄, thisκ°€ ν•¨μˆ˜λ₯Ό μ •μ˜ν•œ μŠ€μ½”ν”„μ˜ this와 κ°™μ•„μ§€κΈ° λ•Œλ¬Έμ—, this λ°”μΈλ”©μ˜ λ™μž‘μ΄ 일반 ν•¨μˆ˜μ™€ λ‹€λ₯΄λ‹€. ν™”μ‚΄ν‘œ ν•¨μˆ˜μ—μ„œ thisλ₯Ό μ‚¬μš©ν•˜λ©΄, ν•΄λ‹Ή ν•¨μˆ˜λ₯Ό μ •μ˜ν•œ μŠ€μ½”ν”„μ˜ this 값을 μ°Έμ‘°ν•˜κ²Œ λœλ‹€. + +### λ°”μΈλ”©μ΄λž€? + +μ‹λ³„μžμ™€ 값을 μ—°κ²°ν•˜λŠ” 과정을 μ˜λ―Έν•œλ‹€. 예λ₯Ό λ“€μ–΄, λ³€μˆ˜ 선언은 λ³€μˆ˜ 이름과 ν™•λ³΄λœ λ©”λͺ¨λ¦¬ κ³΅κ°„μ˜ μ£Όμ†Œλ₯Ό λ°”μΈλ”©ν•˜λŠ” 것이닀. this 바인딩은 this(ν‚€μ›Œλ“œλ‘œ λΆ„λ₯˜λ˜μ§€λ§Œ μ‹λ³„μž 역할을 ν•œλ‹€)와 thisκ°€ 가리킬 객체λ₯Ό λ°”μΈλ”©ν•˜λŠ” 것이닀. + +### call, apply, bind의 차이 + +call, apply, bindλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ ν•¨μˆ˜μ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό λ³€κ²½ν•˜λŠ” 방법을 μ œκ³΅ν•˜λŠ” λ©”μ†Œλ“œμ΄λ‹€. ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•  λ•Œ, this의 값을 μ§€μ •ν•  수 μžˆλ‹€. + +1. call + + call λ©”μ†Œλ“œμ˜ 첫 번째 μΈμžλŠ” ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œ this둜 μ°Έμ‘°ν•  객체λ₯Ό μ˜λ―Έν•˜λ©°, 두 번째 μ΄ν›„μ˜ μΈμžλ“€μ€ ν•¨μˆ˜μ˜ λ§€κ°œλ³€μˆ˜λ‘œ μ „λ‹¬λœλ‹€. + +2. apply + + callκ³Ό 달리 두 번째 인자둜 배열을 λ°›μœΌλ©°, 이 배열은 ν•¨μˆ˜μ˜ λ§€κ°œλ³€μˆ˜λ‘œ μ „λ‹¬λœλ‹€. + +3. bind + + ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•  λ•Œ this의 값을 영ꡬ적으둜 μ§€μ •ν•  수 μžˆλ‹€. bind λ©”μ†Œλ“œλŠ” μƒˆλ‘œμš΄ ν•¨μˆ˜λ₯Ό λ°˜ν™˜ν•˜λ©°, 이 ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜λ©΄ 항상 μ§€μ •ν•œ this 값을 κ°€μ§€κ²Œ λœλ‹€. + +### μ•„λž˜μ— 좜λ ₯λ˜λŠ” 값은 λ¬΄μ—‡μΈκ°€μš”? + +```jsx +let user = { + firstName: "John", + sayHi() { + alert(`Hello, ${this.firstName}!`); + }, +}; + +setTimeout(user.sayHi, 1000); +``` + +### λ¬Έμ œκ°€ μžˆλ‹€λ©΄ μ™œ λ¬Έμ œκ°€ λ°œμƒν•˜κ³ , ν•΄κ²°ν•˜λŠ” 방법은 λ¬΄μ—‡μΈκ°€μš”? + +setTimeout에 κ°μ²΄μ—μ„œ λΆ„λ¦¬λœ ν•¨μˆ˜μΈ user.sayHiκ°€ μ „λ‹¬λ˜κΈ° λ•Œλ¬Έμ΄λ‹€. + +μ½œλ°±ν•¨μˆ˜λ‘œ λ„˜κΈ΄ ν•¨μˆ˜μ˜ thisμ—λŠ” windowκ°€ 할당이 λ˜λ―€λ‘œ, window κ°μ²΄μ—λŠ” firstNameμ΄λΌλŠ” 값이 μ—†κΈ° λ•Œλ¬Έμ— `undefined`κ°€ λ‚˜νƒ€λ‚œλ‹€. + +이λ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•œ 방법 + +1. 래퍼 ν•¨μˆ˜ μ‚¬μš© + + ```jsx + setTimeout(function () { + user.sayHi(); // Hello, John! + }, 1000); + ``` + + μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ—μ„œ userλ₯Ό λ°›μ•„μ„œ 보톡 λ•Œμ²˜λŸΌ λ©”μ„œλ“œλ₯Ό ν˜ΈμΆœν–ˆκΈ° λ•Œλ¬Έ + + ```jsx + setTimeout(() => user.sayHi(), 1000); // 동일 + ``` + + ν•˜μ§€λ§Œ userκ°€ 변경이 되면, λ³€κ²½λœ 객체의 λ©”μ„œλ“œλ₯Ό ν˜ΈμΆœν•˜κ²Œ λ˜λŠ” λ¬Έμ œκ°€ λ°œμƒ + + ```jsx + let user = { + firstName: "John", + sayHi() { + alert(`Hello, ${this.firstName}!`); + }, + }; + + setTimeout(() => user.sayHi(), 1000); + + // 1μ΄ˆκ°€ μ§€λ‚˜κΈ° 전에 user의 값이 λ°”λ€œ + user = { + sayHi() { + alert("또 λ‹€λ₯Έ μ‚¬μš©μž!"); + }, + }; + + // setTimeout에 또 λ‹€λ₯Έ μ‚¬μš©μž! + ``` + +2. bind + + ```jsx + let user = { + firstName: "John", + sayHi() { + alert(`Hello, ${this.firstName}!`); + }, + }; + + let sayHi = user.sayHi.bind(user); // (*) + + // 이제 객체 없이도 객체 λ©”μ„œλ“œλ₯Ό ν˜ΈμΆœν•  수 μžˆμŠ΅λ‹ˆλ‹€. + sayHi(); // Hello, John! + + setTimeout(sayHi, 1000); // Hello, John! + + // 1초 이내에 user 값이 변화해도 + // sayHiλŠ” κΈ°μ‘΄ 값을 μ‚¬μš©ν•©λ‹ˆλ‹€. + user = { + sayHi() { + alert("또 λ‹€λ₯Έ μ‚¬μš©μž!"); + }, + }; + ``` + +### this 바인딩과 λ ‰μ‹œμ»¬ μŠ€μ½”ν”„μ˜ 차이점은? + +λ ‰μ‹œμ»¬ μŠ€μ½”ν”„μ™€ this 바인딩은 κ²°μ • μ‹œκΈ°κ°€ λ‹€λ₯΄λ‹€. ν•¨μˆ˜μ˜ μƒμœ„ μŠ€μ½”ν”„λ₯Ό κ²°μ •ν•˜λŠ” 방식인 λ ‰μ‹œμ»¬ μŠ€μ½”ν”„λŠ” ν•¨μˆ˜ μ •μ˜κ°€ ν‰κ°€λ˜μ–΄ ν•¨μˆ˜ 객체가 μƒμ„±λ˜λŠ” μ‹œμ μ— μƒμœ„ μŠ€μ½”ν”„λ₯Ό κ²°μ •ν•œλ‹€. ν•˜μ§€λ§Œ this 바인딩은 ν•¨μˆ˜ 호좜 μ‹œκΈ°μ— κ²°μ •λœλ‹€. + +### this 바인딩 μš°μ„ μˆœμœ„ + +JavaScriptμ—μ„œ `this`λŠ” ν•¨μˆ˜κ°€ 싀행될 λ•Œ κ²°μ •λ˜λŠ” κ°’μœΌλ‘œ, ν•¨μˆ˜κ°€ ν˜ΈμΆœλ˜λŠ” 방식에 따라 `this`κ°€ μ°Έμ‘°ν•˜λŠ” 객체가 κ²°μ •λ©λ‹ˆλ‹€. μ΄λ•Œ `this`의 바인딩 μš°μ„ μˆœμœ„λŠ” λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€. + +1. new 바인딩 + - μƒμ„±μž ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•˜μ—¬ μƒˆλ‘œμš΄ 객체λ₯Ό 생성할 λ•Œ `this`λŠ” μƒˆλ‘œ μƒμ„±λœ 객체λ₯Ό μ°Έμ‘°ν•©λ‹ˆλ‹€. +2. λͺ…μ‹œμ  바인딩 (Explicit binding) + - **`call`**, **`apply`**, **`bind`** λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•˜μ—¬ `this`λ₯Ό λͺ…μ‹œμ μœΌλ‘œ μ§€μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€. +3. μ•”μ‹œμ  바인딩 (Implicit binding) + - 객체의 λ©”μ„œλ“œλ₯Ό ν˜ΈμΆœν•  λ•Œ, ν•΄λ‹Ή λ©”μ„œλ“œκ°€ μ†ν•΄μžˆλŠ” 객체가 `this`λ₯Ό μ°Έμ‘°ν•©λ‹ˆλ‹€. +4. κΈ°λ³Έ 바인딩 (Default binding) + - μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ—μ„œ `this`λŠ” μ „μ—­ 객체λ₯Ό μ°Έμ‘°ν•˜λ©°, strict modeμ—μ„œλŠ” `undefined`λ₯Ό λ°˜ν™˜ν•©λ‹ˆλ‹€. + +λ§Œμ•½ μœ„ 쑰건에 λ§žλŠ” 바인딩이 μ—†λŠ” 경우, `this`λŠ” undefinedκ°€ λ©λ‹ˆλ‹€. + +**`new`** 바인딩, λͺ…μ‹œμ  바인딩, μ•”μ‹œμ  바인딩, κΈ°λ³Έ 바인딩은 λͺ¨λ‘ μš°μ„ μˆœμœ„λ₯Ό κ°€μ§€λ©°, 바인딩이 κ²ΉμΉ˜λŠ” 경우 μš°μ„ μˆœμœ„κ°€ 높은 바인딩이 μ μš©λ©λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄, **`call`** λ˜λŠ” **`apply`** λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•΄ λͺ…μ‹œμ μœΌλ‘œ `this`λ₯Ό μ§€μ •ν•œ 경우, μ•”μ‹œμ  바인딩보닀 μš°μ„ μˆœμœ„κ°€ λ†’μŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ `new` 바인딩이 적용된 경우, λͺ¨λ“  바인딩보닀 μš°μ„ μˆœμœ„κ°€ κ°€μž₯ λ†’μŠ΅λ‹ˆλ‹€. + +λ”°λΌμ„œ, `this`의 값이 μ–΄λ–»κ²Œ κ²°μ •λ˜λŠ”μ§€ μ΄ν•΄ν•˜κ³  μš°μ„ μˆœμœ„λ₯Ό νŒŒμ•…ν•˜μ—¬ μ μ ˆν•œ 바인딩 방식을 μ„ νƒν•˜λŠ” 것이 μ€‘μš”ν•©λ‹ˆλ‹€. + +
+ +## πŸ“Œ μžλ£Œν˜• + +JavaScript의 μžλ£Œν˜•μ€ 크게 μ›μ‹œ νƒ€μž…κ³Ό 객체 νƒ€μž… 두 κ°€μ§€λ‘œ λ‚˜λ‰œλ‹€ + +### μ›μ‹œ νƒ€μž… + +μ›μ‹œ νƒ€μž…μ€ 값을 직접 μ €μž₯ν•˜κ³  μ°Έμ‘°ν•˜λŠ” νƒ€μž…μœΌλ‘œ, λ‹€μŒκ³Ό 같은 6κ°€μ§€ νƒ€μž…μ΄ μžˆλ‹€. + +- number: 숫자 +- string: λ¬Έμžμ—΄ +- boolean: 논리값 (μ°Έ, κ±°μ§“) +- null: 값이 μ—†μŒμ„ λ‚˜νƒ€λ‚΄λŠ” νŠΉλ³„ν•œ νƒ€μž… +- undefined: 값이 ν• λ‹Ήλ˜μ§€ μ•ŠμŒμ„ λ‚˜νƒ€λ‚΄λŠ” νŠΉλ³„ν•œ νƒ€μž… +- symbol: μœ μΌν•˜κ³  λ³€κ²½ λΆˆκ°€λŠ₯ν•œ κ°’ + +μ›μ‹œ νƒ€μž…μ€ λ³€μˆ˜μ— 직접 값을 ν• λ‹Ήν•˜λ―€λ‘œ, λ³€μˆ˜λΌλ¦¬μ˜ μ—°μ‚°μ—μ„œ κ°’ μžμ²΄κ°€ λΉ„κ΅λœλ‹€. 이λ₯Ό κ°’ 비ꡐ(value comparison)라고 ν•œλ‹€. + +### 객체 νƒ€μž… + +객체 νƒ€μž…μ€ μ—¬λŸ¬ 개의 값을 ν•˜λ‚˜μ˜ λ³€μˆ˜μ— μ €μž₯ν•˜λŠ” νƒ€μž…μ΄λ‹€. κ°μ²΄λŠ” λ‹€μ–‘ν•œ 데이터 νƒ€μž…μ„ 포함할 수 있으며, 객체 νƒ€μž…μ˜ λ³€μˆ˜λŠ” 객체의 μ°Έμ‘°κ°’(reference)을 μ €μž₯ν•œλ‹€. 객체 νƒ€μž…μ—λŠ” λ‹€μŒκ³Ό 같은 νƒ€μž…μ΄ 있. + +- object: 일반적인 객체 +- array: λ°°μ—΄ +- function: ν•¨μˆ˜ +- date: λ‚ μ§œ +- λ“± + +객체 νƒ€μž…μ€ 참쑰값을 μ €μž₯ν•˜λ―€λ‘œ, λ³€μˆ˜λΌλ¦¬μ˜ μ—°μ‚°μ—μ„œ 참쑰값이 λΉ„κ΅λœλ‹€. 이λ₯Ό μ°Έμ‘° 비ꡐ(reference comparison)라고 ν•œλ‹€. + +JavaScript의 μžλ£Œν˜•μ€ λ™μ μœΌλ‘œ κ²°μ •λœλ‹€. 즉, λ³€μˆ˜μ— ν• λ‹Ήλ˜λŠ” 값에 따라 μžλ™μœΌλ‘œ νƒ€μž…μ΄ κ²°μ •λœλ‹€. μ΄λŸ¬ν•œ νŠΉμ§• λ•Œλ¬Έμ— JavaScriptλŠ” 자유둜운 νƒ€μž… λ³€ν™˜(free-type conversion)을 μ§€μ›ν•˜λ©°, 이λ₯Ό μ΄μš©ν•΄ λ‹€μ–‘ν•œ 연산을 μˆ˜ν–‰ν•  수 μžˆλ‹€. + +### 데이터 νƒ€μž…μ„ λ‚˜λˆ„λŠ” μ΄μœ λŠ” 무엇인가? + +1. 값을 μ €μž₯ν•  λ•Œ ν™•λ³΄ν•΄μ•Όν•˜λŠ” λ©”λͺ¨λ¦¬ κ³΅κ°„μ˜ 크기λ₯Ό κ²°μ •ν•˜κΈ° μœ„ν•΄ +2. 값을 μ°Έμ‘°ν•  λ•Œ ν•œ λ²ˆμ— 읽어 λ“€μ—¬μ•Ό ν•  λ©”λͺ¨λ¦¬ κ³΅κ°„μ˜ 크기λ₯Ό κ²°μ •ν•˜κΈ° μœ„ν•΄ +3. λ©”λͺ¨λ¦¬μ—μ„œ 읽어 듀인 2μ§„μˆ˜λ₯Ό μ–΄λ–»κ²Œ 해석할지 κ²°μ •ν•˜κΈ° μœ„ν•΄ + +
+ +## πŸ“Œ μ—°μ‚°μž + +### μ‚°μˆ  μ—°μ‚°μž + +ν”Όμ—°μ‚°μžλ₯Ό λŒ€μƒμœΌλ‘œ μˆ˜ν•™μ  계산을 μˆ˜ν–‰ν•΄ μƒˆλ‘œμš΄ 숫자 값을 λ§Œλ“ λ‹€. μ‚°μˆ  연산이 λΆˆκ°€λŠ₯ν•œ 경우, NaN을 λ°˜ν™˜ν•œλ‹€. + +1. 이항 μ‚°μˆ  μ—°μ‚°μž + + μ–Έμ œλ‚˜ μƒˆλ‘œμš΄ 값을 λ§Œλ“€ 뿐 + +2. 단항 μ‚°μˆ  μ—°μ‚°μž + + 증가/κ°μ†Œ(++/β€”) μ—°μ‚°μžλŠ” ν”Όμ—°μ‚°μžμ˜ 값을 λ³€κ²½ν•˜λŠ” λΆ€μˆ˜ 효과 λ°œμƒ, ν”Όμ—°μ‚°μžμ˜ 값을 λ³€κ²½ν•˜λŠ” 암묡적 ν• λ‹Ή + + 숫자 νƒ€μž…μ΄ μ•„λ‹Œ ν”Όμ—°μ‚°μžμ— + 단항 μ—°μ‚°μžλ₯Ό μ‚¬μš©ν•˜λ©΄ ν”Όμ—°μ‚°μžλ₯Ό 숫자 νƒ€μž…μœΌλ‘œ λ³€ν™˜ν•˜μ—¬ λ°˜ν™˜ν•œλ‹€. ν”Όμ—°μ‚°μžλ₯Ό λ³€κ²½ν•˜λŠ” 것은 μ•„λ‹ˆκ³  숫자 νƒ€μž…μœΌλ‘œ λ³€ν™˜ν•œ 값을 μƒμ„±ν•΄μ„œ λ°˜ν™˜ν•œλ‹€. + +3. λ¬Έμžμ—΄ μ—°κ²° μ—°μ‚°μž + + - μ—°μ‚°μžλŠ” ν”Όμ—°μ‚°μž 쀑 ν•˜λ‚˜ 이상이 λ¬Έμžμ—΄μΈ 경우 λ¬Έμžμ—΄ μ—°κ²° μ—°μ‚°μžλ‘œ λ™μž‘ν•œλ‹€. + + 암묡적 νƒ€μž… λ³€ν™˜ λ˜λŠ” νƒ€μž… κ°•μ œ λ³€ν™˜ λ°œμƒ + +### 비ꡐ μ—°μ‚°μž + +- 동등/일치 비ꡐ μ—°μ‚°μž + - 동등 비ꡐ μ—°μ‚°μž: λŠμŠ¨ν•œ 비ꡐ + - 일치 비ꡐ μ—°μ‚°μž: μ—„κ²©ν•œ 비ꡐ + 동등 비ꡐ μ—°μ‚°μžλŠ” μ’Œν•­κ³Ό μš°ν•­μ˜ ν”Όμ—°μ‚°μžλ₯Ό 비ꡐ할 λ•Œ λ¨Όμ € 암묡적 νƒ€μž… λ³€ν™˜μ„ 톡해 νƒ€μž…μ„ μΌμΉ˜μ‹œν‚¨ ν›„ 같은 값인지 λΉ„κ΅ν•œλ‹€. + +### μ•„λž˜ μ—°μ‚°μ˜ κ²°κ³ΌλŠ” 무엇인가? + +```jsx +// 동등 비ꡐ. κ²°κ³Όλ₯Ό μ˜ˆμΈ‘ν•˜κΈ° μ–΄λ ΅λ‹€. +"0" == ""; //  false +0 == ""; //  true +0 == "0"; //true +false == "false"; // false +false == "0"; // true +false == null; // false +false == undefined; //  false +``` + +```jsx +NaN === NaN; // false +0 === -0; // true +0 == -0; //true +```