JavaScript - 데이터 받기, 반환하기

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

 

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

 

test 함수의 alert에서 상황에 맞게 메시지를 바꾸고 싶다면 함수를 호출할 때 데이터를 전달하고, 전달받은 함수를 사용하면 된다.

 

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

function test(a) {
  alert(a);
}

 

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

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

 

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

"님 로그인 성공!"이 중복되므로, 중복을 줄이기 위해 재정의

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

 

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

test("김워크");

 

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

//Example


function test(name) {   
  let name = "Hello";
  alert(name + "님 로그인 성공!"); 
}


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


test("Hello");

 

---

2. 데이터 반환하기

2-1. return 함수 정의

return이라는 것은 함수를 호출했을 때, 함수가 값을 반환한다는 뜻이다.

 

2-2. return 함수의 호출

아래와 같이 여러 번 호출할 수 있다.

 

function test(myNumber) {
  return 10 * myNumber;
}

test(3); 
test(6); 
test(12);

 

2-3. return 함수의 호출 결과 확인

호출은 했지만, 어떤 값을 리턴했는지 알 수 없으므로 호출된 함수의 return값을 변수에 저장해야 한다.

아래와 같이 함수의 변환을 변수에 저장해서 console로 확인해 볼 수 있다.

let result1 = test(3); 
let result2 = test(6); 
let result3 = test(12);  

console.log(result1); 
console.log(result2); 
console.log(result3);

 

변수에 저장하기 번거롭다면, 결괏값을 바로 console로 확인 가능하다.

console.log(test(0)); 
console.log(test(3)); 
console.log(test(2));

 

2-4. 함수와 return 키워드

앞 챕터에서 얘기했듯이 함수는 모두 return을 하고, return을 생략할 수도 있다고 언급했었다.

return을 생략하면 함수는 undefined를 반환한다.

function consoleSuccess(month, name) {   
  console.log(month, name); 
}  

let result = consoleSuccess("3", "김개발");
console.log("consoleSuccess 호출 값은" + result);

 

 

2-5. 함수 내부에서 다른 함수 호출하기

function getTax(price) {
  return price * 0.1;
}

function calculateTotal(price) {
  return price + getTax(price);
}

var result = calculateTotal(3500);
console.log(result);

 

이렇게 함수 안에서 또 함수를 호출할 수 있다.