[JS] 함수 다루기 2장

그룹스터디 🦆 팀 러버덕과 함께!

<다룰내용>
1.함수호출

• 1. 매개변수와 인수
• 2.매개변수의 최대 변수
• 3.반환문

2. 참조에 의한 전달과 외부 상태의 변경
3. 콜백함수

1.함수호출

1.매개변수와 인수

자바스크립트에서 함수를 호출하는 방법은 메모리에서 함수를 가리키는 '식별자()'

function hi(매개변수){
 console.log('hi' + 매개변수)
}
hi(인수)

함수 외부값(인수)을 함수 내부(매개변수)로 전달할 경우, 매개변수를 통해 인수를 전달받는다.
매개변수는 함수 내에서 변수로 취급된다.따라서 메모리에 Undefined로 초기한 후, 인수를 받는다.
함수 매개변수는 함수 내에서만 사용할 수 있고 외부에서 접근불가능하다.(스코프개념)

function add(x, y) {
  return x + y
}

add(3) // NaN = 3 + undefined
add(5, 10, 20) // 15 = 5 + 10

인수갯수와 매개변수 갯수가 달라도 js에서는 상관하지않는다.
따라서 인수가 전달되지 않은 매개변수들의 값은 undefined로 활용이 된다. 또한, 추가로 더 많은 인수를 전달받는 경우, 초과된 인수는 내부적으로 arguments라는 객체로 저장되어 보관된다.

2.매개변수의 최대변수

함수에 넘겨야 하는 인수 개수가 많아지면 인수의 순서를 착각하기 쉽고
함수의 사용법을 이해하기도 어렵고, 의도치 않은 실수를 발생시킬 가능성을 높인다.
따라서 여러개의 인수를 전달해야한다면 객체를 사용해서 하나의 인수로 전달하는것이 좋다.

const obj={
  x:0,
  y:0,
  radius:5
 }
function circulate(params){
	const x= params.x;
    const y= params.y;
}
circulate(obj)

이렇게 객체로 전달하면 인수 순서가 바뀌는 문제가 발생하지않고, 인수를 추가하는 경우에도 객체 프로퍼티만 추가하면 되므로 코드의 가독성도 좋아지고 실수도 줄어든다.
단, 객체를 인수로 넘기면 객체의 참조가 전달되는것이므로 함수내에서 객체의 프로퍼티를 변경하면 원본 객체의 프로퍼티도 바뀌게 된다.

3.반환문

return 키워드는 두 가지 역할을 할 수 있다.
1.함수의 실행을 중단할 수 있다.
return밑에 로직들은 실행되지않는다.
따라서 대게 함수 내에서 맨 처음 에러를 확인하는 로직이 있고 에러가있다면 return문을 사용해서 밑에 로직은 실행하지않은채 그 함수를 빠져나오는 용도로 많이 쓴다.
2.return 키워드로 실행결과를 함수 외부로 반환 할 수 있다.
예를 들면 ,

function num(){
	return 2;
}
const getNum=num()
console.log(getNum)//2

함수를 호출해서 함수가 실행되면,
return을 해준다면 그 함수의 출력값,return value를 받을 수 있다.

function num(){
	console.log(2);
}
const getNum=num()
console.log(getNum)//undefined

만약 return해주는 함수가 아니라면 반환하는 값이 없으므로
변수에는 undefined가 담긴다.

2.참조에 의한 전달과 외부 상태의 변경

함수는 원시 값을 인수로 넘겼을 때와 객체를 인수로 넘겼을 때 다르게 동작한다.
원시값을 인수로 함수에 넘기면 그 값 자체가 매개변수에 전달된다.

function add(x){
  return x=x+1;
}
let a =2;
let b=add(a); 
console.log(a,b) // a는 2 b는 3

변수 a와 변수 x는 다른 영역의 메모리에 위치하므로 서로 별개다.
x값을 바꾸어도 a는 전혀 영향을 미치지 않는다.
만약 타입이 객체라면,참조타입이라면
원시타입과 완전 다르게 행동한다.

function add(x){
  return x.a=x.a+1;
}
const obj={a:2}
let b=add(obj); 
console.log(obj.a) // obj객체의 a값이 3으로 바뀜.  

객체는 힙 메모리 주소를 복제하여 전달함으로, 해당 변수가 참조하는 주소 값을 전달하는 방식으로 동작한다.
함수내의 변수 x와 obj는 같은 객체를 참조하고있다.
따라서 함수내에서 x.a를 수정하는 일은 obj.a를 수정하는것과 같다.

3.콜백함수

콜백 함수는 말 그대로, 특정 시점에 다시 불러와 실행시키는 함수이다.
자바스크립트는 기본적으로 이벤트 기반 프로그래밍 언어이다.
어떤 이벤트가 발생하면,특정시점에 도달했다면 특정 함수를 호출시키는 것이다.
또한 함수는 일급 객체여서 다른 함수에 인수로 함수를 넘길 수 있다.
1.타이머

setTimeout(function(){....},1000) // 1초가 지나면 함수를 실행한다.

2.이벤트

button.addEventListener('click',function(){...})
//버튼을 'click'했다면 특정 함수를 실행시킨다.