고래씌
[JavaScript] 7. 함수 본문
1. 선언적 함수
[표현법]
function 함수명(매개변수, 매개변수, ...) {
해당함수 호출시 실행할 소스코드;
return 결과값;
}
- 매개변수가 없는 경우 매개변수 생략가능
- 반환할 결과 값이 없는 경우 return 결과값도 생략 가능
■ 07_함수.html
<button onclick="test1();">확인</button>
<div id="area1" class="area"></div>
<script>
// 함수를 선언적으로 사용하는 방법
function test1(){
area1.innerHTML += `TEST1()실행됨<br>`;
}
area1.innerHTML += `함수선언식 : ${fnTest0(1,2)}<br>`;
// 함수 호이스팅 적용 => 에러 발생X
// 함수선언적으로 사용하는 것은 내부적으로 맨 위에 선언하게 된다.
// 그래서 area1.innerHTML이 위에 있어도 에러가 발생하지 않는다.
function fnTest0(a,b){
return a+b;
}
// 함수 호이스팅 적용 X => 에러 발생
// 함수 표현식 같은 경우 함수 호이스팅 적용이 안됨.
// 그래서 area1.innerHTML이 위에 있다면 에러 발생한다.
const fnTest = new Function("a", "b", "return a+b");
const fnTest2 = function(a,b){
return a+b;
}
area1.innerHTML += `new Function : ${fnTest(1,2)}<br>`;
area1.innerHTML += `function(a,b) : ${fnTest2(2,2)}<br>`;
</script>
▶ 함수를 선언적으로 사용하는 방법
|
function test1(){
area1.innerHTML += `TEST1()실행됨<br>`;
}
|
|
area1.innerHTML += `함수선언식 : ${fnTest0(1,2)}<br>`;
function fnTest0(a,b){
return a+b;
}
|
=> 출력문이 더 앞에 있어도 이 코드는 에러가 발생하지 않는다!
☞ 함수를 선언적으로 사용하는 것은 내부적으로 맨 위에 선언하게 된다. 그래서 area1.innerHTML이 위에 있어도 에러가 발생하지 않는다!
=> 함수 호이스팅 적용이 되므로 에러가 발생하지 않는다.
▶ 함수 표현식
|
area1.innerHTML += `new Function : ${fnTest(1,2)}<br>`;
area1.innerHTML += `function(a,b) : ${fnTest2(2,2)}<br>`;
const fnTest = new Function("a", "b", "return a+b"); const fnTest2 = function(a,b){
return a+b;
}
|
=> 위 코드 같은 경우 에러가 발생한다.
☞ 함수 표현식 같은 경우 함수 호이스팅 적용이 안된다!
☞ 그래서 area1.innerHTML이 위에 있다면 에러 발생
2. 익명 함수
[표현법]
function(매개변수, 매개변수){
소스코드;
}
=> 특정 변수나 속성에 대입되는 함수 제시시 사용된다.
▶ 익명 함수란?
- 자바스크립트 익명 함수는 함수명 대신 변수명에 함수 코드를 저장하는 구현 방식이다.
- 익명 함수의 소스 코드는 변수값이므로 끝에 세미콜론 ; 을 대입한다. 익명 함수는 호출 시 변수명을 함수명처럼 사용하면 된다.
■ 07_함수.html
<button id="btn">실행확인</button>
<div id="area2" class="area"></div>
<script>
btn.onclick = function() {
// 이벤트속성들에 대입되는 function == 이벤트 핸들러
area2.innerHTML += '이벤트속성에 익명함수로 호출함<br>'
}
let sayHi = function(name) {
console.log(name+"님 안녕하세요..!");
}
</script>
3. 함수의 매개변수
■ 07_함수.html
<button onclick="test3('안녕하세요')">확인1</button>
<button onclick="test3(100)">확인2</button>
<button onclick="test3([1,2,3])">확인3</button>
<button onclick="test3(true)">확인4</button>
<button onclick="test3( prompt('너의 이름은? '))">확인5</button>
<button onclick="test3(10, 'whale', '반갑소')">확인6</button>
<button onclick="test3()">확인7</button>
<div id="area3" class="area"></div>
<script>
// 매개변수 제시시 자료형지정 x, var, let, const 키워드 제시 X
// 변수명만 넣어도 ok!
// 자바스크립트는 오버로딩이 없기 때문에 함수명이 같으면 마지막으로 선언된 함수를 찾아간다.
function test3(value = 1){ // 매개변수에 기본값 지정
area3.innerHTML += value;
}
function test3(value1, value2, value3) {
area3.innerHTML += value1 + value2 + value3;
}
</script>
☞ 매개변수 제시시 자료형 지정 X => var, let, const 키워드 제시 X
☞ 변수명만 넣어도 OK !
☞ 자바스크립트는 오버로딩이 없기때문에 함수명 같으면 마지막으로 선언된 함수를 찾아간다.
|
function test3(value = 1){ // 매개변수에 기본값 지정
area3.innerHTML += value;
}
function test3(value1, value2, value3) {
area3.innerHTML += value1 + value2 + value3;
}
|
☞ 확인1을 클릭했을 때 " 안녕하세요undefinedundefined " 출력된다. 오버로딩이 없기 때문에 함수명이 같으면 마지막으로 선언된 함수로 찾아가기 때문에 test3(value1, value2, value3) 함수로 찾아간다.
[결과]
☞ 확인1 클릭 => 안녕하세요undefinedundefined 출력
☞ 확인2 클릭 => NaN 출력
☞ 확인3 클릭 => 1,2,3undefinedundefined 출력
☞ 확인4 클릭 => NaN 출력
☞ 확인6 클릭 => 10whale반갑소 출력
☞ 확인7 클릭 => NaN 출력
☞ 확인5 클릭 =>
▶ 만약, test3(value=1)이 맨아래에 있다면...?
|
function test3(value1, value2, value3) {
area3.innerHTML += value1 + value2 + value3;
}
function test3(value = 1){ // 매개변수에 기본값 지정
area3.innerHTML += value;
}
|
[결과]
☞ 확인1 클릭 => 안녕하세요 출력
☞ 확인2 클릭 => 100 출력
☞ 확인3 클릭 => 1,2,3 출력
☞ 확인4 클릭 => true 출력
☞ 확인5 클릭 => "이고래"를 입력했다면.... 이고래 출력
☞ 확인6클릭 => 10 출력된다. (넣은 값은 10,whale,반갑소인데 뒤에는 무시하고 10만 출력된다)
☞ 확인8클릭 => 1 출력. => 전달된 값이 없기 때문에 기본값이 지정된 1이 출력되는 것
※ 정리
- 정의해둔 매개변수 개수보다 더 많아도 전달하는데 문제없다.
- 단, 추가로 전달된 값들은 무시가 된다.
- 정의해둔 매개변수가 개수보다 더 적게 전달도 가능하다.
- 단, 매개변수에 전달된 값이 없기 때문에 undefined가 저장된다.
4. 매개변수 관련 arguments 배열
- 함수 호출 시 전달되는 값은 내부적으로 arguments 배열에 담김.
- * arguments : 모든 함수마다 내부적으로 하나씩 존재하는 배열객체
■ 07_함수.html
<button onclick="test4(11, 12, 1, 5, 7)">확인</button>
<div id="area4" class="area"></div>
<script>
function test4(){
console.log(arguments);
// arguments 배열의 모든값을 더해서 div에 출력.
let sum = 0;
for(let i=0; i<arguments.length; i++){
sum += arguments[i];
}
area4.innerHTML += `총합 : ${sum}<br>`;
area4.innerHTML += `평균 : ${sum/arguments.length}<br>`;
}
</script>
5. 매개변수에 있는 함수에 this 관련 전달하기
■ 07_함수.html
<!-- 버튼자체의 주소값이 전달됨.(버튼 요소가 전달된다) -->
<button onclick="test5(this)">버튼1</button>
<button onclick="test5(this.innerHTML)">버튼2</button>
<input type="button" value="버튼3" onclick="test5(this.value)">
<button id="btn" onclick="test5(this.id)">버튼4</button>
<button id="btn2">버튼5</button> <!-- btn2.onclick = function() 함수가 호출됨 -->
<!-- <button id="btn2" onclick="test8()">버튼6</button> window 객체가 반환됨. undefined 출력됨 -->
<script>
function test5(element){
console.log(element);
}
function test8(){
console.log(this.id); // window 객체가 반환됨
}
// click 이벤트가 실행됐을 때 click함수 대신에 내가 정의한 것이 실행됨
btn2.onclick = function(){
console.log(this.id); // this == btn2
}
// btn2.onclick = test8; // 버튼6의 id값을 test8()함수를 호출하여 출력하고 싶을 경우 사용
</script>
▶ 버튼 1, 2, 3, 4, 5
|
<script>
function test5(element){
console.log(element);
}
function test8(){
console.log(this.id); // window 객체가 반환됨
}
// click 이벤트가 실행됐을 때 click함수 대신에 내가 정의한 것이 실행됨
btn2.onclick = function(){
console.log(this.id); // this == btn2
}
|
☞ 버튼 1의 경우, 버튼자체의 주소값이 전달되어 <button onclick="test5(this)">버튼</button>이 출력된다.
☞ 버튼 4의 경우, button의 id값인 btn이 출력된다.
☞ 버튼 5의 경우, btn2.onclick 으로 이동되어 실행되므로 btn2 값이 출력된다.
▶ 버튼6
|
<button id="btn2" onclick="test8()">버튼6</button>
|
|
function test8(){
console.log(this.id); // window 객체가 반환됨
}
|
☞ 하지만 버튼6을 클릭하게 되면 undefined가 출력이 된다.
☞ 그 이유는 클릭을 하였을때 test8()로 이동을 하지만, consle.log(this.id); 있는 것이 window 객체의 값이 반환되기 때문에 undefined가 출력이 되는 것이다.
6. 일반적인 값 리턴
■ 07_함수.html
<button onclick="test6();">확인</button>
<div id="area6" class="area"></div>
<script>
// 1~100사이의 랜덤값 구해서 반환해주는 함수 만들기
function ran(){
return parseInt(Math.random() * 100 + 1);
}
function test6(){
area6.innerHTML += `랜덤값 : ${ran()}<br>`;
}
</script>
7. 함수를 리턴하는 함수(고차함수)
■ 07_함수.html
이름 : <input type="text" id="userName">
<button onclick="test7()()()">check</button>
<script>
function test7(){
const name = userName.value;
console.log(name);
const a = function(){
const b = function(){
alert(name);
}
return b;
}
return a;
}
// let sum = (a) => (b) => (c) => a+b+c;
</script>
☞ 함수가 함수를 반환하고 함수가 함수를 반환하는 구조로 이루어져 있다!
'Front-End > JavaScript' 카테고리의 다른 글
| [JavaScript] 9. 객체 ② (객체 배열, 생성자 함수, 날짜 함수) (0) | 2023.11.10 |
|---|---|
| [JavaScript] 8. 객체 ① (객체의 선언, in과 with 키워드, 반복문, 메소드 속성, 추가 및 제거) (0) | 2023.11.10 |
| [JavaScript] 6-2. 배열 반복문 (0) | 2023.11.10 |
| [JavaScript] 6-1. 배열 (1) | 2023.11.09 |
| [JavaScript] 계산 실습문제 (0) | 2023.11.09 |
