** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요!
https://www.youtube.com/watch?v=gfFCPE0E9qM
1. 함수
- 함수는 코드의 집합입니다. 특정 작업을 수행하도록 설계된 코드블록{ }입니다.
f(x);- 수학적 함수 기호입니다. x값이 변함에 따라 결과값이 바뀌는 것을 함수라고 한다고 수학시간에 배웠습니다.
- 기능은 f인 해당 함수가 하고 x인 매개변수의 값에 따라 결과값이 바뀌는 것, 그것을 함수라고 합니다.
1) 선언적 함수 문법
- 선언적 함수라는 것은 함수를 선언하는 부분과 호출하는 부분을 나눠서 작업하는 것을 의미합니다.
## 함수의 선언 문법1 - 함수타입
function 함수명(매개변수1, ...){
//코드의 집합
}
## 함수의 선언 문법1 - 변수타입
var 변수명 = function(매개변수1,...){
//코드의 집합
}
## 함수의 호출
함수명();- 함수 호출은 선언에 담기 명령을 실행할 때 사용합니다.
- 초기부터 바로 실행할수도 있고, 이벤트 발생시 실행할 수도 있고, 다른 코드에 의해 호출될 수도 있습니다.
2) 선언적 함수 예시
## 함수선언
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 함수</title>
<script>
//함수선언 - 생각만 하고 있는 상태
function coffee(){
alert('교실나가기');
alert('엘레베이터타기');
alert('스타벅스에 간다');
alert('아메리카노를 주문한다');
alert('맛있게 마신다');
}
</script>
</head>
<body>
</body>
</html>- 위에서 많은 경고창을 띄우고 있지만 실행해보면 실행되지 않는 것을 확인할 수 있습니다.
## 함수실행 - 초기에 바로 실행
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 함수</title>
<script>
//함수선언 - 생각만 하고 있는 상태
function coffee(){
alert('교실나가기');
alert('엘레베이터타기');
alert('스타벅스에 간다');
alert('아메리카노를 주문한다');
alert('맛있게 마신다');
}
//함수실행
coffee();
</script>
</head>
<body>
</body>
</html>
## 이벤트로 실행 - 버튼클릭
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 함수</title>
<script>
//함수선언 - 생각만 하고 있는 상태
function coffee(){
alert('교실나가기');
alert('엘레베이터타기');
alert('스타벅스에 간다');
alert('아메리카노를 주문한다');
alert('맛있게 마신다');
}
</script>
</head>
<body>
<button onclick="coffee()">쉬는시간</button>
</body>
</html>
2. 매개변수
1) 매개변수 의미와 문법
- 매개변수는 함수를 선언하는 곳과 실행하는 곳의 매개가 되는 변수를 의미합니다.
## 함수 선언
function 함수명(매개변수1, 매개변수2,...){
//코드의 집합
}
## 함수 호출
함수명(매개변수1, 매개변수2, ...);
2) 매개변수 예시
- 위에서 커피전문점에서 커피를 사는 함수를 만들었습니다.
- 하지만 항상 [스타벅스], [아메리카노]를 마실 이유는 없습니다.
- 함수의 매개변수를 통해 커피사는 것을 다양하게 변경할 수 있습니다.
## 코드 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 함수</title>
<script>
function coffee(menu, shop){
alert('교실나가기');
alert('엘레베이터타기');
alert(shop + '에 간다');
alert(menu + '를 주문한다');
alert('맛있게 마신다');
}
</script>
</head>
<body>
<input type="button" value="아메리카노" onclick="coffee(this.value,'스타벅스')">
<input type="button" value="카페라떼" onclick="coffee(this.value,'커피빈')">
<input type="button" value="카라멜마끼아또" onclick="coffee(this.value,'할리스')">
</body>
</html>- 위에 보면 [menu]와 [shop]이라는 매개변수를 만들었습니다.
- 그리고 버튼에 따라 다르게 처리되도록 설정하였습니다.
## 코드 결과
- 버튼을 무엇을 누르냐에 따라 메뉴와 커피전문점이 바뀌는 것을 확인할 수 있습니다.
3. return(리턴) 키워드
1) 값을 새롭게 반환
## 문법
function f(매개변수){
return 매개변수를 활용한 수식 혹은 값;
}- 위의 return 키워드는 매개변수를 활용해서 사용된 수식값을 반환하라는 의미입니다.
## 예시 코드 - 제곱값구하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 함수</title>
<script>
//사용자에게 정수를 입력받음
var num = prompt('제곱을 구할 정수를 입력하세요');
//제곱을 구하는 함수
function square(x){
return x * x; //return : 값을 반환하라는 키워드
}
alert('결과 : ' + square(num));
</script>
</head>
<body>
</body>
</html>
## 코드 결과
- 원래의 매개변수 숫자를 새롭게 제곱값으로 반환하는 것을 확인할 수 있습니다.
2) 함수의 종료
## 문법
function 함수명(){
표현식1;
return;
표현식2;
}- 위의 return키워드는 뒤에 매개변수로 사용될 것도 없고, 일반적인 변수나 값도 없습니다.
- 저렇게 사용되는 경우는 함수를 선언하는 중에 실행하는 곳으로 반환하라는 의미입니다.
- 그래서 표현식1은 실행이 되고 표현식2는 실행되지 않습니다.
## 예시 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 함수</title>
<script>
//변수식으로 함수선언
var test = function(){
alert('테스트1');
alert('테스트2');
return;
alert('테스트3');
alert('테스트4');
alert('테스트5');
}
//함수호출
test();
</script>
</head>
<body>
</body>
</html>
## 코드 결과
- 테스트1과 테스트2까지만 반환되고 뒤의 코드는 실행되지 않는 것을 볼수 있습니다.
'웹언어 > JAVASCRIPT' 카테고리의 다른 글
| [JS강좌] 9강 자바스크립트 객체와 생성자함수 - 오쌤의 니가스터디 (0) | 2020.11.30 |
|---|---|
| [JS강좌] 8강 자바스크립트 내장함수 - 오쌤의 니가스터디 (2) | 2020.11.29 |
| [JS강좌] 6강 자바스크립트 반복문 - 배열과 for in문 - 오쌤의 니가스터디 (2) | 2020.11.27 |
| [JS강좌] 5강 자바스크립트 반복문 - 오쌤의 니가스터디 (0) | 2020.11.26 |
| [JS강좌] 4강 자바스크립트 조건문 switch, 삼항연산자, 짧은 조건문 - 오쌤의 니가스터디 (0) | 2020.11.25 |
