게시글

5만명이 선택한 평균 별점 4.9의 제로초 프로그래밍 강좌! 로드맵만 따라오면 됩니다! 클릭
강좌3 - JavaScript - 9년 전 등록 / 7년 전 수정

함수(Function)

자바스크립트의 꽃은 함수입니다. 자바스크립트는 모든 것을 함수를 통해 할 수 있습니다. 따라서 함수의 기본부터 확실히 익혀 놓는 게 좋겠죠?

함수(Function)

함수란 뭘까요? 학교 수학시간에 배웠던 함수와 비슷합니다.

y = f(x)

x에 어떤 값을 넣으면 y가 f(x)에 상응하는 식에 의해 자동으로 나왔죠? 그것과 비슷합니다. 자바스크립트에서 함수는 다음과 같이 만듭(선언)니다.

function addOne(x) {
  var y = x + 1;
  return y;
}

또는 다음과 같이도 만들 수 있습니다. 아래처럼 변수를 선언하고 함수를 대입하는 방식을 함수 표현식이라고 부릅니다. (위의 방식은 함수 선언이라고 부릅니다) 아래와 위의 방식의 차이로는 호이스팅이라는 현상이 있는데, 나중에 실행 컨텍스트 시간에 설명하겠습니다. 또 다른 차이점은 위의 방식으로 만들 때에는 끝에 ;를 붙이지 않습니다.

var addOne = function(x) {
  var y = x + 1;
  return y;
};

addOne이 함수의 이름(변수의 이름이기도 하고요)이고, x가 사용자가 넣고 싶은 것을 넣는 곳입니다. x를 매개변수라고 하고 영어로는 Parameter라 합니다. 함수 안에는 y라는 변수를 만든 뒤에 x값에 1을 더하라고 되어있습니다. return은 y값을 바깥으로 내보내고 함수를 종료하라는 겁니다. 즉 x값을 받아서 1을 더한 후 바깥으로 내보내라는 거죠. 이것을 반환한다고 표현합니다.

이 함수를 실행하려면 함수의 이름에다 소괄호(())를 붙이고, 괄호 안에 매개변수 x에 상응하는 인자를 넣어주면 됩니다. 이렇게 미리 만들어둔 함수를 실행하는 행위를 호출한다라고 표현합니다. 호출을 통해서 반환하는 값을 저장할 변수를 미리 만들어둡시다. 아래에서는 변수 i에 addOne함수의 반환 값을 저장합니다.

var i = addOne(1);
i; // 2

1을 넣으면 그 1이 매개변수 x로 전달됩니다. 이제 addOne 함수 내부 코드가 실행되죠. x가 1이니까 y는 2가 되고, return에 의해 y값이 반환(바깥으로 내보내져)되어 i에 y의 값인 2가 저장됩니다. 여기서의 1은 매개변수라고 부르지 않고 인자(Argument)라고 부릅니다. 함수를 선언할 때의 괄호 안의 값은 매개변수(Parameter), 함수를 호출할 때의 괄호 안의 값은 인자(Argument)입니다.

var j = addOne(2);
var k = addOne(100);

각각 j와 k의 값은 무엇일까요? 쉽죠? 3, 101입니다. 이번에는 곱하기 함수도 한 번 만들어봅시다.

function multiply(x, y) {
  return x * y; // 곱하기 표시(x)가 프로그래밍에서는 *
}

여기는 이전과는 다르게 매개변수(Parameter)가 x, y 두 개네요? 상관 없습니다. 그냥 함수를 호출할 때 두 개를 넣어주면 됩니다.

var l = multiply(5, 6); // 30
var m = multiply(10, 0); // 0

위의 경우에는 5가 x, 6이 y로 전달됩니다. 그리고 5 * 6의 결과값이 반환(return)되는 거죠. 매개변수의 개수는 원하는 대로 만들 수 있습니다. 하지만 너무 많으면 사용할 때 헷갈립니다. 그래서 매개변수가 많아질 것 같으면 객체를 주로 사용합니다.

var n = function(object) {
  return object.a + object.b + object.c + object.d;
};
n({ a: 1, b: 2, c: 3, d: 4 }); // 10

매개변수도 하나고, 인자도 객체 하나입니다. n에 인자로 넣은 객체가 object 매개변수로 전달되어 함수 안에서 활용됩니다. 좀 어려운 문제를 내볼까요. 아까 만든 더하기와 곱하기 함수를 사용한 겁니다.

var a = multiply(addOne(2), addOne(4));

이걸 맞추셨다면 하나를 알면 열을 아는 분이시거나, 이미 자바스크립트에 익숙하면서 글을 읽으시는 분이겠죠? 차근차근 본다면,

multiply(addOne(2), addOne(4));

에서 addOne(2)==3이고, addOne(4)==5니까 위의 함수는 var a = multiply(3, 5); 와 같습니다. 따라서 답은 15죠. 이렇게 함수를 여러 개 조합해서 사용할 수도 있습니다.

함수 중에는 return을 하지 않는 함수도 있습니다. 첫 시간, 첫 번째 예로 보여드렸던 날짜를 표시하는 프로그램이 바로 그렇습니다.

var dateChecker = function() {
  var date = new Date();
  alert(date);
};
dateChecker(); // undefined

위와 같이 return이 없는 함수는 자동으로 undefined를 반환합니다. 알림이 뜨는 것은 return과 상관이 없습니다. 알림은 alert(date); 의 결과로써 뜨는 거지 dateChecker의 return에 의한 것이 아닙니다. 대신 알림이 뜬 후에 콘솔 창에 undefined가 표시되는 것을 볼 수 있습니다. 이게 바로 dateChecker 함수의 return 값입니다. 사실 모든 함수는 return을 입력하지 않으면 자동으로 return undefined;가 마지막 코드로써 동작하는 겁니다.

undefined

한 가지 더 알아둘 점은 return 이후에는 함수가 종료되기 때문에 실행되지 않습니다. 아래 코드에서는 alert('저는 실행되지 않습니다'); 이 부분이 return보다 뒤에 나오기 때문에 무시됩니다. 그러니까 return 뒤에 코드를 적는 실수를 하지 마세요!

var really = function() {
  return;
  alert('저는 실행되지 않습니다');
};
really(); // undefined

이전 시간에 객체나 배열의 값으로 함수도 들어갈 수 있다고 했습니다. 기억나시나요? 자바스크립트에서는 함수도 하나의 값입니다.

var a = {
  b: function() {
    return;
  }
};

위의 경우에 속성 b의 값은 함수입니다. a.b(); 와 같이 하면 함수를 호출할 수 있습니다. 전 시간에 이렇게 속성의 값으로 사용되는 함수를 메소드라고 부른다고 살짝 알려드렸습니다.

조금 더 어려운 경우를 살펴보겠습니다.

var mother = function(func) {
  func();
};
var children = function() {
  alert('안녕하세요');
};
mother(children); // '안녕하세요'

mother과 children 함수를 만들었는데 mother 함수를 호출할 때 인자로 children 함수를 넣었습니다. 함수의 반환값이 아니라 함수 자체를 넣은거죠. 이렇게 넣은 children 함수는 func 매개변수로 전달되어 func();를 통해 호출됩니다. func();children();과 같습니다. 함수가 인자값과 매개변수로써 사용될 수 있는거죠.

이렇게 값으로 사용되는 함수를 프로그래밍에서는 1급 함수라고 부릅니다. 즉 자바스크립트는 1급 함수를 사용하는 언어인 것이죠. 함수를 값으로써 자유자재로 다룰 수 있어야 자바스크립트의 고수가 될 수 있습니다. 아직은 초보 강좌이니까 그 방법에 대해서는 포스팅하지 않겠습니다. 나중에 고급 강좌에서 한 번 다뤄보겠습니다.

일단 기본적인 함수의 개념은 잡았고, 다음 시간에는 연산자에 대해서 배워보겠습니다.

조회수:
0
목록
투표로 게시글에 관해 피드백을 해주시면 게시글 수정 시 반영됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright 2016- . 무단 전재 및 재배포 금지. 출처 표기 시 인용 가능.
5만명이 선택한 평균 별점 4.9의 제로초 프로그래밍 강좌! 로드맵만 따라오면 됩니다! 클릭

댓글

10개의 댓글이 있습니다.
3년 전
함수를 값으로 사용하는 방법 왜 굳이 저렇게 해야 하지? 싶어서 알쏭달쏭하면서도, 저런 방법을 사용해야 하는 이유가 분명히 있을텐데 뭔지 궁금해지네요.
3년 전
오 그래서 첫 강의때 현재날짜 함수를 콘솔창에 입력했더니 undefined 가 뜨는 것이었군요. 궁금했는데 궁금증이 풀렸습니다. 명강의 감사드립니다.
4년 전
👍
5년 전
👍
5년 전
안녕하세요?
질문이 있습니다.

function addOne(x) {
var y = x + 1;
return y;
}

위 함수선언과

function addOne(x) {
y = x + 1;
return y;
}

위 함수선언을 해서

addOne(1)을입력하면 전부 2라는 값으로 돌려주는데요,

객체 안에 변수를 선언하여 함수를 선언하는것과
아래 내역같이 객체안에 함수 선안하지 않고 그냥 리터럴(?)들로만 구성했을 때 어떤 차이점이 있는건가요??

객체 {} 안에 변수 선언을 하셨기에 한번 여쭤봅니다.(워낙 초보라 양해부탁드려요 ㅠㅠ 초보분들 중엔 저와 같은 의문점이 있으실 분이 있을것 같아서...)

감사합니다.
5년 전
안녕하세요?
질문이 있습니다.
var dateChecker = function()
위 내역을 해석하면
- dateChecker 변수 선언
- function() 함수 대입

> 위와 같이 해석하는게 맞나요? ㅎ

그런데 function()\u003c--괄호 사이(매개변수가 들어갈자리(맞나요?))는 왜 공백처리되어있나요?
공백이 매개변수인가요..;;

답변부탁드립니다.
6년 전
궁금사항있습니다. 자바스크립트 함수 인자값에 ... 넣는 것은 무슨 뜻인가요?
ex) func(...arguments); 인자값이 여러개 들어간다는 의미인가요?
6년 전
arguments가 배열인 경우(예를 들어 [1,2,3]) func(1, 2, 3) 이런 효과가 납니다. 배열을 편다(spread)는 문법입니다.
6년 전
우선 글 잘 봤습니다. 너무 감사하게 봤습니다 !
질문은 뭐냐면 마지막에 mother이란 함수를 호출할 때 인자 값으로 children이란 함수를 전달하셨는데 children이란 인자값이 mother이란 함수에 매개변수로 사용되고, func라는 이름으로 호출이 되면 결국 children이란 함수와 mother이란 함수가 두 번 호출되는건데 이때 두 함수 모두 return이 없으므로 undefined가 mother에게 전달되고, mother도 undefined를 반환하는 건가요?
6년 전
return이 없으면 무조건 return undefined입니다. children의 return은 mother에게 전달되지 않습니다. return을 이해하는 가장 쉬운 방법은 함수 호출 부분을 리턴 값으로 치환하는 것입니다. func() 부분이 undefined(children의 return값)가 되었다고 생각하시면 됩니다.
7년 전
감사합니다!!!
7년 전
오타(?) 발견
아래 코드에서는 alert('저는 안보여요'); 이 부분이 return보다 뒤에 나오기 때문에 무시됩니다. => 아래 코드에서는 alert('저는 실행되지 않습니다'); 이 부분이 return보다 뒤에 나오기 때문에 무시됩니다.
7년 전
아래 코드만 바꾸고 위의 설명을 안 바꿨네요. 감사합니다.