[JavaScript] 함수(function) 정의 및 사용법

- 지난 시간

안녕하세요. 지난 시간에는 JavaScript 반복문에 대해 알아봤습니다. 혹시 놓치고 오신 분들은 아래 링크를 통해 학습하고 오시는 걸 추천드리겠습니다.

 

[JavaScript] 반복문(for & while)

[JavaScript] 반복문(for & while)

- 개요

안녕하세요. 이번 시간에는 JavaScript에 함수(function)에 대해 알아보겠습니다.

 

함수란 무엇일까요? 수학에서 사용되는 함수를 말하는 걸 까요? 컴퓨터 프로그래밍에서 함수는 기능이라고 생각하시면 됩니다.

 

지난 시간 반복문을 학습할 때 "반복되는 작업을 수행할 때 반복문을 사용" 한다고 설명했습니다.

 

함수도 이와 비슷합니다. 특정 로직을 하나에 함수로 만들어 재활용이 가능합니다.

 

"백문이 불여일견" 설명하는 것보단 바로 예시를 통해 보여드리겠습니다.

 

- 사용법

함수는 아래와 같이 선언해서 사용합니다.

//함수    함수명 (파라미터)
function hello(params) {
  //반환 정보
  //return "Hello"
}

 

반환 정보가 있다면 return 구문에 반환 데이터를 선언하면 됩니다. 그렇지 않다면 return 키워드를 사용하지 않으시면 됩니다.

 

- 함수를 선언하는 방식은 총 4가지가 있습니다.

 

1. 전달 값이 있고, 반환 값이 있는 함수 (전달 O, 반환 O)
2. 전달 값이 없고, 반환 값이 없는 함수 (전달 X, 반환 X)
3. 전달 값은 있고, 반환 값은 없는 함수 (전달 O, 반환 X)
4. 전달 값은 없고, 반환 값이 있는 함수 (전달 X, 반환 O)

 

1. 전달 값이 있고, 반환 값이 있는 함수(전달 O, 반환 O)

/**
 * @author Ryan
 * @description 전달 값이 있고, 반환 값이 있는 함수
 *              name이라는 값을 받아 바로 name 값을 반환한다.
 *
 * @param {String} name 이름 정보
 * @returns {String} 이름
 */
function onChangeName(name) {
  return name
}

//함수에 "Ryan" 이라는 값을 전달한다. 반환 받은 정보를 name이라는 변수에 할당한다.
const name = onChangeName("Ryan")

console.log("이름은 :", name)

/**
 * - 실행결과 -
 * 이름은 : Ryan
 */

 

* JavaScript는 객체 기반의 스크립트 프로그래밍 언어이며, 함수형 패러다임을 따르고 있기 때문에 일급 객체(First-Class Citizen)에 부합하는 언어입니다. (일급 객체 내용은 나중에 포스팅해놓겠습니다.)

 

2. 전달 값이 없고, 반환 값이 없는 함수(전달 X, 반환 X)

/**
 * @author Ryan
 * @description 전달 값이 없고, 반환 값이 없는 함수
 *              Hello Ryan 이라는 값을 출력
 */
function Hello() {
  console.log("Hello Ryan")
}

/**
 * - 실행결과 -
 * Hello Ryan
 */

Hello()

 

 

3. 전달 값은 있고, 반환 값은 없는 함수 (전달 O, 반환 X)

/**
 * @author Ryan
 * @description 전달 값은 있고, 반환 값은 없는 함수 (전달 O, 반환 X)
 *              name 값을 전달 받고 출력한다.
 *
 * @param {String} name 이름 정보
 */
function setName(name) {
  console.log("이름은 : ", name)
}

setName("Apeach")

/**
 * - 실행결과 -
 * 이름은 :  Apeach
 */

 

 

4. 전달 값은 없고, 반환 값이 있는 함수 (전달 X, 반환 O)

/**
 * @author Ryan
 * @description 전달 값은 없고, 반환 값이 있는 함수 (전달 X, 반환 O)
 *              Ryan 값을 반환
 *
 * @returns {String} Ryan
 */
function getName() {
  return "Ryan"
}

//함수에 "Ryan" 이라는 값을 전달한다. 반환 받은 정보를 name이라는 변수에 할당한다.
const name = getName("Ryan")

console.log("이름은 :", name)

/**
 * - 실행결과 -
 * 이름은 : Ryan
 */

 

이번 시간에는 함수에 대해 알아봤습니다.  꼭 실습을 통해 학습하시는 걸 추천드리겠습니다.