1. ★★★★★ 함수는 별이 다섯개 ★★★★★
지금까지 배운 자바스크립트에 대한 내용은 이제 시작이라고 말할 수 있다.
왜냐하면 함수를 배우지 않았기 때문이다.
그런데!
사실 우리는 함수를 자주 사용해왔다.
대체 우리가 언제 써왔는지, 함수에 대해 배워가면서 알게 될 것이다.
함수는 자바 스크립트에서는 function, 자바에서는 method라고 불린다.
이 함수는 아주! 아주! 중요한 영역이다.
비쥬얼 스튜디오를 사용하여 무언가 코딩을 할 때 자동완성기능으로 나오는 것들의 대부분이 바로 함수들이다.
그래서 중요한 함수의 문법들은 외우는 것이 기본이다.
외울 준비, 외울 각오!!!
강렬히 하고 시작해보자.
2. 함수의 기본 특징
1) 함수는 함수마다 일정한 기능을 갖고 있다.
2) 함수는 우선 정의를 내리고(작성하고) 그 후에 필요할 때 함수를 호출하는 방식으로 사용한다.
함수를 정의내리기 위해선 함수의 이름(식별자)을 붙이고 그 내용을 채운다.
function 함수명 () {}
우리가 아주 아주 자주 쓰던 그 함수로 예를 들어보자.
document.write()이 document.write 함수는 () 값을 웹브라우저 본문 영역에 출력하라는 함수라는 것!
기억해두자.
3. 함수 작성시 고려해야할 점
1) 매개변수(parameter)가 있는가?
2) 리턴값(return)이 있는가?
이 두 가지가 무엇인지는 함수에 대해 더 알아가며 알아가보자.
4. 함수, 만들어보며 배워보자
1) 일단 만들어보기
우선 아래와 같이 test1, test2 함수를 만들었다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>05_함수.html</title>
</head>
<body>
<h3>사용자 정의 함수</h3>
<script>
function test1() {
document.write("KOREA")
} // test1 end
function test2() {
document.write("SEOUL")
} // test2 end
</script>
</body>
</html>
이대로 출력하면 어떻게 될까.
아무 것도 뜨지 않는다.
아무것도 뜨지 않는 이유는 함수를 정의내렸지만 호출하진 않았기 때문이다.
이제 호출을 해보자!
test1();
test1();
test2();
test1();
2) 전달값이 없는 함수
그런데 여기서 함수 안에 값을 채워넣으면 어떻게 될까?
함수에 따라 값을 채워넣어야지 함수가 작동되는 경우가 있다.
여기서 괄호안에 채워넣는 값을 전달값이라고 부른다(argument value).
위에서 만든 함수는 전달값이 없는 함수이다.
3) 전달값이 있는 함수
그러면 이제 전달값이 있는 함수를 만들어보자.
function test3(a) {
document.write(a)
}test3 이란 함수에는 a라는 변수가 들어있다.
여기서 이 a가 바로 매개변수(parameter)이다.
이 매개변수는 자료형이 없다.
함수 안에 있는 내용에 따라 바뀌는 변수이기 때문이다.
그래서 test3(a)를 let a, var a, const a 와 같이 선언하면 오류가 나게 된다.
또한 전달값은 1개 이상 가능하다.
function test4(a, b, c) {
document.write(a+b+c);
} // test4 end위와 같이 test4 함수는 a, b, c의 전달값을 갖고 있다.
이렇게 전달값에 복수의 값을 지정해주는 것도 가능하다.
5. 연습문제
#기호를 100번 출력하기
test5("#", 100)
function test5(a, b) {
for(let i=0; i<=b; i++) {
document.write(a);
}
document.write("<br>")
}
6. 리턴값(return)
1) 리턴값 만들어보기
test1(a) 는 test1로 지정해두었던 함수 값으로 이동했다가 다시 test1(a)로 돌아온다.
즉, 함수는 호출한 시점으로 다시 돌아오게 되어있다.
이 것을 우리는 리턴(return)이라고 부르며 돌아온 값을 리턴값이라고 부른다.
리턴값은 1개만 가능하며 형식은 아래와 같다.
return 값
이 리턴 값은 주지 않아도 되고, 받고 싶은 값이 있다면 값을 입력하면 된다.
아래의 test1 함수를 살펴보자.
function test1() {
document.write("SEOUL");
return; // 호출 시점으로 되돌아간다.
// 맨 마지막 return은 생략 가능하다.
}위에서 사용했던 함수와 크게 다르지 않다.
사실 맨 마지막 return;은 생략해도 무방하다.
이제!
test2로 리턴을 만들어보자.
function test2(a) {
if (a<0) {
return;
}
document.write(a);
} // test2() end여기서 test2() 안에 음수를 넣으면 값을 출력하지 않고 return하여 돌아가게 된다.
결국 아무것도 출력되지 않는다.
다음으로는 test3으로 리턴 값을 따로 지정해보자.
function test3(a, b) {
let c=a+b;
return c;
}여기에 test3(6, 7)을 입력하면 c의 값에 6+7인 13이 들어가게 되고, return c로 c의 값인 13이 리턴되게 된다.
이 test3(6, 7)에 리턴된 값을 어떻게 활용하는 가는 이제 우리의 몫이 되었다.
이번에는 그냥 출력을 해보려 한다.
let result=test3(6, 7);
document.write(result);
위의 코드를 출력하면 test3(6, 7)의 값인 13이 출력된다.
2) 리턴값은 하나의 값이다
document.write(result); // 변수값
document.write(13); // 상수값
document.write(test3(8, 9)); // 함수의 리턴값지금까지 우리는 변수나 상수의 값을 결과로 도출했었다.
함수에 리턴값이 생긴다는 것은 그 자체만으로도 하나의 값이 될 수 있다는 뜻이다.
위의 코드를 보면서 이 부분을 잘 이해하기를 바란다.
7. 재귀적 함수 호출 : 자신이 자신의 함수를 호출할 수 있다.
재귀적 함수 호출은 이름은 어렵더라고 프로그래밍 과정에서는 굉장히 많이 쓰이는 개념이다.
무한루프로 빠지는 것이 아니라 자신을 자신의 함수로 직접 사용하는 것이다.
아래의 코드를 살펴보자.
document.write(test(3)); // 3팩토리얼 값 구하기
function test(f) {
if(f==0){
return 1;
} else {
return f*test(f-1); // test(); 자신의 함수를 호출할 수 있다.
}
} //test() end
document.write("<hr>");
여기서 else 값에서 test(f-1)를 직접 호출한다.
이것을 재귀적 함수 호출이라고 말한다.
아래의 코드를 통해 위의 코드가 어떻게 진행되는지 살펴보자.
if(3==0)
else
3 * test(3-1)
if(2==0)
else
2 * test(2-1)
if(1==0)
else
1 * test(1-1)
if(0==0) 1이 코드는 3 * 2 * 1 * 1 의 결과인 6이 출력된다.
'⁂ Java Script > : 기본 익히기' 카테고리의 다른 글
| [JS] #6-3 함수(Function) : 변수의 유효 범위(Scope) (0) | 2022.08.11 |
|---|---|
| [JS] #6-2 함수(Function) : 내장 객체(Object) (0) | 2022.08.11 |
| [JS] #5 Date 객체 (0) | 2022.08.10 |
| [JS] #4-3 정렬(Sort) (0) | 2022.08.09 |
| [JS] #4-2 배열에서 사용되는 메소드(Method) (0) | 2022.08.09 |