JS function 문법 기초 정리
코딩을 공부하다 보면, 반드시 등장하는 게 함수(function) 일 것입니다. 많은 분들이 이미 함수에 대해서는 잘 알고 있을 정도로 유명(?)하고 익숙한(?) 존재일 수 있겠는데요, 너무 가까운 사이이다 보니 제대로 정리를 하지 않고 넘어가서 개념이 제대로 잡히지 않은 경우를 종종 보는 경우가 있습니다.
아주 쉽고 편리한 함수 문법을 이번 포스팅에서 간단하게 정리해두면서 기초를 다져놓고 가보기로 합니다.
function 기본 문법 1 - 긴코드 축약해서 사용할 수 있음
함수를 사용하는 이유는 여러 가지가 있겠지만, '긴 코드를 축약해서 사용할 수 있다'는 이점으로 인해 사용됩니다.
아래의 코드를 브라우저 console창에서 실행을 해보면 어떤 결과를 표시해줄까요?
function 함수이름(){
1 + 1;
}
함수이름(); // 이 자리에 해당 함수 이름을 가진 함수가 호출된다.
// return 이 없어서 결과가 남지는 않음. undefined.
그렇다면, 결과값으로 2가 표시되게 해 주기 위해서는 코드를 어떻게 작성해야 해야 할까요?
function 기본 문법 2 - return 기능으로 함수의 결과값을 받을 수 있다.
맞습니다. 함수 밖으로 '결과값'을 던져주려면 'return' 키워드를 사용사용해야 함수가 실행된 이후 퉤~! 하고 뱉어줍니다.
function 함수이름(){
return 1 + 1;
}
함수이름() // 이 자리에 해당 함수 이름을 가진 함수가 호출되어 실행된 후
// return에 의해 결과값 2가 표시된다.
함수는 사용목적에 따라, return 사용이 필요 없는 함수도 있고 return을 사용해서 결과값을 받아서 다시 핸들링을 해야 하는 경우도 존재합니다. 코딩 초보 시절에는 return이 없는 함수를 주로 만들어 사용하게 됩니다. 그러다 보니 간혹 return을 낯설어하는 경우도 생기는데요, 전혀 어렵지 않습니다.
return은 함수 밖으로 결과 값을 퉤!!!!! 하고 침을 뱉듯이 뱉어 내주는 기능이거든요. 퉤퉤퉤!!!
퉤! 뱉는 기능을 코딩 용어로는 '반환'이라고 부릅니다.
[참고 사항] return은 함수 종료 기능을 가지고 있습니다.
그래서 return 이후에 존재하는 코드는 함수에서 실행되지 않습니다. 요 점은 유의해주세요.
function 기본 문법 3 - 파라미터 사용으로 업그레이드 가능
아래와 같이 덧셈을 해주는 함수 3개가 있다고 가정을 해봅시다. 왠지 비슷한 함수 형태가 반복되는 것 같죠?
만들고 싶던 함수 기능은 어떤 수를 함수가 받아서 +1을 해주 나서, 결과값을 밖으로 퉤! 뱉어주는 기능이었다면 함수를 어떻게 작성하면 좋을까요?
아래와 같이 파라미터(인자)를 받을 수 있도록 함수를 개선해 주면, 단 1개의 함수를 이용하면서도, 어떠한 숫자가 들어오더라도 항상 +1을 해서 밖으로 퉤! 뱉어 줄 수 있는(결과를 반환하는) 함수로 만들 수 있습니다.
function 덧셈(a){
return a + 1;
}
결과는 다음과 같습니다.
마치며
이렇게 파라미터를 사용하는 함수는 지금 당장 머리로는 이해가 되는 것 같지만, 코딩 초보 시절에 직접 코딩을 작성하는 상황에서는 빠르게 머리에 떠 오르지 않는 시기를 대부분 겪곤 합니다.
IDE를 열고 직접 코딩을 반복하다 보면, 어느 순간 자신도 모르게 파라미터 사용을 떠 올리게 되면서 문제를 해결하는 순간을 맞이하게 될 때의 희열을 저는 아직 기억하고 있습니다.
하루에 하나씩 알아가는 느낌 때문에 코딩 공부가 정말 재미있습니다.
오늘도 즐거운 코딩 하세요~
즐거운 코딩생활, 즐코딩.
KINcoding.
'Javascript' 카테고리의 다른 글
소수점 계산 시 정확한 계산 결과를 위한 적용 방법 (0) | 2023.02.08 |
---|---|
0.1 + 0.2 = 0.3이 아니다? 소숫점 계산 시 주의 사항 (0) | 2023.02.07 |
SEO 최적화를 돕는, 이미지 Alt 속성에 Hypen 자동으로 넣기 (0) | 2023.02.02 |
Carousel을 직접 만들어 보자 Part 2 - 성능 향상 하기 (0) | 2023.01.29 |
Carousel을 만들어 보자(Bootstrap을 이용 + 직접 만드는 방법) (0) | 2023.01.28 |
댓글