본문 바로가기

프로그래밍 기초/javascript

[JS 프로그래밍 6] 함수


함수란?
지금까지 여러 코드들의 문법에 대해서 알아 보았죠
이런것을 더 잘 활용할수 있게 만들어 주는 문법이 바로 함수인데요.
함수는 관련있는 여러 코드들을 묶어 하나의 명령어처럼 만들어서, 함수를 '호출'(실행) 하면 
우리가 함수 안에 입력한 여러 '코드' 들이 함수를 호출하면서 입력하는 '인자'(데이터값들)를 바탕으로
'실행' 되는 것을 의미한다고 할 수 있겠습니다. 
거의 모든 프로그래밍에서는 내장 함수와 그냥 함수가 있습니다.
내장 함수는 
함수를 사용하는 방법
함수를 쓰는 형식은 아래를 보시면 아실 수 있습니다.
파랑색 : 바꿀수 있 것
function 함수명 (인자,인자){
코드
return 반환 데이터값;
}
함수명();
위와 같은 방법으로 함수를 쓸 수 있습니다.
함수는 인자를 받아서(꼭 받지 않아도 됨)
그 인자들로 코드를 실행시키고 데이터값을 반환하는 기능을 가지고 있습니다.
또한 함수명(); 으로 함수를 호출해서 함수의 코드들을 실행하는 효과를 볼 수 있습니다.
함수를 쓰는 이유
그렇다면 그냥 코드를 작성해서 이용해도 되는데 왜 굳이 함수를 쓸까요? 여기에는 분명 특별한 이유가 있습니다.
만약 우리가 그냥 코드를 작성한다고 한다면, 같은 내용을 다시 실행해야 할 때 다시 코드를 입력해야 하는 상황이 발생합니다.
물론, 전에 썼던 코드를 복사해서 붙여넣기 할 수 있습니다. 그러나, 만약 복사해서 붙여넣는다면 나중에 그 내용을 바꿀 때
복사해서 붙여넣기한 것들을 모두 고쳐야 하고 다음에 코드를 볼 때 편하게 볼 수 없습니다.
하지만, 함수를 쓴다면, 코드를 한번만 함수에 입력해 두었다가 필요할 때 몇번이라도 함수를 호출하여
코드들을 쓸 수 있어서 재사용성이 좋고, 나중에 함수의 내용을 바꿀 때에도 함수에 있는 코드 하나만 개선하면 그 함수가
쓰인 곳의 코드가 모두 개선되는 효과가 있기 때문에 정말 중요한 문법이라고 할 수 있습니다.
서론이 길었습니다. 본론으로 들어가보죠

함수를 정의하는 방법에 대한 예시

function numberhelloworld(){
     for(var i=1;i<=10;i++){
          document.write(i+"hello world\n");
     }
}
numberhelloworld();     

위와 같이 함수를 정의해 보았습니다.
위에서 numberhelloworld();
즉 함수명();가 함수를 호출하는 역할을 합니다.
위의 함수를 실행하면 어떻게 될까요?
저번에 알아봤던것과 비슷하게
1helloworld부터
10helloworld 까지 출력할 것입니다.
그러므로 이 함수는 1~10helloworld를 출력하는 함수가 되겠죠.
그리고 그것을 잘 알수 있게 제목을 함수의 내용과 연관성 있게 짓는 게 좋습니다.
그런데 위의 예제에서는 return 을 사용하지 않았죠?
사실 return 은 꼭 쓰지 않아도 되지많 많이 쓰기에 넣었습니다.
만약 return 으로 어떤 값을 반환받는다면, 우리는 그것을 alert나 console.log 등을 통해서
출력할 수 있습니다.

return 예시

function hello(){
     return 'hello';
}
alert(hello());
위의 예제에서 alert를 통해서 hello 함수를 호출해 반환받은 hello 를 출력했습니다.
그리고, return 은 여러번 쓸 수 없고, 처음의 한 번 return 한 값만 반환받습니다.

예시

function hello(){
     return 'hello';
     return 'keep';
     return 'blog';
}
alert(hello());
위의 예제에서 hello는 출력되지만
3번째 줄과 4번째 줄의 return 코드는 실행되지 않습니다. 여러번 사용했기 때문입니다.


인자(argument)의 사용
위에서 함수를 설명할 때 '인자를 받아서' 코드를 실행한다고 했습니다.
그것에 대해서 알아 봅시다.
제가 약간 말빨이 딸리니까 예시를 먼저 보시죠

function argument(arg1){
     return arg1;
}
console.log(argument(2)); //2
위의 예제의 실행 순서를 봅시다.
먼저 함수의 이름을 argument 로 하고 인자는 arg1 로 했습니다.
그리고 함수 안의 코드에서 return 으로 변수 arg1의 값을 반환해 주었습니다.
그리고 console.log로 argument 에 2를 인자로 넣은 값을 출력했는데
여기에서 2가 arg1 인자로 들어가서 변수 arg1이 되어서 안에서 arg1을 반환해 주었습니다.
그런데, 맨 위에서 함수의 사용 방법을 설명할 때는 인자가 2개 있습니다.
이게 의미하는 것은 인자가 2개 이상이여도 된다는 것이겠죠?
예시를 봅시다.

function arguments(arg1, arg2){
     return arg1-arg2;
}
console.log(arguments(10,5)); // 5
위의 예제의 처음은 전 예제와 비슷하게
arg1과 arg2 를 인자로 설정한 변수 arguments를 선언하고
arg1에서 arg2를 뺀 값을 return 하게 코드를 작성해 주었습니다.
그리고 그 아래에서 console.log로 argument를 호출해 arg1 인자에는 10, arg2 인자에는 5를 넣어 주었죠.
그렇다면 이제 arguments 함수는 10과 5를 받아서 10에서 5를  뺀 값이 5를 return 해 줍니다.
그러면 그것을 console.log가 받아서 출력을 해 주겠죠

힘드시나요? 그렇다면 여기까지 하도록 하죠
다음 시간에는 변수의 진화체인 배열에 관해서 알아 보도록 하겠습니다.