10. 함수

함수 사용 장점

• 중복되는 코드를 줄일 수 있음
• 유지보수가 편리함

함수의 사용

function sayHello(name){
	const msg = `Hello, ${name}!`;
    console.log(msg);
}

sayHello('Mike');
sayHello('Lisa');
sayHello('dal-bong');

/* 
함수호출 함수명(매개변수){
	함수 실행 코드
} 

함수명();  // 함수의 실행
*/

function sayHello(name){
  // name을 알 수 없는 경우 msg를 let으로 선언 -> let으로 선언하면 변수 내용이 변경 가능함
  let msg = `HI! `;
  if (name) {
    msg = `Hello, ${name}!`;
   	// msg += name  -> 문자열 + 문자열로 표현할 수 있음
  }
  console.log(msg);
}

sayHello();
sayHello('Lisa');
sayHello('dal-bong');

• sayHello 안의 msg 변수는 함수 안에서만 사용할 수 있음 (지역변수)

전역변수 / 지역변수

• let으로 선언한 변수는 다시 선언할 수 없지만, 전역변수와 지역변수의 차이가 있을 경우에는 다시 선언 가능하다.
• 전역변수와 지역변수는 서로 간섭 하지 않음

let msg = "Hi!";
console.log('1. ', msg);

function hi(name){
  let msg = `hi! ${name}`;
  console.log('2. ', msg);
}

hi('sungwon');
console.log('3. ', msg);

// "1. " "Hi!"
// "2. " "hi! sungwon"
// "3. " "Hi!"

• 매개변수로 받은 값은 복사된 후 함수의 지역변수가 된다.
• 전체 서비스에서 공통으로 바라봐야하는 변수를 제외하고는 지역변수로 생성해야 한다.

let name = "Mike";

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

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

매개변수의 기본값 설정

1. OR 사용

function sayHello(name){
	let newNm = name || 'friend';
    let msg = `Welcome, ${newNm}!`;
    console.log(msg);
}

sayHello('dal-bong');
sayHello();

// "Welcome, dal-bong!"
// "Welcome, friend!"

2. 매개변수 기본값 설정

• 매개변수 값이 없을 경우, 기본값으로 지정됨

function sayHello(name = 'friend'){
    let msg = `Welcome, ${name}!`;
    console.log(msg);
}

sayHello('dal-bong');
sayHello();

// "Welcome, dal-bong!"
// "Welcome, friend!"

return으로 값 반환

• 함수 안에 return을 사용해주면, 결과값이 변수에 들어가진 채로 반환됨 (return 오른쪽 값이 반환됨)
• return문이 없는 함수는 항상 undefined를 반환함
• 혹은, return; 만 있어도 undefined를 반환함

function add(num1, num2) {
	return num1 + num2;
}

const result = add(1, 2);
console.log(result);

함수 사용 시 주의점

1. 한번에 한 작업에 집중

• 하나의 함수가 여러 작업을 진행할 시, 여러 함수로 쪼개서 작성하는게 좋음

2. 읽기 쉽고 어떤 동작인지 알 수 있도록 네이밍

• showError // 에러를 보여줌
• getName // 이름을 얻어옴
• createUserData // 유저 데이터를 생성