한입 크기로 잘라먹는 리액트(React.js)-section2.함수

0
post-thumbnail

함수가 필요한 이유?

직사각형의 넓이를 구하면서 생각해보자 !

가로 10 * 세로 20인 직사각형의 넓이 구하기

그렇다면, 각각 다른 2개의 직사각형의 넓이를 구해야 한다면?

아니아니, 10개의 직사각형의 넓이를 구해야 한다면?

함수가 필요한 이유 !

중복되는 코드를 효율적으로 줄일 수 있기 때문 !

함수만들기

function 함수명(){
  
  함수가 호출될 때 실행해야 하는 코드
}
  • 이렇게 하면 사실상 함수 선언식이 만들어 짐 !

함수호출하기: 함수명()

  1. 함수명()
  2. console.log(함수명()); 이 방법은 안될까?
  • 안됨. console.log는 반환값을 출력해야 하기 때문 !
  • 함수내에 return이 있으면 return값이 출력됨
  • JavaScript에서는 함수에 명시적인 return 문이 없는 경우 기본적으로 undefined를 반환
  • 값을 반환하지 않는 함수를 호출하고 그 결과를 콘솔에 기록하면 undefined가 표시

그런데, 함수 본문의 출력값(200)과 undefined가 동시에 출력되는 이유?

  • console.log(getArea())로 getArea()를 호출하면 함수 본문이 실행
  • 함수 실행이 완료된 후 외부 console.log() 문은 함수 호출의 반환 값인 undefined를 기록

그러니깐,

함수 실행 값(계산된 면적)과 undefined 값은 코드의 서로 다른 부분에서 나옴

  • 계산된 면적은 함수 내에서 기록되고, undefined는 함수 호출의 반환 값으로 외부 console.log() 문에서 기록

다시,

10개의 직사각형의 넓이를 구해야 한다면? 매개변수와 인자 !

  • 이렇게 함수에 매개변수를 정해놓고
  • 함수를 호출할 때, 인자값을 지정해주면 직사각형 만드는 공식을 매번 만들지 않아도 함수 선언식을 통해 쉽게 만들 수 있음

값을 반환하게 한다면?

  • return을 통해, 함수선언식을 통해 도출한 값을 반환하게 된다면 대입연산자로 변수에 할당해서 그 값을 사용할 수 있음 !

그렇다면, console.log(함수명())이런식의 호출도 가능해지는 것 아닌가?

  • 가능해짐 !
  • 매개변수가 있는 경우 인자값을 담아서 호출한다면 가능 !

함수내부에 선언된 변수 !

함수내부에 (let으로)선언된 변수를 함수외부에서 호출이 가능할까? NOPE !

반대로 함수외부에서 (let으로)선언된 변수는 함수내부에서 호출이 가능할까? YAP!

profile
`나는 ${job} 개발자`

0개의 댓글