9일차 : 함수, 함수의 활용

9일차 : 함수, 함수의 활용

 

 

함수의 기본

 

반복문으로 해결할 수 없는 반복(?)이 등장한다면 어떻게 해결할까요?

예를 들어, 목차가 1,2,3,4 이렇게 나가는 것이 아니라 1-1, 1-2처럼 소단원이 있다고 생각하고, 이런 소단원을 반복해서 삽입하고 싶다고 가정해 봅시다.

아래처럼 하나씩 입력하게되면 너무 힘들겠죠.

이렇게 일정한 규칙이 없는 상태를 반복하려면, 반복문이 아닌 함수를 사용해야 합니다.

 

웹브라우저에게 함수를 사용한다는 신호를 주려면 먼저 function을 사용해야 합니다.

function 뒤에는 함수의 이름을 넣어주면 되고, 이름 뒤에 중괄호, 그 뒤에 대괄호를 넣어줍니다.

대괄호 안에는 함수로 만들고자하는, 즉 반복되는, 혹은 재사용되는 코드를 넣어주면 됩니다.

 

예를 들어, 2-1과 2-2를 두 번, 세 번 삽입하고 싶다고 하면, 2-1과 2-2를 적는 코드를 함수로 만들 수 있습니다.

2-1과 2-2를 적는 코드를 two라는 함수로 만들어버리면, 그냥 two();를 적었을 때, 2-1과 2-2가 입력됩니다.

바로 이런식으로요!

반복문처럼 규칙을 갖고 여러번 실행되는 것은 아니지만, 함수를 이용해서 같은 내용을 간결하게 표현할 수 있게 됐습니다.

이것이 바로 함수의 기본입니다.

 

 

매개변수(parameter)와 인자(argument)

 

함수의 매개변수는 함수를 호출할 때 인수로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수입니다.

또한, 함수의 인자 또는 인수는 함수가 호출될 때 함수로 값으로 전달해주는 변수를 가리킵니다.

무슨말인지 이해가 되시나요? 자판기로 예를 들어 생각해봅시다.

 

자판기는 원하는 제품 밑에 있는 버튼을 누르면 그 제품이 나오죠.

물론 제품을 실제로 볼 수 있는 자판기들도 있지만, 커피자판기처럼 이름만 적혀있는 나오는 자판기도 있습니다.

거기 있는 버튼을 매개변수라고 생각하면 됩니다. 버튼에 적힌 이름은 인수가 되겠죠.

 

자판기 첫번째 칸에 있는 버튼을 누르면 첫번째 칸에 들어있는 물건이 나오게끔 설정되어 있습니다.

버튼을 누르면 물건이 나온다 - 이것을 함수라고 생각할 수 있겠네요.

버튼은 매개변수가 되는 것이구요.

그런데 만약 그 칸에 물이 들어 있으면, 버튼을 눌렀을 때 물이 나오게 되고, 커피가 들었으면 커피가 나오게 됩니다.

물과 커피는 함수의 인자가 됩니다.

 

간단한 함수를 하나 만들어 봅시다.

document.write(1+1)을 나타내는 함수인 oneplusone을 만들었습니다.

이 함수는 아무리 사용해도 2만 나타냅니다.

 

만약 1+1이 아니라 1+2, 2+2를 하고 싶으면 함수를 어떻게 만들어야 할까요?

덧셈을 하는 함수를 만들거니 이름은 sum이라고 만들어 줍시다.

덧셈에는 더할 수 두 쌍이 필요하겠죠. 간단하게 x, y로 정해보겠습니다.

표시할 값은 x+y이기 때문에 document.write(x+y)를 넣어줍니다.

그리고 2와 3을 각각 x,y대신 넣어주면, 아래처럼 5가 출력됩니다.

 

그런데 이렇게 여러개를 넣어주면 값이 줄바꿈없이 연속으로 표시가 되는데요.

이를 방지하기 위해서 함수 마지막에 줄바꿈을 나타내는 <br>을 추가해 줍시다.

훨씬 가독성 있게 변경되었습니다.

이렇게 간단히 매개변수와 인자를 이용하여 함수를 만들어 보았습니다.

복잡한 함수도 이런식으로 간단하게 만들어 놓는다면, 손쉽게 값을 구할 수 있겠죠.

 

 

리턴(return)

 

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

입력부분의 파라미터와 아규먼트에 대해 배웠으니 이제 출력 부분의 리턴에 대해 배울 차례입니다.

리턴까지 배우면 함수의 모든 것을 배웠다고 할 수 있습니다.

 

우리가 위에서 만든 함수 sum의 경우, 함수 자체에 document.write이 포함되어 있었습니다.

따라서 x와 y의 합을 적어달라 이런 함수였죠.

만약에 x+y의 값을 빨간색으로 표시하고 싶은 경우에는 새로운 함수를 만들어야 합니다.

함수 자체를 빨간색으로 표시하는게 아니라, 여러가지 값 중 하나만 색상을 바꿔서 강조하고 싶다면요?

 

이럴 때는 sum이 그냥 함수값 하나만 저장하는 걸로 함수를 변경할 수 있습니다.

리턴이 바로 이런 경우에 해당합니다.

sum이라는 함수를 그냥 return x+y 즉, x와 y 값의 합을 출력하는 함수로 변경한다면, 이 값을 꾸밀 수도 있게 됩니다.

이렇게 sum을 설정해 놓으면, 다양한 맥락에서 다양한 용도로 함수를 활용할 수 있게 됩니다.

위처럼 색상을 바꿀 수도, 사이즈를 바꿀 수도 있습니다.

이것이 바로 리턴이 우리에게 주는 엄청난 혜택입니다.

 

 

함수의 활용

 

이렇게 배운 함수를 활용해서, 나이트모드 코드를 리팩토링해봅시다.

이 내용은 함수 예고에서 이미 살짝 다뤘는데요.

 

nightdayhandler라는 새로운 함수를 head에 만들어 놓고, 버튼의 onlick 부분에 넣었던거 기억나시나요?

이렇게 함수를 이용해서 중복되는 복잡한 코드를 없애주는 것이 바로 리팩토링입니다!

그런데 여기에서 this를 왜 self로 변경해야 하는지에 대한 조금은 자세한 설명이 필요한데요.

head 안으로 들어온 this 는 더이상 input 버튼을 가리키는 것이 아닙니다.

바로 전역객체, 웹브라우저에서는 윈도우를 가리키게 됩니다.

이와 관련된 내용은 나중에 언젠가 배우도록 하구요.

 

아무튼 오류없이 이를 실행하기 위해서는 input 버튼 안의 nightdayhandler 함수에 this라는 인수를 넣어주면 될텐데요.

우선은 함수 안에 매개변수를 넣어주어야 나중에 그 자리에 this를 입력할 수 있겠죠.

그래서 head 안의 this를 self로 변경해 주는 작업이 필요합니다.

 

아직은 완전히 이해하기는 힘들지만 이렇게 함수를 활용하는 이유는 바로 복잡한 코드, 중복되는 코드를 개선시키는 것이고 이러한 리팩토링 작업은 코딩에서 정말 중요합니다!