JavaScript_2. 함수

함수

일반 함수

- 반환타입이 없음(꼭 반환타입을 줘야하는게 아님)

- 반환을 시킨다면 : 반환함수, 반환을안시키면 일반함수

함수의 사용 예

function sayHello() {
    console.log(“안녕하세요?”);
}
sayHello();

 

작업단위를 정하고, 일부를 분리시켜 관리함 (특히, 반복적으로 사용될 수 있다면 더욱 분리시킬 필요가 있다.)

function calcAndPrintNumbers() {
    
    console.log( “ 안녕하세요? “ );
    console.log( “ 간단한 계산기 입니다. “ );
    console.log( “ 이제 숫자를 더해 보겠습니다! “ );

    var numberOne = 10;
    var numberTwo = 20;
    var result = numberOne + numberTwo;
    console.log( numberOne + “ + ” + numberTwo + “ = ” + result );
}


// 분리된 함수 호출
function calcAndPrintNumbers() {
    sayWelcome();
    var numberOne = 10;
    var numberTwo = 20;
    var result = numberOne + numberTwo;
    console.log( numberOne + “ + ” + numberTwo + “ = ” + result );
}

function sayWelcome() {
    console.log( “ 안녕하세요? “ );
    console.log( “ 간단한 계산기 입니다. “ );
    console.log( “ 이제 숫자를 더해 보겠습니다! “ );
}

 

함수에 필요한 데이터를 전달 (변수명 앞에 var 쓰지 않는다)

function getCalcNumbers( numberOne, numberTwo ) {
    sayWelcome();
    var result = numberOne + numberTwo;
    return result;
}

// 매개변수 개수가 맞지 않아도, 함수는 정상적으로 실행된다
var result = getCalcNumbers(10, 60, 70); //70은 어딘가로 날아가게됨

var result = getCalcNumbers(10); //NAN(not a number 
   ->이유 : numberOne(숫자10)과 numberTwo(undefined)를 더하기 때문)

 

함수 예제

function sayHello() {
    console.log("반갑습니다.");
}

function sayHelloWithName(name) {
    console.log("안녕하세요, " + name + "님!");
}

function calcNumbers(num1, num2) {
    var result = num1 + num2;
    return result;
}

 

이렇게 함수가 있을떄, 함수 호출하기

1. 정상케이스

sayHello();
sayHelloWithName("James");
var calcResult = calcNumbers(50, 40);
console.log(calcResult);

2. 이상케이스 (실행은 됨)

sayHello(1,2,3,4,5);
sayHelloWithName(); //파라미터를 아무것도 할당해주지 않았으므로 'undefined'가 된다
var calcResult = calcNumbers(50, 40, 4, 5);
console.log(calcResult);


//만들때는 파라미터 없지만, 호출할때 파라미터 여러개 준다면 그 값들을 다 더해서 돌려주는 함수
function addAllNumbers(){
    console.log(arguments);
    var sum = 0;
    for (var i in arguments){
        sum += arguments[i];
    }
    return sum;
}

var addResult = addAllNumbers(1,2,3,4,5,6,7,8,9,10); //이 숫자값들은 'arguments'라는 객체에 1개씩 넣어준다
console.log(addResult);
//addAllNumbers 함수에서 리턴값이 없을땐, addResult값은 undefined 가 된다.
//addAllNumbers 함수에서 리턴값이 있다면, addResult값은 해당 리턴값이 된다.

 

---

 

중첩 함수

- 함수 안에 함수가 포함되어있는 형태

- 만드는 이유 : 자바에는 접근제한자가 있지만, 자바스크립트에는 접근제한자가 없다. 따라서 기능을 감추고 싶을 때 : 함수안의 함수로 구현하고, 이렇게 중첩된 함수는 함수 안에서만(private처럼)호출될수 있다

function getCalcNumbers(numberOne, numberTwo){
    
    var result = calcPlus();

    //외부로부터 숨기고싶은 함수
    function calcPlus() {
        return numberOne + numberTwo
    }

    return result;
}

// 함수 안에 있는 중첩함수는 호출할 수 없다.
//getCalcNumbers()함수를 통해서만 실행될 수가 있다.
// calcPlus(); //Uncaught ReferenceError: calcPlus is not defined at function.js:75:1

//이렇게 써야 값을 가져올 수 있다
var result = getCalcNumbers(1,2);
console.log(result);

 

 

---

함수 - 콜백

- 함수의 파라미터로 함수가 전달되는것

- 함수에서 특정작업이 완료되었을때, 추가로 실행해야하는 작업을 기술한 함수

- 함수가 종료되는 시점이 불분명할때, 콜백을 사용한다.ex) Ajax와 같은 네트워크 작업

- 비동기(모든것들이 동시에 움직임, 언제 시작되고 언제끝날지 모름)

- 자바에서의 인터페이스, 추상클래스, 익명클래스와 비슷한 기능을 함

//콜백함수 (함수가 파라미터로 전달되는 함수)
function getCalcResult(num1, num2, beginFn, endFn){
    beginFn(num1, num2);
    var result = num1 + num2;
    endFn(num1, num2, result);
    return result;
}

// 아래 두 코드 모두 같은 함수를 부르고 있음
var calcResult = getCalcResult(110, 220, function(num1, num2){
    console.log("계산을 시작합니다.");
}, function(num1, num2, result){
    console.log("계산이 끝났습니다.");
    console.log("결과는" + result +"입니다.");
});
console.log(calcResult);


var calcResult2 = getCalcResult(110, 220, function(num1, num2){
    console.log("============================");
}, function(num1, num2, result){
    console.log(num1 + "+" + num2 + "=" + result );
    console.log("============================");
});
console.log(calcResult2);

 

---

함수를 리턴하는 함수

- 중첩함수와 유사, + 함수를 리턴함

- 함수가 함수를 반환시키고, 그함수가 또다른 함수를 반환시키고, ...반복될수있음

// 함수를 리턴하는 함수
function counter(){
    var count = 0;

    return function(){
        return ++count;
    }
}

//위의 함수와 동일한 코드, 좀더 풀어서 쓴것
function counter2(){
    var count = 0;

    function count2(){
        return ++count;
    }
    return count2;
    // return count2(); //function의 결과를 반환시킴
}

 

---

 

즉시 실행 함수

- 함수를 정의함과 동시에 실행시킴

(function(message){
    console.log(message + "실행됨.");
})("즉시 실행 함수");

 

 

---

 

변수의 영역

- 일반적인 언어에서의 변수영역 : 중괄호부터 중괄호까지

- 자바스크립트의 변수 영역 : function기반의 영역!

- function 내부에서 선언된 변수는 function의 모든 영역에서 사용가능하다 -> '호이스팅' 이라는 현상 때문

function foo(){
    var count = 0;
    if(true){
        var bar = 10;
    }
}
//위의 코드에서 호이스팅이 일어나면 아래처럼 바꿔버림(영역이 끌여올려짐)
function foo(){
    var count = 0;
    var bar;
    if (true) {
        bar = 10;
    }
}