Do it! 05.함수

05-1 함수

1) 함수란?

함수를 사용하면 코드를 메모리에 저장했다가 필요할 때마다 호출하여 사용

 

[변수와 함수의 차이점]

 

변수

-1개의 데이터만 저장

-var라는 키워드를 이용하여 선언

-문자형, 숫자형, 논리형 데이터를 보관

-객체를 참조

 

함수

-자바스크립트 코드를 저장

-function이라는 키워드를 이용하여 선언

-출력문, 제어문 등의 코드를 저장하고 데이터를 반환

2) 기본 함수 정의문

function 함수명(){

    자바스크립트 코드;

}

 

다음과 같이 익명 함수(함수명이 없는 함수)를 선언하고 변수에 참조

참조 변수 = function(){

    자바스크립트 코드;

}

 

[호출]

함수명();

또는 참조 변수();

 

[일반 함수 정의 방식과 익명 함수 선언 참조 방식의 차이점]

일반 함수 정의는 함수 호출 시 호스팅 기술을 지원 그러나, 익명 함수 선언 참조 방식은 호스팅을 지원하지 않음

호스팅을 적용하면 함수 정의문보다 호출 문이 먼저 나와도 함수 정의문을 끌어올려 함수를 호출

var count =0;
myFunc();
function myFunc(){
    count ++;
    document.write("hello" + count, "<br>");
}

myFunc();

var theFnc = function(){
    count++;
    document.write("bye" + count, "<br>");
}

theFnc();

 

3) 매개변수가 있는 함수 정의문

함수를 호출할 때 전달하고자 하는 값을 입력하여 호출할 수 있다. 전달된 값은 매개변수가 받아 함수 정의문에서 사용할 수 있게 됨

 

function 함수명(매개변수 1, 매개변수 2,.... 매개변수 n){

    자바스크립트 코드;

}

함수명(데이터 1, 데이터 2,... 데이터 n);

 

4) 매개변수 없이 함수에 전달된 값 받아오기

함수 정의문에서 arguments을 사용하면 매개변수를 사용하는 것처럼 함수 호출 문의 값을 받아올 수 있다

함수 정의문의 매개변수가 없는 상태에서 데이터를 전달하여 함수를 호출하면 그 값은 배열에 저장

 

function 함수명() {

    arguments;

}

함수명(데이터 1, 데이터 2, 데이터 3);

function sum(){
    var sum=0;
    for (var i=0;i<arguments.length;i++){
        sum += arguments[i];
    }
    document.write(sum);
}
sum(10,20,30);

05-2 함수에서 return문의 역할

결괏값을 반환할 때 사용

함수에서 return문이 실행되면 반복문의 break문과 비슷하게 코드가 강제 종료

1) 데이터를 반환하고 강제 종료하는 return문

function 함수명(){

    코드 1;  //2. 함수 코드 실행

    return 데이 커(값); //3. 코드 2를 무시하고 데이터 반환

    코드 2;

}

var 변수 = 함수명();  //1. 함수 호출 문

function testAvg(arr){
    var sum =0
    for(var i=0;i<arr.length;i++){
        sum+= Number(prompt(arr[i]+"점수는?","0"));
    }
    var avg = sum/arr.length;
    return avg;
}

var arrsubject = ["국어","수학"];
var result = testAvg(arrsubject);

document.write("평균점수는" + result + "점입니다");

 

2) 재귀 함수 호출

함수 내에서 함수를 다시 호출하는 것을 재귀 함수 호출이라 한다.

 

function myFun(){
    자바스크립트 코드;

    myFunc;

}

myFunc();

05-3 함수 스코프 개념 이해

1) 함수 스코프란?

스코프(scope)의 사전적 의미는 '범위'이며, 변수 혹은 함수의 유효 범의를 가리킴

스코프를 이해하기 위해 지역 변수와 전역 변수의 개념과 차이를 살펴야 함

2) 전역 변수와 지역 변수의 개념과 차이

전역 변수는 코드 어디에서든 사용할 수 있는 변수, 지역변수는 함수 스코프에서만 사용할 수 있는 변수

 

var 변수명;  //전역 변수

function 함수명(){

    var 변수명; //지역변수

}

3) 전역 함수와 지역 함수의 차이

function 함수명 1(){  //전역 함수

    자바스크립트 코드;

}

function 함수명 2(){

    function 함수명 3(){  //지역 함수

        자바스크립트 코드;

    }

}

4) 전역과 지역을 나누는 이유

프로그램을 개발할 때 전역과 지역을 나누면 충돌을 피할 수 있다.

 

번외) 즉시 실행 함수

함수 선언과 동시에 함수를 호출할 수 있다.

 

(function() {

    자바스크립트 코드;

}());

 

(function() {

    var 변수명; //지역 변수

    function 함수명() {  //지역 함수

        자바스크립트 코드;

    }

}());

05-4 객체 생성자 함수의 활용

1) 객체 생성자 함수

내장 객체를 생성할 때는 이미 자스 엔진에 내장되어 있는 객체 생성자 함수를 사용하여 객체를 생성

 

function 함수명(매개변수 1, 매개변수 2,... 매개변수 n){

    this. 속성명 = 새 값;

    this. 함수명 = function() {

        자바스크립트 코드;

    }

}

var 참조 변수(인스턴스 네임) = new 함수명();

var 참조 변수 = { 속성 : 새 값, 함수명 : fucntion() {...}}

 

function CheckWeight(name,height,weight){
    this.userName = name;
    this.userHeight = height;
    this.userWeight = weight;
    this.minWeight;
    this.maxWeight;
    this.getinfo = function(){
        var str = "";
        str += "이름: " + this.userName + ",";
        str += "키: " + this.userHeight + ",";
        str += "몸무게: " + this.userWeight + "<br>";
        return str;
    }
    this.getResult = function(){
        this.minWeight = (this.userHeight - 100) *0.9 -5;
        this.maxWeight = (this.userHeight - 100) *0.9 +5;
        if(this.userWeight >= this.minWeight && this.userWeight <= this.maxWeight){
            return "정상 몸무게 입니다";
        }
        else if(this.userWeight < this.minWeight){
            return "정상 몸무게보다 미달 입니다";
        }
        else{
            return "정상 몸무게 보다 초과 입니다";
        }
    }
}

var jang = new CheckWeight("장보리",168,62);
var park = new CheckWeight("박달재",180,88);
console.log(jang);
console.log(park);

document.write(jang.getinfo());
document.write(jang.getResult());

 

2) 메모리 절약을 위한 프로토타입 사용하기

1)에서 처럼 객체를 생성하면 객체를 생성한 만큼 함수가 등록된다. 함수를 여러 개 등록하면 메모리 공간을 많이 차지하여 메모리 낭비

이럴 때, 객체 생성자 함수에 프로토타입(Prototype)을 사용하여 함수를 등록하면 메모리 낭비를 줄일 수 있다.

프로토타입을 사용하여 등록한 함수는 원형에서 생성된 객체를 공유할 수 있다 즉, 여러 개의 함수를 등록할 필요가 없다.

 

function 함수명(매개변수 1, 매개변수 2,.. 매개변수 n){

    this. 속성명 = 새 값;

}

함수명. prototype. 함수명 = function(){

    자바스크립트 코드;

}

var 참조 변수(인스턴스 네임) = new 함수명();

function CheckWeight(name,height,weight){
    this.userName = name;
    this.userHeight = height;
    this.userWeight = weight;
    this.minWeight;
    this.maxWeight;
}
CheckWeight.prototype.getinfo = function(){
    var str = "";
    str += "이름: " + this.userName + ",";
    str += "키: " + this.userHeight + ",";
    str += "몸무게: " + this.userWeight + "<br>";
    return str;
}
CheckWeight.prototype.getResult = function(){
    this.minWeight = (this.userHeight - 100) *0.9 -5;
    this.maxWeight = (this.userHeight - 100) *0.9 +5;
    if(this.userWeight >= this.minWeight && this.userWeight <= this.maxWeight){
        return "정상 몸무게 입니다";
    }
    else if(this.userWeight < this.minWeight){
        return "정상 몸무게보다 미달 입니다";
    }
    else{
        return "정상 몸무게 보다 초과 입니다";
    }
}

var jang = new CheckWeight("장보리",168,62);
var park = new CheckWeight("박달재",180,88);
console.log(jang);
console.log(park);

document.write(jang.getinfo());
document.write(jang.getResult(),"<br>");

document.write(jang.getResult === park.getResult); //두 객체가 같은 함수를 사용하고 있다는 뜻

 

document.getElementByld()

//getElementByld() 메서드는 id값을 이용해 문서 객체(태그)를 선택하는 메서드 css의 id선택자와 비슷한 역할

setAttribute("속성명", "새 값") // 메서드는 선택한 태그의 지정한 속성을 새 값으로 바꿈