11.Function(함수) - 데이터 받기

이제는 조금 심화된 함수를 배울 시간입니다. 먼저 기본적인 함수를 만들어보겠습니다.
반드시 코드를 작성하면서 따라와주세요!

11-1. 함수의 기본적인 정의 및 실행

아래는 alertSuccess 이름을 가진 함수의 정의입니다. 로그인이 잘 됐으면, "로그인 성공!" 이라는 alert를 띄우는 함수입니다.

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

함수는 정의했지만, 두 번째 줄인 alert는 실행되지 않습니다. 함수 내부(body)는 함수가 호출되기 전까지 실행되지 않기 때문입니다. 호출하려면 함수의 이름과 () 소괄호를 사용하여 이름을 불러야 합니다.

alertSuccess();

비로소 alert 창이 나타납니다. 여기까지는 앞서 다뤘던 내용입니다. 익숙하시죠?

---

11-2. 함수에 데이터(= 인자, argument) 전달하기

alertSuccess 함수의 alert에서 상황에 맞게 메시지를 바꾸고 싶습니다. 그런데 위의 함수는 무조건 "로그인 성공!"이라는 메시지만 나오네요. alertSuccess 함수는 alert 만 있고, 알림창의 문장은 그때 그때 바꾸고 싶습니다. 이런 경우에는 어떻게 하면 좋을까요? 함수를 호출할 때 데이터를 전달하고, 전달받은 데이터를 사용하면 됩니다.

데이터를 전달 받는 함수의 정의

function alertSuccess(msg) {
  alert(msg);
}

함수의 호출(데이터 전달)

alertSuccess("김개발님 로그인 성공!");
alertSuccess("박사장님 로그인 성공!");

데이터를 전달 받는 함수의 재정의

입력하는 값을 살펴보니 "님 로그인 성공!"이 중복되고 있네요. 중복을 줄이는 방법으로 다시 함수를 재정의 하겠습니다.

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

함수의 호출(데이터 전달)

alertSuccess("김워크");

직접 호출해보고 계신 것 맞나요? 반드시 실제로 코드를 작성하면서 결과를 확인해주세요.

⚠️ 주의 사항

함수 내부에서 인자로 받은 변수에 새로운 값을 넣으면 안 됩니다.

//Example
function alertSuccess(name) {   
  let name = "wecode";
  alert(name + "님 로그인 성공!"); 
}

// 위와 같이 함수 내부에서 인자로 받은 변수(name)에 새로운 값("wecode")을 넣으면 안 됩니다!
// 인자(parameter)에 실제로 어떤 데이터가 전달될지는 호출할 때 결정하는 것입니다. 아래를 확인해주세요.

alertSuccess("wecode"); // 이렇게요!

 

Assignment

index.js를 보고 아래 조건에 맞는 함수를 작성해주세요.

1. 데이터를 전달 받는 isbiggerThanHundred 이라는 이름의 함수를 만들어주세요.
2. isbiggerThanHundred 함수에서 받은 argument를 myNumber라는 parameter에 저장해주세요.
3. isbiggerThanHundred 함수에서
   • myNumber가 100보다 크면 "크다!"라는 문자열을 return 해주세요.
   • myNumber가 100보다 작거나 같으면 "작다!"라는 문자열을 return 해주세요.

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