해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.
함수(function)란 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여줍니다.
자바스크립트 기본 문법 :: 함수
함수의 형식은 아래와 같습니다.
function 함수명( [인자...[,인자]] ){ 코드 return 반환값 }
함수는 function 뒤에 함수의 이름이 오고, 소괄호가 따라옵니다.
소괄호에 인자라는 값이 차례로 들어오는데,
이 값은 함수를 호출할 때 함수의 로직으로 전달될 변수입니다.
인자는 생략 가능합니다.
함수를 호출 했을 때 실행하게 될 부분이 중괄호 안쪽에 오게됩니다.
예시로 살펴보도록 하겠습니다.
function test(){
i = 0;
while(i < 10){
console.log(i);
i += 1;
}
}
test();
위의 예제 제일 하단에 아래 구문에 의해서 test이라는 이름의 함수가 호출되는 것입니다.
이제 함수는 어떻게 쓰는건지 알겠는데, 함수를 왜 쓰는 것일까요?
함수가 없다는 가정 하에 0부터 9까지 5번 출력하는 코드를 짜봅시다.
var i = 0;
while(i < 10){
console.log(i);
i += 1;
}
var i = 0;
while(i < 10){
console.log(i);
i += 1;
}
var i = 0;
while(i < 10){
console.log(i);
i += 1;
}
var i = 0;
while(i < 10){
console.log(i);
i += 1;
}
var i = 0;
while(i < 10){
console.log(i);
i += 1;
}
같은 코드가 반복되는 것인데, 참 답답합니다.
만약 함수가 있다면 코드는 이렇게 간단하고 깔끔해지게 됩니다.
function test(){
var i = 0;
while(i < 10){
console.log(i);
i += 1;
}
}
numbering();
numbering();
numbering();
numbering();
numbering();
함수를 활용하면 코드의 유지보수가 쉬워지고,
코드가 길어질 수록 관리가 편해지고 재사용성이 높아지기 때문에 사용합니다.
정리하자면, 함수를 사용하면 다음과 같은 이점을 얻을 수 있습니다.
- 재사용성
- 유지보수의 용이
- 가독성
자바스크립트 기본 문법 :: 함수의 출력(return)
함수의 핵심은 입력과 출력입니다.
입력된 값을 연산해서 출력하는 것이 함수의 기본적인 역할이기 때문이죠.
함수의 출력은 return 이라는 키워드를 통해 이뤄집니다.
function get_member1(){
return '1';
}
function get_member2(){
return '2';
}
console.log(get_member1());
console.log(get_member2());
위의 예제에서 함수는 return을 이용해 각각 1과 2를 뱉어냅니다.
실행시켜봅시다.
function get_member(){
return '1';
return '2';
return '3';
}
console.log(get_member());
위의 예제를 실행시킨다면 어떤 결과가 출력될까요?
결과는 1 입니다.
return 을 하고 나면 함수가 종료되기 때문에, 1을 출력하고 실행은 끝이 나게 됩니다.
자바스크립트에서 return 값은 1개만 올 수 있습니다.
자바스크립트 기본 문법 :: 함수의 입력(인자)
우선, 인자에 대해 알아보도록 하겠습니다.
인자(argument)는 함수로 유입되는 입력 값을 의미하는데,
어떤 값을 인자로 전달하느냐에 따라서 함수가 반환하는 값이나 메소드의 동작방법을 다르게 할 수 있습니다.
function get_argument(arg){
return arg;
}
console.log(get_argument(1));
console.log(get_argument(2));
위의 예제의 실행 결과는 다음과 같습니다.
한번에 여러 개의 인자값을 받을 수도 있습니다.
function get_arguments(arg1, arg2){
return arg1 + arg2
}
console.log(get_arguments(10, 20));
console.log(get_arguments(20, 30));
위의 코드를 실행시키면 아래와 같은 결과가 출력됩니다.
매개변수(Parameter) VS 인자 (Argument)
매개변수와 인자는 혼용해서 사용할 수도 있지만, 엄연히 다릅니다.
인자란, 함수를 호출할 때 넣는 값을 의미하며,
파라미터는 함수에서 그 인자를 받는 변수를 의미합니다.
위의 그림에서,
빨간색 사각형은 매개변수를,
파란색 사각형은 인자를 의미합니다.
함수를 정의하는 다른 방법
자바스크립트는 함수를 정의하는 또 다른 방법을 제공합니다.
var test = function (){
i = 0;
while(i < 10){
console.log(i);
i += 1;
}
}
test();
함수의 정의 부분이 test 라는 변수에 들어간 것입니다.
위의 예시는 아래의 코드와 동일한 의미를 가집니다.
function test(){
i = 0;
while(i < 10){
console.log(i);
i += 1;
}
}
test();
익명함수
익명함수란, 이름이 없고 1회성으로 사용하는 함수입니다.
함수의 내용 정의와 호출을 동시에 하는 함수입니다.
(function(){
i = 0;
while(i < 10){
console.log(i);
i += 1;
}
})();