[Javascript] 함수(function) 만드는 방법 및 사용 방법

Javascript를 이용해 기본적인 연산, 조건, 반복문을 활용해서 프로그래밍을 하는 방법을 앞선 포스팅에서 다뤄봤습니다. 생각보다 Javascript는 직관적으로 사용이 가능해서 배우기 더 쉬운 언어인 것 같습니다.

 

 

이번 포스팅에서는 함수(function)에 대해서 알아보도록 하겠습니다.

---

Javascript 함수(function)란 무엇인가

Javascript에서의 함수는 목적에 맞게 만들어진 블록을 실행하도록 만들어진 것입니다. 그래서 모든 함수는 블록단위로 만들어집니다. 블록은 중괄호의 시작( { ) 부터 끝 ( } ) 사이를 의미합니다.

 

우리가 흔히 알고 있는 게시판을 생각해 보도록 하겠습니다.

• 게시판에 글쓰기
• 게시판 리스트 보기
• 내 글 수정하기
• 내 글 삭제하기

게시판에 CRUD (Create Read Update Delete) 하는 모든 작업들을 하나씩 분류하고 이 각각을 함수로 만들어서 사용할 수 있습니다. 글쓰기 함수를 실행하면 글이 저장되고, 리스트 보기 함수를 실행하면 게시판 전체 리스트가 화면에 나타나도록 만들어 주는 것입니다.

---

Javascript 함수(function) 만드는 방법

함수는 어떻게 만들까요? 우선 함수의 형태는 아래와 같은 모양입니다.

function nameOfFucntion ( parameters... ) {
  // function block
}

1. 함수를 만들때는 앞에 function이라는 이름을 붙여줍니다.

2. nameOfFunction은 사용할 함수의 이름을 만들어줍니다. 다만 이 함수가 어떤 기능을 하는 함수인지 알아볼 수 있게 지어주는 것이 좋습니다.

3. parameter는 있을 수도 있고 없을 수도 있습니다.

 

예를들어서 리스트를 가져오는 함수를 만들고 싶다면 아래와 같이 만들 수 있습니다.

function getBoardList() {
  console.log('board list');
}

function은 필수 키워드입니다. 이 블록이 함수임을 알려주는 키워드이므로 반드시 사용해야 합니다.

함수 이름은 임의로 정하시면 됩니다. 다만 위에서 언급했듯이 어떤 일을 하는 함수인지 알아야 하기 때문에 저는 게시판 리스트를 가져오는 함수로 이름을 getBoardList()로 정했습니다.

parameter는 없습니다. 그래서 괄호에 아무것도 넣지 않았습니다.

---

Javascript 함수(function)의 사용(1) : no parameter

위에서 만든 함수를 사용하는 방법은 아주 간단합니다.

function getBoardList() {
  console.log('board list');
}

getBoardList();

만들어준 함수 이름을 이용해서 실행할 수 있습니다.

---

Javascript 함수(function)의 사용(2) : parameter

만약 parameter를 넣어준다면 어떻게 만들 수 있을까요? 아래는 parameter를 넣은 예제입니다.

function getBoardList(limit) {
  console.log('board list');
  console.log('limit: ' + limit);
}

getBoardList(10);

함수를 만들 때 parameter로 받을 변수명을 넣어줍니다. 그리고 함수를 호출할 때 실제로 들어갈 값을 함께 넣어서 호출하면 됩니다. 하나 더 예를 보여드리겠습니다. 이번에는 parameter 2개를 넣어서 합을 출력하는 함수입니다.

function add(num1, num2) {
  let sum = num1 + num2;
  console.log(`sum : ${sum}`);
}

add(3, 5);

두 수의 합을 출력하는 프로그램입니다. add() 함수는 parameter 2개를 입력받습니다. add(3, 5)가 실행되면 함수로 들어가서 num1은 3, num2는 5가 할당되고 내부에서 sum 값은 num1 + num2의 결과인 8이 저장됩니다.

---

Javascript 함수(function)의 사용(3) : return value

함수를 실행하고 난 이후에 결과를 다시 받도록 할 수도 있습니다. 이 경우에는 return 이라는 키워드를 사용합니다.

function add(num1, num2) {
  return num1 + num2;
}

let sum = add(3, 5);
console.log(`sum : ${sum}`);

함수 사용(2)와 같은 예제입니다. 다만 결과를 return 받아서 함수 외부에서 출력했습니다. 함수 내부에서 외부로 보내는 결과는 return 키워드를 사용하고 함수를 부른 쪽에서는 이 결과를 받아주면 됩니다.

---

Javascript 함수의 다른 표현

함수를 만들 때 다르게 표현할 수도 있습니다. 다음과 같이 사용합니다.

let add = function (num1, num2) {
  return num1 + num2;
}

console.log(add(3,5));

변수를 지정하고 이 변수에 이름인 없는 형태의 함수를 대입합니다. 이렇게 만들 경우 이 변수는 함수로 사용할 수 있게 됩니다.

---

Javascript ES6 부터 추가된 사용법

ES6 버전부터 함수를 만드는 방법이 새롭게 추가되었습니다. Arrow function(=>)이라 불리는 키워드입니다. 이 키워드를 이용해서 아래와 같이 함수를 만들 수 있습니다.

let add = (num1, num2) => {
  return num1 + num2;
}

console.log(add(3,5));

function이라는 키워드 대신 =>라는 키워드를 사용합니다. 훨씬 간결해 보입니다. ES6 이전 버전만을 접해보신 분들이라면 익숙하지 않겠지만 이미 많은 부분에서 arrow function을 사용하고 있습니다.

---

이번 포스팅에서는 Javascript의 함수(function) 생성과 사용 방법에 대해서 알아보았습니다. 도움이 되셨으면 합니다. 이상입니다.