함수

Creating the dots·2021년 7월 4일
0

Javascript

목록 보기
14/24

함수는 참조자료형

const a = 1;이라고 변수를 선언했을때, 변수 a에는 1이 담겼다.
function func() { return 'hello' };라고 함수를 선언하면, func에는 무엇이 담길까?

이것은 1이라는 값은 원시자료형이고 함수는 참조자료형이라는 점에서 차이가 생긴다. stack에 a라는 이름표가 붙은 공간에는 1이라는 값이 담기지만, stack의 func라는 이름표가 붙은 공간에는 함수가 저장된 주소가 담긴다. 그 주소를 따라가면 heap에 함수가 저장되어 있다. (원시자료형과 참조자료형 게시물 참고)

참조자료형에 배열, 객체, 그리고 '함수'도 있음을 다시 확인할 수 있다.

그렇다면, 변수에 함수를 복사/할당한다면 변수에는 무엇이 담길까?

배열과 객체와 같은 맥락으로 다음의 문제도 생각해볼 수 있겠다.

const arr = [1,2,3]; //배열을 선언한다.
const copied = arr; //변수 copied에 배열을 복사한다.

변수 copied에 배열 arr를 복사했다면, arr과 copied는 같은 주소값을 가리키므로 둘 중 어느것을 수정해도 동시에 변경된다는 것을 기억하고 있다.

function func(){return 'hello'}; //함수를 선언한다.
const funcVariable = func; //변수 funcVariable에 함수를 복사한다.

마찬가지로 funcVariable에 함수 func를 복사했다면, func와 funcVariable은 같은 주소값을 가리킨다. 따라서 다음과 같이 같은 결과를 출력한다.
func(); //'hello'
funcVariable(); //'hello'

함수와 매개변수

매개변수에는 입력값과 관련된 의미있는 이름으로 작성해야한다.

  • 매개변수가 없는 함수

function noParams(){ return 'no params received' }
noParams(); //'no params received'

함수 noParams는 매개변수를 입력받아도, 받지 않아도 늘 'no params received'라는 메시지를 리턴한다.

  • 매개변수가 함수인 함수
function add(num1,num2){
  return num1 + num2
}
function surprise(operator){
  const result = operator(2,3);
  console.log(result);
}

surprise(); //TypeError: operator is not a function at surprise
surprise(add); //5

1. stack에 add라는 이름표가 붙은 공간에 함수의 주소가 저장된다.
  1-1. heap의 해당 주소에는 함수가 담겨있다.
2. 같은 방식으로 surprise도 stack과 heap에 저장된다.
3. 9번째 줄에 의해 함수 surprise를 매개변수 없이 호출하면, 
   operator === undefined이므로 TypeError를 출력한다. 
4. 10번째 줄에 의해 함수 surprise에 매개변수로 add를 호출한다.
  4-1. add에는 함수가 저장된 heap의 주소가 담겨있다.
  4-2. 6번째 줄에 의해 함수를 실행시키고 결과값을 변수 result에 할당한다.
  4-3. result를 콘솔창에 출력하고 함수는 종료된다.
function add(){
  return this;
}
const savedAt = add(); //window

함수를 선언하면 해당 함수는 전역객체(window)의 메소드로 저장되므로, this===window

const obj = {
  subtract: function(){
    return this;
  }
}

객체의 메소드로 함수를 선언하면 해당 함수는 객체의 메소드로 저장되므로 this==obj 
profile
어제보다 나은 오늘을 만드는 중

0개의 댓글