JavaScript 8일차 정리 [ 함수 ]

함수

 

값을 전달받아서 출력하는게 함수

함수의 정의

function 함수명(매개변수){
	수행문;
}

 

함수의 사용(함수의 호출)

함수명();

---

매개변수 : 함수 호출시 전달받은 인자값을 저장하는 변수

 

함수와 메소드의 차이

 

함수 : 이름있는 코드블럭. 메서드를 포함하고 있다

 

메소드 : 클래스, 구조체, 열거형에 포함되어 있는 함수를 메소드라고 부른다

---

 

함수를 정의하고 호출하는 예제코드 및 출력결과

 

function gugudan() {
    let dan = 3;
    for (let i =1; i<=9; i++){
        console.log(dan+" * " + i +" = " + dan*i);
    }
}
// 함수의 실행
gugudan();

위 코드는 예제코드에 있는 gugudan 함수를 나타내는 코드이다.

출력결과에는 나와있지 않지만 함수 호출을 하면 함수 안에 반복문인 for문을 통하여 구구단 3단을 출력 하게 된다.

 

// 매개변수의 값에 따라 달라지는 구구단을 호출하는 함수
function gugu(dan) {
    console.log(dan + "을 출력합니다.");
    for (let i =1; i<=9; i++){
        console.log(dan+" * " + i +" = " + dan*i);
    }
}
gugu(4);
gugu(5);

gugudan 함수 밑에 있는 gugu 함수는 매개변수 dan을 통하여 dan에 들어오는 매개변수에 따라 다른 값을 출력하게 된다

예제코드와 같이 gugu(4) 는 4단 출력을 gugu(5)는 5단 출력을 하게 된다.

 

 

 

매개변수를 여러개 받는 함수

매개변수를 여러개 받는 함수 예제 및 출력결과

 

함수를 정의할때 매개변수를 여러개 받는다고 정의하면 매개변수를 여러개 받는 것도 가능하다.

 

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

totalScore(100, 100, 100);
totalScore(70, 90, 80);
totalScore(50, 35, 77);

만약 함수 매개변수 3개를 넣어야 한다고 선언했지만 3개를 넣어주지 않으면 어떻게 출력이 될까?

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

totalScore(100, 100, );
totalScore(70, 90, 80);
totalScore(50, 35, 77);

매개변수를 충족시키지 않았을 때의 출력결과

위처럼 totalScore(100, 100, ) 세번째 매개변수 값에 아무것도 넣지않는다면 이러한 결과가 출력되게 된다

 

 

console.log( ) 안에 함수 호출하는 것도 가능.

꼭 함수 안에 출력문을 작성하지 않아도 괜찮고

console.log( ) 안에다가 함수 호출을 해서 바로 화면에 출력을 하는 것도 가능하다.

 

---

return 문 

 값을 반환한다. ( 무조건 1개만 반환. 함수의 실행을 즉시 종료시킨다 )

 

return문이 하는 역할 2가지

1. 함수의 즉시 종료
2. 값의 반환

---

 

다양한 유형의 매개변수

매개변수 타입이 정수인 함수

그동안은 매개변수를 항상 숫자로만 받아왔지만 꼭 매개변수가 숫자일 필요는 없다

위 코드는 비교연산자를 통하여 두 개의 매개변수 중 더 큰 값을 출력하게 만드는 함수이다.

위 코드에 대한 결과

결과는 이렇게 나오게 된다

 

 

매개변수 타입이 글자인 함수

 

매개변수 name을 글자로 입력받아 글자 값의 인덱스 1에 해당하는 글자를 *로 바꾸는 함수이다.

인덱스는 0부터 시작하기 때문에 결과 값은 이렇게 출력이 된다.

 

 

 

매개변수 타입이 배열인 함수

 

매개변수 타입이 배열이고, 함수 안에 있는 반복문을 통하여 매개변수로 받은 배열의 값을 다 더하는 함수다.

변수 result2 처럼 함수의 호출과 대입도 같은 줄에서 할 수 있다

 

결과 값은 이렇게 출력된다

 

매개변수 타입이 오브젝트인 함수

 

매개변수 타입이 오브젝트인 함수이다.

함수안에 있는 값들의 합과 평균을 구하고 그 값이 합격 조건에 해당하는지 여부에 따라 합격과 불합격을 출력한다

 

passed1 , passed2, passed3 다 같은 함수를 호출하지만 오브젝트를 작성하는 법이 다르다는 것을 보여준다

위 코드에 대한 결과 값.

 

 

매개변수로 다른 함수를 전달받는 함수

매개변수로 다른 함수를 전달받는 함수 예제코드 및 출력결과

 

operator  함수는 매개변수로 ( value1, value2, fn) 을 받는다.

매개변수를 value1 = 값1 / value2 = 값2 / fn = 함수 이런식으로 받아오는 건데

 

매개변수 받아오는 숫자가 같다면 이미 만들어진 plus함수와 minus함수를

operator(100, 200, plus); , operator(100, 200, minus);

로 받아서 출력하는 것이 가능하다.

 

그리고 이미 완성되어 있는 함수를 받아오는 것뿐만이 아닌 

operator(100, 200, function(x,y){
    let result = x*y;
    console.log("곱셈결과 :",result);
})

이런식으로 함수를 만들어서 사용하는 것도 가능하다

 

속성과 기능을 모두 포함하는 오브젝트

속성과 기능 모두 포함하는 객체 예제코드 및 출력결과

 

오브젝트 안에 들어있는 함수는 메소드라고 부른다.

print : function() {
        console.log("--- 성적정보 ---");
        console.log("이름 : ", this.name);
        console.log("국어점수 : ", this.kor);
        console.log("영어점수 : ", this.eng);
        console.log("수학점수 : ", this.math);
        console.log("총점 : ", this.getTotal());
        console.log("평균 : ", this.getAverage());

    }

코드를 보면 this.getTotal() / this.getAverage() 라고 되어 있는데 여기서 this가 나타내는 것은

같은 오브젝트 score1의 해당하는 메소드인 getTotal과 getAverage를 호출한다는 뜻이다.

밖에서 동일한 이름의 getTotal과 getAverage라는 함수 또는 메소드가 존재할 경우 그런 상황을 구분하기 위하여 

this를 사용한다

 

 

생성자 함수를 정의하고 사용해서 오브젝트 생성하기

 

new Score() 생성자로 함수의 매개변수의 맞는 타입의 값들을 받는 예제이다.

 

---

new는 빈 객체를 생성한다

생성된 객체는 생성자 함수 내부에서 this로 전달받을 수 있고, 생성자 함수의 수행문을 실행해서 빈 객체에 속성과 기능을 추가한다. 생성자 함수의 실행이 완료되면 그 객체를 반환

---

let s1 = new Score("이름",50,60,70);
let s2 = new Score("이아름",80,60,90);
let s3 = new Score("아름",90,80,40);

이 코드들이 Score 오브젝트의 값에 들어가 값들에 맞는 합계와 평균 값을 구한다.

 

위 코드에 대한 출력결과

new Score("이름", 50, 60, 70); 에 해당 하는 값들이

this.name / this.kor / this.eng / this.math에 잘들어가는 것을 확인할 수 있다.

 

그리고 print() 메소드를 출력했을 때에만 값들의 합계와 평균이 나타나게 되어

현재의 값을 출력했을 때는 [ Function  (anonymous) ] 가 출력이 되고,

print() 메소드를 출력해야만 this.getTotal과 this.getAverage가 정상적으로 호출하고 그 값을 출력하는 것을 알 수 있다