관리 메뉴

Daehyunii's Dev-blog

18μž₯ ν•¨μˆ˜μ™€ 일급 객체 λ³Έλ¬Έ

πŸ“š Language & CS knowledge/JavaScript (λͺ¨λ˜μžλ°”μŠ€ν¬λ¦½νŠΈ Deep Dive)

18μž₯ ν•¨μˆ˜μ™€ 일급 객체

Daehyunii 2022. 7. 12. 19:15

18.1 일급 객체

 

<일급 객체의 쑰건>

1. 무λͺ…μ˜ λ¦¬ν„°λ‘€λ‘œ 생성할 수 μžˆλ‹€.(λŸ°νƒ€μž„μ— 생성이 κ°€λŠ₯ν•˜λ‹€.)

2. λ³€μˆ˜λ‚˜ 자료ꡬ쑰(객체, λ°°μ—΄ λ“±)에 μ €μž₯ν•  수 μžˆλ‹€.

3. ν•¨μˆ˜μ˜ λ§€κ°œλ³€μˆ˜μ— 전달할 수 μžˆλ‹€.

4. ν•¨μˆ˜μ˜ λ°˜ν™˜κ°’μœΌλ‘œ μ‚¬μš©ν•  수 μžˆλ‹€.

 

μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ ν•¨μˆ˜λŠ” μœ„μ˜ 쑰건을 λͺ¨λ‘ λ§Œμ‘±ν•˜λŠ” 일급 객체닀.

//ν•¨μˆ˜λŠ” 무λͺ…μ˜ λ¦¬ν„°λŸ΄λ‘œ 생성할 수 μžˆλ‹€.
//ν•¨μˆ˜λŠ” λ³€μˆ˜μ— μ €μž₯ν•  수 μžˆλ‹€.
const increase = function(num){
    return ++num;
};

const decrease = function(num){
    return --num;
};

//ν•¨μˆ˜λŠ” 객체에 μ €μž₯ν•  수 μžˆλ‹€.
const counter = {increase, decrease};

//ν•¨μˆ˜μ˜ λ§€κ°œλ³€μˆ˜μ— ν•¨μˆ˜λ₯Ό 전달할 수 μžˆλ‹€.
//ν•¨μˆ˜μ˜ λ°˜ν™˜κ°’μœΌλ‘œ ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•  수 μžˆλ‹€.
function makeCount(predicate){
    let num = 0;

    return function(){
        num = predicate(num); 
    };
}

//ν•¨μˆ˜λŠ” λ§€κ°œλ³€μˆ˜μ—κ²Œ ν•¨μˆ˜λ₯Ό 전달할 수 μžˆλ‹€.
const increaser = makeCount(counter.increase);
console.log(increaser()); // 1
console.log(increaser()); // 2
console.log(increaser()); // 3

//ν•¨μˆ˜λŠ” λ§€κ°œλ³€μˆ˜μ—κ²Œ ν•¨μˆ˜λ₯Ό 전달할 수 μžˆλ‹€.
const decreaser = makeCount(counter.decrease);
console.log(decreaser()); // -1
console.log(decreaser()); // -2
console.log(decreaser()); // -3

  ν•¨μˆ˜κ°€ 일급 κ°μ²΄λΌλŠ” 것은 ν•¨μˆ˜λ₯Ό 객체와 λ™μΌν•˜κ²Œ μ‚¬μš©ν•  수 μžˆλ‹€λŠ” μ˜λ―Έλ‹€. ν•¨μˆ˜λŠ” 일급 κ°μ²΄λ‘œμ„œ 일반 객체와 같이 ν•¨μˆ˜μ˜ λ§€κ°œλ³€μˆ˜μ— 전달할 수 있으며, ν•¨μˆ˜μ˜ λ°˜ν™˜κ°’μœΌλ‘œ μ‚¬μš©ν•  μˆ˜λ„ μžˆλ‹€. μ΄λŠ” ν•¨μˆ˜ν˜• ν”„λ‘œκ·Έλž˜λ°μ„ κ°€λŠ₯μΌ€ ν•˜λŠ” μžλ°”μŠ€ν‚€λ¦½νŠΈμ˜ μž₯점 쀑 ν•˜λ‚˜λ‹€. ν•˜μ§€λ§Œ ν•¨μˆ˜λŠ” 일반 κ°μ²΄μ™€λŠ” 차이가 μžˆλ‹€. 일반 κ°μ²΄λŠ” ν˜ΈμΆœν•  수 μ—†μ§€λ§Œ ν•¨μˆ˜ κ°μ²΄λŠ” ν˜ΈμΆœν•  수 μžˆλ‹€. 그리고 ν•¨μˆ˜ κ°μ²΄λŠ” 일반 κ°μ²΄μ—λŠ” μ—†λŠ” ν•¨μˆ˜ 고유의 ν”„λ‘œνΌν‹°λ₯Ό μ†Œμœ ν•œλ‹€.

 

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

  ν•¨μˆ˜λŠ” 객체닀. λ”°λΌμ„œ ν•¨μˆ˜λ„ ν”„λ‘œνΌν‹°λ₯Ό κ°€μ§ˆ 수 μžˆλ‹€. μ•„λž˜μ˜ μ½”λ“œλŠ” number ν•¨μˆ˜κ°€ κ°€μ§€λŠ” ν”„λ‘œνΌν‹°λ“€μ΄λ‹€.

function number(num){
    return num;
}

console.dir(number);

/*
ƒ number(num)
arguments: null
caller: null
length: 1
name: "number"
prototype: {constructor: ƒ}
*/

이처럼 number ν•¨μˆ˜κ°€ κ°€μ§€λŠ” arguments, caller, name, length, prototype ν”„λ‘œνΌν‹°λŠ” λͺ¨λ‘ ν•¨μˆ˜ 객체의 데이터 ν”„λ‘œνΌν‹°λ‹€. 이듀 ν”„λ‘œνΌν‹°λŠ” 일반 κ°μ²΄μ—λŠ” μ—†λŠ” ν•¨μˆ˜ 객체 고유의 ν”„λ‘œνΌν‹°λ‹€.

 

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

  ν•¨μˆ˜ 객체의 arguments ν”„λ‘œνΌν‹° 값은 arguments 객체닀. arguments κ°μ²΄λŠ” ν•¨μˆ˜ 호좜 μ‹œ μ „λ‹¬λœ μΈμˆ˜λ“€μ˜ 정보λ₯Ό λ‹΄κ³  μžˆλŠ” 순회 κ°€λŠ₯ν•œ μœ μ‚¬ λ°°μ—΄ 객체이며, ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œ 지역 λ³€μˆ˜μ²˜λŸΌ μ‚¬μš©λœλ‹€. λ‹€μ‹œ 말해, ν•¨μˆ˜ μ™ΈλΆ€μ—μ„œλŠ” μ°Έμ‘°ν•  수 μ—†λ‹€. μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” ν•¨μˆ˜μ˜ λ§€κ°œλ³€μˆ˜μ™€ 인수의 κ°œμˆ˜κ°€ μΌμΉ˜ν•˜λŠ”μ§€ ν™•μΈν•˜μ§€ μ•ŠλŠ”λ‹€. μ„ μ–Έλœ λ§€κ°œλ³€μˆ˜μ˜ κ°œμˆ˜λ³΄λ‹€ 인수λ₯Ό 적게 μ „λ‹¬ν–ˆμ„ 경우 λ§€κ°œλ³€μˆ˜λŠ” undefined둜 μ΄ˆκΈ°ν™”λœ μƒνƒœλ₯Ό μœ μ§€ν•˜κ³ , λ§€κ°œλ³€μˆ˜μ˜ κ°œμˆ˜λ³΄λ‹€ 인수λ₯Ό 더 많이 μ „λ‹¬ν•œ 경우 초과된 μΈμˆ˜λŠ” λ¬΄μ‹œλœλ‹€. κ·Έλ ‡λ‹€κ³  초과된 μΈμˆ˜κ°€ κ·Έλƒ₯ λ²„λ €μ§€λŠ” 것이 μ•„λ‹ˆλΌ λͺ¨λ“  μΈμˆ˜λŠ” μ•”λ¬΅μ μœΌλ‘œ arguments 객체의 ν”„λ‘œνΌν‹°λ‘œ λ³΄κ΄€λœλ‹€.

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

console.log(add()); // NaN
console.log(add(1)); // NaN
console.log(add(1,2)); // NaN
console.log(add(1,2,3)); // 6
console.log(add(1,2,3,4)); // 6


/*
console.log(add(1,2,3,4));의 arguments객체 정보
0: 1
1: 2
2: 3
3: 4
callee: ƒ add(x,y,z)
length: 4
Symbol(Symbol.iterator): ƒ values()
*/

arguments κ°μ²΄λŠ” 인수λ₯Ό ν”„λ‘œνΌν‹° κ°’μœΌλ‘œ μ†Œμœ ν•˜λ©° ν”„λ‘œνΌν‹° ν‚€λŠ” 인수의 μˆœμ„œλ₯Ό λ‚˜νƒ€λ‚Έλ‹€. arguments 객체의 callee ν”„λ‘œνΌν‹°λŠ” ν˜ΈμΆœλ˜μ–΄ arguments 객체λ₯Ό μƒμ„±ν•œ ν•¨μˆ˜, 즉 ν•¨μˆ˜ μžμ‹ μ„ 가리킀고 arguments 객체의 length ν”„λ‘œνΌν‹°λŠ” 인수의 개수λ₯Ό 가리킨닀.

 

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

  caller ν”„λ‘œνΌν‹°λŠ” ECMAscript 사양에 ν¬ν•¨λ˜μ§€ μ•Šμ€ λΉ„ν‘œμ€€ ν”„λ‘œνΌν‹°λ‹€. 이후 ν‘œμ€€ν™”λ  μ˜ˆμ •λ„ μ—†λŠ” ν”„λ‘œνΌν‹° 이기에 μ±…μ—μ„œλ„ 관심없닀면 μ§€λ‚˜μ³λ„ μ’‹λ‹€κ³  ν–ˆμœΌλ‹ˆ, 과감히 λ„˜μ–΄κ°€κ² λ‹€.

 

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

  ν•¨μˆ˜ 객체의 length ν”„λ‘œνΌν‹°λŠ” ν•¨μˆ˜λ₯Ό μ •μ˜ν•  λ•Œ μ„ μ–Έν•œ λ§€κ°œλ³€μˆ˜μ˜ 개수λ₯Ό 가리킨닀. ( cf) arguments 객체의 length ν”„λ‘œνΌν‹°λŠ” ν•¨μˆ˜ ν˜ΈμΆœμ‹œ, 전달 받은 인수의 개수λ₯Ό 가리킨닀.) 

 

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

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

 

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

  prototype ν”„λ‘œνΌν‹°λŠ” μƒμ„±μž ν•¨μˆ˜λ‘œ ν˜ΈμΆœν•  수 μžˆλŠ” ν•¨μˆ˜ 객체, λ‹€μ‹œ 말해 constructor만이 μ†Œμœ ν•˜λŠ” ν”„λ‘œνΌν‹°λ‹€. 일반 객체와 μƒμ„±μž ν•¨μˆ˜λ‘œ ν˜ΈμΆœν•  수 μ—†λŠ” non-constructorμ—λŠ” prototype ν”„λ‘œνΌν‹°κ°€ μ—†λ‹€. prototype ν”„λ‘œνΌν‹°λŠ” ν•¨μˆ˜κ°€ 객체λ₯Ό μƒμ„±ν•˜λŠ” μƒμ„±μž ν•¨μˆ˜λ‘œ 호좜될 λ•Œ μƒμ„±μž ν•¨μˆ˜κ°€ 생성할 μΈμŠ€ν„΄μŠ€μ˜ ν”„λ‘œν† νƒ€μž… 객체λ₯Ό 가리킨닀. μ‰½κ²Œ 말해, μƒμ„±μž ν•¨μˆ˜.prototype이 κ°€λ¦¬ν‚€λŠ” 객체가 μƒμ„±μž ν•¨μˆ˜μ— μ˜ν•΄ μƒμ„±λœ μΈμŠ€ν„΄μŠ€μ˜ ν”„λ‘œν† νƒ€μž… 객체닀.