이 글은 ν”„λ‘ νŠΈμ—”λ“œ 직무 λ©΄μ ‘ 질문과 κ΄€λ ¨λœ Github μ €μž₯μ†Œ front-end-interview-handbook λ²ˆμ—­λ³ΈμœΌλ‘œ, μ €μž₯μ†Œμ— Translations ν΄λ”μ˜ λ‚΄μš©κ³Ό λ™μΌν•©λ‹ˆλ‹€.


JS 질문 #1

ν”„λ‘ νŠΈμ—”λ“œ λ©΄μ ‘ 질문 - JS μ§ˆλ¬Έμ— λŒ€ν•œ ν•΄μ„€μž…λ‹ˆλ‹€.
Pull Requestλ₯Ό ν†΅ν•œ μ œμ•ˆ, μˆ˜μ • μš”μ²­ ν™˜μ˜ν•©λ‹ˆλ‹€.

이벀트 μœ„μž„μ— λŒ€ν•΄ μ„€λͺ…ν•˜μ„Έμš”.

이벀트 μœ„μž„μ€ 이벀트 λ¦¬μŠ€λ„ˆλ₯Ό ν•˜μœ„ μš”μ†Œμ— μΆ”κ°€ν•˜λŠ” λŒ€μ‹  μƒμœ„ μš”μ†Œμ— μΆ”κ°€ν•˜λŠ” κΈ°λ²•μž…λ‹ˆλ‹€. λ¦¬μŠ€λ„ˆλŠ” DOM의 event bubbling으둜 인해 ν•˜μœ„ μš”μ†Œμ—μ„œ μ΄λ²€νŠΈκ°€ λ°œμƒλ  λ•Œλ§ˆλ‹€ μ‹€ν–‰λ©λ‹ˆλ‹€. 이 기술의 이점은 λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

  • 각 ν•˜μœ„ ν•­λͺ©μ— 이벀트 ν•Έλ“€λŸ¬λ₯Ό μ—°κ²°ν•˜μ§€ μ•Šκ³ , μƒμœ„ μš”μ†Œμ— ν•˜λ‚˜μ˜ 단일 ν•Έλ“€λŸ¬λ§Œ ν•„μš”ν•˜κΈ° λ•Œλ¬Έμ— λ©”λͺ¨λ¦¬ μ‚¬μš© 곡간이 μ€„μ–΄λ“­λ‹ˆλ‹€.
  • 제거된 μš”μ†Œμ—μ„œ ν•Έλ“€λŸ¬λ₯Ό ν•΄μ œν•˜κ³  μƒˆ μš”μ†Œμ— λŒ€ν•΄ 이벀트λ₯Ό 바인딩할 ν•„μš”κ°€ μ—†μŠ΅λ‹ˆλ‹€.
참고자료

[↑] Back to top

thisκ°€ JavaScriptμ—μ„œ μ–΄λ–»κ²Œ μž‘λ™ν•˜λŠ”μ§€ μ„€λͺ…ν•˜μ„Έμš”.

thisλŠ” κ°„λ‹¨ν•˜κ²Œ μ„€λͺ…ν•˜κΈ° μ–΄λ ΅μŠ΅λ‹ˆλ‹€. JavaScriptμ—μ„œ κ°€μž₯ ν˜Όλž€μŠ€λŸ¬μš΄ κ°œλ… 쀑 ν•˜λ‚˜μž…λ‹ˆλ‹€. λŒ€λž΅ μ„€λͺ…ν•˜λ©΄ this의 값은 ν•¨μˆ˜κ°€ ν˜ΈμΆœλ˜λŠ” 방식에 따라 λ‹¬λΌμ§‘λ‹ˆλ‹€. μ˜¨λΌμΈμ— λ§Žμ€ μ„€λͺ…을 μ½μ—ˆλŠ”λ°, Arnav Aggrawal의 μ„€λͺ…이 κ°€μž₯ λͺ…ν™•ν–ˆμŠ΅λ‹ˆλ‹€.
λ‹€μŒ κ·œμΉ™κ³Ό κ°™μŠ΅λ‹ˆλ‹€.

  1. ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•  λ•Œ new ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•˜λŠ” 경우, ν•¨μˆ˜ 내뢀에 μžˆλŠ” thisλŠ” μ™„μ „νžˆ μƒˆλ‘œμš΄ κ°μ²΄μž…λ‹ˆλ‹€.
  2. apply, call, bindκ°€ ν•¨μˆ˜μ˜ 호좜/생성에 μ‚¬μš©λ˜λŠ” 경우, ν•¨μˆ˜ λ‚΄μ˜ thisλŠ” 인수둜 μ „λ‹¬λœ κ°μ²΄μž…λ‹ˆλ‹€.
  3. obj.method()와 같이 ν•¨μˆ˜λ₯Ό λ©”μ„œλ“œλ‘œ ν˜ΈμΆœν•˜λŠ” 경우, thisλŠ” ν•¨μˆ˜κ°€ ν”„λ‘œνΌν‹°μΈ κ°μ²΄μž…λ‹ˆλ‹€.
  4. ν•¨μˆ˜κ°€ μžμœ ν•¨μˆ˜λ‘œ ν˜ΈμΆœλ˜λŠ” 경우, 즉, μœ„μ˜ 쑰건 없이 ν˜ΈμΆœλ˜λŠ” 경우 thisλŠ” μ „μ—­ κ°μ²΄μž…λ‹ˆλ‹€. λΈŒλΌμš°μ €μ—μ„œλŠ” window κ°μ²΄μž…λ‹ˆλ‹€. 엄격 λͺ¨λ“œ('use strict') 일 경우, thisλŠ” μ „μ—­ 객체 λŒ€μ‹  undefinedκ°€ λ©λ‹ˆλ‹€.
  5. μœ„μ˜ κ·œμΉ™ 쀑 λ‹€μˆ˜κ°€ 적용되면 더 μƒμœ„ κ·œμΉ™μ΄ μŠΉλ¦¬ν•˜κ³  this값을 μ„€μ •ν•©λ‹ˆλ‹€.
  6. ν•¨μˆ˜κ°€ ES2015 ν™”μ‚΄ν‘œ ν•¨μˆ˜μΈ 경우 μœ„μ˜ λͺ¨λ“  κ·œμΉ™μ„ λ¬΄μ‹œν•˜κ³  μƒμ„±λœ μ‹œμ μ—μ„œ μ£Όλ³€ μŠ€μ½”ν”„μ˜ this값을 λ°›μŠ΅λ‹ˆλ‹€.

μƒμ„Έν•œ μ„€λͺ…은 Medium의 글을 μ°Έμ‘°ν•˜μ„Έμš”.

References

[↑] Back to top

ν”„λ‘œν† νƒ€μž… 상속이 μ–΄λ–»κ²Œ μž‘λ™ν•˜λŠ”μ§€ μ„€λͺ…ν•˜μ„Έμš”.

μ΄λŠ” 맀우 일반적인 JavaScript 인터뷰 μ§ˆλ¬Έμž…λ‹ˆλ‹€. λͺ¨λ“  JavaScript κ°μ²΄λŠ” λ‹€λ₯Έ 객체에 λŒ€ν•œ 참쑰인 prototype ν”„λ‘œνΌν‹°λ₯Ό 가지고 μžˆμŠ΅λ‹ˆλ‹€. 객체의 ν”„λ‘œνΌν‹°μ— μ ‘κ·Όν•  λ•Œ, ν•΄λ‹Ή 객체에 ν•΄λ‹Ή ν”„λ‘œνΌν‹°κ°€ μ—†μœΌλ©΄ JavaScript 엔진은 객체의 prototypeκ³Ό prototype의 prototype등을 보고 ν”„λ‘œνΌν‹° μ •μ˜κ°€ μžˆμ„ λ•ŒκΉŒμ§€ μ°Ύκ³ , λ§Œμ•½ 객체의 ν”„λ‘œνΌν‹°μ— μ ‘κ·Όν•  λ•Œ ν•΄λ‹Ή 객체에 ν•΄λ‹Ή ν”„λ‘œνΌν‹°κ°€ μ—†μœΌλ©΄ ν”„λ‘œν† νƒ€μž… 체인 쀑 ν•˜λ‚˜μ— μžˆκ±°λ‚˜ ν”„λ‘œν† νƒ€μž… 체인의 끝에 도달할 λ•ŒκΉŒμ§€ μ°ΎμŠ΅λ‹ˆλ‹€. 이 λ™μž‘μ€ 고전적인 상속을 ν‰λ‚΄λ‚΄μ§€λ§Œ, μ‹€μ œλ‘œ 상속보닀 μœ„μž„μ— 더 κ°€κΉμŠ΅λ‹ˆλ‹€.

참고자료

[↑] Back to top

AMD vs CommonJS에 λŒ€ν•΄ μ–΄λ–»κ²Œ μƒκ°ν•˜λ‚˜μš”?

두 가지 λͺ¨λ‘ ES2015κ°€ λ“±μž₯ν•˜κΈ° μ „κΉŒμ§€ JavaScript에 기본적으둜 μ‘΄μž¬ν•˜μ§€ μ•ŠλŠ” λͺ¨λ“ˆ μ‹œμŠ€ν…œμ„ κ΅¬ν˜„ν•˜λŠ” λ°©λ²•μž…λ‹ˆλ‹€. CommonJSλŠ” 동기식인 반면 AMD(Asynchronous Module Definition - 비동기식 λͺ¨λ“ˆ μ •μ˜)λŠ” λΆ„λͺ…νžˆ λΉ„λ™κΈ°μ‹μž…λ‹ˆλ‹€. CommonJSλŠ” μ„œλ²„μ‚¬μ΄λ“œ κ°œλ°œμ„ 염두에 두고 μ„€κ³„λ˜μ—ˆμœΌλ©°, AMDλŠ” λͺ¨λ“ˆμ˜ 비동기 λ‘œλ”©μ„ μ§€μ›ν•˜λ―€λ‘œ λΈŒλΌμš°μ €μš©μœΌλ‘œ 더 많이 μ‚¬μš©λ©λ‹ˆλ‹€.

AMD은 ꡬ문이 맀우 μž₯ν™©ν•˜κ³ , CommonJS은 λ‹€λ₯Έ μ–Έμ–΄μ²˜λŸΌ import 문을 μž‘μ„±ν•˜λŠ” μŠ€νƒ€μΌμ— 더 κ°€κΉμŠ΅λ‹ˆλ‹€. λŒ€λΆ€λΆ„μ˜ 경우 AMDλ₯Ό ν•„μš”λ‘œ ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. λͺ¨λ“  JavaScriptλ₯Ό μ—°κ²°λœ ν•˜λ‚˜μ˜ λ²ˆλ“€ 파일둜 μ œκ³΅ν•˜λ©΄ 비동기 λ‘œλ”© μ†μ„±μ˜ 이점을 λˆ„λ¦΄ 수 μ—†κΈ° λ•Œλ¬Έμž…λ‹ˆλ‹€. λ˜ν•œ CommonJS ꡬ문은 λͺ¨λ“ˆ μž‘μ„±μ˜ λ…Έλ“œ μŠ€νƒ€μΌμ— 가깝고 ν΄λΌμ΄μ–ΈνŠΈ μ‚¬μ΄λ“œμ™€ μ„œλ²„μ‚¬μ΄λ“œ JavaScript 개발 사이λ₯Ό μ „ν™˜ν•  λ•Œ λ¬Έλ§₯ μ „ν™˜ μ˜€λ²„ ν—€λ“œκ°€ μ μŠ΅λ‹ˆλ‹€.

ES2015 λͺ¨λ“ˆμ΄ 동기식 및 비동기식 λ‘œλ”©μ„ λͺ¨λ‘ μ§€μ›ν•˜λŠ” 것이 λ°˜κ°€μš΄ 것은 λ§ˆμΉ¨λ‚΄ ν•˜λ‚˜μ˜ μ ‘κ·Ό λ°©μ‹λ§Œ κ³ μˆ˜ν•  수 μžˆλ‹€λŠ” μ μž…λ‹ˆλ‹€. λΈŒλΌμš°μ €μ™€ λ…Έλ“œμ—μ„œ μ™„μ „νžˆ μž‘λ™λ˜μ§€λŠ” μ•Šμ§€λ§Œ, μ–Έμ œλ‚˜ 트랜슀파일러λ₯Ό μ‚¬μš©ν•˜μ—¬ μ½”λ“œλ₯Ό λ³€ν™˜ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

참고자료

[↑] Back to top

λ‹€μŒμ΄ IIFE둜 μž‘λ™ν•˜μ§€ μ•ŠλŠ” 이유λ₯Ό μ„€λͺ…ν•˜μ„Έμš”: function foo(){ }();λ₯Ό IIFE둜 λ§Œλ“€κΈ° μœ„ν•΄μ„œλŠ” 무엇을 λ°”κΏ”μ•Όν•˜λ‚˜μš”?

IIFEλŠ” μ¦‰μ‹œ ν•¨μˆ˜ 호좜 ν‘œν˜„μ‹(Immediately Invoked Function Expressions)을 μ˜λ―Έν•©λ‹ˆλ‹€. JavaScript parserλŠ” function foo(){ }();을 function foo(){ }와 ();둜 μ½μŠ΅λ‹ˆλ‹€. μ „μžλŠ” ν•¨μˆ˜ 선언이며 ν›„μž(ν•œ 쌍의 μ€‘κ΄„ν˜Έ)λŠ” ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜λ €κ³  μ‹œλ„ν–ˆμ§€λ§Œ, 이름이 μ§€μ •λ˜μ§€ μ•Šμ•˜κΈ° λ•Œλ¬Έμ— Uncaught SyntaxError : Unexpected token )을 λ°œμƒμ‹œν‚΅λ‹ˆλ‹€.

κ΄„ν˜Έλ₯Ό μΆ”κ°€ν•˜μ—¬ κ³ μΉ˜λŠ” 두 가지 방법이 μžˆμŠ΅λ‹ˆλ‹€: (function foo(){ })() 그리고 (function foo(){ }()). function으둜 μ‹œμž‘ν•˜λŠ” 문은 ν•¨μˆ˜ μ„ μ–ΈμœΌλ‘œ κ°„μ£Όλ©λ‹ˆλ‹€. 이 ν•¨μˆ˜λ₯Ό ()둜 묢으면 ν•¨μˆ˜ 식이 되고, μ΄λ ‡κ²Œν•˜λ©΄ λ‹€μŒ ()둜 ν•¨μˆ˜λ₯Ό μ‹€ν–‰ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μ΄λŸ¬ν•œ ν•¨μˆ˜λŠ” μ „μ—­ λ²”μœ„μ— λ…ΈμΆœλ˜μ§€ μ•ŠμœΌλ©°, λ³Έλ¬Έ λ‚΄μ—μ„œ 이 ν•¨μˆ˜ 자체λ₯Ό μ°Έμ‘°ν•  ν•„μš”κ°€ μ—†λŠ” κ²½μš°μ—λŠ” ν•΄λ‹Ή ν•¨μˆ˜μ˜ 이름을 μƒλž΅ν•  μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€.

void function foo(){ }();처럼 void μ—°μ‚°μžλ₯Ό μ‚¬μš©ν•  μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€. λΆˆν–‰νžˆλ„, μ΄λŸ¬ν•œ μ ‘κ·Όλ°©μ‹μ—λŠ” ν•œ 가지 λ¬Έμ œκ°€ μžˆμŠ΅λ‹ˆλ‹€. 주어진 ν‘œν˜„μ‹μ˜ ν‰κ°€λŠ” 항상 undefinedμ΄λ―€λ‘œ, IIFE ν•¨μˆ˜κ°€ 무언가λ₯Ό λ°˜ν™˜ν•˜λ©΄, μ‚¬μš©ν•  수 μ—†μŠ΅λ‹ˆλ‹€. 예:

// Don't add JS syntax to this code block to prevent Prettier from formatting it.
const foo = void function bar() { return 'foo'; }();

console.log(foo); // undefined
참고자료

[↑] Back to top

null, undefined, undeclared의 차이점은 λ¬΄μ—‡μΈκ°€μš”? μ–΄λ–»κ²Œ 이 μƒνƒœλ“€μ— λŒ€ν•œ 확인을 ν•  κ²ƒμΈκ°€μš”?

Undeclared λ³€μˆ˜λŠ” 이전에 var, let, constλ₯Ό μ‚¬μš©ν•˜μ—¬ μƒμ„±λ˜μ§€ μ•Šμ€ μ‹λ³„μžμ— 값을 ν• λ‹Ήν•  λ•Œ μƒμ„±λ©λ‹ˆλ‹€. Undeclared λ³€μˆ˜λŠ” ν˜„μž¬ λ²”μœ„ 외뢀에 μ „μ—­μœΌλ‘œ μ •μ˜λ©λ‹ˆλ‹€. strict λͺ¨λ“œμ—μ„œλŠ” Undeclared λ³€μˆ˜μ— ν• λ‹Ήν•˜λ €κ³  ν•  λ•Œ, ReferenceErrorκ°€ λ°œμƒν•©λ‹ˆλ‹€. Undeclared λ³€μˆ˜λŠ” μ „μ—­ λ³€μˆ˜μ²˜λŸΌ 쒋지 μ•ŠμŠ΅λ‹ˆλ‹€. 이것듀은 λͺ¨λ‘ μ‚¬μš©μ„ ν”Όν•˜μ„Έμš”! 이λ₯Ό κ²€μ‚¬ν•˜λ €λ©΄, μ‚¬μš©ν•  λ•Œ try/catch 블둝에 κ°μ‹Έμ„Έμš”.

function foo() {
  x = 1 // strict λͺ¨λ“œμ—μ„œ ReferenceErrorλ₯Ό λ°œμƒμ‹œν‚΅λ‹ˆλ‹€.
}

foo()
console.log(x) // 1

undefined λ³€μˆ˜λŠ” μ„ μ–Έλ˜μ—ˆμ§€λ§Œ, 값이 ν• λ‹Ήλ˜μ§€ μ•Šμ€ λ³€μˆ˜μž…λ‹ˆλ‹€. μ΄λŠ” undefined νƒ€μž…μž…λ‹ˆλ‹€. ν•¨μˆ˜κ°€ μ‹€ν–‰ 결과에 따라 아무값도 λ°˜ν™˜ν•˜μ§€ μ•ŠμœΌλ©΄, λ³€μˆ˜μ— ν• λ‹Ήλ˜λ©°, κ·Έ λ³€μˆ˜κ°€ undefined 값을 κ°–μŠ΅λ‹ˆλ‹€. 이λ₯Ό κ²€μ‚¬ν•˜κΈ° μœ„ν•΄, μ—„κ²©ν•œ (===) μ—°μ‚°μž λ˜λŠ” typeof에 undefined λ¬Έμžμ—΄μ„ μ‚¬μš©ν•˜μ—¬ λΉ„κ΅ν•˜μ„Έμš”. 확인을 μœ„ν•΄ 좔상 평등 μ—°μ‚°μž(==)λ₯Ό μ‚¬μš©ν•΄μ„œλŠ” μ•ˆλ˜λ©°, μ΄λŠ” 값이 null이면 trueλ₯Ό λ°˜ν™˜ν•©λ‹ˆλ‹€.

var foo
console.log(foo) // undefined
console.log(foo === undefined) // true
console.log(typeof foo === 'undefined') // true

console.log(foo == null) // true. μ˜³μ§€μ•ŠμŠ΅λ‹ˆλ‹€. μ΄λ ‡κ²Œ μ‚¬μš©ν•˜μ§€ λ§ˆμ„Έμš”.

function bar() {}
var baz = bar()
console.log(baz) // undefined

null인 λ³€μˆ˜λŠ” null 값이 λͺ…μ‹œμ μœΌλ‘œ ν• λ‹Ήλœ κ²ƒμž…λ‹ˆλ‹€. 그것은 값을 λ‚˜νƒ€λ‚΄μ§€ μ•ŠμœΌλ©°, λͺ…μ‹œμ μœΌλ‘œ ν• λ‹Ήλλ‹€λŠ” μ μ—μ„œ undefined와 λ‹€λ¦…λ‹ˆλ‹€. null을 μ²΄ν¬ν•˜κΈ° μœ„ν•΄μ„œ λ‹¨μˆœνžˆ μ™„μ „ ν•­λ“± μ—°μ‚°μž(===)λ₯Ό μ‚¬μš©ν•˜μ—¬ λΉ„κ΅ν•˜λ©΄ λ©λ‹ˆλ‹€. μœ„μ™€ 같이, 좔상 평등 μ—°μ‚°μž (==)λ₯Ό μ‚¬μš©ν•΄μ„œλŠ” μ•ˆλ˜λ©°, 값이 undefined이면 trueλ₯Ό λ°˜ν™˜ν•©λ‹ˆλ‹€.

var foo = null
console.log(foo === null) // true

console.log(foo == undefined) // true. μ˜³μ§€μ•ŠμŠ΅λ‹ˆλ‹€. μ΄λ ‡κ²Œ μ‚¬μš©ν•˜μ§€ λ§ˆμ„Έμš”.

개인적 μŠ΅κ΄€μœΌλ‘œ, μ €λŠ” λ³€μˆ˜λ₯Ό μ„ μ–Έν•˜μ§€ μ•Šκ±°λ‚˜(undeclared) ν• λ‹Ήν•˜μ§€ μ•Šμ€ μƒνƒœ(unassigned)둜 두지 μ•ŠμŠ΅λ‹ˆλ‹€. 아직 μ‚¬μš©ν•˜μ§€ μ•ŠμœΌλ €λŠ” 경우, μ„ μ–Έν•œ 후에 λͺ…μ‹œμ μœΌλ‘œ null을 ν• λ‹Ήν•  κ²ƒμž…λ‹ˆλ‹€. μž‘μ—…μ‹œ linterλ₯Ό μ‚¬μš©ν•˜λ©΄, 일반적으둜 Undeclared λ³€μˆ˜λ₯Ό μ°Έμ‘°ν•˜μ§€λŠ” μ•ŠλŠ”μ§€ 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

참고자료

[↑] Back to top

ν΄λ‘œμ €λŠ” 무엇이며, μ–΄λ–»κ²Œ/μ™œ μ‚¬μš©ν•˜λ‚˜μš”?

ν΄λ‘œμ €λŠ” ν•¨μˆ˜μ™€ κ·Έ ν•¨μˆ˜κ°€ μ„ μ–Έλœ λ ‰μ‹œμ»¬ ν™˜κ²½μ˜ μ‘°ν•©μž…λ‹ˆλ‹€. "λ ‰μ‹œμ»¬"은 λ ‰μ‹œμ»¬ λ²”μœ„ 지정이 λ³€μˆ˜κ°€ μ‚¬μš© κ°€λŠ₯ν•œ μœ„μΉ˜λ₯Ό κ²°μ •ν•˜κΈ° μœ„ν•΄ μ†ŒμŠ€ μ½”λ“œ λ‚΄μ—μ„œ λ³€μˆ˜κ°€ μ„ μ–Έλœ μœ„μΉ˜λ₯Ό μ‚¬μš©ν•œλ‹€λŠ” 사싀을 λ‚˜νƒ€λƒ…λ‹ˆλ‹€. ν΄λ‘œμ €λŠ” μ™ΈλΆ€ ν•¨μˆ˜κ°€ λ°˜ν™˜λœ 후에도 μ™ΈλΆ€ ν•¨μˆ˜μ˜ λ³€μˆ˜ λ²”μœ„ 체인에 μ ‘κ·Όν•  수 μžˆλŠ” ν•¨μˆ˜μž…λ‹ˆλ‹€.

μ™œ ν΄λ‘œμ €λ₯Ό μ‚¬μš©ν•©λ‹ˆκΉŒ?

참고자료

[↑] Back to top

.forEach 루프와 .map() 루프 μ‚¬μ΄μ˜ μ£Όμš” 차이점을 μ„€λͺ…ν•  수 μžˆλ‚˜μš”? μ™œ λ‘˜ 쀑 ν•˜λ‚˜λ₯Ό 선택할 κ²ƒμΈκ°€μš”?

이 두 ν•¨μˆ˜μ˜ 차이점을 μ΄ν•΄ν•˜κΈ° μœ„ν•΄ 각 ν•¨μˆ˜κ°€ 무엇을 ν•˜λŠ”μ§€ μ‚΄νŽ΄λ³΄κ² μŠ΅λ‹ˆλ‹€.

forEach

  • λ°°μ—΄μ˜ μš”μ†Œλ₯Ό λ°˜λ³΅ν•©λ‹ˆλ‹€.
  • 각 μš”μ†Œμ— λŒ€ν•΄ μ½œλ°±μ„ μ‹€ν–‰ν•©λ‹ˆλ‹€.
  • 값을 λ°˜ν™˜ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.
const a = [1, 2, 3]
const doubled = a.forEach((num, index) => {
  // numλ‚˜ index둜 무언가 ν•©λ‹ˆλ‹€.
})

// doubled = undefined

map

  • λ°°μ—΄μ˜ μš”μ†Œλ₯Ό λ°˜λ³΅ν•©λ‹ˆλ‹€.
  • 각 μš”μ†Œμ—μ„œ ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜μ—¬ 결과둜 μƒˆ 배열을 μž‘μ„±ν•˜μ—¬ 각 μš”μ†Œλ₯Ό μƒˆ μš”μ†Œμ— λ§€ν•‘ν•©λ‹ˆλ‹€.
const a = [1, 2, 3]
const doubled = a.map(num => {
  return num * 2
})

// doubled = [2, 4, 6]

.forEach와 .map()의 κ°€μž₯ 큰 차이점은 .map()이 μƒˆλ‘œμš΄ 배열을 λ°˜ν™˜ν•œλ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€. κ²°κ³Όκ°€ ν•„μš”ν•˜μ§€λ§Œ 원본 배열을 λ³€κ²½ν•˜κ³  싢지 μ•ŠμœΌλ©΄, .map()이 ν™•μ‹€ν•œ μ„ νƒμž…λ‹ˆλ‹€. λ‹¨μˆœνžˆ 배열을 λ°˜λ³΅ν•  ν•„μš”κ°€ μžˆλ‹€λ©΄, forEachκ°€ 쒋은 μ„ νƒμž…λ‹ˆλ‹€.

참고자료

[↑] Back to top

읡λͺ… ν•¨μˆ˜μ˜ 일반적인 μ‚¬μš© μ‚¬λ‘€λŠ” λ¬΄μ—‡μΈκ°€μš”?

읡λͺ…ν•¨μˆ˜λŠ” IIFE둜 μ‚¬μš©λ˜μ–΄ 지역 λ²”μœ„ λ‚΄μ—μ„œ 일뢀 μ½”λ“œλ₯Ό μΊ‘μŠν™”ν•˜λ―€λ‘œ μ„ μ–Έλœ λ³€μˆ˜κ°€ μ „μ—­ λ²”μœ„λ‘œ λˆ„μΆœλ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

(function() {
  // μ½”λ“œ
})()

ν•œ 번 μ‚¬μš©λ˜κ³  λ‹€λ₯Έ κ³³μ—μ„œλŠ” μ‚¬μš©ν•  ν•„μš”κ°€ μ—†λŠ” 콜백으둜 μ‚¬μš©λ©λ‹ˆλ‹€. ν•¨μˆ˜ 본체λ₯Ό μ°ΎκΈ° μœ„ν•΄ λ‹€λ₯Έ 곳을 μ°Ύμ•„λ³Ό ν•„μš” 없이 μ½”λ“œλ₯Ό ν˜ΈμΆœν•˜λŠ” μ½”λ“œ λ°”λ‘œ μ•ˆμ— ν•Έλ“€λŸ¬κ°€ μ •μ˜λ˜μ–΄ 있으면 μ½”λ“œκ°€ 보닀 독립적이고 읽기 μ‰½κ²Œ 보일 κ²ƒμž…λ‹ˆλ‹€.

setTimeout(function() {
  console.log('Hello world!')
}, 1000)

ν•¨μˆ˜ν˜• ν”„λ‘œκ·Έλž˜λ° λ˜λŠ” Lodash에 λŒ€ν•œ 인수(콜백과 μœ μ‚¬)둜 μ‚¬μš©.

const arr = [1, 2, 3]
const double = arr.map(function(el) {
  return el * 2
})
console.log(double) // [2, 4, 6]
참고자료

[↑] Back to top

μ½”λ“œλ₯Ό μ–΄λ–»κ²Œ κ΅¬μ„±ν•˜λ‚˜μš”? (λͺ¨λ“ˆ νŒ¨ν„΄, 고전적인 상속?)

κ³Όκ±°μ—λŠ” Backbone λͺ¨λΈμ„ λ§Œλ“€κ³  κ·Έ λͺ¨λΈμ— λ©”μ†Œλ“œλ₯Ό μ—°κ²°ν•˜λŠ” λ“± OOP μ ‘κ·Ό 방식을 μž₯λ €ν•˜λŠ” λͺ¨λΈμ— Backbone 을 μ‚¬μš©ν–ˆμŠ΅λ‹ˆλ‹€.

λͺ¨λ“ˆ νŒ¨ν„΄μ€ μ—¬μ „νžˆβ€‹β€‹ ν›Œλ₯­ν•˜μ§€λ§Œ, μš”μ¦˜μ—λŠ” React/Redux 기반의 Flux μ•„ν‚€ν…μ²˜λ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€. 이 μ•„ν‚€ν…μ²˜λŠ” 단방ν–₯ ν”„λ‘œκ·Έλž˜λ° 방식을 ꢌμž₯ν•©λ‹ˆλ‹€. μ €λŠ” ν‰λ²”ν•œ 객체λ₯Ό μ‚¬μš©ν•˜μ—¬ μ‘μš© ν”„λ‘œκ·Έλž¨μ˜ λͺ¨λΈμ„ ν‘œν˜„ν•˜κ³  μ΄λŸ¬ν•œ 객체λ₯Ό μ‘°μž‘ν•˜λŠ” μœ ν‹Έλ¦¬ν‹° 순수 ν•¨μˆ˜λ₯Ό μž‘μ„±ν•©λ‹ˆλ‹€. μƒνƒœλŠ” λ‹€λ₯Έ Redux μ‘μš© ν”„λ‘œκ·Έλž¨μ—μ„œμ™€ λ§ˆμ°¬κ°€μ§€λ‘œ action 및 reducerλ₯Ό μ‚¬μš©ν•˜μ—¬ μ‘°μž‘λ©λ‹ˆλ‹€.

κ°€λŠ₯ν•œ 경우 고전적인 상속을 μ‚¬μš©ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. μ €λŠ” 이 κ·œμΉ™λ“€μ„ μœ μ§€ν•©λ‹ˆλ‹€.

[↑] Back to top

호슀트 객체와 λ‚΄μž₯ 객체의 차이점은 λ¬΄μ—‡μΈκ°€μš”?

λ‚΄μž₯ κ°μ²΄λŠ” ECMAScript 사양에 μ •μ˜λœ JavaScript μ–Έμ–΄μ˜ 일뢀인 κ°μ²΄μž…λ‹ˆλ‹€. (예: String, Math, RegExp, Object, Function λ“±)

호슀트 κ°μ²΄λŠ” window, XMLHTTPRequest λ“±κ³Ό 같이 λŸ°νƒ€μž„ ν™˜κ²½ (λΈŒλΌμš°μ € or λ…Έλ“œ)에 μ˜ν•΄ μ œκ³΅λ©λ‹ˆλ‹€.

참고자료

[↑] Back to top

function Person(){}, var person = Person(), var person = new Person()의 차이점은 λ¬΄μ—‡μΈκ°€μš”?

이 μ§ˆλ¬Έμ€ ꡉμž₯ν•΄ μ• λ§€ν•©λ‹ˆλ‹€. 질문의 μ˜λ„μ— λŒ€ν•œ μ €μ˜ μ΅œμ„ μ˜ 좔츑은 JavaScript의 μƒμ„±μžμ— λŒ€ν•΄ λ¬»λŠ” κ²ƒμž…λ‹ˆλ‹€. μ—„λ°€νžˆ λ§ν•˜λ©΄, function Person(){}은 정상적인 ν•¨μˆ˜ 선언일 λΏμž…λ‹ˆλ‹€. 이 μ»¨λ²€μ…˜μ€ ν•¨μˆ˜μƒμ„±μžλ‘œ μ‚¬μš©ν•˜κΈ° μœ„ν•΄ ν•¨μˆ˜μ΄λ¦„μ— PascalCaseλ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€.

var person = Person()은 μƒμ„±μžκ°€ μ•„λ‹ˆλ©° Person을 ν•¨μˆ˜λ‘œ ν˜ΈμΆœν•©λ‹ˆλ‹€. ν•¨μˆ˜λ₯Ό μƒμ„±μžλ‘œ μ‚¬μš©ν•˜λ €λŠ” κ²½μš°μ— μ΄λ ‡κ²Œ ν˜ΈμΆœν•˜λŠ” 것은 일반적인 μ‹€μˆ˜μž…λ‹ˆλ‹€. 일반적으둜 μƒμ„±μžλŠ” 아무것도 λ°˜ν™˜ν•˜μ§€ μ•ŠμœΌλ―€λ‘œ 일반 ν•¨μˆ˜μ²˜λŸΌ μƒμ„±μžλ₯Ό ν˜ΈμΆœν•˜λ©΄ undefinedκ°€ λ°˜ν™˜λ˜κ³  μ§€μ •λœ λ³€μˆ˜μ— ν• λ‹Ήλ©λ‹ˆλ‹€.

var person = new Person()은 Person.prototype을 상속받은 new μ—°μ‚°μžλ₯Ό μ‚¬μš©ν•˜μ—¬ Person 객체의 μΈμŠ€ν„΄μŠ€λ₯Ό μƒμ„±ν•©λ‹ˆλ‹€. 또 λ‹€λ₯Έ 방법은 Object.createλ₯Ό μ‚¬μš©ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€: Object.create(Person.prototype).

function Person(name) {
  this.name = name
}

var person = Person('John')
console.log(person) // undefined
console.log(person.name) // Uncaught TypeError: Cannot read property 'name' of undefined

var person = new Person('John')
console.log(person) // Person { name: "John" }
console.log(person.name) // "john"
참고자료

[↑] Back to top

.callκ³Ό .apply의 차이점은 λ¬΄μ—‡μΈκ°€μš”?

.callκ³Ό .applyλŠ” λͺ¨λ‘ ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜λŠ”λ° μ‚¬μš©λ˜λ©°, 첫 번째 λ§€κ°œλ³€μˆ˜λŠ” ν•¨μˆ˜ λ‚΄μ—μ„œ this의 κ°’μœΌλ‘œ μ‚¬μš©λ©λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ .call은 μ‰Όν‘œλ‘œ κ΅¬λΆ„λœ 인수λ₯Ό 두 번째 인수둜 μ·¨ν•˜κ³  .applyλŠ” 인수의 배열을 두 번째 인수둜 μ·¨ν•©λ‹ˆλ‹€. call은 C: Comma 둜 κ΅¬λΆ„λ˜λ©°, applyλŠ” 인수 배열인 A: arguments 라고 κΈ°μ–΅ν•˜λ©΄ μ‰½μŠ΅λ‹ˆλ‹€.

function add(a, b) {
  return a + b
}

console.log(add.call(null, 1, 2)) // 3
console.log(add.apply(null, [1, 2])) // 3

[↑] Back to top