Data type : Function
Statement : Function
함수
함수 기본 문법 구조 파악
함수(function)란 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다.
- fundamental building block in the program
프로그램을 구성하는 기본적인 빌딩 블럭 - subprogram can bo used multiple times
서브 프로그램으로도 불리며 여러변 재사용 가능 - performs a task or calculateds a value
테스크 또는 값을 계산하기 위해 사용됨
function 함수명( [인자...[,인자]] ){
코드
return 반환값
}
출처: SCALER Topic
Parameter & Argument
입력과 출력이 함수로 이루어진 함수는
'입력'에 해당하는 Parameter 매개 변수와 argument 인자, '출력'에 해당하는 Return이 있다.
<h1>Parameter & Argument</h1>
<script>
function onePlusOne() {
document.write(1+1+'<br>');
}
onePlusOne();
// left,right = parameter(매개 변수)
function sum(left, right) {
document.write(left+right+'<br>');
}
// 2와 3은 = argument(인자)
sum(2,3); //5
sum(3,4); //7
Return
리턴, 함수를 다양한 용도로 활용하기
<h2>Return</h2>
<script>
function sum2(left, right) {
return left+right;
//함수의 (left, right) 매개변수로 들어가는 값을 return으로 출력함으로써 기능을 원자화함! 간소화시킨 함수를 다양하게 활용할 수 있게됨!
}
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>
expression 표현식
1+1
2
1+1은 2에 대한 표현식!
1===1
true
1===1은 true에 대한 표현식!
function sum(left, right) {
return left+right;
}
document.write(sum(2,3));
5
document.write(sum(2,3));은 5에 대한 표현식!
함수의 활용
<문제>
Day & Night 토글 버튼(input코드)이 1억개 일때! 유지보수가 어려운 문제가 발생한다!
<목표>
함수를 이용해 코드 효율적으로 리팩토링 하기!예제는 배열과 반복문 활용(2) 게시글의 목차4번에서 가져왔다.
1️⃣아래와 같은 코드가 '1억 개'가 있다면 유지보수는 사실상 불가능에 가깝다.
<input id="Night_Day" 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 = 'Gray';
i = i + 1;
}
}
">2️⃣ 함수를 이용하면 리팩터링 할 수 있다!
3️⃣ 옮긴 input코드를 (코드 기능 식별하기 쉬운 이름>)nightDayHandler라는 function으로 묶는다!
<head>
<title>WEB1 - Javascript</title>
<meta charset="utf-8">
<script>
function nightDayHandler(){
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 = 'Gray';
i = i + 1;
}
}
}
</script>
</head>4️⃣ 함수로 묶어진 코드는 함축적으로 활용할 수 있게 된다! 
5️⃣토글의 글자 변환이 제대로 작동하지 않은 문제 해결 하면 완료!
<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 = 'Gray';
i = i + 1;
}
}
}
</script>
'''
<input id="Night_Day" type="button" value="Night" onclick="
nightDayHandler(this);
">함수 ) 1️⃣function(self) 2️⃣this => self로 변경
input 태그 ) nightDayHandler(this);
FE 개발 공부 중