pre-training JavaScript (7) 함수

💻 국비 7 일차

---

📚 함수

•  함수란

• 이름 있는 코드의 블럭
• 코드 블록 ▶ 수행문의 모음  (특별한 기능이 있는 코드들이 모여 있음)

---

• 함수 정의

function 함수이름(){
	실행될 문장 - 수행문
}

---

• 함수 사용 - 함수를 호출한다 / 함수를 실행한다

함수이름();

 

---

• 인자 ( argument )

• 함수를 호출할 때 전달 해야 하는 실제 값

name("Han");	// 전달할 인자 "Han" , 'name' 함수의 매개변수로 "Han"이 전달된다.
gugu(3); 	// 전달 할 인자 2 'gugu'함수의 dan의 매개변수로 전달된다.
gugu(9); 	// 전달 할 인자 9

인자와 인수는 같은 의미로 사용된다.
1 , 3 , 9 가 인수 / 인자 라고 한다

---

• 매개변수 ( parameter )

• 함수 내에서 사용된다.
• 함수의 괄호 안에 지정되는 변수 
• 함수를 호출 시 전달받은 인자/인수 값

// 함수 정의하기 
function gugu(dan){  // 여기서 dan은 매개변수 , 함수 호출시 전달 받은 값
    console.log(dan, "단 을 출력합니다");
 
    for(let i = 1; i <= 9; i++){
        console.log(dan, " * " , i , " = ", dan*i)
    }
};

 

• 점수를 전달받아 총점과 평균을 구하시오

// 국어 영어 수학 점수를 전달받아 총점을 계산하는 함수
function totalScore(kor,eng,math){	// 매개변수 kor , eng , math

    let total = kor + eng + math;
    console.log("총점 : ", total);
}

// 국어 영어 수학 점수를 전달받아 평균을 계산하는 함수
// function averageScore(total){
//     let average = total / 3;
//     console.log("평균 : ",average);
// }

function averageScore(kor,eng,math){
    let total = kor + eng + math;
    let average = total / 3;
    console.log("평균 : ",average);
}

// 총점
totalScore(70,60,90);		// 전달 해줄 인자 / 인수 70,60,90
totalScore(100,90,60);
totalScore(90,60,50);

console.log();

// 평균
averageScore(70,60,90);
averageScore(100,90,60);
averageScore(90,60,50);

---

• return 

• 값을 반환하는 수행문
• 값은 1개만 반환할 수 있다. 
• 함수의 실행을 즉시 종료함

let result = totalScore(100,80,60);

function totalScore(kor,eng,math){
 	let total = kor + eng + math ;
    
    return total;  // return문은 함수의 결과 값을 호출한 코드로 반환 한다.
    // 결과인 total을 줘야하기 때문에 result라고 적으면 안된다
    console.log("이곳은 과연 실행될까?") // return문을 만나면 함수를 즉시 종료해서 실행되지 않는다.
    }

/*
국어 영어 수학 점수를 전달받아서 총점을 반환하는 함수다.
함수명 : totalScore
매개변수: kor , eng , math 각각 국어 , 영어 , 수학점수를 뜻한다
반환 값 : 총점
*/

function totalScore(kor,eng,math){
   // kor + eng + math 합계를 구해서 total 이라는 변수에 저장한다.
   let total = kor + eng + math;

    return total;
}

function averageScore(kor,eng,math){
    // totalScore 함수를 실행해 총점을 반환함 ( 총점 계산 안해도됨 )
    let total = totalScore(kor,eng,math);	// 상위에 totalScore 함수 사용
    let average = total / 3;  // average 값을 전달해야하니
    
    return average;		// 이곳에 average
}


// 총점
console.log("총점 계산하기");
let result1 = totalScore(70,60,90);
let result2 = totalScore(100,90,60);
let result3 = totalScore(90,60,50);

console.log("첫번째 총점 : ",result1);
console.log("두번째 총점 : ",result2);
console.log("세번째 총점 : ",result3);



// 평균
console.log()

let avg1 = averageScore(70,60,90);
let avg2 = averageScore(100,90,60);
let avg3 = averageScore(90,60,50);

console.log("첫번째 평균 :",avg1);
console.log("두번째 평균 :",avg2);
console.log("세번째 평균 :",avg3);

 

📌 추가 내용 

return문을 사용 하게 된다면 함수의 결과 값을 호출한 코드로 반환 하는데
반환된 값은 함수를 호출한 위치에서 ' 다른 연산에 사용 될수 있다 '

function sum(x,y){
 return x + y;
 }
 
 let add = sum(7,2);  // 이렇게 되면 add 변수에 9가 저장이 된다
 console.log(add); // 9 출력
 
 let squard = add * add;
 console.log(squard);	// 9 * 9  = 81 출력.
 
 let divided = add / 2 ;
 console.log(divided);	// 4.5 출력
 
 let increase = add + 17;
 console.log(increase);	// 26 출력

▶ 단순하게 return 없이 함수만 정의 했다면 추후에 다른 연산에 사용 할 수는 없다
     단지 console.log를 찍어 출력만 할수 있다.

---

여기서 부터 조금 복잡하다 나 또한 모든 코드를 이해 하지 못했다 

// 로그인 체크 필터함수 ?
// 매개변수로 userId와 password를 입력받고
function login1(userId , password){
	// 사용자 Id가 없으면 즉시종료
    // id가 없다고 하니 
    // undefined 값이 없다고 한다. - id를 입력을 하지 않았음
	if( userId == undefined){ 
    		console.log("아이디를 입력해주세요");  // 웹 창에서는 alert를 쓰겠지 ?
            return ;  
            }
            
            // userId를 입력했다.
      	let userInfo = getUserInfo(userId);
        // if 문으로 만약 사용자 정보가 비어있으면 즉시종료 
        // 아이디와 일치하는 사용자 정보가 없음, 회원가입 안되있단 소리지
        if(userInfo == null){
        	console.log("가입 되어있지 않습니다");
         	return;
            }
            
        // 조회된 비밀번호와 전달받은 비밀번호가 일치하지 않으면 즉시종료
        if(userInfo.password != password){
        	console.log("비밀번호가 일치 하지 않습니다." );
        	return;
            }
            
            // 이 부분의 실행문이 작동하는 경우는 
            // 1. 아이디를 전달받고 
            // 2. 아이디로 조회한 사용자가 정보가 존재하며
            // 3. 비밀번호가 일치하는 경우에만 로그인 성공
            
   }

 

function login2(userId , password){
    if (userId != undefined){
            let userInfo = getUserInfo(userId);
            if(userInfo != null){
                if(userInfo.password == password){
                    // 로그인 성공함
                    // 이메일 , 쪽지 조회
                    // 홈화면 출력
                }else {
                    console.log("비밀번호 틀림");
                }

            }else {
                console.log("사용자 정보가 존재하지 않습니다");
            }

    } else {
        console.log("아이디를 입력해주세요");
    }
}

 

📌 추가 부분

성인 인증을 하기위한 함수 ?

function checkfilterAdult(age){
	if(age < 0 ){	// 입력한 값이 음수가 될수 없게
     	return false;
        } else if( age <= 19 ) {
        return false;	// 19세 이하 미성년자
        } else  {
        return true;	// 19 초과 성인
        }

 

---

• 다양한 유형의 매개변수

// 다양한 유형의 매개변수


// 숫자값을 인자로 전달받는 함수    
// 숫자 2개를 전달받아서 더 큰값을 반환한다.
function max(num1, num2){
    if(num1 > num2){
        return num1;
    }
    // 위에 if문에 조건이 false 일경우 자동으로 하단 코드로 넘어와 num2 가 반환된다.
    return num2;
}

let max1 = max(20,70);
let max2 = max(60,25);

console.log("큰 값:",max1);
console.log("큰 값:",max2);

// 문자값을 인자로 전달받는 함수
// 매개변수에는 문자값이 저장된다.
// 이름을 전달받아 두번째 글자를 "*" 로 변환한 문자를 반환 한다.


// 사실 여기부터 어렵다 왜냐하면 split 까지는 알고 있지만 그 이후부터는 모르겠다..


 // name 문자열의 각 글자를 배열로 변환합니다.
 // 예: "한기선" -> ["한", "기", "선"]
// 변환된 배열의 각 요소(글자)와 해당 요소의 인덱스에 대해 함수를 실행
// 만약 현재 요소의 인덱스가 1이라면 (즉, 두 번째 글자라면)
// '*'를 반환합니다.
// 인덱스가 1이 아닌 경우, 원래의 글자를 반환합니다.
// 배열의 요소들을 다시 문자열로 합칩니다.
// 예: ["한", "*", "선"] ->  "한*선" 

   function hideName(name){
   return name.split("").map(function(value,index){
        if(index == 1){
            return "*";
        }
        return value;
    }).join ("");
}

console.log(hideName("한기선"));
console.log(hideName("깃허브"));

 

// 배열의 모든 요소의 합계를 계산하는 함수
// 배열을 인자로 전달받는 함수

// 배열객체를 참조하는 주소값을 전달받음
// 주소값을 전달받을 매개변수도 주소값에 해당하는 배열객체

function sum(arr){
// total 이라는 변수를 0으로 초기화 해서 모든 요소의 합계를 저장할 변수로 사용 하겠다.
    let total = 0;
    // 반복문을 사용해 배열의 요소를 순회 한다
    // 횟수는 0부터 arr.length - 1 까지 증가 한다
    // 반복문 내에 total에 현재 arr[index]에 있는 요소의 값을 계속 해서 더해간다.
        for(let index = 0; index < arr.length; index++){
            total += arr[index];
        }
        return total;
}

// 배열 number 정의 하고 배열의 6개의 요소를 할당했다.
let numbers = [10,20,40,60,70,80];
// 위에있는 sum 함수를 호출해서 number에 있는 배열을 인자로 전달했다.
let sumResult = sum(numbers);
// sum함수에 있는 
// 반복문에 의해 10 20 40 60 70 80 총 6회 반복해 total이라는 변수에 계속 더했다.
// 총합은 280이 되었으며
// 출력창에 sumResult : 280 이라고 출력이 되었다.

console.log("sumResult : ",sumResult);



let sumResult2 = sum([30,30,20,30]);
console.log("sumResult2",sumResult2);

 

❗ 대박사건

함수에서 거슬리는 부분이 있다

 let total = 0;  // 여기 부분이 거슬렸다
 
 let total; // 하면 안될까?

답은 0 으로 초기화 를 반드시 해야한다

function sum(arr){
    let total = 0;
    for(let index = 0; index < arr.length; index++){
        total += arr[index];
    }
    return total;
}


// let total; 까지만 하게된다면 total 은 undefined가 된다.
// undefied에 숫자를 더하게 되면 
// 결과 값이 NaN 이 출력이된다.

---

• 지역변수 - Local Variale

• 함수 내부에서 선언된 변수를 지역 변수라고 한다.
• 함수 내에서만 사용이 가능하다
• 함수의 매개변수 또한 지역변수다

function thisLocalVariable(x,y){
// x 와 y는 매개변수로 지역변수다. 

// 함수 내부에 선언된 지역변수
let lv = 10;
let lv2 = "It's me";

// x 와 y lv lv2 모두 함수 내부에서 접근이 가능하다.
console.log(x,y,lv,lv2);
}

thisLocalVariable(17,21);

---

• 전역변수

• 함수 외부에 선언된 변수를 전역변수 라고 한다.
• 코드의 어느 곳에서 사용이 가능하다

// 함수 외부에 선언되었기에 전역변수다
let gv = " This is GV " ;

// x 와 y는 매개변수로 지역변수 성격을 가지고 있다.
function showVariable(x,y){

// 함수 내부에 선언된 지역변수, 함수 밖에서는 접근불가
let lv = 10;
let lv2 = "It's me";

// x 와 y , lv , lv2 모두 함수 내부에서 접근이 가능하다.
console.log(x,lv);
console.log(gv);
}

showVariable(17,21);

// lv , lv2 지역변수는 함수 내부에서만 접근 가능하기에 이처럼 외부에서 
// 출력을 시도하면 ReferenceError: lv is not defined 가 발생한다.
console.log(lv,lv2);