반응형
함수란?
- 함수를 사용하여 자바스크립트 코드를 메모리에 저장했다가 필요할 때마다 호출하여 사용할 수 있음
변수와 함수의 차이
1. 변수
- 1개의 데이터만 저장
- var 키워드 사용하여 선언
- 문자형, 숫자형, 논리형 데이터를 보관
- 객체를 참조함
2. 함수
- 코드를 저장
- function 키워드 사용하여 선언
- 출력문, 제어문 등의 코드를 저장하고 데이터를 반환
기본 함수 정의문
1. 함수 정의문 : 함수를 사용하여 코드를 저장한 것
2. 기본형
function 함수명() {
코드;
}
3. 익명함수 기본형
참조 변수 = function() {
코드;
}
4. 함수 호출
- 함수 정의문 안에 작성된 코드는 바로 실행되는 것이 아니라 함수가 호출되면 실행됨
- 함수는 메모리에 할당되어 대기중인 상태로 있는 것임
5. 함수 호출 기본형
// 함수 호출 기본형
함수명();
또는
참조변수();
// 함수 선언 및 호출 예시
function myFnc() {
document.write("hello~", "<br>");
document.write("welcome", "<br>");
}
myFnc();
6. 일반 함수 정의 방식 vs 익명 함수 선언 참조 방식
- 호이스팅 기술 : '물건을 끌어올리다' 라는 의미로 함수 정의문보다 호출문이 먼저 나와도 끌어올려서 호출이 가능
- 일반 함수 정의 방식은 호이스팅 기술을 지원한다.
- 반면, 익명 함수 선언 방식은 호이스팅을 지원하지 않음
7. 예제 - 두 가지 함수 선언 방식
<!DOCTYPE html>
<html lang="ko">
<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>function</title>
</head>
<body>
<script>
var count = 0;
//일반 메소드 호이스팅 방식 지원
myFnc(); // count = 1
//일반 메소드 선언
function myFnc() {
count++;
document.write("hello" +count, "<br>");
}
myFnc(); // count = 2
//익명 메소드 선언
var theFnc = function() {
count++;
document.write("bye" +count, "<br>");
}
//익명 메소드 호이스팅 방식 미지원
theFnc(); // count = 3
//ES6 화살표 함수
// count muFnc2 = () => document.write("javascript", "<br>");
// myFnc2();
//ES6 매개변수가 있는 경우
// const myFnc3 = num => document.write("javascript" + num, "<br>");
// var num = 1;
// myFnc3(num);
</script>
</body>
</html>
8. 예제 - 배경색 바꾸기
<!DOCTYPE html>
<html lang="ko">
<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 id="theBody">
<button onclick="changeColor();">배경색 바꾸기</button>
<script>
var color = ["white", "yellow", "aqua", "purple"];
var i = 0;
//버튼 누를때마다 실행될 메소드
function changeColor() {
i++;
if(i >= color.length) {
i = 0;
}
//body를 id 선택자를 이용해 변수로 선언
var bodyTag = document.getElementById("theBody");
//color배열에서 하나 씩 꺼내서 body의 배경색 변경
bodyTag.style.backgroundColor = color[i];
}
</script>
</body>
</html>
매개변수가 있는 함수 정의문
1. 의미 : 함수를 호출할 때 전달하고자 하는 값을 입력하여 호출할 수 있음
2. 기본형
function 함수명(매개변수1, 매개변수2, ..., 매개변수 n) {
자바스크립트 코드;
}
함수명(데이터1, 데이터2, ..., 데이터n);
3. 예제 - 이름과 거주지 데이터를 매개변수로 전달하여 출력하기
<!DOCTYPE html>
<html lang="ko">
<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>
<script>
//java와 다르게 매개변수의 타입을 지정하지 않음
function myFnc(name, area) {
document.write("변수타입은 " + typeof(name) + "입니다.", "<br>");
document.write("안녕하세요." + name + "입니다.", "<br>");
document.write("사는 곳은 " + area + "입니다.", "<br><br>");
}
myFnc("홍길동", "서울");
myFnc("임꺽정", "부산");
myFnc(123, "서울");
</script>
</body>
</html>
4. 예제 - 아이디, 비밀번호 일치 여부 확인
<!DOCTYPE html>
<html lang="ko">
<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>
<script>
var rightId = "korea";
var rightPw = "1234";
function login(id, pw) {
if(id == rightId) { // 올바른 아이디인 경우
if(pw == rightPw) { // 올바른 비밀번호인 경우
document.write(id + "님 방문을 환영합니다");
} else { // 틀린 비밀번호인 경우
alert("잘못된 비밀번호입니다!");
}
} else { // 틀린 아이디인 경우
alert("존재하지 않는 아이디입니다!");
}
}
// 아이디, 패스워드 입력받기
var userId = prompt("아이디를 입력하세요.", "");
var userPw = prompt("패스워드를 입력하세요.", "");
// 함수 호출
login(userId, userPw);
</script>
</body>
</html>
매개변수 없이 함수에 전달된 값 받아오기
1. 의미 : 함수 정의문에 arguments를 사용하면 매개변수가 없는 상태에서도 데이터를 전달받을 수 있다.
전달받은 값들은 배열에 저장되어 arguments라는 변수로 참조한다.
2. 기본형
function 함수명() {
arguments;
}
함수명(데이터1, 데이터2, 데이터3);
3. 예제 - 3개의 숫자형 데이터를 전달받아 그 합을 구하는 문제
<!DOCTYPE html>
<html lang="ko">
<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>
<script>
//매개변수를 선언안해도 javascript에 내장된 arguments배열을 통해 매개변수들을 받을 수 있다.
//javascript에서는 메소드도 객체로 생성되기 때문에 다양한 내장 속성과 내장 메소드 지원
function sum() {
var sum = 0;
for(var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
document.write("sum = " + sum, "<br>");
}
sum(10, 20, 30, 40);
</script>
</body>
</html>
반응형
'💻 1. 웹개발_Front end > 1-4 Javascript' 카테고리의 다른 글
| [Javascript] 05-3 함수 스코프 개념 이해 (0) | 2021.09.12 |
|---|---|
| [Javascript] 05-2 함수에서 return 문의 역할 (0) | 2021.09.12 |
| [Javascript] 04-3 브라우저 객체 모델 (0) | 2021.09.12 |
| [Javascript] 04-2 내장 객체 (0) | 2021.09.12 |
| [Javascript] 04-1 객체 (0) | 2021.09.12 |
댓글