일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- 프로그래머스 K_Digital Training 프론트엔드
- 프로그래머스 데브코스 프론트엔드
- useRef 지역 변수
- react customHook 예시
- 투포인터알고리즘 js
- 백준 js
- 프로그래머스 데브코스
- 프로그래머스 데브코스 프론트엔드 TIL
- 백준 node.js
- frontend roadmap study
- 모던 자바스크립트 딥다이브
- 개발자 특강
- K_Digital Training
- 모던 javascript Deep Dive
- Vue3 Router
- 우테캠 회고록
- 머쓱이
- useEffect return
- KDT 프로그래머스
- 모던 자바스크립트 Deep Dive
- 모던 자바스크립트 TIL
- react 프로젝트 리팩토링
- TypeScript 문법 소개
- 리팩토링 회고
- 프로그래머스 K_Digital Training
- 인프런 자바스크립트 알고리즘 문제풀이
- KDT 프로그래머스 데브코스 프론트엔드
- Frontend Roadmap
- Vue3
- 모던 자바스크립트 Deep Dive TIL
- Today
- Total
프론트엔드 개발자의 기록 공간
[JavaScript DeepDive] 18장_함수와 일급 객체 본문
다음과 같은 조건을 만족하는 객체를 일급 객체라 한다.
- 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다.
- 변수나 자료구조(객체, 배열 등)에 저장할 수 있다.
- 함수의 매개변수에 전달할 수 있다.
- 함수의 반환값으로 사용할 수 있다.
// 1. 함수는 무명의 리터럴로 생성할 수 있다.
// 2. 함수는 변수에 저장할 수 있다.
// 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다.
const increase = function (num) {
return ++num;
};
const decrease = function (num) {
return --num;
};
// 2. 함수는 객체에 저장할 수 있다.
const auxs = { increase, decrease };
// 3. 함수의 매개변수에게 전달할 수 있다.
// 4. 함수의 반환값으로 사용할 수 있다.
function makeCounter(aux) {
let num = 0;
return function () {
num = aux(num);
return num;
};
}
// 3. 함수는 매개변수에게 함수를 전달할 수 있다.
const increaser = makeCounter(auxs.increase);
console.log(increaser()); // 1
console.log(increaser()); // 2
// 3. 함수는 매개변수에게 함수를 전달할 수 있다.
const decreaser = makeCounter(auxs.decrease);
console.log(decreaser()); // -1
console.log(decreaser()); // -2
함수가 일급 객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 의미다.
객체는 값이므로 함수는 값과 동일하게 취급할 수 있다.
✍ arguments 프로퍼티
함수 객체의 arguments 프로퍼티 값은 arguments 객체다. arguments 객체는 함수 호출 시 전달된 인수들의 정보를 담고 있는 순회 가능한 유사 배열 객체이며, 함수 내부에서 지역 변수처럼 사용된다.
자바스크립트는 함수의 매개변수와 인수의 개수가 일치하는지 확인하지 않는다. 따라서 함수 호출 시
매개변수 개수만큼 인수를 전달하지 않아도 에러가 발생하지 않는다.
function multiply(x, y) {
console.log(arguments);
return x * y;
}
console.log(multiply()); // NaN
console.log(multiply(1)); // NaN
console.log(multiply(1, 2)); // 2
console.log(multiply(1, 2, 3)); // 2
함수를 정의할 때 선언한 매개변수는 함수 몸체 내부에서 변수와 동일하게 취급된다.
즉, 함수가 호출되면 함수 몸체 내에서 암묵적으로 매개변수가 선언되고 undefined로 초기화된 이후 인수가 할당된다.
모든 인수는 암묵적으로 arguments 객체의 프로퍼티로 보관된다.
따라서 이터레이터 또는 반복문으로 arguments 객체를 순회할 수 있다.
(이터레이터는 차후 다른 파트에서 알아본다.)
function multiply(x, y) {
// 이터레이터
const iterator = arguments[Symbol.iterator]();
// 이터레이터의 next 메서드를 호출하여 이터러블 객체 arguments를 순회
console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: 3, done: false}
console.log(iterator.next()); // {value: undefined, done: true}
return x * y;
}
multiply(1, 2, 3);
//////////////////////////
function sum() {
let res = 0;
// arguments 객체는 length 프로퍼티가 있는 유사 배열 객체이므로 for 문으로 순회할 수 있다.
for (let i = 0; i < arguments.length; i++) {
res += arguments[i];
}
return res;
}
console.log(sum()); // 0
console.log(sum(1, 2)); // 3
console.log(sum(1, 2, 3)); // 6
arguments 객체는 배열 형태로 인자 정보를 담고 있지만 실제 배열이 아닌 유사 배열 객체다.
유사 배열 객체란 length 프로퍼티를 가진 객체로 for 문으로 순회할 수 있는 객체를 말한다.
👨💻 이전에 자바스크립트를 학습할 때, "자바스크립트의 함수는 일급객체이기 때문에" 라는 용어는 많이 들어봤었다.
정확히 이게 어떤 의미인지 모르고 그렇구나 하면서 넘겼던 적이 많았던것 같다. 이번 장을 통해 객체와 함수의 차이에 대해 알 수 있었고, 그래서 왜 함수는 일급객체라고 불리는지 알 수 있었다.
'모던 자바스크립트 Deep Dive' 카테고리의 다른 글
[JavaScript DeepDive] 20~21장 (0) | 2022.02.17 |
---|---|
[JavaScript DeepDive] 19장_프로토타입 (0) | 2022.02.16 |
[JavaScript DeepDive] 17장_생성자 함수에 의한 객체 생성 (2) | 2022.02.14 |
[JavaScript DeepDive] 16장_프러퍼티 어트리뷰트 (0) | 2022.02.13 |
[JavaScript DeepDive] 13~15장 (0) | 2022.02.10 |