[기초 이론] Function

Function

함수(Function)는 하나의 로직을 실행할 수 있도록 수행하는 코드의 집합이다. 사용자가 서버에서 특정한 일을 수행(x)하면 해당 명령을 입력(input) 해서 함수 box에서 처리(f)한다. 그리고 그 처리한 값을 출력(output) 하면 사용자는 함수가 처리한 값을 받을 수 있다. 즉, 함수에 값을 전달하면 함수는 값을 반환한다. 나는 이 지점에서 왜 '슈의 초코공장' 게임이 생각났는 지 모르겠다. 땅콩이 초코 볼에 들어가 볶아(?)져서 티피가 되는 게 비슷하다고 느낀 걸까.

슈의 초코공장과 함수의 상관관계란?

함수의 장점 중 하나는 재사용성인데, 반복되는 구문을 계속 작성하지 않고 함수로 만들어서 필요할 때마다 재사용하는 것이 좋은 코더의 자세다.

 

함수 선언

함수의 대략적인 선언 방법은 아래와 같다.

function funcitonName(parameter) {
    return command line parameters;
}

1. function 을 먼저 선언해준다.
2. 그 뒤 functionName 으로 함수의 이름을 지어주는 데 수행하는 일을 잘 나타낼 수 있는 이름을 지어줘야 한다.
3. () 소괄호 안에 매개변수(Parameter) 라고 하는 변수를 작성해주는데, 이 매개변수는 어떤 함수가 동작하기 위한 필요한 데이터가 있을 때 작성해준다. 인수(Arqument) 라고 불리는 데이터를 함수로 가져오는 데 사용되며. 매개변수 또한 전달받는 데이터를 잘 나타내는 이름을 지어줘야 한다.
4. {} 중괄호를 열고 그 안에 매개변수를 이용해 수행할 함수 명령어를 입력한다.
5. return 문은 함수에 의해 반환된 값을 지정한다. 명시하지 않으면 함수 명령어 값이 'undefined'로 반환 된다.

함수 호출

함수를 선언하는 건 함수를 실행하는 게 아니다. 함수를 정의하는 것은 간단히 함수의 이름을 지어주고, 함수가 호출될 때 무엇을 할 지 지정해주는 것이다. 함수를 호출하는 것은 나타나있는 매개변수로 지정된 행위를 수행하는 것이다.

 

위와 같은 내용을 토대로 간단한 함수를 만든다면 이와 같다.

function plus(a, b) {
    return a + b;
}

plus(1, 2) 

let calculate = plus(1, 2) // > 출력하기 위해 변수에 인자를 할당
console.log(calculate); // > 3

calculate = plus(3, 4)
calculate = plus(5, 6)
calculate = plus(7, 8) // > 재할당
console.log(calculate); // > 15

매개변수로 지정된 a, b는 + 라는 연산자를 이용해 사칙연산을 수행한 뒤 return 으로 반환되고자 한다. 그럴 때 함수명(매개변수) 에 인자를 대입해주면 된다.

// string 도 가능하다
function greeting(name) {
    return `welcome, ${name}. This is smthopia.`;
}

let username = greeting('sumin');
console.log(username);
// > welcome, sumin. This is smthopia.

매개변수가 없는 함수

위와 같이 특별한 행동 명령어가 없고 받아서 반환한 뒤 출력해야 하는 함수는 인자를 받아와야 하는 매개변수가 필요하지만 document.write(), alert(), console.log() 와 같이 구체적인 행동 명령이 있는 경우 매개변수와 return 구문을 사용할 필요가 없다.

function print() {
    document.write('This is sumin');
}

print()

매개변수와 인수의 차이점

• 함수 매개변수는 함수 정의에 나열된 이름이다.
• 함수 인수는 함수에 전달된 실제 값이다.
• 매개변수는 제공된 인수 값으로 초기화된다.