[Javascript] 11. 함수 function

함수

서비스를 만들다보면 같거나 비슷한 동작들이 생기기 마련이죠. 팝업을 띄운다던지 결제같은 것..?
이런 동작들을 자주 사용하거나 여러 곳에서 사용하면 하나로 만든 다음 재활용하는게 좋겠죠!
중복되는 코드도 줄어들고 유지 보수도 편해지니까요

함수는 이것을 가능하게 해줍니다!

<script>
//함수    /함수명
function showError(){
	alert('에러가 발생했습니다. 다시 시도해주세요.')
}

showError();//함수 호출
//alert창 등장!
</script>

<script>
//매개변수가 있는 함수
//함수    /함수명   /매개변수
function sayHello(name){
	const msg =`Hello, ${name}`;
    console.log(msg);
}

sayHello('Eden');//함수 호출
//"Hello, Eden"
</script>

전역 변수와 지역 변수

<script>
let msg = "welcome";//전역변수

function sayHello(name) {
	let msg = "Hello";//지역변수
    console.log(msg + ' ' + name);
}

sayHello('Eden');
console.log(msg);
//"welcome"/ "Hello Eden"/"welcome"
</script>

위의 함수를 통해 전역 변수와 지역변수는 서로 간섭받지 않는다는 것을 알 수 있다.

<script>
let name = "Eden";

function sayHello(name){
	console.log(name)
}

sayHello();
sayHello('Brie');
//undefined/"Jane"
</script>

첫번째 호출은 undefined가 나오고 두번째 호출은 "Jane" 나왔다. 왜그럴까?

매개변수로 받은 값은 복사된 후 함수의 지역변수가 된다. 전체 서비스에서 공통으로 바라봐야하는 변수를 제외하고는 지역변수를 쓰는 습관을 들여야한다.
전역 변수는 관리가 힘들어지기 때문이다. 가급적 함수에 특화된 지역변수를 사용하는게 좋다.

이제 나는 함수를 만들 수 있게 됐다!!!!!!!!

함수를 응용해보자고

<script>
//OR
function sayHello(name){
	let newName = name || 'friend';
    let msg = `Hello, ${newName}`
	console.log(msg)
}

sayHello();//"Hello, friend"
sayHello('Jane');//"Hello, Jane"
</script>

첫번째 호출은 매개변수가 없기때문에 undefined를 받아 false가 나오고, Or는 마지막 true를 받아 'friend'를 반환하게 된다.

그래서 매개변수를 입력하지 않으면 "Hello, friend"가 나오고 이름을 입력하면 이름이 나온다.

혹은 기본값을 설정해 줄 수도 있다. 아래를 참고해주라

<script>
//name의 디폴트값은 friend
function sayHello(name = 'friend'){
    let msg = `Hello, ${name}`
	console.log(msg)
}

sayHello();//"Hello, friend"
sayHello('Jane');//"Hello, Jane"
</script>

name의 default값을 'friend'로 해주었을 때,
위의 OR함수와 같은 것을 알 수 있다.
이 default값은 name이 없을 때만 할당된다.

return

<script>
//return으로 값 반환
function add(num1, num2){
	return num1+num2;  //return은 오른쪽 값을 반환한다.
}
const result = add(2,3);
console.log(result);//5
</script>

add함수에 숫자 두 개를 넣어서 호출하면 더한 다음에 반환한다. 이 반환 값을 변수 result에 넣어 콘솔에 출력한다.

<script>
//return으로 값 반환
function showError(){
	alert ('에러가 발생했다.');
}
const result = showError();
console.log(result);//undefined
</script>

return문이 없는 함수도 항상 undefined를 반환합니다. 혹은 return;만 있어도 undefined를 반환한다. 참고로 return이 있으면 즉시 return의 오른쪽에 있는 것을 반환하고 종료한다.

<script>
//return으로 값 반환
function showError(){
	alert ('에러가 발생했다.');
    return;//함수 종료
    alert ('이 코드는 실행되지 않아!!!')//실행되지 않는다.
}
const result = showError();
console.log(result);//undefined
</script>

그래서 ! 함수를 종료하는 목적으로도 사용한다 !!

주의사항

함수는 한번에 한 작업에만 집중하는 것이 돟다. 하나의 함수가 여러 작업을 진행하게 되면 함수를 더 잘게 나눠서 써주는 것이 좋다.
또한, 변수처럼 함수의 작명 또한 중요하다. 읽기 쉽고 어떤 동작인지 알 수 있게 네이밍하는 것이 좋다.