1. Function(함수) - 데이터 받기
이제는 조금 심화된 함수를 배울 시간입니다. 먼저 기본적인 함수를 만들어보겠습니다. 반드시 코드를 작성하면서 학습을 진행해주세요!
jsbin에서 코드 작성하기
1-1. 함수의 기본적인 정의 및 실행
아래는 alertSuccess 이름을 가진 함수의 정의입니다. 로그인이 잘 됐으면, "로그인 성공!" 이라는 alert를 띄우는 함수입니다.
function alertSuccess() {
alert("로그인 성공!");
}함수는 정의했지만, alert는 실행되지 않습니다. 함수 내부(body)는 함수를 호출하기 전까지는 실행되지 않기 때문입니다. 함수 내부의 로직을 실행하기 위해서는 함수의 이름과 () 소괄호를 사용하여 함수를 호출해야 합니다.
function alertSuccess() {
alert("로그인 성공!");
}
alertSuccess();
비로소 alert 창이 나타납니다. 여기까지는 앞서 다뤘던 내용입니다.
1-2. 함수에 데이터(= 인자, argument) 전달하기
alertSuccess 함수의 alert에서 상황에 맞게 메시지를 바꾸고 싶습니다. 그런데 위의 함수는 무조건 "로그인 성공!"이라는 메시지만 나오네요. alertSuccess 함수는 alert 만 있고, 알림창의 문장은 그때 그때 바꾸고 싶습니다. 이런 경우에는 어떻게 하면 좋을까요?
바로 함수를 호출할 때 데이터를 전달하고, 전달받은 데이터를 사용하면 됩니다.
데이터를 전달 받는 함수의 정의
function alertSuccess(msg) {
alert(msg);
}함수의 호출(데이터 전달)
alertSuccess("김개발님 로그인 성공!");
alertSuccess("최개발님 로그인 성공!");데이터를 전달 받는 함수의 재정의
위에서 입력하는 값을 살펴보니 "님 로그인 성공!"이 중복됩니다. 중복을 줄일 수 있게 다시 함수를 재정의 하겠습니다.
function alertSuccess(name) {
alert(name + "님 로그인 성공!");
}함수의 호출(데이터 전달)
alertSuccess("김개발");
//최종 코드
function alertSuccess(name) {
alert(name + "님 로그인 성공!");
}
alertSuccess("김개발");2. Function(함수) - parameter, argument
2-1. 매개변수(parameter)
함수를 정의하면서, 함수 선언식의 괄호()안에 어떤 변수명 을 쓰면, 우리는 그걸 매개변수라고 부릅니다. 매개변수는 그 이름처럼 실제로 함수 안쪽에서 변수와 같은 역할을 하게 됩니다. 함수가 호출될 때 값(인자)을 전달받게 되면 매개변수에 값이 정의됩니다.
2-2. 인자(argument)
어떤 함수를 호출하면서, 호출문의 괄호 안에 어떤 값 또는 값이 정의된 변수를 쓰면, 우리는 그걸 인자 라고 부릅니다. 함수에서 매개변수를 적어둔 상태라면, 호출시 인자로 전달한 값은 매개변수로 전달받아 사용할 수 있습니다.
// doubleNumber 함수 선언식
function doubleNumber(myNumber) { // <- 호출시 전달받은 값을 myNumber라는 변수명으로 함수 안쪽에서 사용하겠다.
const myResult = myNumber * 2
return myResult
}
// doubleNumber 함수 호출문
doubleNumber(3); // <- doubleNumber를 호출하면서 값 3을 전달해주겠다.이 예시 코드에서 doubleNumber가 선언될 때 괄호안에 myNumber 라고 썼기 때문에, myNumber 매개변수가 함수에서 선언됩니다.
doubleNumber함수를 호출 할 때 괄호안에 인자로 3을 전달했습니다.- 인자로 전달한 값 3은 매개변수
myNumber에 할당됩니다. - 값을 직접 전달할 수 있을 뿐만 아니라, 변수로도 인자를 전달할 수 있습니다.
const someNumber = 42
doubleNumber(someNumber); // <- doubleNumber를 호출하면서 값 42를 전달3. Function(함수) - 여러 인자
3-1. Function(함수) - 여러 인자
앞서 함수에 하나의 데이터를 인자로서 전달하는 방법에 대해 다뤄보았습니다.
이번에는 여러개의 데이터를 전달받는 함수에 대해 알아보겠습니다. 아래 예시에서 볼 수 있듯이, 함수에 전달할 수 있는 인자는 한 개로 제한되는 것이 아니라 내가 매개변수에 정의한 만큼 여러개를 전달할 수도 있습니다.
function alertSuccess(month, name) {
alert(month + "월의 당첨자는 " + name + "입니다.");
}
alertSuccess(3, "김개발");4. Function(함수) - 데이터 반환하기(2)
1~3.에서는 인자와 매개변수를 활용하여 함수 내에 데이터를 받는 특징에 대해 알아보았습니다.
이번에는 입력에 대한 출력값을 return(리턴, 반환) 해주는 함수의 기능을 좀 더 자세히 살펴보겠습니다.
4-1. return의 정의
return은 함수의 실행을 종료하고, return문 뒤에 주어진 값을 반환합니다.
function multiplyTen(myNumber) {
return myNumber * 10;
}4-2. 함수의 호출
함수를 잘 정의했다면 원하는 결과값을 얻어내기 위해서 함수를 호출해야 합니다. 아래 예시와 같이 다양한 인자를 입력하여 동일 함수를 호출해 다른 결과값을 반환할 수 있습니다.
multiplyTen(3);
multiplyTen(6);
multiplyTen(12);4-3. 호출 결과 확인
함수를 호출한 결과값은 console.log()로 확인할 수 있습니다.
console.log(multiplyTen(3));
console.log(multiplyTen(6));
console.log(multiplyTen(12));또한, 아래와 같이 함수의 반환값을 변수에 저장해서 console.log()로 확인해볼 수 있습니다.
const result1 = multiplyTen(3);
const result2 = multiplyTen(6);
const result3 = multiplyTen(12);
console.log(result1);
console.log(result2);
console.log(result3);4-4. 함수와 return 키워드
return키워드를 명시하지 않은 함수는 undefined를 반환합니다.
코드를 직접 작성하여 결과를 확인해보세요!
function consoleSuccess(month, name) {
console.log(month, name);
}
// 함수를 호출한 결과를 result에 담아서 어떤 값이 리턴되는지 직접 확인해보세요!
const result = consoleSuccess("3", "김개발");
console.log("consoleSuccess 함수의 호출 값은 : " + result);
4-5. 함수 내부에서 다른 함수 호출하기
조금만 더 복잡하게 함수를 사용해보겠습니다.
function getTax(price) {
return price * 0.1;
}
function calculateTotal(price) {
return price + getTax(price);
}
const result = calculateTotal(3500);
console.log(result); // 3850이렇게 함수 안에서 또 함수를 호출할 수도 있습니다. calculateTotal 함수 내부에서 getTax를 또 호출했습니다. 함수가 실행되는 시점은 함수를 호출하는 순간이겠죠? 위 코드에서 function으로 함수를 선언하는 부분은 "이런 함수가 있다"고 선언해준 것 뿐입니다. 함수가 실행되는 시점은 calculateTotal(3500)으로 함수를 호출했을 때입니다.
출처 : wecode
