수업 자료를 그대로 가져왔습니다. 개인 스터디 참고용입니다.
- Funtion(함수) - 기본
04-1. 함수의 정의
함수란? 하나의 특정한 작업을 수행하도록 설계된 독립적인 블록입니다.
04-2. 함수의 호출
변수에 이름이 있듯이, 함수도 이름이 있습니다. 함수 이름을 부르면, 함수 내에 있는 코드가 실행됩니다. 함수를 불러 실행시키는 것을 앞으로 "함수를 호출한다" 라고 표현하겠습니다. 아래 코드를 봐주세요.
function checkCorrect() {
let hi = "안녕하세요";
return hi;
}
함수가 정의되어 있습니다. 이름은 checkCorrect 입니다. 위와 같이 함수를 생성하고, 아래와 같이 이름을 불러 호출할 수 있습니다.
checkCorrect();
함수를 정의만 하고 호출하지 않으면 실행되지 않으니 꼭 유의해주세요! 이 부분은 뒤에서 자세히 살펴보겠습니다.
04-3. 함수의 형태
함수의 형태는 아래와 같습니다. 함수 형태를 꼭 기억해서 원하는 대로 함수를 작성할 수 있어야 합니다.
funtion structure
funtion structure
function 키워드로 시작하여
함수 이름을 지어주고
함수를 알리는 소괄호(() : parentheses)를 열고 닫고
함수의 시작을 알리는 중괄호({ : curly bracket)을 열어줍니다.
실행할 코드를 중괄호와 중괄호 사이에 작성합니다. 함수의 body 라고 부르기도 합니다. 이 부분에 들여쓰기가 되어있습니다. 함수 내부에 있는 코드라는 것을 알기 좋게 하려고 들여쓰기 하였습니다.
return(반환) 할 것이 있다면 return문을 작성합니다.
중괄호(}: curly bracket)로 닫아줍니다. 함수의 작성이 끝났음을 알립니다.
04-4. 함수의 정의 vs. 함수의 실행 (함수의 호출)
앞서 드린 설명은 함수를 "정의"하는 방법입니다. "이 함수는 이런 동작을 할 것이다~" 라고 정해두는 것입니다.
하지만 위처럼 함수를 정의하는 것만으로는 함수 내부가 실행되지 않습니다.
1) add 함수 정의
function add() {
let sum = 3+3;
return sum;
}
아래는 add라는 이름을 가진 함수입니다. add 함수가 어떤 동작을 하게 될지를 정의만 해둔 것입니다.
2) add 함수 실행(호출)
add();
Copied!
add 함수 이름을 부르기 전까지는, sum 변수가 생성되지도 않고, 3+3 더하기도 되지 않습니다.
함수 내부가 실행되려면 위와 같이 함수를 호출해야합니다.
함수를 호출하면, 그제서야 add 함수가 실행되므로
그때 3+3 더하기가 되고 sum 변수에 저장되는 것입니다.
함수를 호출하는 형태는 아래와 같이 함수 이름에 괄호()를 여닫아주면 됩니다.
- Function(함수) - 데이터 반환하기(2)
이전 시간에는 데이터를 받는 함수에 대해 알아보았습니다. 이번 시간에는 return(리턴, 반환) 해주는 함수에 대해 알아보겠습니다.
14-1. return 함수 정의
return이라는 것은 함수를 호출했을 때, 함수가 값을 반환한다는 뜻입니다.
function multiplyTen(myNumber) {
return 10 * myNumber;
}
위의 multiplyTen 함수의 정의 → 받은 인자에 10을 곱하여 반환한다!
14-2. return 함수의 호출
함수를 호출해야겠죠! 아래와 같이 여러번 호출할 수 있습니다.
multiplyTen(3);
multiplyTen(6);
multiplyTen(12);
14-3. return 함수의 호출 결과 확인
호출은 했지만, 어떤 값을 리턴했는지 알 길이 없습니다. 즉, 호출된 함수의 return 값을 변수에 저장하는 수밖에 없습니다. 아래와 같이 함수의 반환을 변수에 저장해서 console로 확인해볼 수 있습니다.
let result1 = multiplyTen(3);
let result2 = multiplyTen(6);
let result3 = multiplyTen(12);
console.log(result1);
console.log(result2);
console.log(result3);
변수에 저장하기 귀찮다면, 결과값을 바로 console로 확인해도 됩니다.
console.log(multiplyTen(0));
console.log(multiplyTen(3));
console.log(multiplyTen(2));
14-4. 함수와 return 키워드
사실 함수는 모두 return을 합니다. '음.. 아닌데' 하고 생각이 드셨을 수도 있습니다. 분명 return이 없는 함수를 보신 적이 있을테니까요. 그 경우에도 return이라는 키워드를 생략했을 뿐 함수는 리턴을 합니다. return을 생략하면 함수는 undefined를 반환합니다.
function consoleSuccess(month, name) {
console.log(month, name);
}
let result = consoleSuccess("3", "김개발"); // 함수를 호출한 결과를 result에 담아서
console.log("consoleSuccess 호출 값은" + result); // 어떤 값이 리턴 되는지 직접 확인해보세요
14-5. 함수 내부에서 다른 함수 호출하기
조금만 더 복잡하게 함수를 사용해보겠습니다.
function getTax(price) {
return price * 0.1;
}
function calculateTotal(price) {
return price + getTax(price);
}
const result = calculateTotal(3500);
console.log(result);
이렇게 함수 안에서 또 함수를 호출할 수도 있습니다. calculateTotal 함수 내부에서 getTax를 또 호출했습니다. 함수가 실행되는 시점은 함수를 호출하는 순간이겠죠? 위 코드에서 function으로 함수를 선언하는 부분은 "이런 함수가 있다"고 선언해준 것 뿐입니다. 함수가 실행되는 시점은 바로 calculateTotal(3500)으로 호출 했을 때 입니다.
- Function(함수) - 데이터 반환하기(2)
이전 시간에는 데이터를 받는 함수에 대해 알아보았습니다. 이번 시간에는 return(리턴, 반환) 해주는 함수에 대해 알아보겠습니다.
14-1. return 함수 정의
return이라는 것은 함수를 호출했을 때, 함수가 값을 반환한다는 뜻입니다.
function multiplyTen(myNumber) {
return 10 * myNumber;
}
위의 multiplyTen 함수의 정의 → 받은 인자에 10을 곱하여 반환한다!
14-2. return 함수의 호출
함수를 호출해야겠죠! 아래와 같이 여러번 호출할 수 있습니다.
multiplyTen(3);
multiplyTen(6);
multiplyTen(12);
14-3. return 함수의 호출 결과 확인
호출은 했지만, 어떤 값을 리턴했는지 알 길이 없습니다. 즉, 호출된 함수의 return 값을 변수에 저장하는 수밖에 없습니다. 아래와 같이 함수의 반환을 변수에 저장해서 console로 확인해볼 수 있습니다.
let result1 = multiplyTen(3);
let result2 = multiplyTen(6);
let result3 = multiplyTen(12);
console.log(result1);
console.log(result2);
console.log(result3);
변수에 저장하기 귀찮다면, 결과값을 바로 console로 확인해도 됩니다.
console.log(multiplyTen(0));
console.log(multiplyTen(3));
console.log(multiplyTen(2));
14-4. 함수와 return 키워드
사실 함수는 모두 return을 합니다. '음.. 아닌데' 하고 생각이 드셨을 수도 있습니다. 분명 return이 없는 함수를 보신 적이 있을테니까요. 그 경우에도 return이라는 키워드를 생략했을 뿐 함수는 리턴을 합니다. return을 생략하면 함수는 undefined를 반환합니다.
function consoleSuccess(month, name) {
console.log(month, name);
} let result = consoleSuccess("3", "김개발"); // 함수를 호출한 결과를 result에 담아서
console.log("consoleSuccess 호출 값은" + result); // 어떤 값이 리턴 되는지 직접 확인해보세요
14-5. 함수 내부에서 다른 함수 호출하기
조금만 더 복잡하게 함수를 사용해보겠습니다.
function getTax(price) {
return price * 0.1;
}
function calculateTotal(price) {
return price + getTax(price);
}
const result = calculateTotal(3500);
console.log(result);이렇게 함수 안에서 또 함수를 호출할 수도 있습니다. calculateTotal 함수 내부에서 getTax를 또 호출했습니다. 함수가 실행되는 시점은 함수를 호출하는 순간이겠죠? 위 코드에서 function으로 함수를 선언하는 부분은 "이런 함수가 있다"고 선언해준 것 뿐입니다. 함수가 실행되는 시점은 바로 calculateTotal(3500)으로 호출 했을 때 입니다.
// 수업 내용을 직접 테스트해보세요!
function getTax(price) {
return price * 0.1;
}
function calculateTotal(price) {
return price + getTax(price);
}
let result = calculateTotal(3500);
console.log(result);
console.log(calculateTotal(4000));
console.log(calculateTotal(5000));
