πŸ’» ν˜Έμ΄μŠ€νŒ… 그리고 ν΄λ‘œμ €

waterglassesΒ·2022λ…„ 3μ›” 21일
1

TIL

λͺ©λ‘ 보기
1/50
post-thumbnail

ν”„λ‘œκ·Έλž˜λ¨ΈμŠ€ λ°λΈŒμ½”μŠ€μ— πŸŽ‰ν•©κ²©πŸŽ‰ν•˜κ³  처음으둜 μž‘μ„±ν•˜λŠ” TIL!
κΎΈμ€€νžˆ μž‘μ„±ν•˜μž!πŸ™πŸ»
κ³΅λΆ€ν•œ λ‚΄μš© 그리고 μ–΄λ €μ› λ˜ 점, 더 μ•Œκ³ μ‹Άμ€ 점, λŠλ‚€μ μ„ μœ„μ£Όλ‘œ 정리할 것이닀.

πŸ“ƒ 였늘 κ³΅λΆ€ν•œ 것

ν˜Έμ΄μŠ€νŒ…

어디에 μ„ μ–Έν–ˆλŠλƒμ— 상관없이 선언을 제일 μœ„λ‘œ λŒμ–΄μ˜¬λ €μ£ΌλŠ” 것!
var λ³€μˆ˜ μ„ μ–Έκ³Ό ν•¨μˆ˜ μ„ μ–Έλ¬Έμ—μ„œλ§Œ μΌμ–΄λ‚œλ‹€.

λ§Žμ€ 도움이 된 λΈ”λ‘œκ·Έ 좜처
[JavaScript] ν˜Έμ΄μŠ€νŒ…(Hoisting)μ΄λž€

ν΄λ‘œμ €

ν•¨μˆ˜κ°€ μ„ μ–Έλœ ν™˜κ²½μ˜ μŠ€μ½”ν”„λ₯Ό κΈ°μ–΅ν•˜μ—¬ ν•¨μˆ˜κ°€ μŠ€μ½”ν”„ λ°–μ—μ„œ 싀행될 λ•Œμ—λ„ κΈ°μ–΅ν•œ μŠ€μ½”ν”„μ— μ ‘κ·Όν•  수 있게 λ§Œλ“œλŠ” 문법

function func() {
  let i=1;
  for (i=1; i<=5; i++) {
    setTimeout(function() {
    	console.log(i);
    }, i*500);
  }
}
func(); // 5 5 5 5 5

λΆ„λͺ… λ³΄μ•˜λ˜ μ½”λ“œμž„μ—λ„ λΆˆκ΅¬ν•˜κ³  또! κ²°κ³Όλ₯Ό 1 2 3 4 5둜 μ˜ˆμΈ‘ν–ˆλ‹€. λ‚˜λŠ” λ°”λ³΄λ‹€πŸ€¦β€ μ½œλ°±ν•¨μˆ˜λŠ” ν΄λ‘œμ €μ΄κΈ° λ•Œλ¬Έμ— μƒμœ„ i 값을 물어보고 이미 i값은 5κΉŒμ§€ μ¦κ°€ν•˜μ˜€κΈ° λ•Œλ¬Έμ— 5κ°€ 5번 좜λ ₯λ˜λŠ” 것이닀.

ν•΄κ²° 방법

  • μ¦‰μ‹œ μ‹€ν–‰ ν•¨μˆ˜(IIFE)λ₯Ό μ΄μš©ν•˜μ—¬ ν•΄κ²°
function func() {
  for (var i=1; i<=5; i++) {
    (function (num) { 
      setTimeout(function() { 
      console.log(num);
      }, num*500);
    })(i);
  }
}
func(); // 1 2 3 4 5

μ¦‰μ‹œ μ‹€ν–‰ ν•¨μˆ˜ : μ •μ˜λ˜μžλ§ˆμž μ¦‰κ°μ μœΌλ‘œ μ‹€ν–‰λ˜λŠ” ν•¨μˆ˜

  • 블둝 μŠ€μ½”ν”„λ‘œ ν•΄κ²° : let을 μ‚¬μš©ν•˜λ©΄ forλ¬Έ λ‚΄μ˜ μƒˆλ‘œμš΄ μŠ€μ½”ν”„λ₯Ό κ°–κΈ° λ•Œλ¬Έμ— 맀 λ°˜λ³΅λ§ˆλ‹€ μƒˆλ‘œμš΄ iκ°€ μ„ μ–Έλ˜κ³  반볡이 λλ‚œ μ΄ν›„μ˜ κ°’μœΌλ‘œ μ΄ˆκΈ°ν™”λœλ‹€.
function func() {
  for (let i=1; i<=5; i++) {
    setTimeout(function() {
    	console.log(i);
    }, i*500);
  }
}
func(); // 1 2 3 4 5

πŸ˜κ·Έλ™μ•ˆ ν΄λ‘œμ €λ₯Ό 자주 μ‚¬μš©ν•˜κ³  있던 λ‚˜!
λ°±μ€€μ—μ„œ node.js둜 μž…λ ₯을 받을 λ•Œ μ‚¬μš©ν•˜λ˜ μ½”λ“œμ΄λ‹€. 이제 ν™•μ‹€νžˆ μ•Œκ³ λ‚˜λ‹ˆ 보인닀.. ν΄λ‘œμ €κ°€!

//λ°±μ€€(BOJ) μž…λ ₯ λ°›κΈ°
const fs = require('fs');
const stdin = fs.readFileSync('/dev/stdin').toString().split('\n');

const input = (() => {
  let line = 0;
  return () => stdin[line++];
})(); 

μ¦‰μ‹œ μ‹€ν–‰ ν•¨μˆ˜μ™€ ν΄λ‘œμ €λ₯Ό μ‚¬μš©ν•˜μ—¬ input ν•¨μˆ˜λ₯Ό λ§Œλ“€μ—ˆκ³ 
μž…λ ₯값이

10 10 3
13 2 5 11
1
2

μ΄λ ‡κ²Œ μ£Όμ–΄μ§ˆ 경우 inputν•¨μˆ˜λ₯Ό μ‹€ν–‰ν•  λ•Œλ§ˆλ‹€ ν•œ 쀄 μ”© λ°˜ν™˜ν•˜λ„λ‘ ν•˜λŠ” μ½”λ“œμ΄λ‹€!

πŸ”₯ λŠλ‚€μ 

사싀 였늘 κ³΅λΆ€ν•œ λ‚΄μš©λ“€μ„ μ˜ˆμ „μ— ν¬μŠ€νŒ… ν•œ 적이 μžˆμ—ˆλ‹€. κ·Έ λ•Œμ—λŠ” λ‚˜λ¦„ 이 κ°œλ…λ“€μ„ 적고 μ˜¬λ Έμ—ˆλŠ”λ° 이해λ₯Ό 100ν”„λ‘œ ν•˜μ§€ λͺ»ν–ˆμŒμ—λ„ μš°μ„  μž‘μ„±ν–ˆλ˜ 것 κ°™λ‹€. λ‹€μ‹œ λ³΅μŠ΅ν•˜λ©΄μ„œ μ΄ν•΄ν•˜λ‹ˆκΉŒ 이제 κ°œλ…μ„ ν—·κ°ˆλ¦¬λŠ” 일은 없을 것 κ°™λ‹€.

μ˜ˆμ „μ— 올렸던 κ°œλ…
[FE/JavaScript] ν΄λ‘œμ €(Closure)
[FE/JavaScript] ν˜Έμ΄μŠ€νŒ…(Hoisting)
[FE/JavaScript] Scope(μŠ€μ½”ν”„)

κ·Έλ™μ•ˆ 원리도 λͺ¨λ₯΄κ³  μ‚¬μš©ν–ˆλ˜ ν΄λ‘œμ €! λ‚΄κ°€ μ‚¬μš©ν•˜λŠ” μ½”λ“œκ°€ μ™œ μ΄λ ‡κ²Œ μ‚¬μš©ν•΄μ•Ό ν•˜λŠ”μ§€, μ–΄λ–€ μ›λ¦¬λ‘œ μ‹€ν–‰λ˜λŠ”μ§€ 등을 ν™•μ‹€νžˆ μ•Œμ§€ λͺ»ν•œ 채 κ΅¬ν˜„μ—λ§Œ μ§‘μ€‘ν–ˆλ˜ 것을 λ°˜μ„±ν•œλ‹€.
μ•žμœΌλ‘œ λ‚―μ„  κ°œλ…λ“€λ„ λ‚˜μ˜€κ² μ§€λ§Œ 이해할 λ•Œ κΉŒμ§€ λκΉŒμ§€ νŒŒκ³ λ“€μ–΄μ•Ό κ² λ‹€. ν™”μ΄νŒ…πŸ”₯ ν•˜μž!!

였늘의 λ‚΄μš© 정리

λ°λΈŒμ½”μŠ€ Day1

profile
맀 μˆœκ°„ μ„±μž₯ν•˜λŠ” κ°œλ°œμžκ°€ 되렀고 λ…Έλ ₯ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

0개의 λŒ“κΈ€