By aPOST in 자바스크립트 — 2023년 12월 23일

함수의 이해

자바스크립트는 함수형 언어입니다.

구현하는 기능들은 모두 함수를 통해 구현됩니다.

함수의 구조

함수는

function 함수이름 (파라메터){

실행영역

}

형태를 가집니다.

함수는 총 4개의 영역으로 구분되고, 각 영역의 기능은 다음과 같습니다.

영역	설명
function	함수임을 표시하는 고정 키워드입니다.
함수이름	함수를 호출할 때 사용하는 명칭입니다. 함수 이름 없이 사용하는 익명 함수도 있기 때문에 경우에 따라서 필수는 아닙니다. 함수이름은 이름을 정하는 일정한 규칙에 따라 사용하는 것이 좋습니다. 또한 함수 이름을 정하는 규칙으로 널리 사용하는 카멜케이스 라는 네이밍 규칙이 있습니다. 카멜케이스 규칙은 다음과 같습니다. 영어단어 1개로만 함수명을 사용할 경우에는 모두 소문자 사용 영어단어 2개 이상을 조합해 함수명을 사용할 경우 하이픈 같은 연결자 없이 붙여서 사용하며, 두번째 단어부터는 첫 철자를 대문자로 표시함 2단어 이상 조합한 이름일 경우 동사+명사(+명사)... 와 같은 규칙으로 조합함 saveFile() generateNewName() makeImageArray() 원하는 이름 규칙이 있고, 파일이나 프로젝트 전체에 걸쳐서 일정한 규칙이 유지된다면 본인만의 규칙을 사용해도 됩니다. 다만, 전세계 개발자들이 공통 이름 규칙으로 사용하는 것이니만큼 카멜케이스로 함수 이름 규칙을 사용하는 것을 추천합니다. 또한 하이픈, 언더바와 같은 연결자는 가급적 사용하지 않는 것을 추천합니다. 함수 이름은 함수를 선언하는 방식에 따라 function 뒤에 올 수도 있고, function 앞에 대입 변수명으로 올 수도 있습니다. 아래에서 자세히 설명합니다.
파라메터	인자, 매개변수라고도 합니다. 괄호로 감싸 표현하며, 파라메터가 없을 경우 () 만으로 표시합니다. 괄호는 생략할 수 없습니다. 함수 안의 실행 영역에 전달할 값이 있을 경우 파라메터를 이용해 값을 넘기게 됩니다. ES6에서 추가된 화살표 함수에서는 예외적으로 괄호를 생략할 수 있는 경우가 있습니다. 코딩 습관을 들일 때 가능하면 전역변수를 사용하는 것은 피하는 것이 좋습니다. 기본적으로 함수 안에서 필요로 하는 데이터는 파라메터를 통해 전달한다는 기준을 가지고 코딩해야 합니다.
실행영역	원하는 결과값을 얻기 위해, 또는 화면에 표시하기 위해 자바스크립트 코드를 작성하는 영역입니다. 중괄호로 감싸서 함수 실행 영역을 구분합니다. 함수의 실행 결과값을 반환하기 위해 return 결과값; 같은 반환 코드를 추가할 수 있습니다. return 이 없다고 반환을 하지 않는 것은 아니고 undefined를 반환합니다. 중요하므로 꼭 알아두어야 합니다.

ES6에서 새로 추가된 화살표 함수라는 새로운 형태의 함수 표현 방법도 있습니다.

화살표 함수에 대해서는 "화살표 함수" 강의를 참고하시기 바랍니다.

함수 정의 방법

함수는 일반적으로 우리가 아닌 함수 선언문 형태로 만드는 방버과, 함수 표현식으로 만드는 방법 2가지가 있습니다.

함수 선언문 형태는

function myFunc(param){ console.log(param + ' run!');}

처럼 function 키워드로 시작해서 함수명을 정하고 파라메터와 실행 로직이 오는 전형적인 함수 선언 방식입니다.

함수 표현식은 함수 리터럴을 사용해 변수에 함수를 할당하는 방식입니다.

리터럴은 변수에 값이나 객체, 함수 등을 대입해 변수 자체가 대상을 가리키도록 하는 것을 말합니다. 대상이 함수이면 함수 선언 내용을 함수 리터럴이라고 합니다. 대상이 객체이면 객체 리터럴이 됩니다.

함수 표현식으로 함수를 선언하는 형태는

const myFunc2 = function(param){ console.log(param + ' run!');}

이 됩니다.

사용 방법은 일반 함수와 동일합니다.

myFunc('myFunc');myFunc2('myFunc2');