[JavaScript] 자바스크립트의 함수(Function)

함수란?

• 함수(Function)란 특정 작업을 수행하도록 설계된 독립적인 코드 블록을 의미한다.
• 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다. (호출이 되어야만 작동한다.)

 

 

 

 

함수의 정의

• 일반적으로 function 키워드 사용
• 기능적 의미를 담은 함수의 이름
• 괄호 안에 쉼표(,)로 구분되는 함수의 매개변수(parameter) (없어도 가능하다.)
• 중괄호({})로 둘러싸인 자바스크립트 실행문

function 함수이름(매개변수1, 매개변수2,...) {
    함수가 호출되었을 때 실행하고자 하는 실행문;
}

// addNum라는 이름의 함수를 선엄함. (함수 선언문)
function addNum(x, y) {    // x, y는 이 함수의 매개변수임.
    document.write(x + y);
}
addNum(2, 3);              // addNum() 함수에 인수로 2와 3을 전달하여 호출함.

 

 

 

 

함수의 호출

일반적인 함수의 호출은 함수의 정의문과 같은 형태로 호출할 수 있다.

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

var sum = addNum(3, 5); // 함수 addNum()을 호출하면서, 인수로 3과 5를 전달함.
                        // 함수의 호출이 끝난 뒤에는 그 반환값을 변수 sum에 대입함.

이 외에도 이벤트 발생(like 사용자의 클릭), 자체호출 등으로 호출 가능하다.

 

 

 

 

함수의 매개변수

• 매개변수(parameter)란 함수를 호출할 때 인수(argument)로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수이다.
• 인수(argument)란 함수가 호출될 때 함수로 값을 전달해주는 변수나 상수를 의미한다.
• 매개변수와 인수의 유무, 개수, 순서는 매우 중요하다.

 

 

 

 

반환(return)문

• return문에 도달하면 함수의 실행이 중지된다.
• return문을 통해 함수에서 실행된 결과를 전달받을 수 있다.
• return문은 배열이나 객체를 포함한 모든 타입의 값을 반환할 수 있다.

function multiNum(x, y) {
    return x * y;         // x와 y를 곱한 결과를 반환함.
}
var num = multiNum(3, 4); // multiNum() 함수가 호출된 후, 그 반환값이 변수 num에 저장됨.
document.write(num);

 

 

 

 

함수를 사용하는 이유

동일한 코드를 재사용할 수 있으므로 효율성이 올라가고, 유지보수에 용이하다.

 

 

 

 

화살표 함수(arrow function)

• ES6부터 사용 가능한 함수 정의법
• 가독성은 낮으나 코드량을 많이 줄일 수 있고 표현식처럼 함수를 변수화 할 수 있다.

// 함수 선언문
hello = function() {
  return "Hello World!";
}

// arrow function
hello = () => {
  return "Hello World!";
}

// return 키워드와 대괄호 생략 가능
hello = () => "Hello World!";

 

 

 

 

 

※ 참고 자료

http://www.tcpschool.com/javascript/js_function_basic

https://www.w3schools.com/js/js_functions.asp

https://www.w3schools.com/js/js_arrow_function.asp