만약 코딩을 첫 입문을 하게 된다면, 보통은 변수와, 문자열, 문자열 타입과 같은 챕터는 쉽게 이해할 수 있다.
하지만 함수편에 들어와서는 함수라는 것에 대해 명확하게 이해하고 넘어가지 못하는 경우가 많은 것 같다.
함수의 형태는 input과 output이 존재함에도 불구하고, 함수는 주로 어떠한 element에 이벤트를 바인딩할 때 사용했기 때문일 수 있다라는 생각을 했다.
element.addEventListener('evnet',function(){
//이벤트 실행~~
})특히 나의 경우는 그랬다.
그렇게 함수에 대한 명확한 이해가 없이 사용하다가 어느 순간 '유레카!'하면서 함수에 대해 이해한 것에 대해 기록을 남기고자 한다.
정말 초보자도 쉽게 이해할 수 있었으면 좋겠다.
먼저 매개변수(parameter)와 전달인자(argement)에 대해 이해할 필요가 있다.
매개변수 : 함수를 정의할 때 나열된 변수를 뜻하며, 함수를 호출 할 때 input되는 데이터를 가르키기 위해 사용된다.
전달인자 : 함수를 호출할 때 함수로 전달되는 실제 값이다.
plus라는 함수가 있다고 가정해보자 현재 plus함수를 선언하기는 했지만, 해당 함수는 어떠한 기능도 하지 않을 것이다.
function plus() {
}이제 불특정한 값 a와 b를 더해주는 함수를 만들고자 한다. a,b에는 어떠한 값이 들어올 지 우리는 알지 못한다. 그렇기 때문에 여기서 사용되는 것이 매개변수라고 생각하면 된다.
매개변수를 사용해서 plus함수를 다시 작성해보자.
function plus(a,b) {
console.log(a)
console.log(b)
}자, 이제 위의 함수는 a,b 2개의 매개변수를 받아올 수 있는 함수가 되었다. 그리고 해당 함수는 두개의 매개변수를 콘솔창에 출력해주는 함수가 되었다.
콘솔창에서 plus함수를 호출해보자. 정의한 함수를 호출할 때는
plus()이렇게 호출할 수 있다.
하지만 실제로 plus() 이렇게만 호출하게 된다면 콘솔창에는 undefined라고 출력될 것이다.
여기서 사용되는 게 전달인자이다.
전달인자는 함수를 호출할 때 괄호 안에 들어가는 실제 데이터를 뜻한다고 앞서 설명했다.
다시 콘솔창에 plus(1,2) 이렇게 plus 함수를 호출해보자.
결과는 아래와 같은 것이다.
1
2
undefined우리는 plus 함수를 호출 할 때 전달인자로 1과 2를 전달해주었고, plus함수는 매개변수 a와 b를 콘솔에 출력해주도록 정의해두었기 때문에 우리가 전달한 전달인자가 그대로 출력되는 것이다.
이게 매개변수와 전달인자의 가장 핵심이다!
다시 돌아와서 우리의 plus함수는 a,b를 더하도록 정의하겠다고 했다. 따라서 아직 함수가 완벽하게 정의된 것이 아니다. 따라서 다시 스크립트로 돌아가서 함수를 정의해보겠다.
function plus(a,b) {
console.log(a+b)
}a와 b를 더한 값을 출력하는 함수를 정의했다.
plus함수를 다시 호출해보겠다.
plus(1,2)를 호출하면 콘솔창에
3
undefined라고 출력될 것이다.
문자열과 타입, 변수에 대해 배우고 왔다고 undefined에 대해 잘 알 것이다.
이를 보다 직관적으로 이해하기 위해서는 result라는 변수를 선언하고 plus(1,2)의 결과값을 할당해보자.
그리고 콘솔에 찍어보자.
let result = plus(1,2)
console.log(result)결과는 undefined가 나올 것이다.
우리는 분명 a와 b를 더해줬는데 왜 3이 출력되지 않고 undefined가 나올까?
이를 이해하기 위해서 서두에 얘기했던 input / output 을 이해해야 한다.
매개변수와 전달인자는 input에 해당되는 개념이다. 값을 전달하고 처리하기 위한 것.
output은 input으로 받은 값을 일련의 처리과정을 거쳐 결과물을 보여주는 것이다.
javascript 함수에서 output에 해당하는 것이 바로 return 이다.
다시 함수를 작성하고 함수를 호출해보자.
function plus(a,b) {
return a+b
}
let result = plus(1,2)
console.log(result)변수 result에 함수 plus(1,2)의 결과값을 할당하고 콘솔창에 찍어보자.
변수 result의 값은 3이 될 것이다.
이로서 함수에 대한 가장 기본적인 이해를 마쳤다.
사실 나는 그 전까지도 함수가 뭔지에 대해 완벽하게 이해하지 못했던 것 같다.
그러나 이번 코드스테이츠 part 타임 과정을 진행하면서 내가 부족했던 기본기를 탄탄하게 다질 수 있는 기회를 얻게 된 것 같다.
