Dog foot print

함수란 ? function 그 함수가 그 함수요 본문

Javascript

함수란 ? function 그 함수가 그 함수요

개 발자국 2019. 6. 28. 16:10

중학교 때 함수라는 것을 수학시간에 배운적이 있다. 그런데 그 때 당시 나는 수학을 너무 싫어해서 함수만 보면 경기를 하고는 했다. 그리고 나이가 들어 프로그래밍을 배우기 시작하는데 함수라는 것이 등장하였다. 중학교 때 너무나도 싫어 하던 두 글자 '함수' 였지만 어릴적 싫어하던 수학시간의 함수와 개념은 비슷했지만 이 함수를 이용하는 것은 중학교 때 보다 너무 쉬웠다. 

 

함수란 

내가 쉽게 사람들한테 설명할 수 있는 함수의 정의는 "어떤 한 행위에 대한 절차" 이다. 중학교 때 아래와 같은 그림들을 많이 보았을건데 함수는 input을 이용해서 이 input을 가공해서 output을 만들어 낼 수도 있고 input없이 output을 만들어 낼 수 있다. 

 

쉽게 말해서 내가 지정하는 논리에 의해 함수는 특정 동작을 하고 특정 값을 배출하거나 동작만 할 수 있게 하는 프로그램이다. 

 

함수

 

함수의 사용

프로그래밍적 함수의 정의를 이야기하다가는 위키백과의 있는 내용을 모조리 복사 붙여넣기 해서 혼란을 줄 것 같으니 사용을 해보는 것으로 익히는 것이 좋을 듯 하다. 자바스크립트의 함수의 사용은 다음과 같이 작성한다.

 

선언 및 정의
function 함수명(파라메터){
	//실행문장 
    
    
    
     return //반환 값
}

var a = "hello world";

//파라메터를 이용하지 않고 a변수를 불러내는 함수
function print(){
    console.log(a);
}

 

함수의 선언은 function 키워드로 선언을 하고 function 키워드 뒤에는 이 함수의 이름을 지어준다. 함수의 이름뒤에 있는 소괄호는 파라메터라고 한다. 그리고 {} 블록사이에는 이 함수를 실행하면 작동될 로직들을 작성한다. 

 

코드블록 첫번째 함수 print를 보면 a를 불러내서 콘솔창에 a 변수에 담긴 값을 불러내는 로직을 작성했다. 함수를 작성을 하기만 하면 함수를 사용할 수 없는데 함수를 불러내고 싶으면 다음과 같이 함수를 호출 해야한다.  

 

function print(){
    console.log(a);
}


print();

 

함수를 호출 하는 방법은 함수를 적고 ()소괄호를 붙힌다음 ' ; ' 세미콜론을 붙여주기만 하면 이 함수가 호출 된다. 

 

파라메터, 어규먼트

위에서 작성한 함수는 a 변수의 값만 출력 할 수 있다. 그러나 우리가 원하는 함수는 어떠한 값이 들어와도 화면에 출력하고 싶을 것이다.

 

그래서 이번에는 함수에 들어오는 어떤 수에도 +2 를 한 결과를 내보도록 하자.

 

function print_2(parm){
    console.log(parm+2);
}

print_2(4);
print_2(10);
print_2(0);

 

 

print_2 함수 ( )소괄호에 parm 이라는 것이 적혀있다. 선언부 소괄호에 들어 있는 저것을 파라메터라고 하고, 호출에 들어있는 값을 어규먼트라고 한다.

 

이 파라메터는 인자로 전달된 것들을 각 로직에 전달하는 역할을 한다. 만약 파라메터를 여러개 사용하고 싶으면 ' , ' 콤마로 구분하여 파라메터를 적어주면 된다. 

 

function print_2(parm,pac){
    

    console.log(parm+pac);
}

print_2(4,12);
print_2(10,12);
print_2(0,32);

 

조금 햇갈릴수도 있기에 이것도 적어봐야 겠다.

 

var a = 10;

function print(){
    console.log(a);
}

function print_2(a){
    console.log(a);
};

print();
print_2(30);

 

위 코드의 print함수의 경우 함수 바깥에 정의된 a를 참조하여 가져 오지만 print_2 함수의 경우에는 console.log(a)라고 적혀있음에도 바깥에 있는 변수 a를 가져오는 것이 아니라 인자로 받은 값을 출력하게 된다. 파라메터에 텍스트가 적히면 그 텍스트는 함수내에서 키워드가 된다. 함수 안에서 변수를 설정하면 해당 함수부터 뒤지고 없다면 함수 밖으로 나가 가장 가까운 해당 변수를 찾는다.   

반환 return 

함수는 값 자체(아웃 풋)가 될 수 있다. 바로 return을 이용하는 것 인데 다음 코드를 보자.  

 

function print_2(parm,pac){
   return parm + pac;
}

var a = print_2(4,12);
var b = print_2(10,12);
var c = print_2(0,32);

console.log(a);
console.log(b);
console.log(c);

//결과는 
//16
//22
//32

 

변수에다가 함수를 대입했다. print_2함수는 2개의 argument를 더해서 반환 하는 함수인데, 이 처럼 함수 자체가 값이 되는 것을 원한다면  ' return ' 을 이용하면 된다. 함수가 return 되고 나면 더 이상 나머지 로직들을 수행하지 않게 된다. 

 

function print_2(parm,pac){

    if(parm> pac){
        return "parm이 더큽니다."
    }
   return parm + pac;
}

var a = print_2(4,12);
var b = print_2(14,12);
var c = print_2(0,32);

console.log(a);
console.log(b);
console.log(c);

//결과 16, parm이 더 큽니다. , 32 

함수내부에서 변수 선언

필요에 의해서 함수 내부에서 변수를 사용하기도 했을 것이다. 이런 경우 해당변수는 지역변수라 하여 함수내부에서만 사용가능하고 함수 외부에서는 사용 할 수 없는 변수가 된다. 

 

var a = 10;

function print(){
    var b = 20;
}

print();

console.log(b);

//결과는 오류 b를 찾지 못한다. 

 

익명함수

위에 있는 함수들은 호출 할때 마다 사용이 가능하지만 프로그래머가 함수를 재사용을 하는 것을 원하지 않고 프로그램 시작부터 끝까지 한번만 실행되게 하고 싶은 함수가 있을 것이다. 그럴때 사용하는 것이 익명함수이다. 

 

(function(){
    console.log("hello world");
})();

(function(parm){
    console.log(parm);
})(10);

 

익명 함수는 재사용 할 일이 없기에 이름이 존재하지 않는다. 익명 함수는 보통 함수에서 이름을 제거하고 함수를 ()소괄호로 감싼다. 그리고는 감싼 소괄호 옆에 ()소괄호를 적어 즉시 호출한다. 이로써 이 함수는 프로그램이 다시 시작하기 전 까지 볼일이 없게 된다.

 

 다양한 활용 

if 문 조건에 함수를 넣어 결과를 달리하는 함수 . 

var a = 10;

var b = 20;

function compare(first,second){
    if(first > second){
        return true;
    }else{
        return false;
    }
}

if(compare(a,b)){
    console.log("a 값이 더 큽니다.");
}else{
    console.log("b값이 더 큽니다. ");
}

 

함수안에서 다른 함수를 호출 할 수 도 있다. 

 

var a = 10;

var b = 20;

function print(any){
    console.log(any);
}

function compare(first,second){
    if(first > second){
        print(first)
        return true;
    }else{
        print(second)
        return false;
    }
}

if(compare(a,b)){
    console.log("a 값이 더 큽니다.");
}else{
    console.log("b값이 더 큽니다. ");
}

 

정리하며 

 

자바스크립트에는 arrow function 이라는 것도 있지만 화살표 함수를 설명하기에는 조금 이른 느낌이 있었다. 많은 내용을 다루고 싶지 않았다 . 

 

 

반응형
Comments