함수(function)라는 도구의 사용법을 살펴보자
함수하면 떠오르는 이미지는 수납상자다
코드가 많아지면 코드를 잘 정리정돈하기 위한 도구가 필요하다
첫번째로 아주 간단하며 강력한 도구가 함수이고
더 큰 도구는 객체라는 것도 있다
input 이라는 코드가 하나 있고
js가 onclick안에 들어가 있다
극단적으로 input태그가 1억개가 있다면
색을 바꾸고 싶다면 1억개의 코드를 다 바꾸어야하고
기계를 이용해서 바꾸게 된다면 바꾸지 않아야 하는 색까지도 바꿀 수 있고
많은 input태그가 똑같은 것이 맞는지 확신하기도 힘들다
이런 절망적인 상황에서 구원해주는 도구가 함수이다
중복되는 태그를 잘라낸뒤 script태그안에 넣어주자
그리고 가져온 중복된 태그에 이름을 붙여 줄것이다
이렇게 코드를 짜게되면 이 코드의 이름을 nightdayhandler이라는 이름으로 지정하고 싶은 것 이고
웹브라우저에게 함수를 만들고 싶다는 뜻에서 function이라는 키워드를 붙여주는 것이다
1 함수의 기본문법
중복이 많이 발생하고 있고 그것이 연속적이지 않는다면
반복문으로 해결할 수 없고 함수가 필요하게 된다
함수를 만들거라는 뜻에서 function을 써주고 만들려는 함수의 이름을 지정해주고 괄호 중괄호를 써준다
중괄호 안에 반복하고 싶은 코드를 붙여넣어주면 된다
<body>
<h1>Function</h1>
<h2>basic</h2>
<ul>
<script>
document.write('<li>1</li>');
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
document.write('<li>3</li>');
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
</script>
</ul>
</body>이렇게 반복하고 싶다면 반복하고싶은 코드를 중괄호 안에
붙여 넣고 그 자리에 함수의 이름을 써주면 된다
<script>
function two(){
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
}
document.write('<li>1</li>');
two();
document.write('<li>3</li>');
two();
</script>2 매개변수와 인자
입력과 출력에 해당되는것이 함수이다
프로그래밍에서의 함수를 살펴보며
어떤 효용을 가지고 있는지 어떤 문법으로 되어있는지 살펴보자
함수는 입력과 출력으로 이루어져 있는데
입력에 해당되는 것이 parameter 매개변수 argument 인자 라고 한다
출력은 return 과 관련이 있다
함수를 실행할 때 입력값에 따라서 다른 결과를 출력하도록 해보자
<script>
function sum(left, right){
document.write(left+right+'<br>');
}
sum(2,3);
sum(3,4);
</script>sum 이라는 단 하나의 함수로 입력값이 무엇이냐에 따라 다른 결과를 화면에 출력할수 있게 만들어 보자
function sum 이라고 하고 화면에 출력할 것이기 때문에
document.write 적어둔뒤 위와 아래의 sum이 똑같고
2,3이라는 값이 괄호안에 있는 것도 똑같다
2가 해당되는 괄호에다 left, 3이 해당되는 두번째 자리에 right라는 변수를 정의해보자
이 변수를 한국어로는 매개하는 변수라고 하고 영어로는 parameter 라고 한다
이 코드를 실행하게 된다면 left는 2 right 3 이 되기로 약속된 상태이다 그렇다면 left+right 더한 다음 br태그로 줄바꿈을 해보자
화면에 5가 출력되는걸 볼 수 있다
단지 sum이라는 함수에 2,3이라는 값을 입력해 주는 걸 통해서
5라는 결과를 화면에 출력할 수 있게 되었다
여기에서 함수로 전달하려는 2,3이라는 값을 인자, argumnet 라고 하고
이 값을 받아서 함수 안으로 매개해주는 변수들을 매개변수, parameter이라고 한다
그리고 이 두가지는 함수로 들어오는 입력값과 관련된 것이다
3 리턴(return)
출력에 해당
표현식(expression)이란 ?
1+1은 숫자 2에 대한 표현식이다
2-1도 숫자 1에 대한 표현식이고
1과 1이 같으냐 1===1 라는 것은
좌항과 우항이 같으니 true가 나오게 되고
1===1은 true라는 값에 대한 표현식이 되게 된다
함수도 마찬가지 이다
sum(2,3); 을 실행시키면 5라는 결과물이 나오는 표현식으로 만들고 싶다
이때 return을 알아야 한다
</script>
<h2>Return</h2>
<script>
function sum2(left, right){
return left+right;
}
document.write(sum2(2,3)+'<br>');
document.write('<div style="color:red">'+sum2(2,3)+'</div>');
document.write('<div style="font-size:3rem;">'+sum2(2,3)+'</div>');
</script>
sum2 라는 함수를 하나 만들어 주고
색도 바꾸고 폰트 사이즈도 바꾸고 싶다면
sum이라는걸 실행한 결과가 무언가를 document.write를 통해 실행하는 것이 아니라 sum한 결과의 값을 돌려준다면 되지 않을까?
그것이 바로 return이다
sum2 라는 것은 함수라는 것을 알려주고 있고
left, right 라는 것에 매개변수를 통해 들어간 값을
return을 통해서 출력함으로써 다양한 용도로 함수를 활용할 수 있게 된다는 중요한 얘기를 해주고 있다
