[JavaScipt] 13. 함수 (function)

함수

수학 시간에 y = f(x) 같은 함수를 배운 적이 있다. 프로그래밍에도 함수라는 개념이 존재한다. 수학의 함수와 비슷하지만, 다른 점도 있다. 프로그래밍에서 함수(function)는 일정한 동작을 수행하는 코드를 의미한다. 함수를 미리 만들어두고 원할 때 실행해 정해진 동작을 수행할 수 있게 해준다.

함수를 만들 때는 보통 function 예약어를 사용하거나 => 화살표 기호를 사용한다. 화살표 기호를 사용한 함수를 화살표 함수(arrow function)라고 한다.

function () {}

() => {}

이 함수에는 이름이 없기 때문에 다른 곳에서 사용할 수 없다. 함수에 이름을 붙이면 다른 곳에서 사용할 수 있다.

//함수 선언문
function a() {}
//함수 표현식
const b = function() {};
//화살표 함수
const c = () => {};

화살표 함수는 변수의 이름으로 대신 쓰는 방법 한 가지다.

함수를 상수에 대입하는 대신 function 키워드 뒤에 함수 이름을 넣어주는 방식을 함수 선언문(function declation statement)이라고 한다. 상수나 변수에 대입하는 방식을 함수 표현식(function expression)이라고 한다. 화살표 함수까지 포함해 함수를 만드는 방식은 크게 세 가지라고 보면된다.

변수와 마찬가지로 함수를 만드는 행위도 선언한다(declare)고 표현한다.

*함수 선언문 뒤에는 왜 ; 을 안붙일까요?

if for while 함수 선언문 뒤에는 잘 안붙인다. 그렇지만 변수 선언문 뒤에는 붙인다!

이제 만든 함수를 사용해보자! 함수를 사용하는 행위를 호출한다(call)고 표현한다.

function a() {}
a();
>

함수 a 를 선언한 후 a 뒤에 () 를 붙이면 함수가 실행된다. 지금은 함수 내부에 어떤 동작도 정의하지 않아서 실행결과가 아무것도 나오지 않았다. 그런데 우리는 함수의 이름 뒤에 ()를 붙이는 것을 많이 본적이 있다. 바로 console.log() 와 parseInt() 를 사용했었죠. 바로 이 친구들도 함수이기 때문이죠!

함수 안에 동작문을 넣어보자. 함수의 중괄호 안에 실행할 코드를 넣어주면 된다.

function a() {
  console.log("Hello");
  console.log("Function");
}

a();
>Hello
>Function

함수를 여러 번 부르면 여러 번 실행할 수 있다.

function a() {
  console.log("Hello");
  console.log("Function");
}

a();
a();
a();
>Hello
>Function
>Hello
>Function
>Hello
>Function

코드를 함수로 만들면 코드량을 줄일 수 있다.

화살표 함수는 딱 한 번만 쓸 때 사용하면 된다.

return값 이해하기

function b() {
	return '반환값';
}

함수의 return은 함수를 종료해주면서 반환해준다.

함수를 호출하면 기본 결과 값은 undefined 다. 이 값을 반환값(return value)라고 한다. 내가 항상 console.log를 실행할 때마다 콘솔에 undefined가 출력되곤 했었다. 바로 console.log함수의 반환값이 undefined여서 그렇다.

반환값을 직접 정할 수도 있따. return문을 추가하면된다.

function a() {
	return 10;
}

a();

이제 함수 호출의 반환값으로 undefined 대신 10이 나온다. 명시적으로 return문을 사용하지 않는다면 항상 동작문 끝에 return undefined 가 있다고 생각하면 된다!

//위 아래 함수는 동일하다.
function a() {}

function a() {
	return undefined;
}

//위 아래 함수는 동일하다.
function a() {
	console.log('a');
}

function a() {
	console.log('a')
	return undefined;
}

반환값도 값이므로 다른 식이나 문에 넣어 사용할 수 있다!

function a() {
	return 10;
}

console.log(a());
>10

function a() {
	return 10;
}

const b = a();
console.log(b);
>10

만약 return값을 동시에 여러 값을 나타내고 싶다면, 배열에 묶어서 return해주어야한다. return값은 하나이기 때문에 묶어서 표현해주어야 한다.

function a() {
	return [1, 5];
}

console.log(a());
>[1, 5]

return문의 기능이 하나 더 있다. 바로 함수의 실행을 중간에 멈추는 역할이다.

function a() {
  console.log("Hello");
  return;                   //여기서 멈춘다.
  console.log("return");
}

a();
>Hello

조건부 식에서는

function a() {
  if (false) {
    return;
  }
  console.log("실행된다!");
}

a();

false 에서 실행이 안되기 때문에 조건식을 나와 그 다음 console.log 가 실행된다.

매개변수와 인수(parameter, argument)

console.log

function a(parameter) {
	console.log(parameter);
}
a('argument');

선언 parameter 매개변수

호출 argument 인자

호출할 때 argument 가 parameter 자리로 들어간다.

function add(x, y) {
	return x+y;
}

console.log(add(5, 3));
>8
console.log(add(5);
>NaN

매개변수가 인수보다 많을 때, 나머지 값은 기본값인 undefined다.

function a(a, b, c, d) {
  return [a, b, c, d];
}

console.log(a("Eden", "zzang", "good"));
>[ 'Eden', 'zzang', 'good', undefined ]

매개변수가 인수보다 적을 때, 맞는 것들만 짝 지어지고 남는 것들은 무시된다.

function a(x, y) {
  return [x, y];
}

console.log(a("Eden", "zzang", "good"));
>[ 'Eden', 'zzang' ]

*1분 퀴즈

매개변수로 x, y, z를 받아 곱한 값을 반환하는 mutiply함수를 만들어 보ㅏ! 단, 화살표 함수로 만들자

const mutiply = (x, y, z) => {
  return x * y * z;
};

//이렇게 표현할 수도 있다.
const mutiply = (x, y, z) => return x * y * z;

다른 변수 사용하기

함수 내부에서 매개변수 외에도 변수나 상수를 선언할 수도 있다. 함수 바깥에서 선언한 변수나 상수를 사용할 수도 있다.