1. 함수 - f(x);
- 함수는 코드의 집합이다. (특정 작업을 수행하도록 설계)
- 기능은 f인 해당 함수가 하고 x인 매개변수의 값에 따라 결과값이 바뀌는 것을 함수라고 한다.
1) 선언적 함수 문법
- 선언적 함수라는 것은 함수를 선언하는 부분과 호출하는 부분을 나눠서 작업하는 것을 의미한다.
💡 함수의 선언 문법 1 - 함수타입
<script>
function 함수명(매개변수1, ...){
//코드의 집합
}
</script>💡 함수의 선언 문법 2 - 변수타입
<script>
var 변수명 = function(매개변수1,...){
//코드의 집합
}
</script>💡함수의 호출
<script>
함수명();
</script>- 함수 호출은 선언에 담기 명령을 실행할 때 사용한다.
- 초기부터 바로 실행 가능하고, 이벤트 발생시 또한 실행가능하며 다른 코드에 의해 호출될 수도 있다.
1) 선언적 함수 예시
✏️ 함수선언 (생각만 하는 상태)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 함수</title>
<script>
function friend(){
alert('집 밖으로 나간다');
alert('친구를 만난다');
alert('카페에 간다');
alert('아메리카노를 주문한다');
}
</script>
</head>
<body>
</body>
</html>- 많은 경고창을 작성했지만 실행이 되지 않는다.
✏️ 함수실행 - 초기실행
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 함수</title>
<script>
function friend(){
alert('집 밖으로 나간다');
alert('친구를 만난다');
alert('카페에 간다');
alert('아메리카노를 주문한다');
}
friend();
</script>
</head>
<body>
</body>
</html>
- 초기 실행을 통해 바로 실행된다.
✏️ 함수실행 - 이벤트실행 (버튼클릭)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 함수</title>
<script>
function friend(){
alert('집 밖으로 나간다');
alert('친구를 만난다');
alert('카페에 간다');
alert('아메리카노를 주문한다');
}
</script>
</head>
<body>
<button onclick="friend()">주말에 할 일</button>
</body>
</html>🖥️ 결과
- 초기에는 실행되지 않고 버튼을 클릭했을 때 실행된다.
2. 매개변수
1) 매개변수 의미와 문법
- 매개변수는 함수를 선언하는 곳과 실행하는 곳의 매개가 되는 변수를 의미한다.
💡 함수 선언
<script>
function 함수명(매개변수1, 매개변수2,...){
//코드의 집합
}
</script>💡 함수 호출
<script>
함수명(매개변수1, 매개변수2, ...);
</script>2) 매개변수 예시
- 위에서는 카페에 가서 아메리카노를 마셨지만, 항상 그럴 이유는 없다.
- 함수의 매개변수를 통해 다양하게 변경할 수 있다.
✏️ 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 함수</title>
<script>
function friend(what, where){
alert('집 밖으로 나간다');
alert('친구를 만난다');
alert(where + '에 간다');
alert(what + '를 주문한다');
}
</script>
</head>
<body>
<input type="button" value="아메리카노" onclick="friend(this.value,'스타벅스')">
<input type="button" value="마제소바" onclick="friend(this.value,'백소정')">
<input type="button" value="허니콤보" onclick="friend(this.value,'교촌치킨')">
</body>
</html>
- [what]과 [where] 이라는 매개변수를 만들고, 버튼에 따라 다르게 처리되도록 설정하였다.
🖥️ 결과
- 어떤 버튼을 클릭하느냐에 따라 장소와 메뉴가 바뀌는 것을 확인할 수 있다.
3. return 키워드
1) 값을 새롭게 반환
📌 문법
<script>
function f(매개변수){
return 매개변수를 활용한 수식 혹은 값;
}
</script>- return 키워드는 매개변수를 활용해서 사용된 수식값을 반환하라는 의미이다.
✏️ 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 함수</title>
<script>
var num = prompt('제곱을 구할 정수를 입력하세요');
function square(x){
return x * x;
}
alert('결과 : ' + square(num));
</script>
</head>
<body>
</body>
</html>🖥️ 결과
- 원래의 매개변수 숫자를 새롭게 제곱값으로 반환하는 것을 확인할 수 있다.
2) 함수의 종료
📌 문법
<script>
function 함수명(){
표현식1;
return;
표현식2;
}
</script>- 위의 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까지만 반환되고 return 밑에 작성된 나머지 코드는 실행되지 않는 것을 볼 수 있다.
중국어랑 코딩하기 (❛ ֊ ❛„)