728x90
사용자 정의 함수
- 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미
- 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행하기 때문에 코드를 재활용할 수 있음
함수 선언식
function 함수명(매개변수1, 매개변수2 ..) {
...
return 값;
}
함수 표현식
const 함수명 = function(매개변수1, 매개변수2..) {
...
return 값;
}
✅ 자바스크립트는 함수를 변수(상수)에 저장할 수 있음
✅ 자바스크립트는 script 태그를 만나면 자바스크립트를 읽고 선언된 함수, var로 선언된 변수를 먼저 메모리에 저장
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>함수1</title>
</head>
<body>
<h2>함수1</h2>
<script>
'use strict';
function func1() {
console.log('func1 함수 호출!');
}
func1();
func1();
func1();
function func2(num) {
console.log(`전달받은 매개변수의 값 : ${num}`);
}
func2(10);
func2(4);
function func3(start, end) {
let sum = 0;
for (let i = start; i <= end; i++) {
sum += i;
}
console.log(`${start}부터 ${end}까지의 총 합 : ${sum}`);
}
func3(2, 15);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>함수 - 2</title>
</head>
<body>
<h2>함수 - 2</h2>
<script>
'use strict';
function func1(name='무명') {
console.log(`당신의 이름은 ${name}입니다`);
}
func1('김사과');
func1(); // name이 '무명'으로 설정됨
function func2(num1, ...num2) {
console.log(`num1의 값 : ${num1}`);
console.log(`num2의 값 : ${num2}`);
}
func2(10, 30, 20, 70, 100); // num1에는 10, num2에는 30, 20, 70, 100이 배열로 저장됨
function func3(... jumsu) {
let total = 0;
for (let i in jumsu) {
total += jumsu[i];
}
console.log(`총점 : ${total}`);
}
func3(80, 90, 70);
func3(80, 90, 70, 100, 20);
</script>
</body>
</html>
호이스팅(hoisting)
- 코드가 실행되기 전 변수선언/함수선언을 최상단으로 끌어 올려진 것 같은 현상
- var 변수, 함수 선언식은 호이스팅이 일어남
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>호이스팅</title>
</head>
<body>
<h2>호이스팅</h2>
<script>
'use strict';
func1(); // 함수 선언식은 메모리에 먼저 로드되어 실행됨.
func2(); // 함수 표현식은 메모리에 먼저 로드되지 않기 때문에 에러.
function func1() { // 함수 선언식
alert('func1 호출되었습니다!');
}
const func2 = function() { // 함수 표현식
alert('func2 호출되었습니다!');
}
</script>
</body>
</html>
728x90
'JS > JavaScript' 카테고리의 다른 글
| [JavaScript] 변수의 범위 (0) | 2022.04.29 |
|---|---|
| [JavaScript] 함수 만들기 (0) | 2022.04.28 |
| [JavaScript] 배열의 반복 (0) | 2022.04.28 |
| [JavaScript] Array 객체의 메소드 (프로퍼티 메소드) (0) | 2022.04.28 |
| [JavaScript] 자바스크립트 배열 (0) | 2022.04.28 |