10. Javascript 기초 (함수(function))

✍ 함수(function)

: 서비스 개발 시 같거나 비슷한 동작들이 생기기 마련이다.
ex) 팝업, 결제 등등
: 자주 사용하는 동작들은 하나로 만들어 두고 재활용하는 것이 좋음
: 중복 코드도 줄어 들고 유지보수도 편하게 되고, 함수는 이를 가능하게 함.
: console, alert, confirm 등은 브라우저가 가지고 있는 내장함수이다.

• 📌 함수 설명

  : function = 함수를 의미함.
  : 함수명은 자유롭게 작성
  : 매개변수는 없을 수도 있고, 여러개 일수도 있음(여러개일 경우 ,(쉼표)로 나눔).
  : 매개변수가 필요하다면 호출시 매개변수를 괄호에 넣어줌.

• 📌 매개변수가 없는 함수 작성

  : 해당 에러 메세지를 한 서비스에서 100군데에서 쓰고 있다고 가정한다면 로그인, 결제, API 호출에 실패할 경우 띄워주면 편함. 매번 길게 입력할 필요가 없음.
  : 유지보수가 쉬움. 에러 메세지를 수정해달라고하면 함수 내부 메세지를 변경하기만하면 됨.

// 매개변수가 없는 함수 작성

function showError(){
  alert('에러가 발생했습니다. 다시 시도해주세요.');
}

showError();

• 📌 매개변수가 있는 함수 작성

  : 함수를 만드는 이유 중복을 줄이기 위함.

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

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

function sayHello(name){
  const msg = `Hello, ${name}`;
  console.log(msg);
}sayHello('Mike');
// 결과 Hello, Mike

• 📌 로그인하지 않아서 사용자 이름을 모른다면?

  : 메세지는 함수 밖에서 사용할 수 없음.
  : 함수 내에서만 사용할 수 있는 변수를 지역변수라고 함.

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

• 📌 전역 변수와 지역 변수

  : 함수 내부에서 전역변수로 선언한 변수와 동일한 이름으로 선언가능하며 서로 간섭받지 않음.

let msg = "welcome"

function sayHello(name){
  let msg = "Hello"
  console.log(msg + ''+ name);
}

sayHello('Mike');
console.log(msg)

• 📌 전역 변수와 지역 변수2

  : 매개변수로 받은 값은 복사된 후 함수의 지역변수가 된다.
  : 전체 서비스에서 공통으로 바라봐야하는 변수를 제외하고, 지역변수를 사용하는게 좋음.
  : 전역변수가 많아지면 관리가 어려움.
  : 함수에 특화된 지역변수를 사용하는게 좋음.

let name = "Mike";

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

sayHello();
sayHello('Jane');
//결과 undefined, Jane
// underfiend는 변수는 존재하지만 값이 할당되지 않아 자료형이 정해지지 않은 상태를 의미함.

• 📌 default Value

  : 처음에 왜 결과가 이렇게 나오지 했지만 매개변수에서 name에 friend라는 문자를 대입해주었음을 알았다. 그렇기에 함수 호출시 이름을 기입하지 않으면 이미 name안에 들어가있는 friend가 호출됨을 알 수 있음.

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

sayHello();
sayHello('Jane');
//결과 "Hello, friend" \n "Hello, Jane"

• 📌 return으로 반환

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

const result = add(2,3)
//결과 5

✍ Tip

: 한번에 한작업에 집중
: 읽기 쉽고 어떤 동작인지 알 수 있게 네이밍
ex)
showError //에러를 보여줌
getName // 이름을 얻어옴.
createUserData // 유저데이터 생성
checkLogin // 로그인 여부 체크

위 내용은 유튜브 코딩앙마 채널 강의를 보고 정리하였습니다.
코딩앙마