- 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 말함. - 실행하려면 반드시 호출이 필요하다. - 여러 곳에서 호출이 가능하다. - 매개변수의 자료형을 기술할 필요가 없다. - 호이스팅 처리 됨. *호이스팅 : 선언적함수(아래에 선언된 것)만 최상단으로 끌어올리는 기능.
* 선언적 함수란 : 기본 함수선언 형식은 온전히 지켜서 선언한 함수를 의미 형식 : function 함수명 () { 실행문들; ... } */ //오류발생안됨. 마지막에 선언한 함수만 실행됨 호이스팅 역역은 반드시 선언문이 같이 이루어진 script태그 안에서만 가능함.
익명 함수 : 이름이 없는 함수를 익명함수라고 한다.
- 익명함수를 호출하려면 해당 함수를 변수에 대입하여 (함수가 리터럴로 존재) 해당 변수를 함수 호출문 식으로 ( 함수객체명() ) 호출하면 된다.
익명함수 형식 :
function(){
자바스크립트 코드들;
...;
}*/
// func1(); //호이스팅 안 됨.
varfunc1 = function () {
document.write("익명 함수<br>");
};
// 함수를 변수로 선언시 세미콜론(;) 꼭 붙이기
func1(); //익명 함수 호출(실행)
func2(); //선언적 (사용자 정의) 함수 호출(실행)
functionfunc2() {//선언적 함수선언(정의)
document.write("선언적 함수<br>");
}
</script>
//매개변수가 있는 익명함수 사용
constx = function (a, b) {
returna * b;
function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
/* 함수란(function) :
하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 말함.
실행하려면 반드시 호출이 필요하다.
여러 곳에서 호출이 가능하다.
매개변수의 자료형을 기술할 필요가 없다.
호이스팅 처리 됨.
호이스팅 : 아래에 선언된 것을 최상단으로 끌어올리는 기능.
선언적 함수란 : 기본 함수선언 형식은 온전히 지켜서 선언한 함수를 의미
형식 :
function 함수명 () {
실행문들;
...
}
*/
//오류발생안됨.
func1();
function func1() {
document.write("선언적 함수1<br>");
}
function func1(i) {
document.write("선언적 함수1-1", i ,"<br>");
}//마지막에 선언한 함수만 실행됨
func1();
func2();
function func2() {
document.write("선언적 함수2<br>");
}
func2();
</script>
</head>
<body>
<pre style="border: 1px solid#000">
<span style="font-weight:bolder;">자바스크립트 function 형식</span>
<hr>
function함수명(매개변수1, 매개변수2, ...){
자바스크립트 코드들;<br>
...<br>
(반환문 선택)return 값;
}<br></pre>
<script>
func1();
//호이스팅 역역은 반드시 선언문이 같이 이루어진 script태그 안에서만 가능함.
// function func1(){
// document.write("선언적 함수1<br>")
// }
</script>
</body>
</html>
f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
#demo {
text-decoration: underline;
font-weight: bolder;
color: red;
}
</style>
<script>
/* 브라우저의 개발자 도구를 꼭 실행하여 확인해 주세요!! **
익명 함수 : 이름이 없는 함수를 익명함수라고 한다.
익명함수를 호출하려면 해당 함수를 변수에 대입하여
(함수가 리터럴로 존재)
해당 변수를 함수 호출문 식으로 ( 함수객체명() ) 호출하면 된다.
익명함수 형식 :
function(){
자바스크립트 코드들;
...;
}*/
// func1(); //호이스팅 안 됨.
var func1 = function () {
document.write("익명 함수<br>");
};
// 함수를 변수로 선언시 세미콜론(;) 꼭 붙이기
func1(); //익명 함수 호출(실행)
func2(); //선언적 (사용자 정의) 함수 호출(실행)
function func2() {
//선언적 함수선언(정의)
document.write("선언적 함수<br>");
}
</script>
</head>
<body>
<p id="demo"></p>
<!-- <button type="button" onclick="document.getElementById('demo').innerHTML = x (4,3);">클릭</button> -->
<button type="button" onclick="bfn()">클릭</button>
<script>
//매개변수가 있는 익명함수 사용
const x = function (a, b) {
return a * b;
};
function bfn() {
document.getElementById("demo").innerHTML = x(4, 3);
}
</script>
</body>
</html>
function
<!DOCTYPE html>
<html>
<head>
<title>Function</title>
</head>
<body>
<h2>JavaScript Function</h2>
<p>myFunction(4, 3)의 호출값은? <span id="demo"></span></p>
<script>
var x = myFunction(4, 3); //선언적함수-호이스팅 일어남
document.getElementById("demo").innerHTML = x;
function myFunction(a, b) {
return a * b;
}
</script>
</body>
</html>
;;;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function btn(){
document.getElementById("demo").innerHTML
= "기온은 섭씨" + toCelsius(77) + "도 입니다.";
//선언적함수 호이스팅
function toCelsius(num) {
//화씨를 섭씨로 변경하는 수식
return Math.floor((num-32) * (5/9));
//floor 1의 자리에서 내림
}
function toCelsius1(){
document.write("기온은 섭씨 32도 입니다.");
}
return{toCelsius:toCelsius1()};
//js's object = java's map
//{}중괄호 형식 object입력
//[]대괄호
//return toCelsius1();
}
</script>
</head>
<body>
<h2>JavaScript Functions</h2>
<pre style="border:1px solid #000; font-weight: bolder;">
지역함수(local function) : 함수 안에 정의된 내장 함수를 의미.
- 포함된 함수 안의 블록 사이에서만 쓰일 수 있다.
- 포함된 함수의 실행이 종료되면 지역 함수도 소멸된다.
- 함수 내부에서 선언된 변수명과 변수값은 함수 외부에서는 사용할 수 없다.
전역함수(global function) : 여러 코드 블록에서 동시에 쓰일 수 있는
함수를 말한다.
- 전역변수 : 여러 코드 블록에서 동시에 쓰일 수 있는 변수를 말한다.
함수 밖에서 선언된 변수의 경우 함수 내부의 코드 블록에서도
동시에 사용할 수 있다.
</pre>
<p>버튼을 클릭해보세요.</p>
<p id="demo"></p>
<button onclick="btn()">클릭</button>
<script>
// btn();
//btn().toCelsius1;
//btn().toCelsius1;
</script>
</body>
</html>
