5. 함수

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>

함수는 기본적으로

function( ) { };

형태의 구조를 가집니다.

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

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


<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');
}


//지역변수와 전역변수
//함수선언(또는 함수정의)
var z = 100; //z는 전역 변수(global variable)
function sum(x){ // x는 매개변수(parameter)
  let y = 50; // y는 지역변수(local variable)
  z = z + y;
  return x + y; // return이 없을 경우 undefined
}
// 아래 20이라는 값은 전달인자(argument)
document.write(sum(20), '<br>'); //함수호출
// Template literals 사용
//   document.write(`x는 ${x}`, '<br>'); // 지역변수
//   document.write(`y는 ${y}`, '<br>'); // 지역변수
document.write(`z는 ${z}`, '<br>'); // 전역변수


// 화살표 함수(arrow function)
// 읽어볼만한 문헌 : https://ko.javascript.info/arrow-functions-basics

function sum(x, y){
  return x + y;
}

let sum_arrow = (a, b) => a + b;