<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//호출 - 선언적 함수는 당겨쓰기(호이스팅) 가능함
a()
//var result = b(1, 2, "홍길동");
var result = b(1, 2, 3);
console.log(result);
//매개변수 없고, 반환도 없는 모형
function a() {
console.log("hello world")
}
//매개변수, 리턴
function b(x, y, z) {
var result = x + y + z
return result //값의 반환
}
////////////////////////////////////////////////////////
var func = b; //함수를 변수에 저장 할 수 있습니다.
//console.log(func); //함수
var k = func(1, 2, 3);
console.log(k);
</script>
</body>
</html>
JS 함수의 특징
- 호이스팅 - 뒤에 선언한 함수를 앞에서 사용
- 함수를 변수에 저장할 수 있다.
익명 함수
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//a(); //익명함수는 호이스팅이 불가
//익명함수 - 이름을 적지 않음, 변수에 저장함
var a = function() {
console.log("hello world");
}
var b = function(x, y) {
return x + y;
}
var result = b(1, 2)
console.log(result);
console.log("-----------------------------------------------------")
var func1 = function(a,b,c,d) {
return a + "님의 평균:" + (b+c+d) / 3
}
var func2 = function(a) {
if(a % 2 == 0) {
return "짝수"
} else {
return "홀수"
}
}
var func3 = function(a) {
var sum = 0;
for(var i = 1; i <= a; i++) {
sum += i
}
return sum
}
var func4 = function(a, b) {
return a.concat(b)
}
console.log( func1('홍길동', 88, 90, 90) );
console.log( func2(10) )
console.log( func3(20) ) //20까지 합
console.log( func4([1,2,3], [4,5,6,7,8]) ) //두 배열을 합해서 반환하는 함수
</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>
</head>
<body>
<script>
function func1() {
console.log("hello world");
}
function func2() {
console.log("hello2");
}
//페이지 실행시 동작시킬 내용을 작성할 수 있습니다. (반드시 필수 x)
(function(a, b, c) {
console.log("즉시실행함수", a , b, c);
func1();
func2();
})(1, 2, 3);
</script>
</body>
</html>
arrow 함수
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//익명함수 -> 화살표 함수로 대체(es6 )
//var a = function () {}
// var a = (a, b) => {
// return a + b
// }
var a = (a, b) => a + b
console.log( a(1, 2) )
console.log("-----------------------------------------")
//매개변수를 지키지 않더라도 호출은 됩니다.
//매개변수값은 arguments 속성에 전달됩니다.
function func1(a, b) {
console.log("함수 실행됨");
console.log(arguments);
console.log(arguments[0]); //이게 첫번째 매개변수
console.log(arguments[1]); //이게 두번째 매개변수
console.log(arguments[6]); //이게 일곱번째 매개변수
}
// func1();
// func1(1);
// func1(1,2 );
func1(1,2,3,4,5,6,7 );
</script>
</body>
</html>
arrow 함수의 특징
- 매개변수를 지키지 않아도 호출이되고
- arguments 속성에 매개변수가 저장이 된다.
'JS > JS-basic' 카테고리의 다른 글
| JS -클로저 은닉 (0) | 2024.01.28 |
|---|---|
| JS - 변수의 유효범위 , 클로저 (1) | 2024.01.28 |
| JS - 반복문 , 객체 담기 (1) | 2024.01.28 |
| JS -조건문 (0) | 2024.01.28 |
| JS - 배열 (1) | 2024.01.28 |
