!! 함수

 

함수 기본 문법

그림 함수 기본

1.  two(){ } 함수를 선언한 후

     중괄호 안에 document.write( ) 출력한다

2. <li>2-1 </li> <li>2-2 </li>는 two() 함수를 이용해서 호출한다

                             ↓

한 줄 요약 : 함수를 선언 / 함수를 호출한다

               결과

함수 기본

 

Parameter(매개변수)와 Argument(인자)

그림 매개변수 와 인자

1. onePlusOne(){} 함수를 선언한다

  - document.write(1 + 1 + '<br>') 중괄호 안에  입력받고

  - onePlusOne() 함수가 호출되고  " 2 " 출력된다 

 

2.  sum(left, right) () 매개변수를 만든다

document.write(left+right + '<br>');

-sum 이란 함수가 만들어져 있다고 한다면 left와 right를 더한 값을 출력하는 기능을 가진 함수이다

 

3. sumColorRed(left, right) 함수를 선언한다

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

left와 right 더한 값에 색상을 줄 것이다

- sum(2, 3); " 5 " 출력 

- sumColorRed(2, 3); " 23 " 출력

- sum(3, 4); '' 7 " 출력 

 

한 줄 요약 : 동일한 결괏값(+)에 속성을 주기 위해 새로 만든 함수를 작성해야 하는 번거로움 때문에 함수가 더욱

복잡해진다

 

 ※ sumColorRed(2, 3); " 23 " 출력이 되는 이유

문자열을 + 기호로 연결한다면
숫자 연산자에 괄호 처리를 하지 않을 경우 문자로 취급해 연결하게 된다 그다음

'23'이라는 결과가 나오게 됩니다.

left + right에서 숫자로 간주해 덧셈 처리를 하고자 하려면
(left + right) 괄호 처리로 먼저 덧셈을 해줘요~~

 

'<div style="color:red">' + left + right + '</div><br>'
=> 결과: <div style="color:red">23 </div><br>
=> 이유: 모두 문자열로 취급해서 연결 시킴
=> '<div style="color:red">' + '2' + '3' + '</div><br>'

'<div style="color:red">' + (left + right) + '</div><br>'
=> 결과 : <div style="color:red">5 </div><br>
=> 이유 : 괄호부터 덧셈 처리된 결과로 문자열 연결
=> '<div style="color:red">' + '5​' + '</div><br>'

 

 

 

 

리턴(return)

그림 return

결과

그림 결과

1.  sum2이란 함수가 만들어졌다고 한다면 sum2 란 함수는 left, right를 더한 값을 출력하는 기능을 가진 함수이다

  sum2(2,3) => " 5 " 출력할 때 표현식이라고 한다 

2.  sum2 함수를 호출하면 붉은색 " 5 " 출력

3.  sum2 (폰트 사이즈가 커진) " 5 " 출력

  -> return left + right;

(sum2 매개변수 값 리턴을 통해 출력한다)

한 줄 요약 : return값을 포함시키면서 함수의 활용성을 극대화시킬 수 있으며 함수의 가장 기본적인

'재활용성'을 유지할 수 있다

 

위 내용 뒷받침 해줄 예시)

 

function sumReturn(left, right){
return left+right;
}
function sumWrite(left, right){
document.write(left+right);
}

1. document.write(typeof sumReturn(2,3)); // number
2. document.write(typeof sumWrite(2,3)); // 5 undefined
3. document.write(sumReturn(2,3)+10); // 15
4. document.write(sumWrite(2,3)+10); // 5 NaN

 

함수는 return값을 리턴하고, 그 값은 생략되어 표시되지 않지만 데이터 저장형식을 따지는 type을 가집니다.
1 + 1 = 2 지만 '1'+'1'='11'인 것은 아예 다른 데이터이기 때문입니다.
그리고 document.write()라는 함수는 JS를 문자열로 '리턴'하는 것, 숫자를 리턴하는 것이 아닙니다. 리턴값은 HTML로 보내지고, 다시 HTML로 랜더링 됩니다.

1. 은 5를 리턴하므로 Number를 type으로 가지는 게 맞습니다
2. 는 함수 내부의 document.write()를 우선적으로 실행해서 5가 출력된 뒤, 함수 자체는 리턴값이 없으므로 undefined를 차순으로 출력합니다.
3. 리턴된 숫자 5를 다시 연산한 뒤 15를 리턴합니다.
4. sumWrite(2,3)에서 5를 출력하고 리턴값은 없으므로 (undefined) + 10(number)가 되므로 NaN이 출력됩니다.
 

※ return 총정리 ※

return 키워드는 함수의 결과를 반환하는데 사용됩니다. 함수는 일련의 작업을 수행하고, 그 결과를 반환하여 그 값을 이용해 다른 작업을 수행하는 데 사용할 수 있습니다. return을 사용하지 않으면, 함수는 작업을 수행하기만 하고 결과를 반환하지 않습니다. 따라서 함수의 결과를 이용해 다른 작업을 수행하려면 return을 사용해야 합니다.
예를 들어, 다음과 같은 함수가 있다고 가정해 봅시다.

function add(a, b){
return a + b;
}

var result = add(1, 2); // result는 3

위의 경우, add 함수는 두 개의 인자를 받아 더한 결과를 반환합니다. 이런 식으로 return을 사용하면, 함수의 결과를 변수에 저장하거나, 다른 함수의 인자로 전달하는 등 다양한 방법으로 활용할 수 있습니다.

반대로 return을 사용하지 않는다면, 함수는 작업을 수행하기만 하고 그 결과를 어디에도 전달하지 않습니다. 그래서 함수의 결과를 이용해 무언가를 하려면 return을 사용해야 합니다.