JavaScript의 이해 - function

예제1. function

1. function(함수)의 이해

웹브라우져는 function을 보고 {}를 본 이후 사용자가 two라는 함수를 만드려고 하는구나 그리고 그 함수는 

{}안의 코드구나 라고 기억하고 있다가

two()를 보면 이것은 two라는 함수의 이름이었고 사용자가 two라는 함수를 실행하고 싶구나 라고 인식하고 실행한다

 

예제2 . parameter&argument

 

2. parameter(매개변수)와 argument(인자)

 함수는 입력과 출력으로 이루어져 있으며 입력에 해당하는 것이 parameter(매개변수)와 argument(인자)이고 

출력은 return(리턴)과 관련이 있다

 

목표: 함수를 실행할때 어떤 입력값을 주면 함수가 그 입력값에 따라서 다른값을 출력하게 하고싶다

예제2에서

미리만든 sum함수를 활용하기 위해 작성한 코드 sum(2,3)에서 2,3 그리고 sum(3,5)에서 3,5를 인자라고한다

그리고 인자를 받아서 sum함수안으로 매개해주는 변수 즉 sum(left,right)에서 left와 right를 매개변수라고 한다
둘다 함수의 입력값이라고 한다.

 

*+는 결합연산자이다 문자+숫자 일때는 숫자를 문자로 인식하여 결합한다
   구분하려면 숫자+문자 or 문자+(숫자) or 문자, 숫자 라고 쓴다 

   참고 : https://ponyozzang.tistory.com/239?category=728394

 

*tip)오류 찾는법 콘솔창을 켜봐라!!

 

예제3. return

3.return(리턴)

먼저 표현식(expression)이란

예를 들어 console창에서  1+1은 2, 1===1은  true라는 값이 나온다

각각 1+1과 1===1은 2와 true에 대한 표현식이라고 할 수 있다 함수도 마찬가지다

 

목표 : sum2(2,3)이라는 함수를 실행시키면 5가되도록 즉 sum2(2,3)의 함수가 5의 표현식이 되도록 함수를 만들고 싶다 

why?

예제2에서의 sum함수는 sum(2,3);라는 코드만 작성 하면 sum함수가 document.write(left+right+'<br>')이기 때문에

두 인자를 더하고 줄을 바꾸고 화면에 출력까지 해준다

순수한 함수의 값만 필요하다면 확실하면 좋은 코드이다

하지만 우리가 무언가를 더하는 작업이 매우 복잡하고 힘든일이면서 그렇게 더해진 결과를 다양한 방법으로 사용해야 한다면 예를 들어 이 코드의 색을 바꿔야한다면

sumcolorRed(left+right){

document.write('<div style="color:red">'+(left+right)+'</div>')

}

라는 함수를 만들고

sumcolorRed(2,3);를 작성해야 원하는 값을 얻을 수 있다.

그리고 sum함수의 순수한 값만이 필요한것이 아니고 함수의 값을 보조적으로 사용하면서 더 광범위하게 사용하려 한다면 우리는 상당히 많은 함수를 계속해서 만들어야 한다는 뜻이다

하지만 sum이라는 함수를 실행한 결과가 위처럼 무언가를 실행하는 것이 아니라 예제3의 sum2함수처럼 그 결과의 값을 돌려준다면 sum2라는 함수가 계산이라는 기능만을 구현함으로써 다양한 맥락에서 사용할 수 있는 자유도를 가지게 된다.
함수를 1개만 만들고서  매개변수의 값을 리턴으로 출력함으로써 훨씬 더 효율적이고 다양한 용도로 함수를 활용할 수 있게 해주는 것이다

따라서 return을 쓰는 것이다