TIL_16_with Wecode 008 JavaScript about function

🦹‍♀️ 함수를 정의했어도 함수를 호출하지 않으면 실행이 되지 않는다!
꼭 함수 호출을 해주자.
아래의 예시를 보자.

function alertSuccess() {
  alert("로그인 성공!");
}
alertSuccess();

🧟‍♀️ 위에서 정의한 함수의 alert를 상황에 맞는 메세지로 바꾸고 싶을 땐 어떻게 하면 될까?
위의 함수는 상황과 상관없이 무조건 "로그인 성공!" 메세지만 나온다.
이럴 경우에는 매개변수를 지정해주어, 함수를 호출할 때 데이터를 전달하고, 전달받은 데이터를 사용하면 된다.
아래의 예시를 보자.

function alertSuccess(msg) {
  alert(msg);
}
alertSuccess("양지은님 로그인 성공!");
alertSuccess("poohv7님 로그인 성공!");

🤹‍♀️ 인자를 전달하고 그 인자로 데이터를 사용하기.
입력한 값을 보니 "~님 로그인 성공!"이 중복되고 있음을 확인할 수 있다. 효율적이고 간단하고 보기좋은 코딩을 위해서는 중복을 줄여야 한다. 함수를 재정의 해보자면,

function alertSuccess(name) {
alert(name + "님 로그인 성공!");
}
alertSuccess("양지은");
//결과는? "양지은님 로그인 성공!"

💫주의하자💫
function 안에 "인자로부터 받은 변수"에 새로운 데이터값을 넣으면 안된다❗❗❌❌📛

function alertSuccess(name) {   
  let name = "양지은"; 
  //이렇게 function 내부에서 데이터값을 
  지정하지 말라는 얘기다.
  alert(name + "님 로그인 성공!"); 
}
alertSuccess("양지은"); 
//이렇게 function 외부에서 함수를 호출할 때에
데이터를 전달해야한다!!!

✅Assignment
1. 데이터를 전달 받는 isbiggerThanHundred 이라는 이름의 함수를 만들어주세요.
2. isbiggerThanHundred 함수에서 받은 argument를 myNumber라는 parameter에 저장해주세요.
3. isbiggerThanHundred 함수에서

• myNumber가 100보다 크면 "크다!"라는 문자열을 return 해주세요.
• myNumber가 100보다 작거나 같으면 "작다!"라는 문자열을 return 해주세요.

function isbiggerThanHundred(myNumber) {
if (myNumber > 100) {
  return("크다!");
} else {
  return("작다!")
}
}
isbiggerThanHundred(101);

🙋‍♀️대체 뭐가 매개변수고 뭐가 인자라는거여~ 일단 정의부터 봅시다.
◼매개 변수란
함수를 정의 하면서, 함수 선언식의 괄호()안에 어떤 변수명 을 쓰면, 우리는 그걸 매개변수 라고 부릅니다. 매개 변수는 그 이름처럼 실제로 함수 안쪽에서 변수와 같은 역할을 하게 됩니다. 함수가 호출될 때 값을 전달받게 되면 매개 변수에 값이 정의됩니다.
◼인자란
어떤 함수를 호출하면서, 호출문의 괄호 안에 어떤 값 또는 값이 정의된 변수를 쓰면, 우리는 그걸 인자 라고 부릅니다. 함수에서 매개변수를 적어둔 상태라면, 호출시 인자로 전달한 값은 매개변수를 통해 사용 가능하게 됩니다.

정확히 뭔 의미인지 눈에 잘 안들어오네요.
예시를 봅시다.

function doubleNumber(myNumber) {
let myResult = myNumber * 2
return myResult
}
doubleNumber(3);

function doubleNumber 에 매개변수 myNumber 을 정의해줬음을 알 수 있습니다.
function 외부에 있는 doubleNumber(3);에서 소괄호 안에 있는 숫자 '3' 이 인자입니다.
매개변수를 통해서 우리는 함수 호출 시 인자를 입력할 수 있는 겁니당. 결과는 6 이겠네요.
매개변수를 통해서 우리는 함수를 호출했을 때 여러번의 인자를 입력할 수 있게 된겁니다!

let someNumber = 42
doubleNumber(someNumber);

자 위의 경우가 정의된 변수를 인자로 사용한 예 입니다.
let someNumber = 42 라는 변수를 통하여 someNumber을 42로 정의해주었고 doubleNumber(someNumber); 함수를 호출할 때 숫자 '42' 로 정의된 변수를 인자로 사용하였습니다.

✅Assignment 1
함수 halfNumber 를 선언하고 구현하세요.
1. 숫자로 된 인자 하나를 받습니다.
2. 받은 값을 2로 나눈 결과를 리턴합니다.
3. 매개변수 이름은 마음대로 정해서 사용합니다.

function halfNumber(value) {
  return value / 2;
}
halfNumber(6);

1. 숫자로 된 인자 하나를 받습니다.
   halfNumber(6); 인자 = 6
2. 받은 값을 2로 나눈 결과를 리턴합니다.
   return value / 2;

✅Assignment 2
함수 halfAndAddNumber를 선언하고 구현하세요.
1. 숫자로 된 인자 하나를 받습니다.
2. 1번 문제에서 만들었던 halfNumber를 호출하면서, 인자로 받았던 값을 다시 halfNumber 함수에 전달해줍니다.
3. halfNumber의 리턴결과를 함수 안쪽에서 변수명 result에 정의합니다.
4. result에 1을 더한 값을 리턴합니다.

function halfAndAddNumber(value) {
  let result = halfNumber(value);
  return result + 1;
}
halfNumber();
halfAndAddNumber(10);

1. 숫자로 된 인자 하나를 받습니다.
   halfAndAddNumber(10); 인자 = 10
2. 1번 문제에서 만들었던 halfNumber를 호출하면서,
   인자로 받았던 값을 다시 halfNumber 함수에 전달해줍니다.
   halfNumber(); 일단 호출
   let result = halfNumber(value);
   인자로 받았던 값이라 함은
   halfNumber(value) 얘를 말하겠쥬?
   인자는 "6"이지만, 인자를 받기위해 만들어진게
   매개변수고 전달받은 값은 halfNumber(value)
   얘를 말하겠죠?
3. halfNumber의 리턴결과를 함수 안쪽에서
   변수명 result에 정의합니다.
   let result = halfNumber(value);
4. result에 1을 더한 값을 리턴합니다.
   return result + 1;

✅Assignment

• meetAt 함수를 만들어주세요.
• 인자를 세개 받습니다.
  1. 첫번째 인자는 년도에 해당하는 숫자입니다.
  2. 두번째 인자는 월에 해당하는 숫자입니다.
  3. 세번째 인자는 일에 해당하는 숫자입니다.
• 년도 인자만 받았을 경우 → "1234년" 과 같은 형식의 문자열을 리턴 해주세요.
• 년도,월 인자를 받았을 경우 → 년도와 월을 조합해서 "1234년 5월" 과 같은 형식의 문자열을 리턴 해주세요.
• 년도,월,일 인자를 전부 받았을 경우 → 년도,월,일을 조합해서 "1234/5/6" 과 같은 형식의 문자열을 리턴 해주세요.

처음에 내가 한 방식

function meetAt(year, month, date) {
  if(year) {
    return year + "년";
  }
  else if(year, month) {
    return year + "년" + month + "월";
  }
  else if(year, month, date) {
    return year + "/" + month + "/" + date;
  }
}
meetAt(2021); //결과는 2021년
meetAt(2021, 2); //결과는 2021년 ㅋ
meetAt(2021, 2, 18); //결과는 2021년 ㅋㅋ

나와있는 예제를 고대로 따라했더니 나온 결과 하하하.

구글링한 결과... 나와 똑같은 실수를 하신 이전 기수 선배님의 벨로그를 통하여 답을 찾아낼 수 있었다.
여러 인자를 가진 함수

function meetAt(year, month, date) {
  if(date) {
    return year + "/" + month + "/" + date;
  } else if (month) {
    return year + "년 " + month + "월";
  } else if (year) {
    return year + "년";
  }
}
meetAt(2021);
meetAt(2021, 2);
meetAt(2021, 2, 18);

2021년만 계속 나온 이유는 처음에 작성했던 코드를 보면,
조건들이 year 와 year, month 그리고 year, month, date 순으로 작성되어 있다. 여기서 year가 참이면 거기서 함수가 끝나버려서 나머지 조건문들을 거칠 필요가 없어진 것이다. 그래서 3가지 경우 모두 2021년만 출력되었던 것이다. 따라서, 3가지 다 결과를 도출해내기 위해선 역순으로 조건문을 작성하면 되는거였다. return 에선 문자열을 못 더하는건가 하는 바보같은 고민을 하며 머릴 싸매고 있었는데... 벨로그 읽자마자 띵했다.🤦‍♀️ 회고록을 많이 쓰라는 조언을 들었다. 틀리고 잘못쓴 코딩들도 창피해하지않고 기록하고 고치고 반성하는 시간을 가지도록 노력해야겠다.