안녕하세요. Tay 입니다.
일급객체란, 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체입니다.
자바스크립트의 일급객체 함수로 어떤 활용 방법이 가능한지 알아보도록 하겠습니다.
입급객체 함수
- 입력 값 처리
- 일반 객체처럼 취급
- 다른 함수의 인자로 취급
- 함수의 리턴값으로 사용 가능
- 함수 프로퍼티 생성
변수나 프로퍼티의 값으로 할당
1) index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<!-- <script src="function.js"></script> -->
<!-- <script src="hoisting.js"></script> -->
<!-- <script src="arrow.js"></script> -->
<script src="use-function.js"></script>
</body>
</html>
2) use-function.js
// Assign function in variable
let sayHello = name => {
console.log(`Hello ${name}`);
};
// Assign function in property
let Tay = {
name: "Tay",
male: true,
greeting: sayHello
};
Tay.greeting(Tay.name);
- Assign function in variable - sayHello 에 화살표함수 할당
- Assign function in property - Tay 객체 greeting 프로퍼티에 sayHello 함수 할당
함수 인자로 전달
함수를 다른 함수의 인자로 넘기기
- use-function.js
// Create function sayHeight
let sayHeight = height => {
height(); // Do say
};
// Generate function sayHeight
sayHeight(function() {
console.log(`My height is 3000cm`);
});- Create sayHeight : sayHeight 의 인자로 height 함수를 받는다.
- Generate : sayHeight 에 인자로 새로운 함수를 생성하여 전달하였다.
- Do say : sayHeight 에서 받은 함수를 실행한다.
리턴 값으로 활용
함수 자체가 값이라서 리턴이 가능하다.
- use-function.js
// Create-Return function weight
let weight = () => () => {
console.log("My weight is 600kg");
};
let sayWeight = weight();
sayWeight();- 익명 함수 1 을 선언한다. (제 2익명함수를 리턴한다)
- 익명 함수 2 log 를 수행한다.
- sayWeight 객체에 weight 함수 참조값을 할당한다.
- sayWeight 를 실행하면, weight 함수의 익명 함수 1이 수행되고, 리턴 값으로 익명 함수 2가 수행된다.
지금까지 결과 :
Github Commit
함수 프로퍼티 생성
동적으로 프로퍼티를 생성 및 할당
- use-function.js
let sayWeight = weight();
sayWeight();
console.dir(sayWeight);
함수도 객체라서 프로퍼티가 존재하며, 프로퍼티를 동적으로 생성 할 수 있다.
※ length 프로퍼티는 인자값의 개수이다.
결과 :
let sayWeight = weight();
sayWeight();
console.dir(sayWeight);
sayWeight.weight = "600kg";
console.dir(sayWeight);
위 처럼 동적으로 weight 프로퍼티를 추가했고, 600kg 을 할당했다.
이 글은 개인 공부목적으로 작성되었습니다.
정보가 잘못 되거나 궁금한 사항은 댓글로 부탁드립니다!! 읽어주셔서 감사합니다.
'JavaScript > Basic-Javascript' 카테고리의 다른 글
| 자바스크립트 정리하며 배우기[19] - 콜백 함수(callback) (0) | 2020.02.03 |
|---|---|
| 자바스크립트 정리하며 배우기[18] - 함수의 프로토타입(prototype property)과 constructor (0) | 2020.01.31 |
| 자바스크립트 정리하며 배우기[16] - 함수 호이스팅(Hoisting) 과 화살표(Arrow) 함수 (0) | 2020.01.28 |
| 자바스크립트 정리하며 배우기[15] - 함수(function) 생성방법 3가지 (0) | 2020.01.22 |
| 자바스크립트 정리하며 배우기[14] - 연산자(Operators) (0) | 2020.01.21 |
