자바스크립트 함수에 대해 알아보자

 

 안녕하세요. 진득 코딩입니다.

 

 지난 포스팅까지 프로그래밍을 할 때 알아야 할 메인 속성들을 살펴보았습니다.

 

 이번 시간에는 이러한 메인 속성들 중 마지막 메인 속성인 함수에 대해 알아보도록 하겠습니다.

 

 함수

 

 함수는 일의 단위입니다.

 

 로직을 짤 때 테스크들이 따로따로 돌아다니게 되면 관리하기가 힘들어집니다.

 

 이때 이런 테스크들을 하나로 모아서 관리하기 위해 나온 것이 함수입니다.

 

 

 위와 같이 하나의 일을 하기 위해 여러 코드들을 사용하는 예시가 있습니다.

 

 하지만 매번 햄버거를 만들 때마다 위 코드를 하나하나 다 적어주는 건 효율적이지 않고 오류의 가능성이 높아집니다.

 

 

 

 위에 있는 여러 코드들을 함수로 묶어서 한번에 표현할 수 있습니다.

 

 위와 같이 표현하게 되면 각 함수만 호출하면 안에 있는 모든 코드들이 실행되기 때문에 재사용성이 높고 오류 발생 가능성이 낮아지게 됩니다.

 

 

 위와 같이 함수를 만든 후에는 각 함수의 이름 뒤에 괄호 ( ( ) )를 사용하여 함수를 호출할 수 있습니다.

 

 

 위와 같이 함수들을 호출해도 코드들을 하나하나 작성한 것과 같은 내용이 출력되는 것을 확인할 수 있습니다.

 

함수와 매개변수

 

 함수에는 함수 이름 뒤에 매개변수를 넣는 괄호( ( ) )가 존재합니다.

 

 해당 괄호에는 매개변수를 넣을 수 있는데 이 매개변수로 동적인 데이터를 다룰 수 있게 됩니다.

 

 위와 같이 매개변수가 있는 함수에는 호출할 때도 해당 매개변수를 넣은 상태로 호출해야 합니다.

 

 

 똑같은 함수에서 고기 패티만 새우 패티로 바뀐 것을 확인할 수 있습니다.

 

 이렇게 매개변수를 이용해 함수의 일부분만 상황에 맞춰 다르게 사용할 수 있습니다.

 

 

 매개 변수는 여러 가지 사용이 가능합니다.

 

 당연히 매개 변수를 위와 같이 3개를 지정했으면 호출할 때도 세 개의 매개변수를 지정해줘야 합니다.

 

 

 호출할 때 넣은 매개변수들이 마지막 문구에 잘 출력되는 것을 확인할 수 있습니다.

 

return

 

 함수에는 return이라는 반환문을 사용할 수 있습니다.

 

 return을 사용하게 되면 해당 함수를 호출하여 변수에 담게 되면 return값이 담기게 되어 해당 return 값을 사용할 수 있게 됩니다.

 

 

 return 값을 result라는 변수에 넣은 후 console에 출력해 보면 "완료되었습니다"라는 문자열이 출력된 것을 확인할 수 있습니다.

 

 

 retrun이라는 반환문은 강력한 기능을 가지고 있습니다.

 

 return문을 만나게 되면 그 아래에 있는 코드들은 실행하지 않고 바로 해당 함수를 종료합니다.

 

 if문을 이용해 버거 개수가 0개이면 return 되도록 코드를 작성하고 num의 매개변수를 0으로 주어 함수를 실행해 보았습니다.

 

 

 if문 위에 있는 console 출력은 잘 된 것을 확인할 수 있지만 if문에서 return을 만나게 되자 바로 종료된 것을 확인할 수 있습니다.

 

함수로 이루어진 함수

 

 위와 같이 함수들을 모아서 더 큰 함수를 만들 수도 있습니다.

 

 손님이 세트 메뉴를 주문했을 때를 가정하여 makeSet() 함수에 위에서 작성한 세 개의 함수를 모두 넣어둘 수 있습니다.

 

 

 makeSet()  함수는 makeBurgerEntire(), serveCoke(), serveFrenchFries() 함수들을 호출하여 console에 세 함수에서 출력한 것들이 모두 잘 출력된 것을 확인할 수 있습니다.

 

 함수 문제

 

 

 1번 문제는 단순히 문장을 프린트하는 함수를 만드는 간단한 문제입니다.

 

 이때 함수의 이름이 지정되어 있기 때문에 greet라는 함수 이름을 적어주고 함수를 호출하여 출력값이 잘 나오는지 확인하는 것이 중요합니다.

 

 

 greet() 함수를 호출하게 되면 문제에서 제시한 문자열이 잘 출력된 것을 확인할 수 있습니다.

 

 

 문제 2는 함수의 매개변수를 사용해 보는 문제입니다.

 

 예시에서 두 문장 중 이름만 바뀌기 때문에 매개변수에 이름을 받아서 출력할 때 이름이 들어가는 자리에 매개변수를 넣어주면 됩니다.

 

 매개변수를 다르게 줬을 때 실제로 출력값이 달라지는지 확인하기 위해 매개변수를 다르게 해당 함수를 두 번 호출하였습니다.

 

 

 매개변수만 다른 두 함수가 각각 받은 매개변수를 이름으로 잘 출력하는 것을 확인할 수 있습니다.

 

 

 문제 3은 return문을 사용해 보라는 의도의 문제로 보입니다.

 

 매개변수로 name으로 받은 후 return을 하고 호출할 때 반드시 해당 함수를 다른 변수에 담아서 호출해야 합니다.

 

 

 매개변수가 "철수"로 잘 출력된 것을 확인할 수 있습니다.

 

 

 문제 4는 매개변수의 개수에 따라 다르게 출력하는 문제입니다.

 

 매개변수의 개수를 셀 때는 arguments.length라는 함수를 사용해서 샐 수 있습니다.

 

 해당 함수를 사용하여 각각 1개일 때, 2개일 때, 3개일 때를 if문으로 처리해 주었습니다.

 

 

매개변수의 개수에 따라 다른 출력물이 나오는 것을 확인할 수 있습니다.

 

 

 문제 5는 배열이 비어있으면 0, 배열이 있다면 배열의 값들 중 가장 작은 값을 반환하는 함수를 만드는 문제입니다.

 

 이때 조건에 arr인자는 숫자 값으로만 이루어진 배열이라고 했기 때문에 배열인지 확인하고, 숫자로만 이루어진 배열인지 확인해야 합니다.

 

 배열인지 확인하는 방법은 Array.isArray() 함수를 사용하여 손쉽게 알 수 있고 배열이 아닌 걸로 판명되면 return 시킵니다.

 

 그 후 해당 배열이 숫자로만 이루어져 있는지 확인하기 위해 every를 사용해 모든 배열의 값들을 조사합니다.

 

 조사할 때는 typeof를 사용하여 === "number"에 맞는지 확인하여 아닐 경우에는 return 시킵니다.

 

 이 상태에서 일단 배열이 비어있을 때부터 처리해 주었습니다.

 

 arr.length를 이용하여 해당 배열의 길이가 0인지 확인하여 0이 되면 0을 return 해주었습니다.

 

 마지막으로 배열에 값이 있는 경우에는 for ... of문을 사용하여 가장 작은 값을 도출해 줍니다.

 

 우선 가장 앞에 있는 값을 min이라는 변수에 넣은 후 min과 배열 안에 있는 모든 값들을 비교하여 배열의 값이 더 작은 경우에만 min값을 해당 배열값으로 바꿔줍니다.

 

 모든 for ... in문이 다 돌고 나면 min에는 최소값이 들어있기 때문에 해당 min값을 출력해 줍니다.

 

 

 배열에 있는 값 중 가장 작은 값은 0이기 때문에 해당 array를 매개변수에 넣고 나온 결과값을 출력하게 되면 0이 잘 출력되는 것을 확인할 수 있습니다.

 

 테스트할 때는 배열에 있는 최소값을 계속해서 바꾸면서 테스트하시길 바랍니다.

 

 

 문제 6은 거스름돈을 주는 함수를 만드는 문제입니다.

 

 본격적인 로직을 만들기 전에 예외처리부터 해주었습니다.

 

 먼저 들어오는 매개변수인 money가 숫자인지 확인해서 숫자가 아니라면 return 하도록 하였습니다.

 

 그리고 들어오는 값이 프로그램이 감당하기 힘든 큰 값이 들어온다면 오류가 발생하기 때문에 Number.MAX_SAFE_INTEGER 값을 이용하여 해당 값이 넘을 때는 return하도록 처리하였습니다.

 

 그리고 각 지폐 또는 동전의 개수를 담는 변수들을 선언해 주었습니다.

 

 해당 변수들은 배열로 표현하면 더 깔끔하게 표현할 수 있습니다.

 

 

 필자는 무식하게 하나하나 지폐나 동전마다 개수를 세는 로직을 만들었습니다.

 

 if문을 넣어 money가 돌려줄 거스름돈보다 작은 경우에만 로직이 돌아가도록 하였습니다.

 

 if문의 조건에 부합하여 if문에 들어오게 된다면 money를 해당 지폐나 동전으로 나눈 값을 Math.floor 함수에 넣어 해당 지폐 또는 동전 변수에 넣어주었습니다.

 

 Math.floor는 버림 함수로 그냥 나누게 되면 변수 안에 쓰레기값이 들어가기 때문에 정수부분만 남겨두고 뒷부분은 버려주었습니다.

 

 위 로직은 if문으로 하나하나 하는 것보다는 배열을 for문을 이용해 한번에 처리하는 것이 더욱 깔끔하고 좋은 코드입니다.

 

 

 필자는 1원까지 모두 다 if문을 만들어주었습니다.

 

 만일 배열과 for문을 사용했다면 마지막에 나오는 console.log 안에 들어가는 값도 훨씬 간단해집니다.

 

 이 상태에서 12300을 넣어서 giveChange() 함수를 호출하였습니다.

 

 이렇게 if문이나 변수를 사용하여 노가다를 통해 for문과 배열의 중요성을 알게 되면 다음에는 비슷한 문제에서 까먹지 않고 좋은 코드를 작성할 수 있을 거라고 생각합니다.

 

 

 함수를 호출하여 출력된 데이터가 문제 6에서 요구한 대로 잘 출력되는 것을 확인할 수 있습니다.

 

 위 6문제를 한 번에 보고 싶으시다면 아래 링크에 접속하여 들어가실 수 있습니다.

 

https://hackmd.io/@ggBTzrTxSv2iIVFujwBOpw/BJ4d2P3Kkx

문제1 "안녕 내 이름은 제시카야"라는 문장을 프린트하는 함수 'greet’를 만드시오 - HackMD

 

---

 

 이번 시간에는 함수에 대해 알아보았습니다.

 

 함수를 이용하면 재사용성이 올라가고 오류 발생률이 낮아지게 되므로 효율적이고 좋은 코드를 만들기 좋습니다.

 

 자바스크립트에서 제공하는 기본 함수 사용법도 중요하지만 그때그때 필요한 로직을 함수로 만드는 실력도 중요하기 때문에 이러한 함수들을 많이 만들어보는 것이 좋다고 생각합니다.

 

 이번 시간은 여기까지입니다.

 

 궁금하신 사항이나 문의하실 사항이 있다면 댓글로 남겨주시면 열심히 답변하도록 하겠습니다.

 

 끝까지 봐주셔서 감사합니다.😊