Index

5. 함수

5.1 함수

함수는 입력, 출력, 기능을 하나로 묶어 재사용 할 수 있도록 만드는 것입니다. 자바스크립트는 실행 코드들이 들어있는 독립 블록 단위객체인 함수를 사용할 수 있습니다. 여기서 객체란 데이터와 그 데이터를 포함한 모든 동작에 대해 말합니다.

<!-- 함수 -->
<p id="result"></p>
<script>
function myFunction(x,y){  //함수의 정의
	z = x + y  //함수의 기능
	return z;  //함수의 결과값
}
// 함수의 호출 
document.getElementById("result").innerHTML = myFunction(4,3);
</script>

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a7e8bc7b-a2aa-4cf8-ab42-34ca2481a4d2/Untitled.png

함수는 기본적으로

function( ) { };

형태의 구조를 가집니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/87fe69c0-61c1-4b81-8cfa-e7bbf97cc4be/Untitled.png

소괄호()내에는 매개변수와 중괄호 {}내에는 실행코드와 return(결과) 값을 가지고 있습니다. 함수를 호출 하기 위해서는 선언된 함수의 매개변수 값을 인수로 전달합니다.

myFunction으로 선언된 함수에 인수로 4, 3을 전달하면 함수내 실행코드의 결과값인 7일을 출력 할 수 있습니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/1299cdff-3ff5-42b8-a220-add583bfcbcc/Untitled.png

<button onclick="test()">클릭 One!!</button>
<button onclick="document.write('hello world Two')">클릭 Two!!</button>
// 함수
// 참고 : function은 python에 def과 같습니다.
// 읽어볼만한 문헌 : <https://ko.javascript.info/function-basics>

//함수선언
function sum(x, y){
  return x + y;
}
document.write(sum(20, 40));//함수호출

function test(){
  document.write('hello world One');
}