05. Function(함수) - 데이터 반환하기(1)
05-1. Function(함수) - 데이터 반환하기(1)
앞선 설명에서 이미 return 이라는 키워드를 사용했습니다. 하지만 아직은 함수의 반환, return 이라는 개념이 명확히 들어오진 않으셨을 겁니다. 이번 시간에는 이 return이라는 개념에 대해 살펴보겠습니다.
해당 내용은 Function(함수) - 데이터 반환하기(2) 에서 다시 한 번 다룰 예정입니다. 한번에 이해가 되지 않는다고 너무 걱정하지는 마세요. 😊
05-2. *수의 반환(return)
모든 함수는 반환(return)을 합니다. 함수는 항상 데이터를 반환하기 때문에 그 결과를 변수에 저장할 수도 있고, 다른 로직에 다시 사용할 수도 있습니다. 함수의 반환 값을 확인하는 법을 다시 한 번 볼까요?
아래와 같이 함수를 호출해서, 변수에 저장하고 그 변수를 console.log() 로 확인하면 됩니다. 간단하죠?
let result4 = noParameter(); // result4f라는 변수에 noParameter 함수 호출한 결과값을 할당
console.log(result4);위와 같이 함수를 호출해서 반환한 값을 다시 변수에 저장해서 확인할 수도 있지만, 아래와 같이 함수를 호출한 것을 바로 console.log()로 바로 확인할 수도 있습니다.
console.log(noParameter());덧붙이자면, 모든 함수가 return을 포함해야 하는 건 아닙니다. 함수 내부에 return 키워드를 생략할 수도 있습니다. 하지만 이 경우에도 함수는 무언가를 반환하고 있습니다. 함수가 반환을 생략하면 undefined 라는 값을 반환합니다.
05-3. 매개변수(parameter)와 인자(argument)
위에서는 return 키워드를 통해 함수를 호출할 때 데이터를 반환하는 법을 배웠습니다. 이제는 함수가 외부에서 입력 받은 데이터를 처리하는 경우에 대해 배워보겠습니다.
함수는 어떻게 외부의 값을 받을까요? 코드 블럭 12번째 줄, getName 함수를 보겠습니다. 정의된 함수의 소괄호 내부에 지금까지 본 함수와 달리 name 이라는 단어가 들어 있습니다. 이처럼 함수 이름 옆 소괄호 자리에 적혀 있는 단어는 매개변수(parameter)라고 부릅니다.
function getName(name) {
return name + '님';
}매개변수는 외부로부터 들어오는 값을 담아 함수 내부에서 사용하도록 하는 변수의 역할을 합니다. 당장 잘 이해되지 않는다면 일단 함수 외부로부터 들어온 값이 담길 '자리' 혹은 '변수의 이름'으로 기억해주세요!
함수는 입력받은 정보에 따라 다르게 실행되도록 만들 수 있습니다. 또한 입력받은 정보를 가공해서 반환 하도록 만들 수도 있습니다. getName 함수를 한번 호출해보겠습니다.
함수의 파라미터 자리에 "이름"을 넣어 주세요. 이제 이 값("이름")은 함수 내의 name 이라는 변수에 전달되고, "님" 이라는 문자열이 붙어 리턴 됩니다.
let result1 = getName('개발자');
console.log(result1); // 콘솔에 '개발자님'이 출력됩니다.한 번 만든 함수는 여러 번 호출할 수 있습니다. 반환값을 변수에 저장해 두면 매번 확인할 수 있습니다.
let result1 = getName('개발자'); // '개발자님' 출력
let result3 = getName('프론트엔드 개발자'); // '프론트엔드 개발자님' 출력
let result4 = getName('백엔드 개발자'); // '백엔드 개발자님' 출력위와 같이 '개발자'라는 값을 보내서 호출할 수 있고, '디자이너', '기획자' 등 또 다른 값을 넣을 수도 있습니다. '개발자'와 같은 실질적인 값을 인자(argument) 라고 합니다.
앞서 매개변수(parameter)는 '자리' 혹은 '변수의 이름'이라고 말씀드렸습니다. 반면, 인자(argument)는 그 자리에 들어갈 구체적인 값을 뜻합니다. 이 두 종류의 값을 잘 구분해주세요.
Assignment
함수 작성에 익숙해지셨나요? 아래의 설명을 듣고 함수를 작성해주세요.
- 함수 이름은
addTen입니다. - 받은 parameter에 10을 더해서 반환(return)해주세요.
function addTen(num){
let answer = num + 10;
return answer;
}
console.log(addTen('10'));//출력값은 20이다.
