드림엘리 : Javascript - 15. Function 헷갈릴 수 있는 부분 총 정리

함수에서 헷갈릴 수 있는 부분

정확히 이해해야 하는 포인트

• 선언과 호출의 차이점 이해
• 함수 선언
  • 어떤 값을 전달받아 올건지 인자들을 정의하고 나서 코드 블럭 작성
  • 선언만 해놓으면 작성한 코드블럭은 수행되지 않는다.
  • javascript에서는 function이라는 키워드를 이용하며 함수 이름을 원하는 이름으로 작성 가능
  • function Name(parameter){ 실제로 함수 안에서 실행될 코드 }
• 함수 호출
  • functionName();
  • 정의한 선언한 함수를 실행하기 위해서는 함수를 호출해야 한다.
  • 함수를 호출하기 위해서는 함수이름 옆에 괄호를 이용해서 함수에서 원하는 정의된 인자값들을 전달하면서 호출해야 한다.
  • 괄호를 쓰지않고 함수 이름만 어디에 할당하거나 전달하면 함수 자체를 전달하는 것이다.
  • 함수를 호출할 때는 함수마다 정의된 인자값들을 정확하게 전달해줘야 한다.
  • 필요한 인자값들을 정상적으로 잘 전달해서 함수를 호출하면 된다.

언어 공부 방법

• js는 html과 달리 UI적인 요소가 없기 때문에 console log를 이용해서 조금씩 log를 넣어서 눈으로 값을 확인하면서 배우는 것을 추천
• 이해가 되지 않을 때는 간단한 예제를 이용해서 console log에 출력하면서 한줄 한줄씩 따라가는 것이 중요

함수의 종류

• 어떤 기능을 수행하고 끝나는 함수
• 값을 리턴하는 함수
  • 어떠한 계산을 한 다음에 특정한 값을 전달하는 함수
  • js가 아닌 다른 언어의 경우 인자의 type을 명시해줘서 함수 호출시 어떤 type의 인자를 전달해야 하는지 알 수 있다. 그리고 전달한 값이 함수가 선언된 곳의 인자의 변수형태에 각각 접근할 수 있다는 것을 알 수 있다.
  • js의 경우 type이 없는 언어이므로 어떠한 값을 인자로 받아오고 그 값은 인자의 변수형태를 이용해서 접근할 수 있다.
  • 함수 선언시 언어에서 정의한 return이라는 키워드를 이용해서 계산한 값을 전달
  • 함수가 전달한 값을 변수에 저장할 수도 있다.

함수를 인자로 전달

• 함수 호출시 다른 함수를 인자로 전달할 경우 fnName1(fnName2);
• 함수를 인자로 전달할 때는 함수의 이름만 이용해서 전달해야 한다.
• 인자로 전달받은 함수를 이용해서 무언가를 할 수도 있고 함수를 호출하는 것처럼 인자로 받은 함수의 괄호를 이용해서 함수를 호출할 수 있다.
• 함수의 이름 자체는 해당함수를 가리키는 함수 자체가 된다.
• 괄호를 쓰지 않고 함수이름만 다른 함수의 인자로 전달하던지 다른 변수에 할당하게 되면 함수 자체를 가리키게 되는 것이다.
• 변수에 함수이름만 사용해서 해당 함수를 할당한 경우 변수(인자);로 해당 함수를 호출할 수도 있다.
• 함수의 이름만 변수에 할당하여 함수를 전달하면 함수 자체를 전달하는 것.
• 가장 많이 하는 실수
  • fnName1(fnName2()); 이 경우 fnName1이 호출되기 전에 fnName2가 먼저 호출이 되어지면서 fnName2 함수가 실행되고 그것의 return 값이 fnName1의 인자로 들어가게 된다. 즉 fnName1(fnName2의 return값)이 되어 버림.
  • fnName2에 전달된 인자 값이 없기 때문에 fnName2 함수에서 계산된 return 값은 NaN이 나올 수 있다.
  • 위처럼 괄호를 이용해서 함수를 인자로 전달할 경우 : 해당 함수를 호출이 되고나서 나온 마지막으로 전달된 값이 전달되니까 함수를 전달하는 것이 아니다.