1. 함수 function
🐰 자바스크립트 프로그램은 단순히 동작 하나만 실행되는게 아니라 여러 가지 동작이 연결된다
🐰 이렇게 동작해야 할 목적대로 묶은 명령을 함수 function (= 코드의 집합) 이라 함
🐰 함수를 사용하면 각 명령의 시작과 끝을 명확하게 구별할 수 있고,
묶은 기능에 이름을 붙여 필요할 때마다 호출하여 반복적으로 사용 가능
💡 함수를 사용하면 좋은 점
1. 반복되는 코드를 한 번만 정리해놓고 필요할 때마다 호출하므로 반복 작업을 피할 수 있다
2. 긴 프로그램을 기능별로 나눠 여러 함수로 나누어 작성하면 모듈화로 전체 코드의 가독성이 좋아진다.
3. 기능별(함수별)로 수정이 가능하므로 유지보수가 쉽다.
💡 용어 정리
· 함수 정의 : 함수를 만든 것
· 함수 호출 : 함수를 사용하는 것
· 인수 : 함수를 호출할 때 괄호 내부에 여러가지 자료를 넣는 것
· 매개변수 : 함수를 정의할 때 전달받을 인수를 정의하는 것
· 리턴 값 : 함수를 호출해서 최종적으로 나오는 결과
1) 매개변수와 리턴값
🍯 매개변수와 리턴값은 함수의 필수 요소가 아니고, 필요할 때만 사용
/* 기본형 */
function 함수명 (매개변수1, 매개변수2, ... 매개변수n) {
문장;
문장;
return 리턴값;
}<script>
const f = function (x) {
return x * x;
}
// 함수를 호출
console.log(f(3)); // 9. 매개변수 x에 전달되는 인수가 3이고 리턴값이 9.
console.log(f()); // NaN
</script>
자바스크립트는 인수와 매개변수의 개수가 달라도 에러가 나지 않음
<script>
const test1st = function (a) {
console.log(a);
}
test1st(); // undefined
test1st(1); // 1
test1st(1, 2); // 1
test1st(1, 2, 3); // 1
</script>
매개 변수가 있는 함수 정의문
<script>
const myFunc = function (name, area) {
document.write('안녕하세요. ' + name + '입니다.', '<br>');
document.write('사는곳은 ' + area + '입니다.', '<br><br>');
};
myFunc('홍당무', '서울');
myFunc('깍두기', '부산');
</script>
2) return 문
🍯 데이터를 반환하고 강제 종료
🍯 return의 역할 1) 데이터를 반환 2) 함수의 강제 종료 (반환값이 없어도 됨)
데이터 반환
<script>
const getAvg = function (arrData) {
let sum = 0;
for(let i = 0; i < arrData.length; i++) {
sum += Number(prompt(`${arrData[i]} 점수는 ?`, `0`));
}
const avg = sum / arrData.length;
return avg;
//alert(avg); // return 이후의 코드라서 실행이 안됨. (Unreachable code)
}
const arrSubject = ['국어', '수학', '영어'];
const result = getAvg(arrSubject);
document.write(`평균 점수는 ${result}점 입니다.`);
</script>강제 종료
<head>
<style>
* {
padding: 0;
margin: 0;
}
#galleryZone {
text-align: center;
}
</style>
<script>
let num = 1;
const showGallery = function (direction) {
/*
다음을 클릭한 경우 pic_1.jpg -> pic_2.jpg : 번호가 증가
이전을 클릭한 경우 pic_9.jpg -> pic_8.jpg : 번호가 감소
*/
if (direction === 1) { // 다음을 클릭한 경우
if (num === 9) {
alert('마지막 이미지입니다');
return; // 이미지가 9개인 경우 num이 9인 경우 함수 종료
}
num++;
} else { // 이전을 클릭한 경우
if (num === 1) {
alert('첫 이미지입니다.');
return; // 첫 이미지가 1번이어서 종료
}
num--;
}
const imgTag = document.getElementById('photo'); // id 값이 photo인 요소를 가져옴
imgTag.setAttribute('src', 'images/pic_' + num + '.jpg'); // id 값이 photo인 요소의 src 속성을 변경
}
</script>
</head>
<body>
<div id ="galleryZone">
<p><img src="./images/pic_1.jpg" id="photo" alt=""></p>
<p>
<button onclick="showGallery(0)">이전</button>
<button onclick="showGallery(1)">다음</button>
</p>
</div>
</body>
2. 익명 함수 선언하기
🐰 익명 함수 anonymous function : 이름이 없는 함수
🐰 익명함수는 변수 선언(함수 정의) 후 호출 가능
🐰 익명함수는 동일한 이름으로 재선언 불가능. let과 const의 특징
기본형 : function () {}
<!-- 변수 할당 -->
let 변수 = function () {
실행문;
}
<script>
// 변수를 선언해서 함수를 할당.
const func = function () {
console.log('함수 내부의 코드입니다 ... 1');
console.log('함수 내부의 코드입니다 ... 2');
console.log('함수 내부의 코드입니다 ... 3');
console.log('');
}
// 함수를 호출
func();
func();
// 출력
console.log(typeof func); // function. 함수의 자료형 확인
console.log(func); // 함수 자체도 단순한 자료이므로 출력할 수 있음.
</script>
<script>
/* 선언 전 호출시 */
compute(); // Uncaught ReferenceError: Cannot access 'compute' before initialization
let compute = function() {
let x = 10;
let y = 100;
let result = x * y;
console.log(result);
};
compute(); // 1000
</script>
<script>
/* 재선언 시 */
let compute = function() {
let x = 10;
let y = 100;
let result = x * y;
console.log(result);
}; // Uncaught SyntaxError: Identifier 'compute' has already been declared
</script>
3. 선언적 함수
🐰 선언적 함수 : 이름이 있는 함수
🐰 선언적 함수는 재정의 가능
기본형 : function 함수 이름 () {}
✏️ 대부분의 프로그램은 선언적 함수만 사용하거나(C),
선언적 함수를 주로 사용하고 익명함수를 보조적인 수단(C++, 자바의 람다)으로 사용
✏️ 자바스크립트는 함수지향 프로그램(ECMA script 6 이후)이라서 변수에 함수 할당하거나,
익명함수를 주로 사용하고 선언적 함수를 보조적인 수단으로 사용하는 것을 지향함.
<script>
// 함수를 생성
function func1st () {
console.log('함수 내부의 코드입니다 ... 1');
console.log('함수 내부의 코드입니다 ... 2');
console.log('함수 내부의 코드입니다 ... 3');
console.log('');
}
// 함수를 호출
func1st();
func1st();
// 출력
console.log(typeof func1st); // function
console.log(func1st);
</script>
동일한 이름의 함수가 존재하는 경우
- 선언적 함수의 경우 동일한 이름의 함수가 존재하면 뒤에 선언된 함수가 실행이 됨
<script>
let num = 100;
function menu() {
num += 100;
document.write(num, ": 앞의 함수 실행<br>");
}
menu(); // 100: 뒤의 함수 실행
function menu() {
document.write(num, ": 뒤의 함수 실행<br>");
}
</script>
💡 선언적 함수를 변수에 할당하는 방법
1. 변수에 할당하면서 선언적 함수 선언
➡️ 변수에 할당하면서 선언적 함수를 선언하면 익명함수로 처리
2. 선언적 함수를 선언 후에 변수에 할당
<script>
// 1. 변수에 할당하면서 선언적 함수 선언
const func2nd = function namedFunc2nd() { // 변수를 선언해서 함수를 할당
console.log('namedFunc2nd() 함수 내부의 코드입니다 ...');
console.log('');
}
// 호출
func2nd(); // 변수를 통해 함수를 호출.
// namedFunction(); // Uncaught ReferenceError: namedFunction is not defined\
console.log(typeof func2nd); // function. 함수의 자료형 확인
// 2. 선언적 함수를 선언 후에 변수에 할당
function namedFunc() {
console.log('namedFunc() 함수 내부의 코드입니다 ...');
console.log('');
}
const func1st = namedFunc; // 선언적 함수를 변수에 할당.
func1st(); // 변수를 통해 함수 호출
namedFunc(); // 함수를 호출
console.log(typeof func1st); // function. 자료형 확인
</script>
4. 호이스팅 Hoisting
🐰 var로 선언한 변수 or 선언적 함수는 변수나 함수 이전에 호출하여도 에러를 발생하지 않음
🐰 자바스크립트 해석기는 소스를 훑고 var를 사용한 변수는 실행하기전에 기억해 두기 때문에 선언한 것과 같은 효과가 있다
<script>
compute(); // 110. 선언적 함수는 함수 정의 전에 사용가능.
function compute() {
let x = 10;
let y = 100;
let result = x + y;
console.log(result);
}
compute(); // 110
</script>
[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]
'Programming Language > JavaScript' 카테고리의 다른 글
| [JavaScript] 나머지 매개변수와 전개 연산자 (0) | 2024.03.29 |
|---|---|
| [JavaScript] 사용자 정의 함수 예제 (0) | 2024.03.28 |
| [JavaScript] 배열(Array)이란, 요소 추가 및 제거 (0) | 2024.03.28 |
| [JavaScript] 반복문 | for문, while문, break문, continue문 (0) | 2024.03.28 |
| [JavaScript] if 조건문 (if-else & else-if), switch 문 (1) | 2024.03.28 |