[ JS ] 자바스크립트 함수에 대한 기본 구조와 예시로 확인해보기

 함수란 기본적으로 우리가 원하는 실행 문장을 적어놓고, 그것을 어떠한 상자 안에 넣은체로 필요할 때 빼서 쓰는 것을 의미합니다. 

 

 

1. 함수는 언제 써야하고, 어떻게 사용해야할까?

 예를 들어, 이렇게 점수가 쫙 ~ 있다고 생각해봅시다. 우리는 중간과사와 기말고사의 합을 구해주고 싶습니다. 그렇다면 이걸 다 우리가 일일히 숫자를 기입해야할까요? 아닙니다. 우리가 오늘 배우는 자바스크립트에서의 함수는 이런 '''반복'''적인 일을 해야할 때 빛을 발한다고 말할 수 있습니다.

학생명	중간고사 점수	기말고사 점수
A	28	44
B	45	33
C	35	35
D	22	56
E	17	54
F	33	35
G	54	46
H	43	38
...	...	...

 성적 값 중간고사와 기말고사 값을 더해주는 식을 만들고자 할 때 a 와 b 값을 더하는 것이 우리가 원하고 그것을 실행 결과 값으로 출력해야합니다. 그렇다면 이 코드는 작성해주어야 할까요?

 

실행코드 공유 

// ? 1. 학생들의 총점을 구하는 식을 함수로 표현해본다면?
function testResult(mid, fin) {
  console.log(mid + fin); //! 여기서 결과 값 출력
}

testResult(28, 44); //! A 학생의 결과 총점 : 72

 

실행 값

결과값

네 위에 보다시피, 자바스크립트 에서 함수를 표현하기 위해서는 

 

자바스크립트 함수의 전체적인 구조는 이렇게 됩니다.

 

function 함수명(파라미터) {

        실행 요소(파라미터가 여기 들어갑니다);

}

 

 이렇게 간단하게 나타낼 수 있습니다. 물론 여기에 파라미터의 갯수나 실행 요소의 다각화 등이 추가되면 더욱 길어지고 복잡해지겠지만, 기본적인 큰 틀은 여기 나와있는 그대로 입니다. 우선 function을 빼먹으면 아예 작동이 안 됩니다. 그리고 함수명과 파라미터 명은 본인이 지정해주어야하는데, 이게 생각보다 개발자 난관 중 함수명 또는 변수명 짓는게 난관일(?) 정도로 생각보다 힘듭니다. 즉, 함수명과 파라미터명은 우리가 정해준 형식을 보는게 아니라, 다른 사람이 봐도 이해가 될 수 있게 요약된 것으로 지어줘야 하기에 생각보다 쉽지 않습니다. 

 이렇게 크게 어떻게 구성되는지 확인해볼 수 있었습니다.

2. 너무 헷갈리는데 조금 더 보는 사람이 편하게 출력하는 방법은 없을까?

 

 이제 우리는 결과값이 숫자만 달랑 하나 나오는게 끝이었습니다. 그렇다면, 우리 자바스크립트 함수 결과값이 조금 말 그대로 예쁘게 나오게 할 수 있는 방법은 없을까요? 당연히 있습니다. 실행요소에 ' ' 를 추가하여 문자열 요소를 추가해준다면 우리가 그저 딱딱한 자바스크립트 결과값이 아닌 우리에게 익숙한 출력값으로 다가오게 될 겁니다.

 

위에 1번에서 봤던 실행 값

여기서 실행 값 부분에 더 추가해주어 ' ' 안에 숫자 값을 넣겠습니다, 그리고 학생의 이름이 있었으면 해서 name 파라미터를 추가해주도록 하겠습니다. 우리가 말한대로 추가해서 식을 완성해서 실행해본다면 

 

출력 값

 식을 말 그대로 작성하여 출력했는데 무언가 이상한 점 느끼셨나요? 그렇습니다 mid와 fin 에 입력된 점수들이 각각 Number 형식으로 더해진 것이 아닌, String 형식으로 더해져버렸습니다. 이를 해결하기 위해선 Number 값으로 바꿔주는 형 변환이 필요하겠죠? 

 그렇게 형 변환을 하고 실행해주면,

 

실행값

 

결과 값

 이렇게 잘 출력되는 것을 확인할 수 있습니다. 그리고 위의 표 대로 다른 결과 값들도 같이 확인해보도록 하면 

 

실행 코드

 

결과 값

 

이렇게 마무리 지을 수 있습니다. 오늘은 자바스크립트 함수에 대해 알아봤습니다. 기본적인 구조만 아셔도 다른 언어를 배우고 이걸 배우는 분이라면 충분히 이해가 가능하실거라 생각합니다. 처음 공부하시는 분이라면 너무 어렵게 생각하지 마시고 차근히 전체적인 그림을 생각해보면서 스스로 코드를 작성해보시는게 정말 큰 도움이 될거라고 생각합니다 :) 

 

 

저의 아주 작은 티끌 코딩 글이 블로그 방문자 님의 코딩에 조금이라도,

도움이 됐으면 좋겠습니다.  감사합니다 : )