자바스크립트 함수 Function, 매개변수 Parameter, 인자 Argument, 반환 Return

함수는 영어로 Function이라고 합니다. 객체를 만들 때 쓰이는 함수를 Method라 부르기도 합니다.

 

연속적으로 반복하는 것이 아니라 불규칙적으로 반복하는 코드를 작성할 때, while 반복문을 사용하기 어렵습니다. 이때, 반복적으로 등장하는 코드를 함수를 사용해 만들 수 있습니다. 함수로 축약된 코드를 반복해서 사용하면 유지보수가 쉬워집니다. 함수에 있는 코드를 일부 수정했을 때, 반복해놓은 모든 함수에 동시에 수정된 코드가 적용됩니다. 또한, 코드를 길게 늘여 쓰지 않고도, 짧은 함수 이름만으로 코드를 작성할 수 있습니다. 함수 이름은 코드의 기능을 떠올릴 수 있도록 자유롭게 만들 수 있습니다. 함수를 이용하면 심플하고 효율적인 코딩이 가능합니다.

 

함수는 입력과 출력의 개념으로 이루어집니다.

 

입력에 해당하는 것 중 하나가 매개변수입니다. 영어로는 Parameter입니다. 입력에 해당하는 또 다른 것 하나를 인자라고 합니다. 영어로는 Argument라고 합니다. 출력에 해당하는 것을 반환이라고 합니다. 영어로는 Return입니다. 특정 값을 입력하면, 함수가 그 입력값에 따라 다른 결과를 출력하게 할 수 있습니다.

 

매개변수 Parameter

 

<script> function 키워드를 사용해 자바스크립트 함수를 만들 수 있습니다. 함수를 만들겠다는 명령으로 function을 적고 원하는 함수의 이름을 적습니다. 함수 이름 바로 다음 등장하는 괄호 ( ) 안의 입력하는 내용이 매개변수 Parameter입니다. 왼쪽 값과 오른쪽 값을 더한 후 1줄 줄 바꿈을 하는 코드를 작성하겠습니다.

 

<script>

function sum(left, right){

documet.writhe(left+right+'<br>');

}

 

인자 Argument

함수를 실행하는 코드를 만들겠습니다. 함수 이름을 적고 괄호 ( ) 안에 값을 적습니다. 함수를 만들 때 left, right 등 매개변수 Parameter를 설정해 놓았습니다. 이제 5, 9 등 구체적인 특정 값이 인자 Argument에 입니다. 즉 매번 다른 값의 인자 Argument를 입력했을 때, 그 값을 함수 안으로 매개해주는 기능을 하는 변수들을 매개변수 Parameter라고 합니다.

sum(5,9);

</script>

 

직접적인 값이 아닌 코드 자체를 매개변수로 설정할 수 있습니다. 매개변수로 self를 입력하여 함수를 만듭니다. self가 아닌 this를 넣게 되면, 복사해 붙여넣은 함수가 연관 코드의 매개변수를 인지하지 못합니다. 최초의 this값만을 바라보게 됩니다. 그러므로 매개변수로 slef를 입력하고 이후 함수를 사용할 때는 인자로 this를 입력합니다. (self)를 적은 이후, 중괄호 { } 사이에 코드를 작성합니다. 

 

<script>

function 함수 이름(self){

함수 내용

}

</script>

 

만들어낸 함수를 실행할 때, 함수 이름 (this); 의 형식으로 명령을 적습니다. 인자 Argument를 this로 입력합니다.

 

함수 이름(this);

 

표현식의 개념과 Return

표현식은 연산의 결과 값이 나오게 되는 과정을 표현하는 식이라고 할 수 있습니다. 1+1을 연산하여 2의 결과 값이 나올 때, 1+1이 2의 표현식입니다. 1===1 이 true를 출력할 때, 1===1 이 true라는 값의 표현식입니다. Return은 함수의 매개변수를 활용해 표현식을 만듭니다. others라는 함수를 만들고 left, right 매개변수를 지정합니다. return으로 left와 right를 더한 연산의 결괏값을 출력하는 함수로 설정할 수 있습니다.

 

<script>

function others(left, right){

return left+right;

}

document.write(others(10,7)+'<br>');

document.write('<div style="color:blue">'+others(10,7)+'</div>');

document.write('<div style="font-size:15px;">'+others(10,7)+'</div>');

</script>