[JavaScript] Functions (함수)

1. Function (함수) 란?

함수는 하나의 작업을 처리하는 코드 묶음이다. 

같은 작업을 수행할 때마다 재사용해 효율적으로 프로그래밍할 수 있다. 

 

2. Function Declarations (함수 선언)  & Calling a Function (함수 호출) 

함수를 선언할 때는 function 함수명() {바디} 

함수를 호출할 때는 함수명();

function greetWorld() {
	console.log('Hello, World!');
}

greetWorld(); // Output : Hello, World!

 

3. Parameters and Arguments (매개변수와 인수) 

parameters(매개변수)를 통해 함수는 입력을 받고, 그 입력을 사용하여 작업을 수행한다. 

함수 호출 시 괄호 안에 지정되어, 함수로 전달되는 값을 arguments(인수)라 한다. 

function calculateArea(width, height){ // 매개변수 width, height
	console.log(width*height);	// 함수 내부에서 일반 변수처럼 동작
    }
 
calculateArea(10, 6);			// 인수: 10이 width로, 6이 height로 전달

 

4. Default Parameters (기본 매개변수) 

default parameter(기본 매개변수)는 인수가 전달되지 않거나,
전달된 인수가 undefined인 경우에 매개변수가 미리 정해진 값을 갖도록 한다. 

function greeting (name = 'stranger') {
  console.log(`Hello, ${name}!`)
}

greeting('Nick') // Output: Hello, Nick!
greeting() // Output: Hello, stranger!

 

5. Return

함수는 return문을 통해 정보를 반환한다.

return문이 사용되면, 함수의 실행이 중단되고 이후의 코드는 실행되지 않는다.

function rectangleArea(width, height) {
  let area = width * height;
  return area; 
}
console.log(rectangleArea(5, 7)) // 35

function rectangleArea(width, height) {
  if (width < 0 || height < 0) {
    return 'You need positive integers to calculate area!';	
  }
  return width * height;  // 첫 return문이 실행되었다면 실행되지 않음
}

 

6. Helper Functions

함수의 반환값을 다른 함수 내에서 사용할 수도 있다.

다른 함수 내에서 호출되는 함수를 helper function이라 한다.

helper function을 이용하면 코드가 더 간결해지고, 작업을 관리하기 쉽게 구분할 수 있다.

function multiplyByNineFifths(number) {
  return number * (9/5);
};

function getFahrenheit(celsius) {
  return multiplyByNineFifths(celsius) + 32;
};

getFahrenheit(15); // Returns 59

 

7. Function Expressions (함수 표현식) 

함수 표현식은 함수를 정의하는 다른 방법이다. 

1. 보통 변수를 통해 저장하고 const 키워드를 사용한다. 
2. function 키워드로 익명 함수를 할당하고 매개 변수를 넣는다. 
3. { } 안에 함수 본문을 작성한다.
4. 호출할 때는 함수가 저장된 변수 이름을 사용한다. 

const calculateArea = function(width, height) {
	const area = width * height;
    return area;
}

calculateArea(5,10); // 함수 호출

 

8. Arrow Functions 

Arrow Function을 이용하면 함수를 더 간결하게 작성할 수 있다. 

( )안에 매개변수를 작성하고, 화살표 =>로 함수의 body { }를 가리킨다.

const rectangleArea = (width, height) => {
  let area = width * height;
  return area;
};

 

9. Concise Body Arrow Functions 

화살표 함수 문법을 더욱 간략하게 정의하는 방법

1. 단일 매개변수를 가지는 함수는 매개변수를 괄호로 감쌀 필요 없다.

// parameter 없는 경우
const functionName = () => { };

// parameter 1개인 경우 
const functionName = paramOne => { };

// parameter 2개 이상인 경우 
const functionName = (paramOne, paramTwo) => { };

2. 한 줄짜리 함수 본문은 중괄호가 필요 없다. 
중괄호가 없으면 결과값이 자동으로 반환되므로 return도 생략 가능하다.

// single line block
const sumNumbers = number => number + number;

// multi line block
const sumNumbers = number => {
	const sum = number + number;
    return sum;
}

 

ex) 함수 간결하게 만들기

1. 단일 매개변수이므로 괄호를 제거한다.
2. 본문이 한 줄이므로 중괄호와 return을 제거한다. 

const squareNum = (num) => {
  return num * num;
};


const squareNum = num => num * num;

 

10. Higher Order Functions (고차 함수) 

Functions as Data

자바스크립트에서 함수는 다른 데이터 타입과 동일하게 작동한다. 

따라서, 변수에 함수를 할당할 수도 있다. 

 

아래 예시 코드에서는 함수명이 지나치게 길어 사용이 불편하다. 

const announceThatIAmDoingImportantWork = () => {
	console.log("I’m doing very important work!");
};

 

다음과 같이 새로운 변수에 함수를 저장하여 이름을 변경할 수 있다. 

const busy = announceThatIAmDoingImportantWork;
busy();

 

busy는 announceThatIAmDoingImportantWork 함수를 참조하는 변수로, 동일한 주소를 가리킨다. 

주의할 점은 함수 실행 결과가 아닌 함수 자체를 저장하는 것이므로 ()를 사용하지 않는다는 것이다. 

busy 함수를 호출할 때에는 busy();를 사용한다. 

 

Functions as Parameters

마찬가지로, 자바스크립트에서 함수는 다른 데이터 타입처럼 동작하기 때문에 

다른 함수를 파라미터로 전달 받는 것도 가능하다. 

 

파라미터로 전달되는 함수를 callback function(콜백 함수)라고 한다. 

콜백 함수는 고차 함수 실행 중에 호출된다.

const higherOrderFunc = param => {
	param();
    return `I just invoked ${param.name} ad a callback function!`
    }
    
const anotherFunc = () => {
	return 'I\'m being invoked by the higher-order function!';
    }
 
 higherOrderFunc(anotherFunc);
 
 higherOrderFunc(() => {
 	for (let i=0; i<=10; i++) {
 	console.log(i);
 	}
 });

 

 

---

 

예제 코드 : https://github.com/inyeongjang/Snoopy/blob/main/week02/3-Functions.js

Snoopy/week02/3-Functions.js at main · inyeongjang/Snoopy

 

출처/참고자료 : https://www.codecademy.com/enrolled/courses/introduction-to-javascript

Learn JavaScript | Codecademy