[JavaScript] #05 - Function(함수)

함수(Function)

수학의 함수는 입력을 받아 출력을 내보내는 과정을 정의한 것이지만 프로그래밍 언어의 함수는 

일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.

입력을 받아서 출력을 내보낼 때, 함수 내부로 전달 받은 변수를 매개변수(parameter), 입력을

인수=인자(argument), 출력을 반환값(return value)라고 한다.

또한 함수는 값이며, 여러 개 존재할 수 있다. 그래서 구별하기 위해 식별인 함수 이름을 사용할 수도 있다.

 

안녕하세요 라는 메시지를 출력하는 프로그램을 만든다고 가정하면 다음과 같이 작성해볼 수 있다.

// "안녕하세요!" 메시지를 출력하는 함수를 정의한다.
function sayHello() {
  console.log('안녕하세요!');
}

// 함수를 실행시킨다.
sayHello();

---

함수 선언 규칙

function이라는 키워드를 이용해 "함수" 타입을 명시한 뒤 함수의 이름을 정의하고, "{}" 중 괄호를 이용해

함수가 하는 일(함수 몸체)을 정의한다. 이렇게 몇 가지의 규칙을 통해 우리는 함수를 선언할 수 있다.

또 함수의 이름은 함수가 하는 일을 잘 설명하는 키워드를 통해 작성하는 것이 좋다. 위의 sayHello 처럼 함수의이름만으로도 함수에 정의된 내용을 알 수 있도록 하는 것이 좋다.

---

함수의 특징

• 함수는 function 키워드로 시작하고 실제로는 객체이다.
• 함수는 정의/생성할 수 있으며 출력도 할 수 있다.
• 객체의 특성 덕분에 함수를 변수나 배열에 정의할 수 있다.
• 다른 함수를 호출할 때 인자를 넘겨줄 수 있다.

---

함수 사용

함수는 선언만 한다고 해서 원하는 결과를 낼 수 없다. 선언을 하고 실행도 해야 결과를 확인할 수 있다.

greeting() 함수를 이용해 인사말을 출력하고 싶다면 다음과 같은 코드를 작성할 수 있다.

function greeting() {
  console.log('안녕하세요. 처음 뵙겠습니다.');
};

greeting();

---

반환 값을 가지는 함수

함수는 실행될 때 단순히 "실행"만 되고 끝날 수도 있지만 "실행한 결과를 반환"하고 끝날 수도 있다.

함수가 정의하는 특정 목적이 결과를 되돌려주어야 하는 것일 수도 있기 때문이다.

function getPrintMessage() {
  return 'Hello world!';
}

getPrintMessage();

 

콜백 함수 (callback 함수)

콜백 함수는 코드를 통해 명시적으로 호출하는 함수가 아니라, 개발자는 단지 함수를 동록하기만 하고, 
어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출(자동올 실행)하는 함수를 말한다
익명 함수는 callback을 구현할 때 주로 사용한다.

// printYes, printNo 함수를 callback으로 등록한다.
const printYes = function () {
	console.log('Yes!');
}

const printNo = function () {
	console.log('No!');
}

function randomQuiz(answer, printYes, printNo) {
	if (answer == 'love you') {
		printYes();
	} else {
		printNo();
	}
}

randomQuiz('wrong', printYes, printNo);
randomQuiz('love you', printYes, printNo);

---

객체와 같이 new 연산을 이용한 익명함수 및 동적함수 선언

• 이름 혹은 리터럴 없이 선언되는 함수를 익명함수라고 한다.
• 익명함수는 자바스크립트 함수 객체를 선언 시 자주 이용된다.

const Car = { // Car라는 객체 선언
  drive : function() { // drive에 익명함수 선언
    console.log();
  }
}

---

여러가지 함수 정의 방법

사각형의 너비를 구하는 함수를 여러가지 방법으로 작성해보자.

// 함수 선언식
function getRectangleArea(width, height) {
  let rectangleArea = width * height;
  return rectangleArea;
}
// 함수 표현식
const getRectangleArea = function(width, height) {
  let rectangleArea = width * height;
  return rectangleArea;
}
// 함수 표현식 - 화살표 함수
const getRectangleArea = (width, height) => {
  let rectangleArea = width * height;
  return rectangleArea;
}

---

화살표 함수

화살표 함수는 ES6 문법으로 새로 도입되었으며 함수의 본문에 return만 있는 경우 return과 {}를 생략할 수 있다.

단, 같이 생략해야한다.

/* const whoAreYou = function (name) {
	console.log(name + '님 안녕하세요');
}

const whoAreYou = (name) => {
	console.log(name + '님 안녕하세요');
}

// const whoAreYou = (name) => console.log(name + '님 안녕하세요');

// 화살표 함수의 인수가 1개일 경우 ()도 생략할 수 있다.
// const whoAreYou = name => console.log(name + '님 안녕하세요');

const whoAreYou = name => {
	return name + '님 안녕하세요';
} */

// 함수가 실행할 문장이 return 1문장만 있을 경우 {}를 생략하고 return도 생략할 수 있다.
const whoAreYou = name => name + '님 안녕하세요';

console.log('return: ' + whoAreYou('임꺽정'));

---

자동실행 함수

자동으로 실행할 함수 전체를 ()에 묶고 ')' 뒤에 (); 를 붙여 실행한다.

(function hello() {
	console.log('자동실행');
})();

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

자료 출처 : https://hanamon.kr/javascript-%ED%95%A8%EC%88%98-%EA%B8%B0%EC%B4%88/