20210930 함수
함수란?
메모리에 코드를 저장 할 수 있는 수단
function이라는 키워드를 사용하여 선언이 가능하다.
함수는 선언 후에 호출이 되어야 저장된 코드가 실행된다.
함수에는 일반함수와 익명함수가 존재한다
함수의 선언
- function를 활용하여 선언한다.
- 일반 함수 구문 : function 함수명 (){}
- 익명 함수 구문 : function(){}
- 익명 함수는 변수에 대입이 가능하다.
- 일반 함수는 호이스팅 기술을 지원한다.
- 호이스팅기술? 함수가 아래 선언되었더라도 상위에서 호출을 할 수 있다.
- 익명함수 호출시에는 익명함수가 호출부 위에 선언이 되어 있어야한다.
- 함수선언시 중괄호를 유효범위 혹은 스코프 라고 한다.
- 함수에서는 전역변수와 지역변수 차별이 확실히다.
일반함수 :
구문 : function 함수명 (){--자바스크립트 코드 --}
- 선언 위치 상관없이 호출이 가능한다.
<script type="text/javascript">
function myFn(){
console.log('myFn호출');
}
</script>결과 : myFn호출
익명함수 :
구문 : 참조변수 = function (){-- 자바 스크립트 코드 -- };
- 선언된 아래에서 호출이 가능하다.
<script type="text/javascript">
var myFn2 = function(){
console.log('myFn2 호출')
}
</script>결과 : myFn2 호출
함수호출 :
- 선언이 되어 있다면 호출이 가능하다.
- 함수명 혹은 참조변수명 뒤에 (); 붙어야 호출이다.
<script type="text/javascript">
// 변수
var str = '홍길동';
//str(); // 잘못된 호출이다. 함수뒤에만 ();를 써야한다.
//선언된 함수명();
myFn(); // 선언된 함수 호출
myFn(); // 선언된 함수 호출
myFn(); // 선언된 함수 호출
//익명함수 호출 -> 변수명 ();
myFn2(); // 선언된익명함수 호출
</script>
지역변수와 전역변수 :
<h2>함수의 지역변수와 전역변수</h2>
<script type="text/javascript">
//전역변수는 함수 내부에서 사용이 가능하다.
var cnt = 0; // 전역변수
//var username = '이순신';
// 전역변수와 지역변수의 명칭이 같더라도 다른 변수이다.
function myFn3(){
//함수 내부에 선언된 변수는 외부에서 사용할 수 없다.
var username = '홍길동'; // 지역변수
console.log(username, '내부에 선언된 name 변수 호출');
cnt++;
console.log(cnt, '호출될 때 마다 전역변수값 변화');
}
console.log(username);
myFn3(); // 호출을 하여야 내부에 작성된 코드가 실행된다.
myFn3(); // 호출을 하여야 내부에 작성된 코드가 실행된다.
myFn3(); // 호출을 하여야 내부에 작성된 코드가 실행된다.
</script>
매개변수 :
- 함수 호출시 값을 함수에 전달할 수 있고
전달된 값을 함수에서 받을 수 있는 변수는 매개변수라고 한다.
<script type="text/javascript">
//매개변수 선언시 var나 let키워드는 제외하고 선언한다.
function myFn(n1, n2){
//구문 : function 함수명(매개변수명, 매개변수명.....){}
console.log(n1, n2);
}
//호출시 값을 함수에 전달할 수 있다. 자리수에 맞게 전달.
//호출시 : 함수명(인자,인자....);
myFn(1, 2);
</script>결과 : 1 2
return :
- 함수를 호출하는 곳에 데이터를 전달
- 함수를 종료
<script type="text/javascript">
function myFn2(n1, n2){
console.log('함수호출');
return n1 + n2; // 호출 한 곳에 연산하여 값을 전달
//return 키워드로 인하여 아래 코드는 실행하지 않고
//함수를 종료
console.log('함수호출2');
}
//값을 전달 받았으므로 변수에 대입가능
var sum = myFn2(10,10);
console.log(sum);
function myFn3(nArray){
console.log(nArray);
}
myFn3([1,2,3]);
//매개변수 nArray에 배열 [1,2,3]을 대입한다.
// nArray = [1,2,3];
</script>결과 : 함수호출
20
Array(3)
재귀호출 :
- 함수 내부에서 자기 자신을 호출하는 방식
<script type="text/javascript">
function myFn4(){
console.log('myFn4호출');
//myfn4() : 함수 내부에서 자기 자신 호출
}
myFn4();
</script>결과 : myFn4호출
익명함수와 일반함수 코드저장
<script type="text/javascript">
function myFn5(){
console.log('myFn5');
}
var myFn6 = function(){
console.log('myFn6');
}
console.log(myFn5);
console.log(myFn6);
var myFn7 = myFn5;
console.log(myFn7);
</script>
<script type="text/javascript">
function myFn8(fn){
//2. 인자로 받는 값은 익명함수로 인수가 넘어왔으므로 함수이다.
console.log(fn, typeof fn);
if(typeof fn == 'function'){
fn();
//3. 함수이므로 실행 시킬수가 있다.
//4. 실행을 시켰으므로 인수값으로 넘어온 내부코드가 실행된다.
}
}
//1. 함수를 실행하면서 익명함수를 인수에 삽입
myFn8(function(){
console.log('안녕하세요');
});
</script>
1. console.log(fn, typeof fn); 의 결과 :
2. if (typeof fn == 'function') {
fn();
}
의 결과 : 안녕하세요
내부 함수
- 함수 내에 선언된 함수
<script type="text/javascript">
var myFn9 = function(){
var myFn10 = function(){
//함수 내에서도 중복코드가 발생
//외부에서 쓰일필요가 없을 경우
//지역함수
console.log('myFn10');
};
myFn10();
};
myFn9();
</script>결과 : myFn10
함수 즉시(선언과 동시) 실행하기
<script type="text/javascript">
(function(myName){
console.log('함수 즉시 실행', myName);
})// -> 함수 선언
('홍길동'); // 선언된 함수 실행
</script>결과 : 함수 즉시 실행 홍길동
메서드와 함수 차이 :
메서드 : 오브젝트.메서드명( )
nArray.push();
함수 : 함수명( )
print();
실습
1. 실습. print 함수를 호출하였다.
호출 후 결괏값이 '한국스마트정보교육원' 문구가 출력되었다.
위의 결괏값이 나오도록 함수 선언과 호출을 하도록 하여라.
<script type="text/javascript">
function print(){
console.log('한국스마트정보교육원');
}
print();
</script>결과 : '한국스마트정보교육원'
2. 실습. sum이라는 함수를 호출하면서 인수 2개의 숫자를 전달하였더니
출력 결괏값이 10이 나왔다. 위의 결괏값이 나오도록 선언과 호출을 하도록 하여라.
(인자값을 합산하여 10)
<script type="text/javascript">
function sum(n1, n2){
console.log(n1+n2);
}
sum(1, 9);
</script>결과 : 10
3. 실습. arrSum 이라는 함수를 호출하면서 배열 인수를 넣어 삽입하였더니
배열의 원소를 전체합산한 결괏값이 리턴되었다. 위의 내용대로 코드를
작성하여 결괏값을 출력하여라.
[10,20,30,40,50];
<script type="text/javascript">
function arrSum(nArray){
console.log(nArray)
var sum = 0;
for(var i=0; i<nArray.length; i++){
sum += nArray[i];
}
return sum;
}
var sum = arrSum([10,20,30,40,50]);
console.log(sum);
</script>결과 : 150
4. 실습. myArray 이라는 함수를 실행시키면서 숫자가 배열을 인수로 삽입하였다.
그의 결괏값이 짝수 배열이 출력되었다.위의 설명대로 코드를 작성하고 실행하여라.
[1,5,6,8,11,16]; -> 코드 실행 후[6,8,16];
<script type="text/javascript">
function myArray(n1){
var n3 = [];
for(var i =0; i< n1.length; i++){
if(n1[i] %2 == 0){
n3.push(n1[i]);
}
}
return n3;
}
var result = myArray([1,5,6,8,16]);
console.log(result);
</script>
//리턴 예제
<script type="text/javascript">
function myArray(n1){
var n3 = [];
for(var i =0; i< n1.length; i++){
if(n1[i] %2 == 0){
n3.push(n1[i]);
}
}
return n3;
}
var result1 = myArray([1,5,8,16]);
var result2 = myArray([1,5,16]);
var result3 = myArray([1,6,8,16]);
console.log(result1);
console.log(result2);
console.log(result3);
</script>