자바스크립트에서 함수 (function)를 정리해보자 - 1

이미 공부한 내용을 빠르게 복기하기 위한 노트로, 이 글을 작성하였다.

 

먼저 이 글은 Arrow function은 다루지 않는데,

Arrow Function은 this 바인딩과 함께 깊게 다루고 싶은 내용이기 때문에 일단 제꼈다.

 

 

글의 목차

 

• 1. 함수 파라미터
  • 파라미터 기본값  
  • rest 파라미터

 

• 2. 콜백 함수
  • 일급 객체, 일급 함수, 고차 함수

 

• 3. 객체에서 함수 정의
  • 객체에서 key와 함수 매개변수가 일치하는 경우

 

• 4. 생성자 함수
  • 생성자 함수 생성 방법

 

• 5. 즉시 실행 함수
  • 즉시 실행 함수의 실행 방법

 

 

 

1. 함수 파라미터

 

- 수학할 땐 함수가 짱싫었는데 말이죠!

 

파라미터 기본값

function add(a = 1, b = 1) {
	return a + b;
}

add(); // 2

 

각 매개변수에 값을 설정할 수 있다.

기본값을 설정하지 않으면 undefined 로 설정된다.

 

rest 파라미터

function add(a, b, c, ...numbers) {
  console.log(a, b, c);
  console.log(numbers); //Rest 매개변수 (나머지)
}

 

인자에 ... 달고 몇개든 인자를 추가할 수 있게 해줌

 

2. 콜백함수

 

- 마치 callback 함수를 이 이미지로 설명할 수 있을 것 같았다.

 

일급 객체 (first-class object)

 

일반 객체처럼 모든 연산이 가능한 것을 일급 객체라고 한다.

 

1) 함수의 매개변수로 전달이 가능

2) 함수의 반환값으로 쓸 수 있음

3) 할당할 수 있음

4) 동일 비교도 가능

 

일급 함수 (first-class function)

 

자바스크립트에서 이러한 특성을 가진 것이 객체, 또 함수이다.

함수도 일급 객체라고 부를 수 있기 때문에 함수는 일급 함수(first-class function)라고 부르기도 한다.

 

프로그래밍 언어에서 일급 함수를 지원한다는 것은

 

함수 자체를 매개변수로 전달이 가능하고,

함수를 반환이 가능하고,

할당도 할 수 있고,

함수끼리의 동일비교도 가능하다는 것이다.

 

함수로 이러한 모든 연산이 가능하다.

 

고차 함수  (Higher-order function)

 

인자로 함수를 받거나 (콜백함수), 함수를 반환하는 함수를 고차함수라고 한다.

인자에 함수의 정의만 넘겨주면 내가 원하는 시점에 콜백함수를 사용할 수 있다.

 

인자로 함수를 전달해서 함수를 사용하면 이런식으로 사용이 가능하다.

function greeting(name) {
  alert(`Hello, ${name}`);
}

function processUserInput(callback) {
  const name = prompt("Please enter your name.");
  callback(name);
}

processUserInput(greeting);

 

- 위 예제는 mdn 예제이다.

https://developer.mozilla.org/en-US/docs/Glossary/Callback_function

Callback function - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

 

인자로 함수를 받고, 그 받은 함수를 사용한다.

인자로 어떤 함수를 전달받던 상관없이 전달받은 함수를 사용한다.

 

이것은 자바스크립트가 결국 일급 함수를 지원하는 언어이기 때문에 가능한 일이다.

 

3. 객체에서의 함수 정의

 

- object 관련된 이미지를 넣고 싶었는데 너무 귀여워서 tenor에서 그냥 가져와봤어요

 

객체에서 key와 함수 매개변수가 일치하는 경우

 

let puppy = {
  name: '멍뭉이',
  greet: function () {
    console.log(`안녕! 난 ${this.name} 이다멍!`);
  },
}

puppy.greet();

 

객체에서 이런식으로 함수 정의가 가능하다.

 

객체를 이용한 함수 정의는 좀 더 줄인 표현도 가능한데,

객체의 key값과 함수에서의 매개변수의 값이 일치하는 경우에 생략이 가능하다.

 

const x = 0;
const y = 0;
const coordinate = { x, y }; // { x: x, y: y }; 의 표현을 이런식으로 줄일 수 있음

 

고양이 객체를 리턴하는 함수가 있다고 하자

function makeCat(name, age, owner) {
  return { 
    name: name, 
    age: age,
    owner: owner 
  }
}

function makeCat(name, age, owner) {
  return { name, age, owner }
}

고양이 객체는 원래 위 같이 정의되어야 하지만,

전달하는 인자와 객체 key 값이 일치하기 때문에 생략할 수 있다. (전달하는 즉시 사용)

 

4. 생성자 함수

 

- 생성자 함수는 javascript ES6+, class 문법 등장 이전에 객체 지향 프로그래밍을 위해 쓰였어요

 

생성자 함수 생성 방법

 

함수를 선언할 때 대문자로 시작하면 생성자 함수를 만들 수 있다.

 

function Animal(name, emoji) { 
    this.name = name;
    this.emoji = emoji;
    this.introduce = () => { // Arrow function
        console.log(`${this.name}: ${this.emoji}`);
    };
}

const cat1 = new Fruit('kitty', '😺');
console.log(cat1); // Animal { name: 'kitty', emoji: '😺', introduce: [Function (anonymous)] }
console.log(cat1.name); // kitty
console.log(cat1.emoji); // 😺
cat1.introduce(); // kitty: 😺

 

cat1 은 Animal 의 객체, 인스턴스이다.

근데 생성자 함수는 자바스크립트에서 오래된 방식이고,

요즘은 클래스를 이용해서 많이 작성한다.