자바스크립트 기초. 함수(Function) (1)

1. 함수(Function)?

 1) 특정한 목적을 실행하기 위해 가장 기본적이며 독립적인 빌딩 블럭(building block)이다.

 2) 함수를 사용하려면 호출하려고 하는 범위(Scope) 내에서 함수를 정의해야 한다.

함수명 ( 매개변수 ) { 함수 정의 } // 함수의 기본적인 형태

function printStarting() {
    console.log('hello world!');
}

printStarting(); //hello world!

기본적인 형태는 위와 같다. 

 

function printStarting2(sayhello) {
    console.log(sayhello);
}

printStarting2('hello world!'); //hello world!

매개변수(parameter)를 지정해서 원하는 문자를 마음껏 출력할 수 있는 함수로 변환시켰다.

 

 

2. 매개변수(Parameter)?

 

· Premitive Parameter (원시 파라미터) : 값이 그대로 저장된다.

· Object Parameter (객체 파라미터) : 레퍼런스(키,값)가 그대로 전달된다.

const ddoddi = { age: 29 };
function goback(young) {
    young.age = 20;
}
goback(ddoddi); 
console.log(ddoddi); // { age: 20 }

· Default Parameters (기본값 파라미터)

동작이 입력되지 않았을 때 반환할 default 값을 지정할 수 있다.

이 기능은 Ecma Script 6에서 추가되었다.

참고로 마땅히 생각나는 것이 없어서 펑션 이름을 키오스크로 짓기는 했는데, 함수명은 동사 형태로 짓는 것이 일반적이다.

function keyosk ( menu, from = ' 0 ' ) {
    console.log(`${menu} ${from}원`);
}
keyosk ( 'remen' ); // ramen 0원
                    // deafult parameter를 설정하지 않을 시 ramen udefiend가 출력된다.

· Rest parameters (나머지 매개 변수)

함수 배열 가장 끝에 위치한 매개변수의 앞에 "..."을 붙이면 정의되지 않은 모든 후속 함수를 매개변수로 포함시킨다.

배열 안에서 나머지 매개 변수는 오직 한 개만 존재할 수 있으며 반드시 가장 마지막에 위치해야 한다.

이 기능도 기본값 파라미터와 마찬가지로 Ecama Script6에서 추가되었다.

function argspractice( A, B, ...args ) {
    console.log('A', A);
    console.log('B', B);
    console.log('more args', args);
}

argspractice( 'a', 'b', 'c', 'd', 'e', 'f', 'g' );
// A, a
// B, b
// more args, d, e, f, g

위 예제와 같이 활용 가능하다. 다만 이렇게 작성하면 나머지 매개 변수가 항상 동시에 반환된다.

아래와 같이 조건문을 응용한다면 나머지 매개변수도 순서대로 출력되도록 작성할 수 있다.

 

function notebook(...args) {
    for (let i=0; i<args.length; i++)
    {console.log(args[i])}
}

console.log(notebook('Macbook', 'galaxybook', 'pizzubook'));
//Macbook
//galaxybook
//pizzubook

 

· 함수 안에서 선언된 변수는 Local scope(지역 변수)로 취급된다.

함수 안에서 선언된 변수는 지역 변수로 분류되기 때문에 함수 밖에서는 호출할 수 없다.

또한 같은 이름을 가진 변수가 있어도 함수 안에서 선언한 변수 값을 우선으로 호출한다.

const scope = 'global scope'
function dopractice () {
    let scope = 'local scope'
    console.log(scope);
}

dopractice (); // local scope
console.log(scope); // global scope

 

· Return a value (함수 반환 값)

return은 함수 실행을 즉시 중단하고 값을 호출 지점으로 반환한다.

모든 함수에는 return 값이 있거나 혹은 return undefined가 생략되어 있다.

function Calculate(A, B) {
    return A + B;
}
console.log(Calculate(2, 3)); // 5

조건문을 활용하여 아래와 같이 응용도 가능하다.

count + 'C'는 scope의 이해를 위해 넣었을 뿐 return에 대한 설명과는 무관하다.

function counter() {
    for(let count=0; ; count++) {
        console.log(count);
    if(count === 5) { // count가 5가 되면 즉시 실행을 중단한다
        return;
    }
    console.log(count+'B'); // count가 5가 되면 해당 구문을 읽지 않기 때문에 4B까지 반환
    }
 console.log(count+'C'); // Scope를 벗어났기 때문에 출력되지 않는다
}
counter(); // 0 0B 1 1B 2 2B 3 3B 4 4B 5

 

 

3. JAVA Script 함수의 특징

 1) JAVAScript와 Python의 함수는 1급 함수이기 때문에 다른 변수에 대입할 수 있으며 함수의 인자가 될 수도 있다.

 2) 1급함수는 다른 변수들과 동등한 등급이라는 의미이다.

 

· Function expression (함수 표현식)

위에서 지금까지 사용한 함수 선언 방식은 Function declaraiton (함수 선언식)이다.

함수 표현식의 사용법은 다음과 같다.

const calculater = function(a, b) {
    return a + b;
}

console.log(calculater(3, 4)); // 7

함수 표현식의 가장 큰 특징은 호이스팅이 되지 않는 다는 것이다.

그리고 또한 함수 선언식과 달리 클로저로 사용하거나 콜백(다른 함수의 인자로 넘겨주는 것)으로 사용 가능하다.

일단 다음의 코드를 보고 호이스팅 여부부터 확인하도록 하자.

 

//
// 함수 선언식의 경우 (호이스팅)
console.log(calculater2(6, 6)); // 12

function calculater2(a, b) {
    return a + b;
}

console.log(calculater2(6, 6)); // 12

//
// 함수 표현식의 경우

console.log(calculater(3, 4)); // error

const calculater = function(a, b) {
    return a + b;
}

console.log(calculater(3, 4)); // 7

 

· Callback function (함수 콜백)

자바 스크립트 할만한데? 라고 생각하던 사람들이 슬슬 이해하기 어려워하는 콜백이다.

이 친구 쉽지 않다.. 분명히 알 것 같은데 더 자세한 자료를 읽으면 다시 모르겠다. 그런데 쉬운 자료를 읽으면 다시 알 것 같다.

뭐하는 친구지..?

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. _ MDN

솔직히 이 글을 쓰고 있는 지금도 완벽하게 이해한 것이 아니므로 내 뜻대로 함부로 풀어서 쓰기는 조심스럽기 때문에 MDN의 Callback function에 대한 설명을 그대로 가져왔다.

콜백 함수는 어떤 함수 안에 인수(argument)로써 함수가 전달되어져 있고 특정 조건을 만족하면 내부에서 호출되어 동작을 완성하는 것을 의미한다.

function calculater4 (A, B, Callback) {
    let x = A + B;
    let y = A - B;
    let z = A * B;
    let t = A / B;
    Callback(x, y, z, t);
}

calculater4 (4, 2, function(sum, substract, multiple, divide) {
    console.log(sum, substract, multiple, divide);
}); // 6 2 8 2

위 코드에서 calculater4 함수를 선언하는데 파라미터에 임의 값 A, B와 Callback 함수가 지정되어 있다.

호출 시에는 A, B에 parameter 값을 지정해주고 anonymous function(이름 없는 함수)를 사용하여 결과값을 반환한다.

참고로 이름 없는 함수를 사용해도 문제가 없을 뿐 디버깅 혹은 함수 재호출 등의 목적이 있다면 이름을 붙여줘도 상관 없다.

 

function Quizgame (answer, correct, wrong) {
    if ( answer === "Callback" ) {
        correct();
    } else { wrong(); }
}

const correct = () => {console.log('good coder')}; // anonymous function (함수 안에서의 기능적 차이는 x)
const wrong = function practice() {console.log('retry')}; // named function (함수 안에서의 기능적 차이는 x)


Quizgame ('Callback', correct, wrong); // good coder
Quizgame ('CallMeCallMe', correct, wrong); // retry

간단한 활용 방법은 이해했으나 설명하기가 난해해서 한가지 코드를 더 작성해보았다.

먼저 파라미터에 두개의 임의 함수가 포함된 함수 Quizgame를 선언하고 해당 함수는 즉시 호출되지 않고 조건을 만족할 때까지 대기한다.

이후 correct와 wrong에 함수 값이 선언되고 answer에 변수가 대입되면 함수가 호출된다.

어렵다.. 어려운가? 쉬운가? 모르겠다.. 이해한 것 같은데 이해했다고 생각해서 글로 정리하려고 하면 어떻게 표현할 지 모르겠는 미묘한 친구다.

 

 

· Arrow function (화살표 함수)

말 그대로 화살표가 들어간 함수이며 특징은 함수의 이름을 지정하지 않은 anonymous function만을 선언하며 함수를 간소화해서 선언할 수 있다. 실은 바로 위의 코드에 작성된 const correct 항목도 Arrow function을 사용하려고 한 것인데 필요 없는 중괄호를 쳐놨다..

//bagic function
function printarow() {
    console.log('arrow');
}
const pruntArow = printarow()

function SumSum(a,b) {
    return a + b;
}
const sumsum = SumSum(a,b);


//Arrow function
const printArrow = () => console.log("arrow"); 
const sumsum = (a, b) => a + b;

이렇게 위와 같이 간단하게 코드를  간소화할 수 있다.

여러 응용법들도 다뤄야겠지만 다음에.. 아직 함수 기본인데 시간을 너무 많이 보내버렸다 : (