고정 헤더 영역
상세 컨텐츠
본문
반응형
3. Javascript 함수
함수는 코드의 수납상자 같은 것!
함수를 사용할 때의 장점 👉
-
코드의 반복을 줄임 -> 코드 길이가 줄어듬 -> 웹페이지 크기가 줄어듬 -> 전송시 더 유리함
-
유지보수가 쉬움 (함수 부분만 수정해주면 되니까)
-
함수의 이름을 통해서 코드의 기능을 파악하는 것도 훨씬 수월해진다
-
같은 함수를 사용하는 경우 두 코드가 논리적으로 같다는 걸 한번에 알 수 있음
함수는 <head> 태그 안에 <script> 태그를 만들어서 쓴다.
함수의 기본 문법
document.write('1');
document.write('2');
document.write('1');
document.write('2');
함수는 이렇게 중복해서 여러번 쓰는 걸 간결하게 나타낼 수 있다.
위 코드와 아래 코드의 출력 결과는 동일하다.
function two(){
document.write('1');
document.write('2');
}
two(); //함수 호출
two();
function은 이게 함수라는 걸 알려주고 two는 내가 지정한 함수의 이름이다.
소괄호 뒤에 중괄호를 열고 그 안에 함수의 기능을 입력한다.
함수를 호출할 때는 함수 이름을 사용한다.
매개변수와 인자 (Parameter & Argument)
함수는 연산에 필요한 값을 전달하는 것도 가능하다.
function sum(x, y) {
document.write(x+y+'<br>');
}
sum(2,3); // 5
sum(3,4); // 7
외부로부터 x와 y의 값을 받아오는 sum 이라는 함수를 만들었다. x와 y를 매개변수라고 부른다.
sum은 x+y의 값을 화면에 출력하는 함수이다.
sum에 2와 3을 전달하면 화면에 5가 출력되고 3과 4를 출력하면 7이 출력된다.
이때 sum()의 괄호 안에 넣어서 전달하는 숫자는 인자라고 부른다.
리턴(Return)
위에서 만든 함수 sum은 x+y의 값을 화면에 출력하는 게 전부였다.
만약 x+y의 값을 빨강색으로 표시하고 싶다거나 다른 방식으로 응용하기 위해선 일일이 함수를 새로 만들어야 할 것이다.
그런 문제를 해결하고 함수의 응용 폭을 더 넓혀주는 것이 리턴이다.
💡 함수의 입력에 해당하는 것이 매개변수와 인자, 출력에 해당하는 것이 리턴이다
function sum2(x, y){
return x+y;
}
document.write(sum(2,3)+'<br>');
document.write('<div style="color:red">'+sum2(2,3)+'</div>');
sum2 함수는 x+y의 값을 반환(리턴)한다. 즉, x+y의 값 자체를 가지게 되면서 리턴값을 화면에 그냥 출력하거나 다른 코드를 추가해서 표시하는 등 함수의 활용폭이 더 넓어졌다.
함수의 활용 - 리팩토링
<input type = "button" value ="night" onclick="
var target = document.querySelector('body');
if(this.value === 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'day';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'powderblue';
i = i + 1;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = 'night';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'blue';
i = i + 1;
}
}
">
지난 포스팅에서 작성했던 코드를 함수를 사용해서 리팩토링을 해보자.
function nightDayHandler(self){
var target = document.querySelector('body');
if(self.value === 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
self.value = 'day';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'powderblue';
i = i + 1;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
self.value = 'night';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'blue';
i = i + 1;
}
}
}
nightDayHandler라는 새로운 함수를 만들었다.
이 함수는 <head> 부분의 <script> 안에 붙여넣는다.
이때, 원래 코드에서 this라고 되어있던 부분을 모두 매개변수 self로 바꿔주었다.
왜냐하면 this는 속한 태그 자신을 가리키게 되어있는데, 이 코드의 위치가 <head>로 옮겨지면 가리키는 대상이 바뀌기 때문이다.
<body>
<input type = "button" value ="night" onclick="
nightDayHandler(this);
">
이제 <body> 안에 버튼을 만들때는 위처럼 간단히 한줄로 함수를 호출하기만 하면 된다.
이때 인자로는 this ( 이 경우에는 this가 input 태그를 가리킴)를 전달한다.
만약 버튼이 하나만 있을 때는 그 효용이 잘 와닿지 않겠지만 저런 버튼을 수십개 만들어야 한다고 생각하면 얼마나 코드가 간결해질지 짐작이 갈 것이다.
실제로는 <head> 부분과 <body> 부분에 더 많은 코드들이 있겠지만 생략했다.
<head> 안에 함수를 정의하고 <body>에서 함수를 호출하는 코드는 아래와 같다.
<head>
<!-----다른 코드들은 생략-------->
<script>
function nightDayHandler(self){
var target = document.querySelector('body');
if(self.value === 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
self.value = 'day';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'powderblue';
i = i + 1;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
self.value = 'night';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'blue';
i = i + 1;
}
}
}
</script>
</head>
<body>
<!------다른 코드들은 생략------->
<input type = "button" value ="night" onclick="
nightDayHandler(this);
">
<input type = "button" value ="night" onclick="
nightDayHandler(this);
">
</body>
※ 이 글은 edwith의 [부스트코스] 자바스크립트의 시작이라는 강의를 듣고 작성되었습니다.
반응형
'IT > Javascript' 카테고리의 다른 글
| 코드카데미 Javascript - Variables (변수 선언, 출력, typeof 연산자) (0) | 2020.09.14 |
|---|---|
| 자바스크립트의 시작 : Javascript 활용 (jQuery, API 등) (0) | 2020.09.11 |
| 자바스크립트의 시작 : Javascript 객체 (0) | 2020.09.11 |
| 자바스크립트의 시작 : Javascript 제어문 (0) | 2020.09.08 |
| 자바스크립트의 시작 : 웹과 Javascript (0) | 2020.09.07 |
댓글 영역