1월 첫 주부터 자바스크립트 공부를 시작했다. 기초 문법을 공부하고 있는데, 이번주 기록으로는 스터디에서도 요약을 맡았던 JavaScript의 "함수" 부분을 기록하려고 한다.
함수란?
<img src="https://cs.wellesley.edu/~cs110/lectures/L16/images/function.png" alt="함수 정의 예시화면" style="max-width: 300px; margin: 15px auto;""/>
일반적으로 쓰이는 함수, 즉 수학의 함수는 "입력(input)"을 받아 "출력(output)"을 내보내는 일련의 과정을 정의한 것이다. 위의 사진을 예로 들어보자면, 'x=3'이라는 입력을 받아 '2제곱'하는 내용으로 정의된 함수에 전달하고, 함수는 이 입력을 받아 실행하여 '9'를 출력한다. 함수를 실행하기 위해 필요한 "입력(input)"인 3은 입력을 받아들이는 변수 x를 통해 함수 외부에서 내부로 전달되고, 함수의 실행 결과인 "출력(output)"은 함수 외부로 반환(return)된다.
프로그래밍에서의 함수도 이와 같은 개념이다.
함수를 왜 사용할까?
함수를 사용하는 이유를 한 문장으로 말하면, "함수는 코드의 재사용성을 높여준다."
어떤 점이 코드의 재사용성을 높여주냐면...
코드 재사용성 향상
- 유지보수의 편의성을 높여준다.
- 코드의 중복을 줄여, 같은 내용을 여러 번 작성/수정하는 일로 인한 작업시간을 줄일 수 있다.
- 코드의 신뢰성을 높여준다.
- 같은 내용을 재사용하기 편해지면서,
중복 코드 작성/수정 과정에서의 실수 가능성을 줄여 신뢰성을 높일 수 있다.- 코드의 가독성을 향상시킨다.
- 적절한 함수 이름은 함수 내부 코드를 꼼꼼히 읽지 않아도 해당 함수의 역할을 이해하는 데 도움이 된다.
함수 구성 요소
자바스크립트 함수는 함수 내부로 입력을 받는 변수를 "매개변수(parameter)", 입력을 "인수(argument)", 출력을 "반환값(return value)"이라 한다.
- 매개변수
- 함수 내부로 입력을 전달받는 변수
- 함수에 0개 이상 존재
- 각 매개변수에는 함수를 호출할 때 지정한 인수가 "순서대로" 할당됨
- 함수 내부에서 변수와 동일하게 취급됨 (지역변수처럼 쓰임)
- 인수
- 입력 (input)
- 화살표 함수에는 존재하지 않는 않음
- 출력
- 반환값 (return value)
- 반환값 미지정 시, 내부적으로는 undefined가 리턴됨!
함수 정의
함수 정의를 통해 함수가 생성되는데, 자바스크립트는 다양한 방법으로 정의할 수 있다.
// 함수 선언문으로 정의
function add(x, y) {
return x + y;
}
add (3,8); // return 값은 3+8인 "11"
// 생성자 함수: 특정 인스턴스를 만들어낼 수 있다 (대문자로 시작하는 것으로)
function add = new Function('x', 'y', 'return x+y');
// 함수 표현식 (권장)
var add = function(x, y) {
return x + y;
}
// 화살표 함수 (ES6)
var add = (x,y) => { x+y; }
// method (객체 property의 value가 함수인 경우)
const obj = {
prop: function() {
};
}함수 표현식으로 정의하기
다양한 함수 정의 방법 중 '함수 표현식'에 대해 조금 더 알아보았다.
자바스크립트의 함수는 객체 타입의 값이다. 따라서 함수를 값처럼 변수에 할당할 수 있게 되는데, 이를 함수 표현식이라고 한다.
// 함수 표현식
var add = function (x, y) {
return x + y;
}함수 선언문 방식과 달리 함수 표현식은 함수 리터럴의 함수 이름을 생략할 수 있다. 이를 "익명 함수"라고 하는데, 함수 표현식은 일반적으로 함수 이름을 생략한다. 아래 예시 코드는 기명 함수와 익명 함수 내용으로, 개인적으로 "함수 이름"이 어디인지 헷갈린다면 아래 두 함수 표현식을 비교해보면 명확하게 이해할 수 있을 것 같다.
// 기명 함수 표현식
var add = function foo (x, y) {
return x + y;
}
// 익명 함수 표현식
var add = function (x, y) {
return x + y;
}마무리
뭔가 스터디할 때는 '요약 정리'로 공유하다보니 스터디할 때 공유했던 글보다 이게 훨씬 길다. 작성했던 요약 정리글을 다시 보는데, 이건 '기록용'이고 그 글은 '요약 공유'이다보니 그 글에는 개념 설명은 정말 짧게만 넣고, 예시를 더 넣어둔 것 같은 느낌이라 요약 정리글에 이런저런 설명을 더해보았다. 그랬더니 함수 내용 중 일부만 작성했음에도 생각보다 많이 불어난 것 같아 지저분해 보이기도 하지만, 자바스크립트에서 함수는 가장 중요한 핵심 중 하나이기 때문에 열심히 공부했다는 의미에서... 남겨보았다.
