Javascript 곡뢀

19. ν•¨μˆ˜μ™€ 일급 객체

tnqlscho 95 2023. 8. 5. 03:29

πŸ‘€  일급 객체의 쑰건

1. λŸ°νƒ€μž„μ— 생성이 κ°€λŠ₯ν•œ 객체
2. λ³€μˆ˜λ‚˜ μžλ£Œκ΅¬μ‘°μ— μ €μž₯ν•  수 μžˆλŠ” 객체
3. ν•¨μˆ˜μ˜ λ§€κ°œλ³€μˆ˜μ— 전달할 수 μžˆλŠ” 객체
4. ν•¨μˆ˜μ˜ λ°˜ν™˜κ°’μœΌλ‘œ μ‚¬μš©ν•  수 μžˆλŠ” 객체

JSλŠ” 이 4κ°€μ§€λ₯Ό λͺ¨λ‘ λ§Œμ‘±ν•˜κΈ° λ•Œλ¬Έμ— 일급객체!

 

πŸ‘€  일급 객체의 νŠΉμ§•

1. ν•¨μˆ˜κ°€ 일급 κ°μ²΄λΌλŠ”κ²ƒμ€ ν•¨μˆ˜λ₯Ό 객체와 λ™μΌν•˜κ²Œ μ‚¬μš©ν•  수 μžˆλ‹€λŠ” 것.

2. κ·Έλž˜μ„œ κ°μ²΄λŠ” 값이기 λ•Œλ¬Έμ— ν•¨μˆ˜λŠ” κ°’κ³Ό λ™μΌν•˜κ²Œ μ·¨κΈ‰λœλ‹€.

3. ν•¨μˆ˜λŠ” 값을 μ‚¬μš©ν•  수 μžˆλŠ” 곳이라면 μ–΄λ””λ“  λ¦¬ν„°λŸ΄λ‘œ μ •μ˜ν•  수 있고 λŸ°νƒ€μž„μ— ν•¨μˆ˜ 객체둜 ν‰κ°€λœλ‹€.

4. ν•¨μˆ˜μ˜ λ§€κ°œλ³€μˆ˜μ— 전달할 수 있고 ν•¨μˆ˜μ˜ λ°˜ν™˜κ°’μœΌλ‘œλ„ μ‚¬μš©ν•  수 μžˆλ‹€.

5. 일반 κ°μ²΄μ™€μ˜ λ‹€λ₯Έ 점은 ν•¨μˆ˜ κ°μ²΄λŠ” 호좜이 κ°€λŠ₯ν•˜λ‹€.

6. κ·Έλž˜μ„œ ν•¨μˆ˜ κ°μ²΄λŠ” ν•¨μˆ˜ 고유의 ν”„λ‘œνΌν‹°λ₯Ό μ†Œμœ (일반 κ°μ²΄μ—λŠ” μ—†μŒ)

 

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

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

1. arguments κ°μ²΄λŠ” ν•¨μˆ˜ ν˜ΈμΆœν• λ•Œ μ „λ‹¬λœ 인수의 정보λ₯Ό λ‹΄κ³ μžˆλ‹€.

2. μœ μ‚¬ λ°°μ—΄ 객체이고 ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œ μ§€μ—­ λ³€μˆ˜μ²˜λŸΌ μ‚¬μš©.

3. JSλŠ” ν•¨μˆ˜ ν˜ΈμΆœν• λ•Œ λ§€κ°œλ³€μˆ˜ κ°œμˆ˜λ³΄λ‹€ 인수λ₯Ό 더 맣이 μ „λ‹¬ν•˜λ©΄ 초과된 μΈμˆ˜λŠ” λ¬΄μ‹œλ˜κ³  μ—λŸ¬λ„ λ°œμƒν•˜μ§€ μ•ŠλŠ”λ‹€.

4. λ¬΄μ‹œλœ μΈμˆ˜ν¬ν•¨ν•΄μ„œ λͺ¨λ“  μΈμˆ˜λŠ” μ•”λ¬΅μ μœΌλ‘œ arguments ν”„λ‘œνΌν‹°λ‘œ λ³΄κ΄€λœλ‹€.

5. ν”„λ‘œνΌν‹° ν‚€(인수의 μˆœμ„œ) : ν”„λ‘œνΌν‹° κ°’(ν•¨μˆ˜κ°€ ν˜ΈμΆœλ λ•Œμ˜ 인수)

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

7. arguments κ°μ²΄λŠ” μœ μ‚¬λ°°μ—΄ κ°μ²΄μ—¬μ„œ λ°°μ—΄ λ©”μ„œλ“œ(map, reduce...)λ₯Ό μ‚¬μš©ν•˜λ©΄ μ—λŸ¬κ°€ λ‚œλ‹€.

8. κ·Έλž˜μ„œ λ°°μ—΄ λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•˜λ €λ©΄ Function.prototype.call, Function.prototype.applyλ₯Ό μ‚¬μš©ν•΄ κ°„μ ‘ ν˜ΈμΆœν•΄μ•Ό ν•œλ‹€.

function sum(){
   //arguments 객체λ₯Ό λ°°μ—΄λ‘œ λ°˜ν™˜
   const array = Array.prototype.slice.call(arguments);
   return array.reduce(function (pre, cur){
      return pre + cur;
   },0);
}

console.log(sum(1,2)); //3
console.log(sum(1,2,3,4,5)); //15

9. 이 방법은 번거둭기 λ•Œλ¬Έμ— ES6μ—μ„œ Rest νŒŒλΌλ―Έν„°λ₯Ό λ„μž…ν–ˆλ‹€.

function sum(...args){
   return args.reduce((pre, cur)=>pre + cur, 0);
}

console.log(sum(1,2)); //3
console.log(sum(1,2,3,4,5)); //15

 

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

1. ECMAScript 사양에 ν¬ν•¨λ˜μ§€ μ•Šμ€ λΉ„ν‘œμ€€ ν”„λ‘œνΌν‹°.

2. ν‘œμ€€ν™”λ  μ˜ˆμ •λ„ μ—†μ–΄μ„œ μ•„λŠ” μ •λ„λ‘œ 끝내도 됨.

3. ν•¨μˆ˜ μžμ‹ μ„ ν˜ΈμΆœν•œ ν•¨μˆ˜λ₯Ό 가리킨닀.

 

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

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

2. arguments 객체의 length ν”„λ‘œνΌν‹°λŠ” 인자의 갯수 / ν•¨μˆ˜ 객체의 length ν”„λ‘œνΌν‹°λŠ” λ§€κ°œλ³€μˆ˜μ˜ 개수λ₯Ό 가리킨닀.

3. κ·Έλž˜μ„œ arguments 객체의 length와 ν•¨μˆ˜ 객체의 length 값은 λ‹€λ₯Ό 수 μžˆλ‹€.

 

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

1. ν•¨μˆ˜ 객체의 name ν”„λ‘œνΌν‹°λŠ” ν•¨μˆ˜ 이름을 λ‚˜νƒ€λ‚Έλ‹€.

2. ES6λ•Œ 정식 ν‘œμ€€μ΄ λ˜μ—ˆλ‹€.

3. ES6λ•Œ ν•¨μˆ˜ 객체λ₯Ό κ°€λ¦¬ν‚€λŠ” μ‹λ³„μžλ₯Ό κ°’μœΌλ‘œ κ°–λŠ”λ‹€. (ν•¨μˆ˜ ν˜ΈμΆœλ•Œ ν•¨μˆ˜ 이름x, ν•¨μˆ˜ 객체λ₯Ό κ°€λ¦¬ν‚€λŠ” 'μ‹λ³„μž'둜 호좜)

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

1. λͺ¨λ“  κ°μ²΄λŠ” [[Prototype]]μ΄λΌλŠ” λ‚΄λΆ€ μŠ¬λ‘―μ„ κ°–λŠ”λ‹€.

2. λ‚΄λΆ€ μŠ¬λ‘―μ—λŠ” 직접 μ ‘κ·Όν•  수 μ—†κ³  간접적인 μ ‘κ·Ό 방법을 μ œκ³΅ν•˜λŠ” κ²½μš°μ— ν•œν•΄ μ ‘κ·Όν•  수 μžˆλ‹€.

3. __proto__ν”„λ‘œνΌν‹°λŠ” [[Prototype]]λ‚΄λΆ€ 슬둯이 κ°€λ¦¬ν‚€λŠ” ν”„λ‘œν† νƒ€μž… 객체에 κ°„μ ‘μ μœΌλ‘œ μ ‘κ·Όν•˜κΈ°

μœ„ν•΄μ„œ μ‚¬μš©ν•˜λŠ” μ ‘κ·Όμž ν”„λ‘œνΌν‹°.

 

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

1. μƒμ„±μž ν•¨μˆ˜λ‘œ ν˜ΈμΆœν•  수 μž‡λŠ” ν•¨μˆ˜ 객체, constructor만 μ†Œμœ ν•˜λŠ” ν”„λ‘œνΌν‹°.

2. ν•¨μˆ˜κ°€ 객체λ₯Ό μƒμ„±ν•˜λŠ” μƒμ„±μž ν•¨μˆ˜λ‘œ 호좜될 λ•Œ μƒμ„±μž ν•¨μˆ˜κ°€ 생성할 μΈμŠ€ν„΄μŠ€μ˜ ν”„λ‘œν† νƒ€μž… 객체λ₯Ό 가리킴.

// ν•¨μˆ˜ κ°μ²΄λŠ” prototype ν”„λ‘œνΌν‹°λ₯Ό μ†Œμœ 
(function () {}).hasOwnProperty('prototype'); // true

// 일반 κ°μ²΄λŠ” prototype ν”„λ‘œνΌν‹°λ₯Ό μ†Œμœ ν•˜μ§€ μ•ŠλŠ”λ‹€.
({}).hasOwnProperty('prototype'); // false