함수 선언
▶function를 활용하여 선언한다.
▶일반함수 구문: function 함수명 ( ) { }
▶익명함수 구문: function ( )
▶익명함수는 변수에 대입이 가능하다.
▶일반 함수는 호이스팅 기술을 지원한다.
▶호이스팅? 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것
▶익명함수 호출 시에는 익명함수가 호출부 위에 선언이 되어 있어야한다.
▶함수 선언 시 중괄호를 유효범위 혹은 스코프라고 한다. (함수 스코프: var)
▶함수에는 전역변수와 지역변수 구분이 확실하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>함수</title>
<link rel="shortcut icon" href="#" type="image/x-icon">
</head>
<body>
<h1>함수</h1>
- 코드를 저장 할 수 있는 수단 <br>
- function이라는 키워드로 선언하여 코드를 저장한다. <br>
- 함수를 호출을 하려면 먼저 선언이 되어 있어야 호출이 가능하다. <br>
- 자바스크립트 함수는 익명함수와 일반함수가 있다.<br>
- 함수 실행은 함수명 혹은 참조변수 (); -> 함수 실행
<h2>함수 선언</h2>
- 함수 선언 후에 {} -> 스코프 (블럭, 유효범위) <br>
- 함수는 지역변수와 전역변수의 차이가 확실하다. <br>
<h3>일반함수</h3>
- 일반함수는 호이스팅 기술을 지원한다.<br>
(아래에 함수가 선언이 되어 있더라도 위에서 호출 가능)
<h3>일급함수</h3>
- 일급함수는 함수를 다른 함수에 매개변수로 전달이 가능하거나, 변수에도 할당이 가능한 함수이다.<br>
(변수에 담을 수 있고, 인자나 값으로도 사용이 가능하다)
<script type="text/javascript">
let num1 =1;
let num2 =2;
let resultA = num1 + num2;
console.log(resultA);
sumdigit(1,2);
sumdigit(3,4);
let num3 =3;
let num4 =4;
let resultB = num3 + num4;
console.log(resultB);
let num5 =5;
let num6 =6;
let resultC = num5 + num6;
console.log(resultC);
function sumDigit(num1, num2){
let resultC = num1 +num2;
console.log(resultC);
}
//함수선언?
//1.일반함수(함수명이 있고 function으로 선언된 함수)
//호이스팅 가능하다. 그래서 선언 이전에 호출이 가능하다.
fn(); //선언 전에도 호출 가능
function fn(){
console.log('일반함수 실행');
}
fn(); ///선언 후에도 호출 가능
</script>
<h3>익명함수</h3>
- 익명함수는 대입을 해야 선언이 가능하다. <br>
- 익명함수는 위에서 선언이 되어 있어야 아래서 호출이 가능하다.(호이스팅 기술 x)
<script type="text/javascript">
fn(); //익명함수는 평가시점이 아닌 실행 시점에 함수가 할당되어 선언 전에 호출 불가능
const fn1 = function(){
console.log('익명함수 실행');
}
fn1();
//화살표함수 선언
const arrFn1 = () => {
console.log('화살표 함수1실행');
}
const arrFn2 = () => console.log('화살표 함수2실행');
arrFn1();
arrFn2();
</script>
<h2>함수 호출</h2>
- 함수 내에 저장된 코드를 필요 할때마다 호출하여 코드를 실행시킨다.
-함수명(): 호출연산자, (일반식) : 그룹연산자
<script type="text/javascript">
//함수 선언 및 호출
//1.일반함수 선언 호이스팅 대상
func(); //일반함수는 선언부 이전 호출 가능
function func (){
console.log('일반함수 func 실행');
}
//2. 익명함수: 변수선언 = function(){}
// func1(); //익명함수는 선언부 이전에 호출 불가능
const func1 = function(){
console.log('익명함수 func1 실행');
}
func1();
//3. 화살표 함수: 변수 선언 =()=>{};
//arrowFn3(); // 화살표함수는 선언부 이전에 호출 불가능
const arrowFn3 = () => {
console.log('화살표 함수 arrowFn3 실행');
}
arrowFn3();
let copyFn1 = func1;
let copyFn2 = arrowFn3;
copyFn1();
copyFn2();
console.log(copyFn1 == func1, '같은 주소 여부확인');
console.log(typeof copyFn1, 'function'); //function 타입 연산 시 function 문자열반환
console.log(typeof [], 'array'); //null타입 연산 시 object문자열반환
console.log(typeof [], 'array'); //array 타입 연산 시 object문자열 반환
</script>
<h2>매개변수</h2>
- 함수 호출시 인수를 삽입하여 호출할 수 있다. <br>
- 함수 내부에서 인자 값을 받을때 매개변수로 받는다.<br>
- 함수 호출시 함수를 인수로 받아 매개변수에 할당된 함수를 호출할 수 있다.
<script type="text/javascript">
</script>
<h2>return</h2>
- 함수 내에서 쓰일 수 있는 키워드 <br>
- 함수를 호출 하는곳에 값을 전달 할 수 있다. <br>
- 함수를 강제 종료 한다. <br>
<script type="text/javascript">
</script>
<h2>함수 return</h2>
<h3>고차함수</h3>
- 고차함수: 함수를 반환하는 함수를 말한다.
<script type="text/javascript">
</script>
<h2>내부 함수</h2>
- 함수 내의 함수
<script type="text/javascript">
</script>
<h1>함수 - 재귀호출</h1>
- 함수 내부에서 나 자신을 호출
<script type="text/javascript">
</script>
</body>
</html>
'코딩 국비수업들으며 느끼는점' 카테고리의 다른 글
| 부트스크랩 (0) | 2023.04.28 |
|---|---|
| 데이터베이스:tb_user테이블작업\34단계jsp_java_DTO_DAO_delete처리 (0) | 2023.04.17 |
| 자바스크립트 내장함수(slice, reverse, indexof etc..) (0) | 2023.04.14 |
| SQL 상품등록하기 (1) | 2023.04.10 |
| 자바스크립트:첫수업(변수,연산자,비교) (0) | 2023.03.16 |