10. 함수
1) 함수 function //자바에서는 메서드와 같은 역할
특성 기능을 하는 코드들을 묶어서 독립된 부품으로 만들어 재사용하고자 할때
호출하여 사용하는 기능
2) 구조
# 정의(매개변수x, 리턴 x)
function 함수명(){
//실행코드들...
}
#호출
함수명();
# 정의(매개변수O, 리턴 x)
function 함수명(변수명, 변수명,....){
//실행코드들...
return 값;
}
#호출
변수 = 함수명(인자,인자,...);
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// 함수정의
function test(){
document.write("hello <br/>");
document.write("hello <br/>");
document.write("hello <br/>");
}
// 함수 실행
test();
function test2(name, age){
document.write("당신의 이름은" + name + "이고, 나이는 "+ age + "살 입니다");
}
test2("피카츄",20);
test2("홀길동",100);
</script>
</body>
</html>
3) 스코프
: 변수 또는 함수의 유효범위 말함
#1. 전역 변수 Global Variable
선언위치 : 함수밖, {}밖
사용범위 : 자바스크립트 전체 영역
#2. 지역 변수 Local Variable
선언위치 : 함수안
사용범위 : 함수안
* 함수 내에서 동일 이름의 변수에 대한 우선순위 : 지역 > 전역
#3. 전역 함수
전역변수와 동일
#4. 지역 함수
정의 위치 : 함수안
사용 범위 : 정의된 함수를 품고 있는 함수안
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
</title>
</head>
<body>
<script>
var num = 10; // 전역변수
console.log(num);
function test(){
console.log("function : " + num); // 전역 num 10출력
num = 20; //함수안에서 var 생략하면 전역으로 선언됨;
//var num = 20; //지역변수
console.log("function : " + num); //지역변수 20 나옴
//var num = 100; //지역
//console.log("function : " + num);
}
// test() //실행시 16번째 num 이 실행되어 전역변수로 20이 선언됨
console.log(num);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// 전역함수
function func(){
console.log("전역함수!!");
}
//전역
function outerFunc(){
//지역
function innerFunc(){
console.log("")
}
innerFunc();
}
func();
outerFunc;
// innerFunc; 실행안됨
</script>
</body>
</html>
4) 변수에 함수 저장하기
:자바스크립트에서는 함수도 변수에 저장가능.
변수에 함수를 저장하면 변수 이름을 함수처럼 사용할 수 있다.
var 변수명 = 함수명;
-> 변수명();
5) 매개변수 값으로 함수 사용하기
: 매개변수도 변수이기 때문에 함수를 담을 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
</title>
</head>
<body>
<script>
/* 함수를 변수에 담을 수 있다.
function hello(name){
console.log("hellooo"+ name);
}
hello("김김김");
var func = hello;
func("피카츄");
*/
// 함수를 매개변수에 담을 수 있다.
function hello1(){
console.log("hello!!!");
}
function hello2(){
console.log("hello22222");
}
//매개변수를 함수로 실행하는 함수
//중요
function execute(func){
func();
}
execute(hello1);
execute(hello2);
</script>
</body>
</html>
6) 리턴값으로 함수 사용하기
: 함수는 어떤 값이든 리턴가능. 즉, 함수를 리턴할 수도 있다.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script> // 10-6 설명
function getHello(){
function hello(user){
console.log(user + "님 방문을 환영합니다.");
}
return hello; // 함수 이름을 리턴
}
var result = getHello(); // 힘수를 리턴받아 변수에 저장
result();
result("홍길동");
</script>
</body>
</html>
'P-Language > [Javascript]' 카테고리의 다른 글
| [Javascript] 12. 자바스크립트 변수 선언 방식 (0) | 2022.06.08 |
|---|---|
| [Javascript] 11. 함수 리터럴(function literal)과 익명 함수(anonymous function) (0) | 2022.06.08 |
| [Javascript] 9 - 배열 array (0) | 2022.06.08 |
| [Javascript] 7 - 입력문과 8. 제어문 (0) | 2022.06.08 |
| [Javascript] 변수, 데이터타입, 형변환 (0) | 2022.06.07 |