함수(function)의 기초

유튜브 코딩앙마 채널의 '자바스크립트 기초 강좌' 를 공부하며 정리한 내용입니다.

사용 빈도가 높고, 여러 곳에서 중복되어 사용하는 동작은 함수로 만들어 재활용하면 좋습니다. 중복을 줄여 유지보수가 편해집니다. 지금가지 사용한 console alert confirm 같은 함수들은 브라우저가 가진 내장함수 였습니다. 우리가 이런 함수를 직접 만들 때는(정의하기) 아래와 같은 방법을 사용합니다.

function sayHello(name){
	console.log(`Hello, ${name}`);
}

여기서 sayHello 는 함수이름이고 괄호 안의 name 은 매개변수, 인자입니다. 인자는 비어있을 수 있고 한개이거나 여러개일 수 있습니다. 값이 여러개라면 쉼표로 구분합니다. 줄괄호 안에는 함수의 실행 코드가 들어갑니다. 이렇게 함수를 정의하고 실핼한 때는 아래와 같이 씁니다.

sayHello('Mike');

함수명 뒤에 괄호를 붙여서 실행하돼 매개변수가 필요하면 괄호안에 넣습니다. 중괄호 안에 조건문을 넣어서 처리하는 코드를 써보면,

function sayHello(name){
	let msg='Hello';
  	if(name){
    	msg='Hello, ${name}';
	}
  	console.log(msg);
}

sayHello(); // hello 출력
sayHello('Mike'); // hello, Mike 출력

함수에 인자를 넣어주지 않으면 if 조건문의 name 이 undefiend 라 false 가 되어 그냥 msg 를 출력합니다. msg 라는 변수가 조건에 따라 변하기 때문에 const 가 아닌 let 으로 변수를 선언합니다. 위 함수를 조금 바꿔보면,

function sayHello(name){
	let msg = 'Hello';
	if(name){
		msg += `, ${name}`;
	}
	console.log(msg);
}

sayHello('Mike'); // 'Hello, Mike' 

이렇게 쓸 수 있습니다. 함수 안의 msg 는 지역변수라 함수 안에서만 사용 가능합니다. 바깥에서 쓰고 싶다면 함수 바깥에서 정의해야 합니다. 그래야 전역변수가 됩니다. 함수 내부에서 지역변수로 사용되면 바깥 전역변수의 간섭을 받지 않습니다.

let msg = "welcome";
console.log(msg)
function sayHello(name){
	let msg = "Hello"
	console.log(msg + ' ' + name);
}
sayHello('Mike'); // Hello Mike 출력

변수 안에 선언된 지역변수 msg 가 출력됩니다. 다른 예시로

let name = "MIke";
function sayHello(name){
	console.log(name)
}

sayHello(); // undefined
sayHello('Jane'); // "Jane"

매개변수로 받은 값은 복사된 후 함수의 지역변수가 됩니다. 전체 서비스에서 공통으로 봐야 하는 변수가 아니라면 지역변수를 쓰는 게 좋습니다. 전역변수가 많아지면 관리가 힘듭니다.

function sayHello(name){
	let newName=name||'friend';
  	let msg='Hello, ${name}';
  	console.log(msg);
}

sayHello(); // "Hello, friend"
sayHello('Jane'); // "Hello, Jane"

매개변수가 없으면 name 에 undefined 가 들어가서 false 가 나오고 or연산자는 마지막 true 를 반환하기 때문에 'friend' 가 나옵니다.

default 기본값을 설정할 수도 있습니다.

function sayHello(name = 'friend'){
	let msg = 'hello, ${name}'
	console.log(msg)
}

sayHello(); // "Hello, friend"
sayHello('Jane'); // "Hello, Jane"

괄호 안의 default 값은 매개변수가 없을 때 할당됩니다.

다음으로 return 으로 값 반환하는 것을 살펴보면,

function add(num1, num2){
	return num1+num2;
}
const result=add(2, 3);
console.log(result); // 5

리턴문 없이도 반환은 합니다.

function showError(){
	alert('에러가 발생했습니다.');
}
const result=showError();
console.log(result);

이렇게 해도 alert 창은 뜹니다. 그리고 undefined 가 나옵니다. 아래처럼 return 만 있어도 undefined 가 반환됩니다.

function showError(){
	alert('에러가 발생했습니다');
	return;
}
const result = showError();
console.log(result);

참고로 return 문은 오른쪽 값을 반환하고 종료됩니다. 함수를 종료하는 목적으로 return 문을 사용하기도 합니다.

함수 사용 팁으로, 하나의 함수가 여러 작업을 진행한다면, 함수를 잘게 나눠서 쓰는 게 좋습니다. 함수명은 읽기 쉽고 어떤 동작인지 알 수 있게 네이밍하면 좋습니다.

ex)
showError // 에러를 보여줌
getName // 이름을 얻어옴
creatUserData // 유저데이터 생성
checkLogin // 로그인 여부 체크