πŸ“₯πŸ“€ μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ ν•¨μˆ˜

thumb_hyeokΒ·2022λ…„ 3μ›” 30일
0

🟑 JavaScript

λͺ©λ‘ 보기
8/15
post-thumbnail
post-custom-banner

πŸ€” ν•¨μˆ˜λž€ λ¬΄μ—‡μΌκΉŒ?

μ½”λ“œλΈ”λŸ­ 속에 μž‘μ„±λœ νŠΉμ •ν–‰λ™μ„ ν˜ΈμΆœλ˜μ–΄ ν•˜λ„λ‘ ν•˜λŠ” 객체이닀. λ˜λŠ” 일련의 과정을 문으둜 κ΅¬ν˜„ν•˜κ³  μ½”λ“œ λΈ”λ‘μœΌλ‘œ κ°μ‹Έμ„œ ν•˜λ‚˜μ˜ μ‹€ν–‰ λ‹¨μœ„λ‘œ μ •μ˜ν•œ 것이닀.
ν•¨μˆ˜λŠ” ν•¨μˆ˜ μ •μ˜(function definition)을 톡해 μƒμ„±ν•˜λ©°, 인수(argument)λ₯Ό λ§€κ°œλ³€μˆ˜λ₯Ό 톡해 ν•¨μˆ˜μ— μ „λ‹¬ν•˜λ©΄μ„œ ν•¨μˆ˜μ˜ 싀행을 λͺ…μ‹œμ μœΌλ‘œ μ§€μ‹œν•΄ ν•¨μˆ˜ 호좜(function call/invoke)ν•  수 μžˆλ‹€.
ν•¨μˆ˜λŠ” μ½”λ“œμ˜ λ°˜λ³΅μ„ 쀄이고, μž¬ν™œμš©ν•˜κΈ° μœ„ν•΄μ„œ μ‚¬μš©ν•œλ‹€. 이λ₯Ό 톡해 μœ μ§€λ³΄μˆ˜μ˜ νŽΈμ˜μ„±μ„ 높이고 μ‹€μˆ˜λ₯Ό 쀄여 μ½”λ“œμ˜ 신뒰성을 높일 수 μžˆλ‹€.


πŸ—‚οΈ ν•¨μˆ˜ μ •μ˜

ν•¨μˆ˜λŠ” ν•¨μˆ˜ μ •μ˜λ₯Ό 톡해 μƒμ„±ν•˜κ³ , ν•¨μˆ˜ 호좜 톡해 μ‹€ν–‰ν•  수 μžˆλ‹€κ³  ν–ˆλ‹€. λ¨Όμ € ν•¨μˆ˜ μ •μ˜λ₯Ό μ–΄λ–€ 방법을 톡해 ν•  수 μžˆλŠ”μ§€ μ‚΄νŽ΄ 보자. ν•¨μˆ˜λŠ” ν•¨μˆ˜ λ¦¬ν„°λŸ΄, ν•¨μˆ˜ μ„ μ–Έλ¬Έ, ν•¨μˆ˜ ν‘œν˜„μ‹, Function μƒμ„±μž ν•¨μˆ˜, ν™”μ‚΄ν‘œ ν•¨μˆ˜λ‘œ μ •μ˜ν•  수 μžˆλ‹€. (Function μƒμ„±μž ν•¨μˆ˜λŠ” 일반적인 방법도 μ•„λ‹ˆκ³ , λ°”λžŒμ§ν•œ 방법도 μ•„λ‹ˆκΈ° λ•Œλ¬Έμ— μƒλž΅ν•˜λ„λ‘ ν•˜κ² λ‹€)
μ•„λž˜μ—μ„œ 각각에 λŒ€ν•΄ μžμ„Ένžˆ μ‚΄νŽ΄λ³΄μž.

ν•¨μˆ˜ λ¦¬ν„°λŸ΄

μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ ν•¨μˆ˜λŠ” 객체 νƒ€μž…μ˜ 값이닀. λ”°λΌμ„œ ν•¨μˆ˜λ„ ν•¨μˆ˜ λ¦¬ν„°λŸ΄λ‘œ 생성할 수 μžˆλ‹€. μ½”λ“œλ₯Ό 톡해 문법을 μ‚΄νŽ΄λ³΄κ³ , ν•¨μˆ˜ λ¦¬ν„°λŸ΄μ΄ λ¬΄μ—‡μœΌλ‘œ κ΅¬μ„±λ˜λŠ”μ§€ μ•Œμ•„λ³΄μž.

const add = function add(x, y) {
  return x + y;
}

// function add μ—μ„œ addκ°€ ν•¨μˆ˜ 이름이닀.
// function add(x, y) μ—μ„œ (x, y)κ°€ λ§€κ°œλ³€μˆ˜ λͺ©λ‘μ΄λ‹€.
// {} λ‚΄λΆ€κ°€ ν•¨μˆ˜ λͺΈμ²΄μ΄λ‹€

ν•¨μˆ˜ λ¦¬ν„°λŸ΄μ€ ν•¨μˆ˜ 이름, λ§€κ°œλ³€μˆ˜ λͺ©λ‘, ν•¨μˆ˜ λͺΈμ²΄λ‘œ 이루어져 μžˆλ‹€. ν•¨μˆ˜ 이름은 ν•¨μˆ˜ λ‚΄μ—μ„œλ§Œ μ°Έμ‘°ν•  수 있고, μƒλž΅κ°€λŠ₯ν•˜λ‹€. ν•¨μˆ˜ λ¦¬ν„°λŸ΄μ€ κ°’μœΌλ‘œ (객체 νƒ€μž…μ˜ κ°’)으둜 ν‰κ°€λ˜κΈ° λ•Œλ¬Έμ— λ³€μˆ˜μ— ν• λ‹Ήν•  수 μžˆλ‹€.

ν•¨μˆ˜ 이름을 ν•¨μˆ˜ λ‚΄μ—μ„œλ§Œ μ°Έμ‘°ν•  수 μžˆλ‹€λ‹ˆ 이게 무슨 μ†Œλ¦΄κΉŒ?

μ΄λŠ” ν•¨μˆ˜ λͺΈμ²΄ μ™ΈλΆ€μ—μ„œλŠ” ν•¨μˆ˜ μ΄λ¦„μœΌλ‘œ ν•¨μˆ˜λ₯Ό μ°Έμ‘°ν•  수 μ—†μœΌλ―€λ‘œ ν•¨μˆ˜ λͺΈμ²΄ μ™ΈλΆ€μ—μ„œλŠ” ν•¨μˆ˜ μ΄λ¦„μœΌλ‘œ ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•  수 μ—†λ‹€λŠ” μ˜λ―Έμ΄λ‹€.κ·ΈλŸ¬λ‚˜ μš°λ¦¬λŠ” ν•¨μˆ˜ μ™ΈλΆ€μ—μ„œ ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•  수 μžˆμœΌλ‹ˆ μ΄μƒν•˜λ‹€.
이 μ˜λ¬Έμ€ κ·ΈλŒ€λ‘œ κ°„μ§ν•˜κ³  μžˆλ‹€κ°€ μ•„λž˜ ν•¨μˆ˜ 선언문을 μ‚΄νŽ΄λ³΄λ©΄μ„œ ν•΄κ²°ν•΄λ³΄μž.


ν•¨μˆ˜ μ„ μ–Έλ¬Έ

ν•¨μˆ˜ 선언문은 ν•¨μˆ˜ λ¦¬ν„°λŸ΄κ³Ό ν˜•νƒœκ°€ λ™μΌν•˜λ‹€. κ·ΈλŸ¬λ‚˜, ν˜•νƒœλŠ” λ™μΌν•˜μ§€λ§Œ λ‹€λ₯Έ νŠΉμ§•μ΄ μžˆλ‹€.

  • ν•¨μˆ˜ 선언문은 이름을 μƒλž΅ν•  수 μ—†λ‹€.
  • ν•¨μˆ˜ 선언문은 ν‘œν˜„μ‹μ΄ μ•„λ‹Œ 문이닀. 즉, κ°’μœΌλ‘œ ν‰κ°€λ˜μ§€ μ•ŠλŠ”λ‹€.

κ·ΈλŸ¬λ‚˜, 이름이 μƒλž΅λ˜μ§€ μ•Šμ€ κΈ°λͺ…ν•¨μˆ˜ λ¦¬ν„°λŸ΄μ˜ 경우 ν•¨μˆ˜ μ„ μ–Έλ¬Έκ³Ό ν˜•νƒœκ°€ μ™„μ „νžˆ λ™μΌν•˜κΈ°λ•Œλ¬Έμ— ν•¨μˆ˜ μ„ μ–Έλ¬Έκ³Ό ꡬ뢄할 수 μ—†λ‹€. 이λ₯Ό μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 μ–΄λ–»κ²Œ κ΅¬λΆ„ν• κΉŒ?
μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 λ¬Έλ§₯에 λ”°λΌμ„œ 이λ₯Ό κ΅¬λΆ„ν•œλ‹€. {}λ₯Ό μ½”λ“œλΈ”λŸ­μœΌλ‘œ λ³Ό 것이냐, 객체 λ¦¬ν„°λŸ΄λ‘œ λ³Ό κ²ƒμ΄λƒλŠ” {}κ°€ λ‹¨λ…μœΌλ‘œ μžˆλŠ” λ¬Έλ§₯μ—μ„œλŠ” μ½”λ“œλΈ”λŸ­μœΌλ‘œ, {}κ°€ ν”Όμ—°μ‚°μžλ‘œ μ‘΄μž¬ν•˜λŠ” λ¬Έλ§₯μ—μ„œλŠ” 객체 λ¦¬ν„°λŸ΄λ‘œ ν‰κ°€ν•œλ‹€.

μ•„λž˜μ˜ μ˜ˆμ‹œ μ½”λ“œλ‘œ μ’€ 더 μ‚΄νŽ΄λ³΄μž.

// κ°’μœΌλ‘œ ν‰κ°€λ˜μ–΄ λ³€μˆ˜μ— ν• λ‹Ήλœλ‹€ === ν•¨μˆ˜ λ¦¬ν„°λŸ΄λ‘œ μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진이 해석
const add = function add(x, y) {
	return x + y;
}

// λ‹¨λ…μœΌλ‘œ μ‚¬μš©λœλ‹€ === ν•¨μˆ˜ μ„ μ–Έλ¬ΈμœΌλ‘œ μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진이 해석
function add(x, y) {
	return x + y;
}

ν˜Ήμ‹œ μœ„μ—μ„œ ν•¨μˆ˜ μ΄λ¦„μœΌλ‘œ ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•  수 μ—†λ‹€κ³  ν–ˆλ˜ μ–˜κΈ°κ°€ κΈ°μ–΅λ‚˜λŠ”κ°€?
이제 μ˜λ¬Έμ„ ν•΄κ²°ν•  μ‹œκ°„μ΄λ‹€. λ¨Όμ € μ•„λž˜μ˜ μ½”λ“œλ₯Ό 보자.

function foo() {
	console.log('foo');
}

foo(); // foo

μš°λ¦¬λŠ” foo λΌλŠ” 이름을 톡해 foo ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•  수 μžˆμ—ˆλ‹€. μ–΄λ–»κ²Œ 된 일일까? 사싀 μš°λ¦¬λŠ” ν•¨μˆ˜ 이름 foo λ₯Ό ν†΅ν•΄μ„œ ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•œ 것이 μ•„λ‹ˆλ‹€. foo λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진이 μ•”λ¬΅μ μœΌλ‘œ μƒμ„±ν•œ μ‹λ³„μžλ‹€. ν•¨μˆ˜ 이름은 ν•¨μˆ˜ λͺΈμ²΄ λ‚΄μ—μ„œλ§Œ μ°Έμ‘°ν•  수 μžˆμœΌλ―€λ‘œ, μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 μƒμ„±λœ ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜κΈ° μœ„ν•΄ ν•¨μˆ˜ 이름과 λ™μΌν•œ μ΄λ¦„μ˜ μ‹λ³„μžλ₯Ό μ•”λ¬΅μ μœΌλ‘œ μƒμ„±ν•˜κ³ , 거기에 ν•¨μˆ˜ 객체λ₯Ό ν• λ‹Ήν•œλ‹€.

즉, ν•¨μˆ˜λŠ” ν•¨μˆ˜ 이름이 μ•„λ‹Œ ν•¨μˆ˜ 객체λ₯Ό κ°€λ¦¬ν‚€λŠ” μ‹λ³„μžλ‘œ ν˜ΈμΆœν•œλ‹€.


ν•¨μˆ˜ ν‘œν˜„μ‹

μœ„μ—μ„œ ν•¨μˆ˜ λ¦¬ν„°λŸ΄μ„ μ‚΄νŽ΄λ³΄λ©΄μ„œ 이런 μ½”λ“œλ₯Ό λ³Έ 적이 μžˆλ‹€.

const add = function add(x, y) {
  return x + y;
}

μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ ν•¨μˆ˜λŠ” 객체 νƒ€μž…μ˜ 값이닀. 이처럼 κ°’μ˜ μ„±μ§ˆμ„ κ°–λŠ” 객체λ₯Ό 일급 객체라고 ν•˜λŠ”λ°, μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ ν•¨μˆ˜λŠ” 일급 κ°μ²΄μ΄λ―€λ‘œ ν•¨μˆ˜λ₯Ό κ°’μ²˜λŸΌ 자유둭게 μ‚¬μš©ν•  수 μžˆλ‹€. ν•¨μˆ˜λŠ” 일급 κ°μ²΄μ΄λ―€λ‘œ ν•¨μˆ˜ λ¦¬ν„°λŸ΄λ‘œ μƒμ„±ν•œ ν•¨μˆ˜ 객체λ₯Ό λ³€μˆ˜μ— ν• λ‹Ήν•  수 μžˆλ‹€. (일급 객체에 λŒ€ν•΄μ„œλŠ” μ•„λž˜μ—μ„œ 더 μžμ„Ένžˆ λ‹€λ£° μ˜ˆμ •μ΄λ‹€.)
μ΄λŸ¬ν•œ ν•¨μˆ˜ μ •μ˜ 방식을 ν•¨μˆ˜ ν‘œν˜„μ‹(function expression)이라 ν•œλ‹€.

const add = function (x, y) {
	return x + y;
}

보톡 ν•¨μˆ˜ ν‘œν˜„μ‹μœΌλ‘œ ν•¨μˆ˜λ₯Ό ν‘œν˜„ν•  λ•Œ μœ„ μ½”λ“œμ™€ 같이 ν•¨μˆ˜ 이름을 μƒλž΅ν•˜λŠ” 것이 μΌλ°˜μ μ΄λ‹€.


ν™”μ‚΄ν‘œ ν•¨μˆ˜

ES6μ—μ„œ λ„μž…λœ ν™”μ‚΄ν‘œ ν•¨μˆ˜(arrow function)은 function ν‚€μ›Œλ“œ λŒ€μ‹  ν™”μ‚΄ν‘œ(fat arrow) β‡’ λ₯Ό μ‚¬μš©ν•΄ μ’€ 더 κ°„λž΅ν•œ λ°©λ²•μœΌλ‘œ ν•¨μˆ˜λ₯Ό μ„ μ–Έν•  수 μžˆλ‹€.

const add = (x, y) => x + y;
const multiply = (x, y) => {
  return x * y; 
}

console.log(add(2, 5)); // 7
console.log(multiply(2, 5)); // 10

//ν™”μ‚΄ν‘œ ν•¨μˆ˜λŠ” 항상 읡λͺ… ν•¨μˆ˜λ‘œ μ •μ˜ν•œλ‹€.

ν™”μ‚΄ν‘œ ν•¨μˆ˜λŠ” 기쑴의 ν•¨μˆ˜ μ„ μ–Έλ¬Έ λ˜λŠ” ν•¨μˆ˜ ν‘œν˜„μ‹κ³Ό λ‹€λ₯Έ νŠΉμ§•μ„ 가진닀. μ§€κΈˆμ€ μ–΄λ–»κ²Œ μ •μ˜ν•˜λŠ”μ§€λ§Œ μ•Œμ•„λ³΄κ³  μ•„λž˜μ—μ„œ ES6 ν•¨μˆ˜μ˜ μΆ”κ°€ κΈ°λŠ₯을 μ‚΄νŽ΄λ³΄λ©° ν™”μ‚΄ν‘œ ν•¨μˆ˜μ— λŒ€ν•΄ 더 μžμ„Ένžˆ 닀뀄보도둝 ν•˜μž.


πŸ“ž ν•¨μˆ˜ 호좜

ν•¨μˆ˜λŠ” ν•¨μˆ˜λ₯Ό κ°€λ¦¬ν‚€λŠ” μ‹λ³„μžμ™€ ν•œ 쌍의 μ†Œκ΄„ν˜ΈμΈ ν•¨μˆ˜ 호좜 μ—°μ‚°μžλ‘œ ν˜ΈμΆœν•œλ‹€. ν•¨μˆ˜ 호좜 μ—°μ‚°μž λ‚΄μ—λŠ” 0개 μ΄μƒμ˜ 인수λ₯Ό μ‰Όν‘œλ‘œ κ΅¬λΆ„ν•΄μ„œ λ‚˜μ—΄ν•œλ‹€. ν•¨μˆ˜ ν˜ΈμΆœμ€ ν‘œν˜„μ‹μ΄κΈ° λ•Œλ¬Έμ— return ν‚€μ›Œλ“œκ°€ λ°˜ν™˜ν•œ ν‘œν˜„μ‹μ˜ 평가 결과인 λ°˜ν™˜κ°’μœΌλ‘œ ν‰κ°€λœλ‹€. (λͺ…μ‹œμ μœΌλ‘œ return문을 μ§€μ •ν•˜μ§€ ν•˜μ§€ μ•ŠμœΌλ©΄ undefinedλ₯Ό λ°˜ν™˜ν•œλ‹€.)

// ν•¨μˆ˜ μ •μ˜
function add(x, y) {
	return x + y;
}

// ν•¨μˆ˜ 호좜
const result = add(1, 2);
// 인수 1,2κ°€ λ§€κ°œλ³€μˆ˜ x,y에 μˆœμ„œλŒ€λ‘œ ν• λ‹Ήλœλ‹€.
// κ·Έ 이후 ν•¨μˆ˜ λͺΈμ²΄μ˜ 문듀이 μ‹€ν–‰λœλ‹€.

λ§€κ°œλ³€μˆ˜λŠ” ν•¨μˆ˜λ₯Ό μ •μ˜ν•  λ•Œ μ„ μ–Έν•˜λ©°, ν•¨μˆ˜ λͺΈμ²΄ λ‚΄λΆ€μ—μ„œ λ³€μˆ˜μ™€ λ™μΌν•˜κ²Œ μ·¨κΈ‰λœλ‹€. 즉, ν•¨μˆ˜κ°€ 호좜되면 ν•¨μˆ˜ λͺΈμ²΄ λ‚΄μ—μ„œ μ•”λ¬΅μ μœΌλ‘œ λ§€κ°œλ³€μˆ˜κ°€ μƒμ„±λ˜κ³  undefined둜 μ΄ˆκΈ°ν™”λœ 이후 μΈμˆ˜κ°€ μˆœμ„œλŒ€λ‘œ ν• λ‹Ήλœλ‹€. λ§€κ°œλ³€μˆ˜λŠ” ν•¨μˆ˜ λͺΈμ²΄ λ‚΄λΆ€μ—μ„œλ§Œ μ°Έμ‘°ν•  수 μžˆλ‹€.
μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ ν•¨μˆ˜λŠ” ν•¨μˆ˜κ°€ 호좜될 λ•Œ, λ§€κ°œλ³€μˆ˜μ˜ κ°œμˆ˜μ™€ μΈμˆ˜κ°€ μΌμΉ˜ν•˜λŠ”μ§€ μ²΄ν¬ν•˜μ§€ μ•ŠλŠ”λ‹€.

function add(x, y) {
	console.log(x);
	console.log(y);
	console.log(arguments);
	return x + y;
}

console.log(add(2)); 
// 2 
// undefined 
// Arguments(1) [2, callee: f, Symbol(Symbol.iterator): f]

console.log(add(2,5,10)
// 2 
// 5
// Arguments(3) [2, 5, 10, callee: f, Symbol(Symbol.iterator): f]

μœ„ μ½”λ“œμ²˜λŸΌ μΈμˆ˜κ°€ λͺ¨μžλΌ λ§€κ°œλ³€μˆ˜μ— μ „λ‹¬λ˜μ§€ μ•Šμ€ 경우, λ§€κ°œλ³€μˆ˜μ˜ 값은 undefinedκ°€ λœλ‹€. μΈμˆ˜κ°€ λ§€κ°œλ³€μˆ˜λ³΄λ‹€ λ§Žμ€ 경우 λ¬΄μ‹œλ˜κ³ , μ•”λ¬΅μ μœΌλ‘œ arguments 객체의 ν”„λ‘œνΌν‹°λ‘œ λ³΄κ΄€λœλ‹€.


πŸ’‘ ν•¨μˆ˜μ™€ 일급 객체

λ‹€μŒκ³Ό 같은 쑰건을 λ§Œμ‘±ν•˜λŠ” 객체λ₯Ό 일급 객체라 ν•œλ‹€.

  1. 무λͺ…μ˜ λ¦¬ν„°λŸ΄λ‘œ 생성할 수 μžˆλ‹€. 즉, λŸ°νƒ€μž„μ— 생성이 κ°€λŠ₯ν•˜λ‹€.
  2. λ³€μˆ˜λ‚˜ 자료ꡬ쑰(객체, λ°°μ—΄ λ“±)에 μ €μž₯ν•  수 μžˆλ‹€.
  3. ν•¨μˆ˜μ˜ λ§€κ°œλ³€μˆ˜μ— 전달할 수 μžˆλ‹€.
  4. ν•¨μˆ˜μ˜ λ°˜ν™˜κ°’μœΌλ‘œ μ‚¬μš©ν•  수 μžˆλ‹€.

ν•¨μˆ˜λŠ” 이미 μœ„μ—μ„œ μ–˜κΈ°ν–ˆμ§€λ§Œ μœ„ λͺ¨λ“  것이 κ°€λŠ₯ν•œ 일급 객체이닀.


🧬 ν•¨μˆ˜ 객체의 ν”„λ‘œνΌν‹°

ν•¨μˆ˜λŠ” κ°μ²΄μ΄λ―€λ‘œ ν”„λ‘œνΌν‹°λ₯Ό κ°€μ§ˆ 수 μžˆλ‹€. ν•¨μˆ˜ 객체가 가지고 μžˆλŠ” ν”„λ‘œνΌν‹°λ₯Ό μ•Œμ•„ 보자.
ν•¨μˆ˜ κ°μ²΄μ—λŠ” arguments, caller, length, name, prototype, __proto__ ν”„λ‘œνΌν‹°κ°€ μžˆλ‹€.
ν•¨μˆ˜μ˜ λͺ¨λ“  ν”„λ‘œνΌν‹°μ˜ ν”„λ‘œνΌν‹° μ–΄νŠΈλ¦¬λ·°νŠΈλ₯Ό 확인해보면 λ‹€μŒκ³Ό κ°™λ‹€.

function square(number) {
	return number * number;
}

console.log(Object.getOwnPropertyDescriptors(square));
/*
{
	length: {value: 1, writable: false, enumerable: false, configurable: true},
	name: {value: "square", writable: false, enumerable: false, configurable: true},
	arguments: {value: null, writable: false, enumerable: false, configurable: false},
	caller: {value: null, writable: false, enumerable: false, configurable: false},
	prototype: {value: {...}, writable: true, enumerable: false, configurable: false},
}
*/

// __proto__λŠ” Object.prototype 객체의 μ ‘κ·Όμž ν”„λ‘œνΌν‹°μ΄λ‹€.
// square ν•¨μˆ˜λŠ” Object.prototype κ°μ²΄λ‘œλΆ€ν„° __proto__ μ ‘κ·Όμž ν”„λ‘œνΌν‹°λ₯Ό μƒμ†λ°›λŠ”λ‹€.

arguments ν”„λ‘œνΌν‹°

ν•¨μˆ˜ 객체의 arguments ν”„λ‘œνΌν‹° 값은 arguments 객체닀. arguments κ°μ²΄λŠ” ν•¨μˆ˜ 호좜 μ‹œ μ „λ‹¬λœ 인수(arguments)λ“€μ˜ 정보λ₯Ό λ‹΄κ³  μžˆλŠ” 순회 κ°€λŠ₯ν•œ μœ μ‚¬ λ°°μ—΄ 객체(array-like object)이닀. arguments ν”„λ‘œνΌν‹°λŠ” ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œλ§Œ 지역 λ³€μˆ˜μ²˜λŸΌ μ°Έμ‘°ν•  수 μžˆλ‹€.

ν•¨μˆ˜ 객체의 arguments ν”„λ‘œνΌν‹°λŠ” ES3λΆ€ν„° ν‘œμ€€μ—μ„œ νμ§€λ˜μ—ˆμœΌλ―€λ‘œ Function.arguments와 같은 μ‚¬μš©λ²•μ€ ꢌμž₯λ˜μ§€ μ•ŠμœΌλ©° ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œ 지역 λ³€μˆ˜μ²˜λŸΌ μ‚¬μš©ν•  수 μžˆλŠ” arguments 객체λ₯Ό μ°Έμ‘°ν•˜λ„λ‘ ν•˜μž.

μ„ μ–Έλœ λ§€κ°œλ³€μˆ˜μ˜ κ°œμˆ˜μ™€ ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•  λ•Œ μ „λ‹¬ν•˜λŠ” 인수의 개수λ₯Ό ν™•μΈν•˜μ§€ μ•ŠλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ νŠΉμ„± λ•Œλ¬Έμ— ν•¨μˆ˜κ°€ 호좜되면 인수 개수λ₯Ό ν™•μΈν•˜κ³  이에 따라 ν•¨μˆ˜μ˜ λ™μž‘μ„ 달리 μ •μ˜ν•  ν•„μš”κ°€ μžˆμ„ 수 μžˆλ‹€. 이 λ•Œ μœ μš©ν•˜κ²Œ μ‚¬μš©λ˜λŠ” 것이 arguments 객체닀.

arguments κ°μ²΄λŠ” λ§€κ°œλ³€μˆ˜ 개수λ₯Ό ν™•μ •ν•  수 μ—†λŠ” κ°€λ³€ 인자 ν•¨μˆ˜λ₯Ό κ΅¬ν˜„ν•  λ•Œ μœ μš©ν•˜λ‹€.

function sum() {
	let result = 0;

	for (let i = 0; i < arguments.length; i++) {
		result += arguments[i];
	} 

	return result;
}

console.log(sum()); // 0
console.log(sum(1,3,4)); // 8

caller ν”„λ‘œνΌν‹°

ν•¨μˆ˜ 객체의 caller ν”„λ‘œνΌν‹°λŠ” ν•¨μˆ˜ μžμ‹ μ„ ν˜ΈμΆœν•œ ν•¨μˆ˜λ₯Ό 가리킨닀. λΉ„ν‘œμ€€ ν”„λ‘œνΌν‹°μ΄λ©° ν‘œμ€€ν™”λ  μ˜ˆμ •λ„ μ—†μœΌλ―€λ‘œ μ‚¬μš©ν•˜μ§€ 말고 μ•Œμ•„λ§Œ λ‘μž.

length ν”„λ‘œνΌν‹°

ν•¨μˆ˜ 객체의 length ν”„λ‘œνΌν‹°λŠ” ν•¨μˆ˜λ₯Ό μ •μ˜ν•  λ•Œ μ„ μ–Έν•œ λ§€κ°œλ³€μˆ˜μ˜ 개수λ₯Ό 가리킨닀.

name ν”„λ‘œνΌν‹°

ν•¨μˆ˜ 객체의 name ν”„λ‘œνΌν‹°λŠ” ν•¨μˆ˜ 이름을 λ‚˜νƒ€λ‚Έλ‹€. name ν”„λ‘œνΌν‹°λŠ” ES6μ—μ„œ 정식 ν‘œμ€€μ΄ λ˜μ—ˆλŠ”λ°, ES5와 ES6μ—μ„œμ˜ λ™μž‘μ΄ λ‹€λ₯΄λ‹€. 읡λͺ… ν•¨μˆ˜ ν‘œν˜„μ‹μ—μ„œ name ν”„λ‘œνΌν‹°μ˜ 경우, ES5μ—μ„œλŠ” 빈 λ¬Έμžμ—΄μ„ κ°’μœΌλ‘œ κ°–κ³ , ES6μ—μ„œλŠ” ν•¨μˆ˜ 객체λ₯Ό κ°€λ¦¬ν‚€λŠ” μ‹λ³„μžλ₯Ό κ°’μœΌλ‘œ κ°–λŠ”λ‹€.

__proto__ μ ‘κ·Όμž ν”„λ‘œνΌν‹°

이미 μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ Prototypeμ—μ„œ ν•œμ°Έμ„ μ„€λͺ…ν–ˆμœΌλ‹ˆ μ„€λͺ…ν•˜μ§€ μ•Šκ² λ‹€.

prototype ν”„λ‘œνΌν‹°

이미 μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ Prototypeμ—μ„œ ν•œμ°Έμ„ μ„€λͺ…ν–ˆμœΌλ‹ˆ μ„€λͺ…ν•˜μ§€ μ•Šκ² λ‹€.


✨ ES6 ν•¨μˆ˜μ˜ μΆ”κ°€ κΈ°λŠ₯

ν•¨μˆ˜μ˜ ꡬ뢄

ES6 μ΄μ „μ˜ ν•¨μˆ˜λŠ” λ™μΌν•œ ν•¨μˆ˜λΌλ„ λ‹€μ–‘ν•œ ν˜•νƒœλ‘œ ν˜ΈμΆœν•  수 μžˆμ—ˆλ‹€. 일반적인 ν•¨μˆ˜λ‘œλ„ ν˜ΈμΆœν•  수 있고, new μ—°μ‚°μžμ™€ ν•¨κ»˜ ν˜ΈμΆœν•˜μ—¬ μƒμ„±μž ν•¨μˆ˜λ‘œμ„œ ν˜ΈμΆœν•  수 있으며, 객체에 λ°”μΈλ”©λ˜μ–΄ λ©”μ„œλ“œλ‘œμ„œ ν˜ΈμΆœν•  μˆ˜λ„ μžˆμ—ˆλ‹€. ES6 μ΄μ „μ˜ λͺ¨λ“  ν•¨μˆ˜λŠ” callable μ΄λ©΄μ„œ constructor이닀. constructorλŠ” prototype ν”„λ‘œνΌν‹°λ₯Ό 가지며 ν”„λ‘œν† νƒ€μž… 객체λ₯Ό μƒμ„±ν•œλ‹€. μ΄λŠ” μ‹€μˆ˜λ₯Ό μœ λ°œν•  수 있으며 μ„±λŠ₯λ©΄μ—μ„œλ„ 손해닀.

μ΄λŸ¬ν•œ 문제λ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•΄ ES6μ—μ„œλŠ” ν•¨μˆ˜λ₯Ό μ‚¬μš© λͺ©μ μ— 따라 μ„Έ 가지 μ’…λ₯˜λ‘œ λͺ…ν™•νžˆ κ΅¬λΆ„ν–ˆλ‹€. μ•„λž˜μ—μ„œ 각각에 λŒ€ν•΄μ„œ 더 μžμ„Ένžˆ μ•Œμ•„λ³΄λ„λ‘ ν•˜μž. (사싀 μ œλ„ˆλ ˆμ΄ν„° ν•¨μˆ˜μ™€ async ν•¨μˆ˜κ°€ μΆ”κ°€λ‘œ μ‘΄μž¬ν•˜κΈ°λ§Œ λ‚˜μ€‘μ— 비동기 처리λ₯Ό 곡뢀해며 μ•Œμ•„ 보자.)

ES6 ν•¨μˆ˜μ˜ ꡬ뢄constructorprototypesuperarguments
일반 ν•¨μˆ˜(Normal)OOXO
λ©”μ„œλ“œ(Method)XXOO
ν™”μ‚΄ν‘œ ν•¨μˆ˜(Arrow)XXXX

λ©”μ„œλ“œ

ES6 사양뢀터 λ©”μ„œλ“œμ— λŒ€ν•œ μ •μ˜κ°€ λ©”μ„œλ“œ μΆ•μ•½ ν‘œν˜„μœΌλ‘œ μ •μ˜λœ ν•¨μˆ˜λ§ŒμœΌλ‘œ λͺ…ν™•ν•˜κ²Œ κ·œμ •λ˜μ—ˆλ‹€. ES6의 λ©”μ„œλ“œλŠ” non-constructor이며, μžμ‹ μ„ λ°”μΈλ”©ν•œ 객체λ₯Ό κ°€λ¦¬ν‚€λŠ” λ‚΄λΆ€ 슬둯 [[HomeObject]]λ₯Ό κ°–λŠ”λ‹€. 이λ₯Ό 톡해 super ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•  수 μžˆλ‹€.
이처럼 ES6 λ©”μ„œλ“œλŠ” λ³Έμ—°μ˜ κΈ°λŠ₯(super)을 μΆ”κ°€ν•˜κ³  의미적으둜 λ§žμ§€ μ•ŠλŠ” κΈ°λŠ₯(constructor)은 μ œκ±°ν–ˆλ‹€. λ”°λΌμ„œ λ©”μ„œλ“œλ₯Ό μ •μ˜ν•  λ•Œ λ©”μ„œλ“œ μΆ•μ•½ ν‘œν˜„μ„ ν†΅ν•΄μ„œλ§Œ μ •μ˜ν•˜λŠ” 것이 μ’‹λ‹€.


ν™”μ‚΄ν‘œ ν•¨μˆ˜

ν™”μ‚΄ν‘œ ν•¨μˆ˜λŠ” μΈμŠ€ν„΄μŠ€λ₯Ό 생성할 수 μ—†λŠ” non-constructor이며, 일반 ν•¨μˆ˜μ™€ λ‹€λ₯΄κ²Œ μ€‘λ³΅λœ λ§€κ°œλ³€μˆ˜ 이름을 μ„ μ–Έν•  수 μ—†λ‹€. (엄격λͺ¨λ“œμ—μ„œλŠ” 일반 ν•¨μˆ˜λ„ μ€‘λ³΅λœ λ§€κ°œλ³€μˆ˜ 이름을 μ„ μ–Έν•  수 μ—†λ‹€.) λ˜ν•œ ν™”μ‚΄ν‘œ ν•¨μˆ˜λŠ” ν•¨μˆ˜ 자체의 this, arguments, super, new.target 바인딩을 갖지 μ•ŠλŠ”λ‹€.

this

ν™”μ‚΄ν‘œ ν•¨μˆ˜λŠ” ν•¨μˆ˜ 자체의 this 바인딩을 갖지 μ•ŠλŠ”λ‹€. λ”°λΌμ„œ ν™”μ‚΄ν‘œ ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œ thisλ₯Ό μ°Έμ‘°ν•˜λ©΄ μƒμœ„ μŠ€μ½”ν”„μ˜ thisλ₯Ό κ·ΈλŒ€λ‘œ μ°Έμ‘°ν•œλ‹€. 이λ₯Ό lexical this라 ν•œλ‹€. λ§Œμ•½ ν™”μ‚΄ν‘œ ν•¨μˆ˜κ°€ μ€‘μ²©λ˜μ–΄ μžˆλ‹€λ©΄ μƒμœ„ ν™”μ‚΄ν‘œ ν•¨μˆ˜μ—λ„ this 바인딩이 μ—†μœΌλ―€λ‘œ μŠ€μ½”ν”„ 체인 μƒμ—μ„œ κ°€μž₯ κ°€κΉŒμš΄ μƒμœ„ ν•¨μˆ˜ 쀑 ν™”μ‚΄ν‘œ ν•¨μˆ˜κ°€ μ•„λ‹Œ ν•¨μˆ˜μ˜ thisλ₯Ό μ°Έμ‘°ν•œλ‹€.

super

ν™”μ‚΄ν‘œ ν•¨μˆ˜λŠ” ν•¨μˆ˜ 자체의 super 바인딩을 갖지 μ•ŠλŠ”λ‹€. λ”°λΌμ„œ ν™”μ‚΄ν‘œ ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œ superλ₯Ό μ°Έμ‘°ν•˜λ©΄ this와 λ§ˆμ°¬κ°€μ§€λ‘œ μƒμœ„ μŠ€μ½”ν”„μ˜ superλ₯Ό μ°Έμ‘°ν•œλ‹€.

arguments

λ§ˆμ°¬κ°€μ§€λ‘œ μƒμœ„ μŠ€μ½”ν”„μ˜ argumentsλ₯Ό μ°Έμ‘°ν•œλ‹€.


Rest νŒŒλΌλ―Έν„°

Rest νŒŒλΌλ―Έν„°(λ‚˜λ¨Έμ§€ λ§€κ°œλ³€μˆ˜)λŠ” λ§€κ°œλ³€μˆ˜ 이름 μ•žμ— μ„Έκ°œμ˜ 점 ...을 λΆ™μ—¬μ„œ μ •μ˜ν•œ λ§€κ°œλ³€μˆ˜λ₯Ό μ˜λ―Έν•œλ‹€. Rest νŒŒλΌλ―Έν„°λŠ” ν•¨μˆ˜μ— μ „λ‹¬λœ μΈμˆ˜λ“€μ˜ λͺ©λ‘μ„ λ°°μ—΄λ‘œ μ „λ‹¬λ°›λŠ”λ‹€.

function foo(...rest) {
	console.log(rest); // [1, 2, 3, 4, 5]
}

// λ‹€λ₯Έ λ§€κ°œλ³€μˆ˜λ“€κ³Ό μ‚¬μš©ν•  λ•Œ λ°˜λ“œμ‹œ λ§ˆμ§€λ§‰ νŒŒλΌλ―Έν„°μ΄μ–΄μ•Όν•œλ‹€.
function bar(x, y, ...rest) {
	console.log(x) // 1
	console.log(y) // 2
	console.log(rest); // [3, 4, 5]]
}

foo(1, 2, 3, 4, 5);
bar(1, 2, 3, 4, 5);

Rest νŒŒλΌλ―Έν„°λŠ” ν•˜λ‚˜λ§Œ μ •μ˜ν•  수 있으며, ν•¨μˆ˜ 객체의 length ν”„λ‘œνΌν‹°μ— 영ν–₯을 주지 μ•ŠλŠ”λ‹€.
μœ„μ—μ„œ μ‚¬μš©ν–ˆλ˜ arguments 객체 λŒ€μ‹  Rest νŒŒλΌλ―Έν„°λ₯Ό ν™œμš©ν•  수 μžˆλ‹€. Rest νŒŒλΌλ―Έν„°λŠ” 배열이기 λ•Œλ¬Έμ— λ°°μ—΄ λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•˜κΈ° μœ„ν•΄ λ°°μ—΄λ‘œ λ³€ν™˜ν•΄μ•Όν•˜λŠ” λ²ˆκ±°λ‘œμ›€μ΄ μ—†λ‹€.


λ§€κ°œλ³€μˆ˜ κΈ°λ³Έκ°’

μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” λ§€κ°œλ³€μˆ˜μ˜ 개수만큼 인수λ₯Ό μ „λ‹¬ν•˜λŠ”μ§€ ν™•μΈν•˜μ§€ μ•ŠκΈ° λ•Œλ¬Έμ—, λ§€κ°œλ³€μˆ˜κ°€ undefined둜 남아 μ˜λ„μΉ˜ μ•Šμ€ κ²°κ³Όλ₯Ό μ΄ˆλž˜ν•  수 μžˆλ‹€. μ•„λž˜μ˜ μ˜ˆμ‹œ μ½”λ“œλ₯Ό 보자.

function sum(x, y) {
	return x + y;
}

console.log(sum(1)); // NaN

ES6μ—μ„œλŠ” μ΄λŸ¬ν•œ 상황을 λ°©μ§€ν•˜κΈ° μœ„ν•΄ λ§€κ°œλ³€μˆ˜ 기본값이 λ„μž…λ˜μ—ˆλ‹€. λ§€κ°œλ³€μˆ˜ 기본값은 λ§€κ°œλ³€μˆ˜μ— 인수λ₯Ό μ „λ‹¬ν•˜μ§€ μ•Šμ€ κ²½μš°μ™€ undefinedλ₯Ό μ „λ‹¬ν•œ κ²½μš°μ—λ§Œ μœ νš¨ν•˜λ‹€. λ˜ν•œ Rest νŒŒλΌλ―Έν„°μ—λŠ” 기본값을 지정할 수 μ—†λ‹€.

function sum(x = 0, y = 0) {
	return x + y;
}

console.log(sum(1)); // 1

λ§€κ°œλ³€μˆ˜ 기본값은 ν•¨μˆ˜ μ •μ˜μ‹œ μ„ μ–Έν•œ λ§€κ°œλ³€μˆ˜ 개수λ₯Ό λ‚˜νƒ€λ‚΄λŠ” ν•¨μˆ˜ 객체의 length ν”„λ‘œνΌν‹°μ™€ arguments 객체에 μ•„λ¬΄λŸ° 영ν–₯을 주지 μ•ŠλŠ”λ‹€.


🧐 정리

  • ν•¨μˆ˜λž€ 일련의 과정을 문으둜 κ΅¬ν˜„ν•˜κ³  μ½”λ“œ λΈ”λ‘μœΌλ‘œ κ°μ‹Έμ„œ ν•˜λ‚˜μ˜ μ‹€ν–‰ λ‹¨μœ„λ‘œ μ •μ˜ν•œ 것이닀.
  • ν•¨μˆ˜λŠ” 주둜 ν•¨μˆ˜ μ„ μ–Έλ¬Έ, ν•¨μˆ˜ ν‘œν˜„μ‹, ν™”μ‚΄ν‘œ ν•¨μˆ˜λ‘œ μ •μ˜ν•œλ‹€.
  • μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” ν•¨μˆ˜μ˜ λ§€κ°œλ³€μˆ˜μ™€ 인수의 κ°œμˆ˜κ°€ λ™μΌν•œμ§€ ν™•μΈν•˜μ§€ μ•ŠλŠ”λ‹€.
  • κ·Έλ ‡κΈ° λ•Œλ¬Έμ— arguments 객체, Rest νŒŒλΌλ―Έν„°, λ§€κ°œλ³€μˆ˜ 기본값을 ν™œμš©ν•  수 μžˆλ‹€.
  • ν•¨μˆ˜λŠ” 일급 객체이닀.
  • ES6μ—μ„œ ν•¨μˆ˜λŠ” 일반 ν•¨μˆ˜, λ©”μ„œλ“œ, ν™”μ‚΄ν‘œ ν•¨μˆ˜λ‘œ κ΅¬λΆ„λœλ‹€.

πŸ“– 참고자료

  • λͺ¨λ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ Deep Dive
    • 12μž₯. ν•¨μˆ˜ (154p~186p)
    • 18μž₯. ν•¨μˆ˜μ™€ 일급객체 (249p~258p)
    • 26μž₯. ES6 ν•¨μˆ˜μ˜ μΆ”κ°€ κΈ°λŠ₯ (469p~490p)
profile
μš°μ•„ν•œν…Œν¬μ½”μŠ€ 4κΈ° μ›Ή ν”„λ‘ νŠΈμ—”λ“œ
post-custom-banner

0개의 λŒ“κΈ€