[JS] 함수

목차

1. 함수 선언

2. 매개변수와 인자

3. 함수의 매개변수와 스코프

4. 함수와 return

5. 콜백함수

6. 함수 표현식

    6 - 1 익명 함수

    6 - 2 애로우 함수

    6 - 3 즉시 실행 함수

 

 

 

함수 : 중복 코드를 줄이기 위해서 사용합니다.

 

1. 함수 선언

function 함수이름 (매개변수){실행코드 내용}
함수 호출
함수 이름();

 

 

함수도 하나의 값이다.
함수를 사용하기 전에 반드시 알아두시길 바랍니다.

 

함수 선언과 호출에 대해서 예시를 들어보겠습니다.

function message(){
    console.log("쥬스가 만들어졌어요.");
}

message();

// 함수이름(); --> 함수이름에 괄호를 넣으면
// 함수를 실행하겠다는 의미다.

 

출력값

message라는 함수를 선언을 했고 밑에서 함수를 호출했습니다. 함수호출로 안에 있는 console.log를 실행해서

"쥬스가 만들어졌어요" 라는 문구가 출력된 것을 확인할 수 있습니다.

 

 

2. 매개변수와 인자

function 함수이름 (매개변수){
         실행코드
     }
     message(인자);

매개변수 : 함수 안에서 선언하는 변수
인자 : 함수 호출시 넣는 값

 

매개변수와 인자 예시

function message(a){ 
    console.log(a + "쥬스가 만들어졌어요."); 
}
message("사과");

// 출력값 : 사과쥬스가 만들어졌어요.

 

3. 함수의 매개변수와 스코프

let a = "자카";
function name(){
    console.log(a);
    // 지역 스코프
    function name2(){
    	console.log(a);
    }
    name2();
}
name();

// 출력 : 자카가 두번 출력된다.

 

 

위에 코드를 실행하면 a변수가 두번 실행되는 것을 볼 수 있습니다. 이는 변수 a가 name 함수에 없어서 전역에서

a를 찾기 시작해서입니다. 전역변수 a에 "자카"라는 변수가 있어서 name()가 실행되고 name2()가 실행됩니다.

 

!! 변수 a를 함수name 안에서 찾다가 없으면 전역에서 찾습니다.  !!

변수가 전역에도 함수 안에도 전역에도 없으면 "Reference Error" 를 호출합니다.

 

 

4. 함수와 return

1. return은 함수 안에서 사용하는 예약어로 함수의 내부에서 return을 만나게 되면

함수를 종료시킵니다.

function name(){
    console.log("여기는 실행");
    return;
    console.log("여기는 실행X");
}

// 출력 : 여기는 실행 (이후에는 실행하지 않는다.)

2. return은 함수의 값을 반환 해주는 역할을 합니다.

function name(x,y){
  console.log("Hello");
}

console.log(name(1,3));

함수 name을 선언하고 밑에서는 함수의 값을 출력을 console이 있습니다. 결과 값은 위에 있듯이 "undefined"가 나온 것을 확인할 수 있습니다. 왜 이런 결과가 나올까요? 함수호출시 반환된 값이 없기 때문입니다. 만약 인자값을 더하는 값을 호출하려면 어떻게 해야할까요?

function name(x,y){
  console.log("Hello")
  return x+y;
}

console.log(name(1,3));

return 값을 반환해주어야 함수호출시 값이 나오는 것을 확인할 수 있습니다.

 

4. 콜백 함수

함수도 하나의 값입니다. 그 말은 즉 함수의 매개변수로 함수를 받을 수 있다는 의미입니다.

이것을 '콜백함수'라고 합니다. 

function message(fn1, fn2){
    fn1(); // 매개변수로 함수 호출
    fn2();
}

function name(){
    console.log("나는 함수1이야.");
}

function name2(){
    console.log("나는 함수2야.");
}

message(name, name2);

//출력 : 나는 함수1이야. 나는 함수2야.

간단한 콜백함수를 작성해 보았습니다. 위에 코드는 함수 name와 name2를 매개변수로 받은 함수입니다.

function callBack(fn1){
 console.log(fn1(1,3));
}
function plus(a,b){
  return a+b;
}

callBack(plus);

 

 

위는 콜백 함수를 사용, 두 수를 매개변수로 받아서 더하기를 하는 함수를 만들어 보았습니다. 

 

6. 함수 표현식

6 - 1 익명함수

const myName = function(){
    console.log("Jaka_Park");
}

myName(); // 출력 : Jaka_Park

 

일반함수와 다르게 함수의 이름이 존재하지 않습니다.

익명함수는 재사용하지 않는, 한번만 사용할 함수를 위한 개념입니다.

리터럴 방식으로 변수에 담아서 표현합니다. 

 

( *리터럴(literal) 방식 : 일반적으로 변수에 데이터를 넣을 때 사용하는 방식 )

 

6 - 2 화살표 함수 (Arrow 함수)

const sum = (a, b) => {return a+b;}
sum();

 

함수 표현식을 조금 더 간결하고 좋은 방법으로 문법을 작성할 수 있습니다.

ES6에서 추가된 문법이고 '화살표 함수 (Arrow 함수)'라고 합니다.

this를 이해하고 쓰면 좋은 함수이며, this 바인딩을 하지 않기 위해 사용합니다.

(위 부분은 제가 충분히 배운 후에 내용을 추가 수정 하겠습니다.)

 

 

6 - 3 즉시 실행함수

(function (b){
    let a = 1;
}(1));

let a = 1;

즉시 실행함수는 한 번의 실행만 필요로 하는 초기화 코드 부분에 많이 사용됩니다.

그 이유는 변수를 전역으로 선언하는 것을 피하기 위해서 입니다. 전역에 변수를 추가하지 않아도 되기 때문에 코드 충돌없이 구현할 수 있습니다.