함수란?

함수는 자바스크립트에서 가장 중요한 핵심 개념이다.
수학의 함수는 입력을 받아 출력을 내보내는 일련의 과정을 정의한것이다.

프로그래밍 언너의 함수도 수학의 같은 개념이다. 함수 f(x,y) = x + y를 자바스크립트의 함수로 표현 해보면

프로그래밍 언어의 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.

프로그래밍 언어의 함수도 입력을 받아서 출력을 내보낸다.

함수의 형태

함수 내부로 입력을 전달받는 변수를 매개변수, 입력을 인자, 출력을 반환값이라 한다. 또한 함수는 값이며, 여러 개 존재할 수 있으므로 특정 함수를 구별하기 위해 식별자인 함수 이름을 사용할 수 있다.

매개변수(parameter)와 인자(argument)

매개변수부터 알아보자

함수는 어떻게 외부의 값을 받을까?
getName 함수를 보자. 정의된 함수의 소괄호 내부에 name 이라는 단어가 들어 있다. 이처럼 함수 이름 옆 소괄호 자리에 적혀 있는 단어(name)는 매개변수(parameter)라고 부른다.

function getName(name) {
  return name + '님';
}

매개변수는 외부로부터 들어오는 값을 담아 함수 내부에서 사용하도록 하는 변수의 역할을 한다.
즉, 편하게 쓰기 위해 외부에서 가져오기 위해 쓰인다고 보면 된다.

위에 getName 함수를 보자.
함수의 파라미터 자리에 "이름"을 넣고 실행을 하면 이제 이 값("이름")은 함수 내의 name 이라는 변수에 전달되고, "님" 이라는 문자열이 붙어 리턴 된다.

let result1 = getName('개발자');

console.log(result1); // 콘솔에 '개발자님'이 출력된다.

그럼 인자는?

let result1 = getName('개발자'); // '개발자님' 출력
let result3 = getName('프론트엔드 개발자'); // '프론트엔드 개발자님' 출력
let result4 = getName('백엔드 개발자'); // '백엔드 개발자님' 출력

위와 같이 '개발자'라는 값을 보내서 호출할 수 있고, '디자이너', '기획자' 등 또 다른 값을 넣을 수 있다. '개발자'와 같은 실질적인 값을 인자(argument) 라고 한다.

매개변수와 인자의 차이?

매개변수(parameter) 는 '자리' 혹은 '변수의 이름'이라고 할 수 있는 반면, 인자(argument) 는 그 자리에 들어갈 구체적인 값을 뜻한다.

매개변수는 함수 내에서 사용하기 위해
인자는 함수를 사용하기 위해

함수의 반환(return)

모든 함수는 반환(return)을 한다. 함수는 항상 데이터를 반환하기 때문에 그 결과를 변수에 저장할 수도 있고, 다른 로직에 다시 사용할 수도 있다.

모든 함수가 return을 포함해야 하는 건 아니다. 함수 내부에 return 키워드를 생략할 수도 있다. 하지만 이 경우에도 함수는 무언가를 반환하고 있다. 함수가 반환을 생략하면 undefined 라는 값을 반환한다.

결론적으로 함수를 그래서 왜 사용할까?

함수는 필요할 때 여러번 호출할 수 있다. 즉 실행 시점을 개발자가 결정할 수 있고 몇 번이든 재사용이 가능하다.

동일한 작업을 반복적으로 수행해야 한다면 같은 코드를 여러번 사용하는 것보다 함수를 이용하는 것이 훨씬 효율적이다.

함수를 사용하지 않았을 때 코드 👇

함수를 사용할 때 코드 👇

간단히 더하기를 사용하는 코드이지만 함수를 사용한곳이 더 가독성이 좋다 만약 다른 복잡한 코드를 사용한다면 차이는 더 커질것이다.

함수를 사용하지 않고 같은 코드를 중복해서 여러번 작성하면 그 코드를 수정할 때 중복된 횟수만큼 코드를 수정해야한다 중복된 횟수에 비례해서 코드 수정에 걸리는 시간도 증가하고 실수를 할 가능성이 높아진다. 함수는 유지보수의 편의성을 높여주고 실수를 줄여 코드의 신뢰성을 높이는 효과가 있다.

코드는 동작하는 것만이 존재 목적은 아니다. 코드는 개발자를 위한 문서라고도 말한다.
사람이 이해할 수 있는 코드, 즉 가독성이 좋은 코드가 좋은 코드다.