"창문좀 닫아줘!"
라는 말 안에는 실은 많은 것들이 함축되어있습니다.
1. 일어나
2. 창문으로 걸어
3. 손을 뻗어!
4. 창문을 잡아
5. 밖과 차단 될 때까지 창문을 밀어
창문을 닫아 달라고 부탁하고 싶을 때마다 위와 같이 말 해야 한다면 얼마나 귀찮을까요? 그대신 저희는 창문좀 닫아줘! 라는 말로 저 모든 동작을 수행시킬 수 있습니다.
이게바로 함수입니다. 여러 명령어를 한 가지 기능(function)으로 묶어서 사용 하는 것이죠.
두 수를 더해서 console창에 띄우는 코드를 작성해 보겠습니다.
a=7;
b=19;
console.log(a+b);
이 기능을 function으로 만들어 보겠습니다.
function add(){
a=7;
b=19;
console.log(a+b);
}
별거없죠? 3줄의 코드를 그냥 형식에 맞게 묶어줬습니다. 여기서 add는 그냥 제가 지금 지은 이름입니다. "창문 좀 닫아줘!"에 해당 되는 더하기 기능의 이름입니다.
하지만 함수를 만든다고 안의 코드가 실행되지 않습니다. 창문 좀 닫아줘! 라고 말하듯 함수를 호출 해 줘야 합니다.
add(); // 26
함수를 호출 할 때는 이름을 불러주면 됩니다.
내가 그의 이름을 불러주었을 때
그는 나에게로 와서
실행이 되었다. (갑자기분위기시인)
지금 만든 함수는 무조건 7과 19를 더하는 함수입니다. 조금만 변형하면 내가 원하는 두 숫자를 더하게 만들 수 있습니다.
function add(a,b){
console.log(a+b);
}add(7,19);
add뒤의 ()공간은 함수를 호출할 때 전달할 인자(데이터)를 위한 공간입니다. 함수 안에서 변수처럼 동작하며, 매개변수라고 합니다. 매개변수가 있는 함수는 호출 할때 데이터를 넣어줘야합니다. add(7,19) 처럼요.
자 마지막 변형입니다. 만약 내가 더한 결과값을 console에 출력하고 싶지 않다면? 결과값 console이 아니라 html 태그에 넣고 싶다면? 함수자체가 결과값이 되도록 만들 수 있습니다.
function add(a,b){
return a+b;
}
와 같이 변형시켜 주면 add함수 자체가 결과 값을 반환(return)하게 됩니다. 뭔소리냐구요?
consol.log(add(7,19)); >>이게 가능하다는 소리죠.
let sum =add(7,19); >>이것두요
element.innerHTML = add(7,19); >>이런 것두요:)
함수를 잘 쓰면
1. 코드의 유지보수(기능별 함수로 묶여있으니, 오류가 난 함수 안에 있는 코드만 고치면 됩니다.)가 쉬워집니다.
2. 중복 되는 코드를 줄여 간결하고 아름다운 코드를 만들어 줄 수 있습니다.
