[React] 자바스크립트 - 함수

1. 함수란?

자바스크립트는 함수를 특별한 값 취급을 한다.

자바스크립트는 ()가 있으면 함수를 실행하고 ()가 없으면 함수를 문자형으로 바꿔 출력하기도 한다. (함수를 값으로 취급)

함수는 기본적으로 undefined를 반환하고 return 으로 어떤 값을 넘겨주지않는다면 undefined를 반환한다.

 

2. 함수 선언문과 표현식

- 함수 선언문

   function cat() {

        console.log('perl');

   }

 

- 함수 표현식

   let cat = function() {

      console.log('perl');

   }

 

  //화살표 함수로 써도 된다.(함수 표현식의 단축형이 화살표 함수다.)

  //차이점으로는 함수표현식에서 this그 함수 자체인데, 화살표함수에서 위쪽 부모를 불러온다. 

  let cat2 = () => {

       console.log('navi');

   }

 

- 함수 선언문으로 함수를 생성하면 독립된 구문으로 존재

  (바로 초기화 되어 메모리에 박힌다.)

- 함수 표현식으로 함수를 생성하면 함수가 표현식의 일부로 존재

  (바로 초기화가 되지 않는다.)

- 함수 선언문은 코드 블록이 실행되기전에 미리 처리되어 블록 내 어디서든 사용할 수 있다.

- 함수 표현식은 실행 컨텍스트가 한줄한줄 코드를 읽어보다가 표현식에 닿으면 만들어진다.(변수처럼 처리)

 

※ 생성자를 통해 함수 생성

let a = new function("alert");

 

위와같은 방식으로는 잘 쓰지 않음. 왜냐하면 문자열을 가지고 와서 사용하다보면 오류가 날 가능성이 높아 진다. 

 

3. 지역변수와 외부변수

- 지역 변수

   함수 내에서 선언한 변수

   함수 내에서만 접근 가능

 

- 외부 변수(global 변수)

   함수 외부에서 선언한 변수

   함수 내에서도 접근가능

   함수 내부에 같은 이름을 가진 지역 변수가 있으면 사용할 수 없다.

 

let a = 'a';

let b = 'b';

let c = 'outter!';

 

const abc = () => {

   let b = 'inner!';

  c = 'c';

  let d = 'd';

  console.log(a, b, c, d);

}

 

console.log(a, b, c, d); // a, b, outter, undefined

abc(); // a, inner, c, d

console.log(a, b, c, d); // a, b, c, undefined

 

4. 콜백함수

함수를 값처럼 전달할 때, 인수로 넘겨주는 함수를 콜백함수라고 한다.

function useBall(cat) {

   console.log(cat, "공으로 노는중")

}

이렇게 받아 오는걸 매개변수라고하며,  cat으로 받아다가 useBall() 함수를 만들었다. 

자바스크립트에서는 함수를 특별한 값 취급을 하는데, 함수는 인수로 전달을 할 수 있다. 

 

const playWithCat = (cat, action) => {

    action(cat);

}

 

const useBall = (cat) => {

     alert(cat+"과 공으로 놀아줍니다.");

}

 

//playWithCat 함수에 넘겨주는 useBall 함수가 콜백 함수

 

playWithCat("perl", useBall);

 

※ 실행결과

 

action 이라는 매개변수(파라미터) 함수가 잘 동작을 했다.

useBall() 함수를 콜백함수라고 한다. 인수로 전달을 하고 전달한 함수를 나중에 필요할떄 호출해서 사용하는걸 말한다.

 

함수는 값을 넘겨받을떄 복사해버리고 사용하고 버린다. 

즉 매개변수는 복사한 값이므로 원본값은 손상될 일이 없다. 

 

인수는 영어로 argument

매개변수는 영어로 parameter 라고 한다.