함수와 함수 만드는 방법
함수 : 함수를 선언하고 기능을 정의하면 그 함수의 이름을 긴 코드 대신 사용할 수 있다. 커스텀으로 기능을 만든다 생각하면 되는 것 같다. '불러서 쓸 수 있는 코드'이며 함수 안에는 여러가지의 변수나 로직을 저장할 수 있다.
함수를 만드는 방법에는 대표적으로 2가지가 있다.
function 키워드를 사용한 '함수 선언식'과 함수 선언식을 변수 안에 저장한 '함수 표현식이 있다.
두가지는 기능은 동일하지만 선언식은 호이스팅이 가능하고 표현식은 불가능하다는 단점이 있다.
(호이스팅: 지정된 변수나 함수를 해당 코드 윗줄에서 끌어올려 사용할 수 있는 것. 공식으로 지정된 명칭은 아니다.)
바로 다음에 공부할 인수와 반환 내용과 함께 예시 코드를 작성할 예정이다.
인수와 매개변수
함수는 인수(argument)와 매개변수(parameter와 동일)로 데이터를 전달한다.
함수가 만들어지고 호출할 때 옆에 소괄호를 붙이는데, 이 소괄호에 전달받을 데이터를 입력하는 것이며 이것을 '인수'라고 한다. 함수가 실행될 때 전달받는 재료라고 보면 된다.
그리고 이러한 인수를 함수에 전달할 때 함수에서도 인수를 전달받을 수 있는 공간이 있어야한다.
바로 함수명 바로 옆에 있는 소괄호에 전달하는 것인데, 이때 받는 데이터를 '매개변수'라고 한다.
즉 함수를 호출하고 소괄호에 인수를 입력해서 해당 함수에 매개변수로 전달하는 것이다.
코드 예시
//함수 선언식
// 매개변수 1을 a라는 이름으로 받는다.
function func1 (a) {
console.log(a)
}
// 함수를 호출하고 1을 인수로 전달한다.
func1(1)
// 함수 표현식
const func2 = function (b, c, d, e, f) {
console.log(b + c + d + e + f)
}
func2(2, 3, 4, 5, 6, 8)- 두 가지 모두 인수와 매개변수로 숫자를 전달받는다.
- 인수와 매개변수는 ','로 구분해주면 복수로 전달할 수 있다.
- 매개변수보다 인수 수가 더 많을 경우 매개변수의 갯수까지만 함수에 반영된다. 나머지는 무시됌
반환
함수는 데이터를 입력받을 수도 있고 데이터를 반환시킬 수도 있다. 함수 호출문이 데이터로 대체됨을 뜻한다.
함수가 데이터를 반환하려면 '이 데이터를 반환한다'라는 의미를 가진 'return' 키워드를 사용한다.
함수 안의 코드 결과를 반환하여 그 결과를 호출한 곳에서 사용할 수 있도록 하기 위함.
코드 예시
function getThree (a, b) {
return a + b;
}
console.log((getThree (1, 2))) // 3마치 최종 결과물 처럼 ~~값 값을 도출해내겠다. 라는 의미이다.
그리고 함수는 return을 만나면 바로 종료되는 특성이 있다.
회고: 함수 만드는 2가지 방법과 인수, 매개변수를 활용한 데이터 전달법, 최종 결과 도출해내는 법까지 배웠다.
가끔 return문이 없는 함수가 있어서 return의 역할에 대해 헷갈렸다. 예를 들어 div 태그를 document.body에 표출시키는 함수의 경우 return이 없어도 실행이 됬었다.
구글링해보니 해당 함수 내에서 return은 최종 결과물이라는 의도를 명확히 하는 용도일 뿐이며 return이 없어도 div 태그를 document.body에 표출시키는 엘리먼트가 있기 때문에 함수가 실행된 것이었다.
위의 배움을 바탕으로 앞으로 함수마다 상황이 다르겠지만 실무에서는 코드를 명확하고 가독성 있게 짜는 것이 중요할 것이므로 명확성에 맞춰 코드를 짜야겠다는 생각이 들었다.
