1. 사용자 정의 함수 (function)
하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록
필요할 때마나 호출하여 해당 작업을 반복하여 수행할 수 있음
코드를 재활용
1. 함수 선언식
- 함수를 직접 만드는 형식
- 함수를 메모리에 먼저 올림
- 위치가 중요하지 않음
- 어디에 선언되어도 사용할 수 있음
* 호이스팅: 먼저 메모리에 올리고 다시 처음부터 실행
 |
|
<body>
<h2> 함수선언식 </h2> <script>
function func1() {
console.log(`fun1(): 호출!`);
}
func1();
func1();
console.log(`------------------`);
function func2(num) {
console.log(`전달받은 매개변수의 값: ${num}`);
}
func2(10);
func2('apple');
func2('true');
func2();
console.log(`------------------`);
function func3(start, end) {
let sum = 0;
for(let i=start; i<=end; i++){
sum += i;
}
console.log(`${start}부터 ${end}까지의 총합: ${sum}`);
}
func3(1, 100);
func3(1);
console.log(`------------------`);
function func4(){
return '❤';
}
func4(); //아무것도 안나옴
console.log(func4());
const presents = func4();
console.log(presents);
</script>
</body>
|
 |
2. 함수 표현식
- 함수를 변수에 담는 방식 함수가 메모리에 올라가 있지 않음
- 위치가 중요
- 맨 위에 선언되어야 사용할 수 있음
 |
|
<body>
<h2> 함수표현식 </h2> <script>
//함수 표현식: 함수를 변수에 담기
func7(); <-----에러! : 위치가 중요! const func7=function(){
console.log(`fun7()호출!`);
}
func7();
</script>
</body>
|
 |
- 디폴트 매개변수
매개변수의 값을 설정하는 것
매개변수의 값을 전하지 않으면 기본값을 변수에 저장
 |
|
<body>
<h2> 디폴트 매개변수 </h2> <script>
function func5(num1=1,num2=1) {
console.log(`num1의 값: ${num1}, num2의 값: ${num2}`);
console.log(`${num1}*${num2}=${num1 * num2}`);
}
func5(10,3);
func5(10);
func5();
func5(num2=10); //안먹힘
</script>
</body>
|
 |
- 나머지 매개변수
생략 접두사(...)로 사용하여 특정 위치의 인수부터 마지막 인수까지 한번에 지정할 수 있음
 |
|
<body>
<h2> 나머지 매개변수 </h2> <script>
function func6(...x) {
console.log(`x의 값: ${x}`);
console.log(`x의 타입 ${typeof(x)}`);
for(i in x) {
console.log(`i의 값: ${i},x[${i}],${x[i]}`)
}
}
func6(30, 50, 80, 100, 40);
func6(50, 80);
</script>
</body>
|
 |
- 익명함수
|
<body>
<h2> 익명함수 </h2> <script>
//익명함수: 함수 만들고 바로 실행하기 (콜백함수에서 활용)
(function(){
console.log('함수를 만들고 바로 호출하기!')
})();
</script>
</body>
|
 |
2. 호이스팅(hoisting)
인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것
var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화
let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않음
  |
- 호이스팅_예제
|
<body>
<h2> hoisting </h2> <script>
func1();
function func1(){ alert('func1() 호출!'); } const func2=function(){ alert('func2()호출!'); } func2(); </script>
</body>
|
  |
3. 화살표 함수
function 키워드를 사용하여 함수를 만드는 것보다 간단하게 표현
화살표 함수는 항상 익명
return은 생략하며 모든 화살표 함수는 return형
- 매개변수가 없을 경우(익명함수) : 표현식에 주로 사용
  |
- 매개변수가 없을 경우_예제
|
<body>
<h2> 화살표함수_매개변수 X </h2> <script>
const func1 = () => console.log('안녕하세요! 자바스크립트!');
func1();
console.log(`------------------`);
const func2 = x => x * x;
const result = func2(10);
console.log(`10의 제곱: ${result}`);
console.log(`------------------`); const func3 = (x, y) => {
let sum = 0;
for(let i=x; i<=y; i++){
sum += i;
}
return sum;
const total = func3(1,100);
console.log(`1부터 100까지의 합:${total}`);
</script>
</body>
|
 |
- 매개변수가 있을 경우
 |
- 매개변수가 있을 경우_예제
|
<body>
<h2> 화살표함수_매개변수 O </h2> <script>
let age=Number(prompt('나이를 입력하세요'));
const isAdult=(age>19)? ()=>console.log('성인입니다.'):()=>console.log('미성년입니다.');
isAdult();
</script>
</body>
|
 15 입력  |
- ✔️매개변수가 1개인 경우
- const 상수 = 매개변수1 => 함수가 호출되었을 때 실행될 문장
- (소괄호를 생략할 수 있음 )
|
<body>
<h2> </h2> <script>
</script>
</body>
|
'Web > JavaScript' 카테고리의 다른 글
| 08. 내장객체 (0) | 2024.04.16 |
|---|---|
| 07. 객체(Object) (0) | 2024.04.16 |
| 05. 배열(Array) (0) | 2024.04.16 |
| 04. 연산자, 제어문, 반복문 (0) | 2024.04.16 |
| 03. 데이터타입, 대화상자 (0) | 2024.04.16 |
