210126_TIL

seungyeonΒ·2021λ…„ 1μ›” 26일
0

TIL

λͺ©λ‘ 보기
5/64

🍎 였늘 ν•œ 일

  • Coplit - 객체 문제 ν’€κΈ° 및 제좜
  • μ›μ‹œμžλ£Œν˜•κ³Ό μ°Έμ‘°μžλ£Œν˜• ν•™μŠ΅
  • λ³€μˆ˜μ˜ μœ νš¨λ²”μœ„(Scope)와 ν΄λ‘œμ €(closure) ν•™μŠ΅
  • socrative - μ›μ‹œμžλ£Œν˜•, μ°Έμ‘°μžλ£Œν˜• ν€΄μ¦ˆ ν’€κΈ°
  • socrative - μŠ€μ½”ν”„, ν΄λ‘œμ € ν€΄μ¦ˆ ν’€κΈ°

✍ κΈ°μ–΅ν•  것듀

μ›μ‹œ μžλ£Œν˜•κ³Ό μ°Έμ‘° μžλ£Œν˜•

μ›μ‹œμžλ£Œν˜• - String, Number, Bigint, Boolean, undefined, Symbol, (null)
μ°Έμ‘°μžλ£Œν˜• - Array([]), Object({}), Function(function(){})

  • μ›μ‹œ μžλ£Œν˜•μ΄ 할당될 λ•Œμ—λŠ” λ³€μˆ˜μ— κ°’(value) μžμ²΄κ°€ λ‹΄κΈ°κ³ , μ°Έμ‘° μžλ£Œν˜•μ΄ 할당될 λ•ŒλŠ” λ³΄κ΄€ν•¨μ˜ μ£Όμ†Œ(reference)κ°€ λ‹΄κΈ΄λ‹€.
  • μ°Έμ‘° μžλ£Œν˜•μ€ 기쑴에 κ³ μ •λœ 크기의 보관함(call stack)이 μ•„λ‹ˆλΌ, λ™μ μœΌλ‘œ 크기가 λ³€ν•˜λŠ” νŠΉλ³„ν•œ 보관함(heap)을 μ‚¬μš©ν•œλ‹€.

Scope

  1. Global Scope vs. Local Scope
  2. Block Scope vs. Function Scope
  3. μ „μ—­λ³€μˆ˜μ™€ window 객체
  4. 선언없이 μ΄ˆκΈ°ν™”λœ μ „μ—­λ³€μˆ˜ ➑ Strict Modeλ₯Ό μ‚¬μš©ν•˜μž.
  • JavaScript의 Scope의 μ˜λ―Έμ™€ 적용 λ²”μœ„λ₯Ό 이해할 수 μžˆλ‹€
  • Local scopeμ—μ„œ μ„ μ–Έλœ λ³€μˆ˜λŠ” Global scopeμ—μ„œ μ°Έμ‘°ν•  수 μ—†λ‹€. --> ReferenceError λ°œμƒ
  • JavaScript의 Scope μ£Όμš” κ·œμΉ™
    • 쀑첩 κ·œμΉ™
    • block scope(block-level scope) vs. function scope(function-level scope)
    • μ „μ—­ λ³€μˆ˜μ™€ μ „μ—­ 객체의 의미
    • let, const, var의 차이
letconstvar
μœ νš¨λ²”μœ„Block ScopeBlock ScopeFunction Scope
μž¬ν• λ‹Ήβ­•βŒβ­•
μž¬μ„ μ–ΈβŒβŒβ­•

Closure

  • Closure의 μ •μ˜μ™€ νŠΉμ§•
  • Closureλ₯Ό ν™œμš©ν•΄μ„œ μ™ΈλΆ€ν•¨μˆ˜μ˜ λ³€μˆ˜μ— μ ‘κ·Όν•  수 μžˆλ‹€.
  • Closure의 μœ μš©ν•˜κ²Œ μ“°μ΄λŠ” λͺ‡ 가지 μ½”λ”© νŒ¨ν„΄

κ·Έ μ™Έ

Object.keys()
객체가 가지고 μžˆλŠ” keyλ“€μ˜ λͺ©λ‘μ„ λ°°μ—΄λ‘œ λ¦¬ν„΄ν•˜λŠ” λ©”μ„œλ“œ
객체의 λ‚΄μž₯ λ©”μ†Œλ“œκ°€ μ•„λ‹Œ 객체 μƒμ„±μžμΈ Objectκ°€ 직접 가지고 μžˆλŠ” λ©”μ†Œλ“œμ΄λ‹€.

Object.values()
객체의 valueκ°’λ“€μ˜ λͺ©λ‘μ„ λ°°μ—΄λ‘œ λ¦¬ν„΄ν•˜λŠ” λ©”μ„œλ“œ

Object.entries(obj)
킀와 κ°’μ˜ 쌍으둜 이루어진 길이 2짜리 배열을 λ¦¬ν„΄ν•˜λŠ” λ©”μ„œλ“œ
이쀑배열이 λ¦¬ν„΄λœλ‹€.

객체에 μƒˆλ‘œμš΄ ν‚€-κ°’ μŒμ„ μΆ”κ°€ν•˜λŠ” 방법

let obj = {};
// 여기에 keyκ°€ 'age'이고 valueκ°€ 21인 ν”„λ‘œνΌν‹°λ₯Ό μΆ”κ°€ν•˜κ³  μ‹Άλ‹€λ©΄ μ΄λ ‡κ²Œ ν•˜λ©΄ λœλ‹€.
obj.age = 21;
  • μœ„μ™€ 같은 Dot notation을 μ‚¬μš©ν•œ 방법은 key값이 정적인 κ²½μš°μ—λ§Œ κ°€λŠ₯ν•˜λ‹€. keyκ°€ 동적일 λ•ŒλŠ” μ•„λž˜μ²˜λŸΌ Braket notation을 μ‚¬μš©ν•œ 방법을 써야 ν•œλ‹€.
let obj1 = { apple: 3, orange: 5, mango: 2 };
let obj2 = { apple: 2, peach: 7 };
// obj2μ—μ„œ obj1에 μ—†λŠ” ν”„λ‘œνΌν‹°λ§Œ κ³¨λΌμ„œ obj1에 μΆ”κ°€ν•΄μ£Όμž
for (let prop in obj2) {
    if (!obj1[prop]) {
      obj1[prop] = obj2[prop];
    }
  }

λ§ˆμ§€λ§‰μ— console.log(i); // --> 5 인 이유

forλ¬Έ μ•ˆμ—μ„œ console.log(i); // -->4 λ₯Ό ν•œ 이후에 증감문을 ν•œλ²ˆ 더 거치기 λ•Œλ¬Έμ— 5둜 좜λ ₯λœλ‹€.

πŸ¦’ λ‚΄κ°€ μ‚¬μš©ν•œ μ½”λ“œ(πŸ‘ˆ)λŠ” μ΄λ ‡κ²Œ(πŸ‘‰)도 ν‘œν˜„ν•  수 μžˆλ‹€.

  • !arr.length === arr.length === 0
  • !obj1[key] === !(key in obj1)

πŸ– Socrative

Q. ν•¨μˆ˜κ°€ μ‹€ν–‰λœ ν›„, μ½˜μ†”μ— 좜λ ₯λ˜λŠ” args의 값은 λ¬΄μ—‡μΌκΉŒμš”?


function printMaxNums(...args) {
  console.log(args)
}

printMaxNums(10, 30, 40); // --> [10, 30, 40]

...argsλŠ” rest parameter, rest syntax라고 λΆ€λ¦…λ‹ˆλ‹€. λ‚¨μ•„μžˆλŠ” λͺ¨λ“  인자λ₯Ό ν•˜λ‚˜μ˜ 배열에 λ‹΄κΈ° λ•Œλ¬Έμ— μ΄λ ‡κ²Œ λΆ€λ¦…λ‹ˆλ‹€.
Line 3 : printMaxNums(10, 30, 40)
ν•¨μˆ˜ printMaxNums의 μΈμžλŠ” 총 3κ°œμž…λ‹ˆλ‹€. 이 인자λ₯Ό λͺ¨λ‘ ν•¨μˆ˜ printMaxNums에 μ „λ‹¬ν•˜μ—¬ μ‹€ν–‰ν•©λ‹ˆλ‹€.

function printMaxNums(...args) {
  console.log(args)
}

싀행이 되면 rest parameter argsλŠ” λͺ¨λ“  λ‚¨μ•„μžˆλŠ” 인자λ₯Ό ν• λ‹Ήλ°›μŠ΅λ‹ˆλ‹€. λ”°λ‘œ λ§€κ°œλ³€μˆ˜λ₯Ό 뺴놓지 μ•Šμ•˜μŒμœΌλ‘œ argsλŠ” λ°°μ—΄μ˜ ν˜•νƒœλ‘œ λͺ¨λ“  인자λ₯Ό ν• λ‹Ήλ°›μŠ΅λ‹ˆλ‹€. κ·Έλ ‡κ²Œ λ•Œλ¬Έμ— 닡은 [10, 30, 40], Aμž…λ‹ˆλ‹€.

function printMaxNums(num1, ...args) {
  console.log(args) // [30, 40]
}

λ”°λ‘œ λ§€κ°œλ³€μˆ˜λ₯Ό μ§€μ •ν–ˆμ—ˆλ‹€λ©΄, 남은 λ§€κ°œλ³€μˆ˜λ§Œ λ°°μ—΄μ˜ ν˜•νƒœλ‘œ rest parameter args에 ν• λ‹Ήν•©λ‹ˆλ‹€.

Q. λ‹€μŒμ˜ μ½”λ“œλ₯Ό μ‹€ν–‰μ‹œν‚¨ 후에 result 의 값은 무엇이 λ κΉŒμš”?

let x = 10;

function outer () {  
  let x = 20;  
  function inner () {
    x = x + 10;
    return x;
  }  
  inner();
}

outer();
let result = x; // --> λ‚΄κ°€ κ³ λ₯Έ μ˜€λ‹΅: 30. μ •λ‹΅: 10

outer ν•¨μˆ˜λ₯Ό μ‹€ν–‰ν•˜λ©΄, outer ν•¨μˆ˜ μŠ€μ½”ν”„ λ‚΄μ—μ„œ inner ν•¨μˆ˜κ°€ ν˜ΈμΆœλ©λ‹ˆλ‹€.
innerλŠ” λ³€μˆ˜ x의 값에 10을 λ”ν•˜λŠ” ν•¨μˆ˜μž…λ‹ˆλ‹€. 이 λ•Œ, inner에 μ˜ν•΄ 값이 λ³€κ²½λ˜λŠ” xλŠ” inner의 λ°”λ‘œ ν•œ 단계 μœ„ μŠ€μ½”ν”„μΈ outer에 μ†ν•œ xμž…λ‹ˆλ‹€. 즉 innerκ°€ μ‹€ν–‰λ˜λ©΄μ„œ, outerν•¨μˆ˜ μŠ€μ½”ν”„μ˜ λ³€μˆ˜ x값이 30으둜 λ°”λ€λ‹ˆλ‹€.
ν•˜μ§€λ§Œ λ³€μˆ˜ result에 ν• λ‹Ήλœ 값은 μ „μ—­ μŠ€μ½”ν”„μ˜ xμ΄λ―€λ‘œ, outerν•¨μˆ˜κ°€ ν˜ΈμΆœλ˜μ–΄λ„ μ•„λ¬΄λŸ° 영ν–₯을 받지 μ•ŠμŠ΅λ‹ˆλ‹€.


πŸ¦„ 더 곡뢀해야 ν•  것

  • Closure에 λŒ€ν•΄ ν™•μ‹€ν•˜κ²Œ 읡히자
  • for문의 continue

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

  • 객체λ₯Ό λ°°μ—΄λ§ŒνΌ 자유둭게 닀루지 λͺ»ν•˜κ³  μžˆλ‹€λŠ” 것을 λŠκΌˆλ‹€. μ—°μŠ΅μ΄ 더더더더 ν•„μš”ν•˜λ‹€.
  • μ–΄μ ―λ°€ κΏˆμ—μ„œλ„ λ³€μˆ˜λͺ…을 가지고 κ³ λ―Όν–ˆλŠ”λ°, 였늘 문제λ₯Ό ν’€λ©΄μ„œ λ‚΄κ°€ μ‚¬μš©ν•œ λ³€μˆ˜κ°€ λ ˆνΌλŸ°μŠ€μ™€ μ™„μ „ λ˜‘κ°™μ•˜λ˜ λ¬Έμ œκ°€ λ§Žμ•„μ„œ λΏŒλ“―ν–ˆλ‹€. 직관적인 λ³€μˆ˜λͺ…을 μ‚¬μš©ν•˜λŠ” 버릇은 λ‚˜μ€‘μ— ν˜‘μ—…μ„ ν•  λ•Œμ—λ„ 도움이 될거라고 μƒκ°ν•œλ‹€. 계속 λ…Έλ ₯ν•˜μž!
  • μ—­μ‹œ μ–΄λ €μš΄ 문제λ₯Ό ν•΄κ²°ν•˜λŠ” 과정은 μ–Έμ œλ‚˜ μ§œλ¦Ών•˜λ‹€. 객체 λ§ˆμ§€λ§‰ λ¬Έμ œκ°€ κ·Έλž¬λ‹€.γ…Žγ……γ…Ž

🌈 내일 ν•  일

  • λ“œλ””μ–΄ λ‘λ €μ›Œν•˜λ˜ git을 μ‚¬μš©ν•˜λŠ” 법을 λ°°μš΄λ‹€. 내일 κΌ­ git을 μ •λ³΅ν•΄λ²„λ¦¬μž!
  • CLI(Command Line Interface) κ³΅λΆ€ν•˜κΈ°
  • κ·Έλ™μ•ˆ λ°°μ› λ˜ λ‚΄μš©λ“€ ν•œλ²ˆ 더 총 μ •λ¦¬ν•˜κΈ°

0개의 λŒ“κΈ€