네이버 부스트코스 JS Javascript 함수

 

 

 

 

함수

 

하나의 긴 태그 안에 수정해야 할 사항이 있을 때

함수를 이용하면 훨씬 쉽게 수정할 수 있다.

function 함수 이름() {

이렇게 적어주면 함수가 설정이 되고

onclick부분에 함수이름을 적으면 완성.

 

 

 

반복해야 할 경우를 생각해보자.

document.write('강아지' );
document.write('기러기');
document.write('까치');
document.write('고양이');

여기서 기러기와 까치를 반복하고 싶다.

전 시간에 배웠던 반복문을 사용하면 된다.

하지만 기러기와 까치가 중구난방으로 있는 경우에는

반복문 처리를 하면 굉장히 지저분해질 텐데

이럴 때는 어떻게 해야 할까?

 

 

바로 함수를 사용하면 된다.

function bird(){
document.write('기러기');
document.write('까치');
}

 

이제 기러기와 까치는 bird라는 함수에 묶이게 된다.

반복하고 싶은 부분을 bird로 바꿔준다.

 

document.write('강아지' );
bird();
document.write('고양이');
bird();

 

사이사이에 넣어봤더니

 

잘 반복되는 모습을 볼 수 있다.

 

 

 

 

 

매개변수와 인자

 

 

 

함수는 입력과 출력으로 이루어져있다.

이때 입력에 해당하는 것을 매개변수와 인자라고 한다.

 

document.write(1+1)

 

이 식을 입력하면 값은 2가 나온다.

js는 동적이기에 계산되어서 출력되는 것이다.

이때 입력값을 다르게 했을 때

그에 맞게 결괏값을 출력하게 만들려면 어떻게 해야 할까?

 

 

sum으로 생각해보자.

값을 합산하는 식이다.

sum(2,3)이면 5

sum(3,4)이면 7로 출력하고 싶다.

 

function sum(left, right) {
document.write(left + right);
}

 

sum의 괄호 안에 들어오는 숫자들을

left와 right라는 변수에 넣어준다.

이때 변수를 매개변수라 한다.

 

sum(2,3);
sum(3,4);

 

계산을 원하는 숫자를 넣기만 하면 된다.

이때 넣은 숫자들을 인자라고 한다.

 

 

 

정상적으로 계산이 됨을 볼 수 있다.

 

 

 

 

리턴

 

아까의 함수에 다른 설정을 한다고 생각해보자.

만약 함수의 출력 값이 빨간색임을 원한다고 하자.

그러면 빨간색으로 원하는 값마다 

다 함수 이름을 바꾸고 손을 보아야 한다.

 

 

이때 return을 이용해 

함수를 약간 바꾸고 계산한 값의 표현식으로 만들면 된다.

sum(2,3)의 값만 빨간색으로 출력되었으면 한다.

그러면 sum(2,3)을 여러 버전이 아닌 한 값으로 만들면 되는 것이다.

1+1을 2로 출력하듯 말이다.

document.write('<div style="color:red">'+sum(2,3)+'</div>');

function sum(left, right) {
return left + right;
}

 

document.write을 통해 특정한 임무를 수행하지 않기에

이를 return으로 적어 값을 돌려받고

원하는 속성을 출력할 수 있다.