0523
학습 목표
- 사용자 정의 함수
- 매개변수가 있는 함수
- 매개변수의 기본값을 지정하는 함수
- 반환값이 있는 함수
안녕하세요!
트윅스스터디 그 첫 번째 과제인 함수 알기 에서는 JavaScript의 다양한 함수에 대해 알아보도록 하겠습니다.
🧁 1. 함수란?
함수란 JavaScript에서 기본 구성 요소 중 하나입니다.
함수에 값을 전달하면, 함수는 값을 반환할 것입니다.
JS의 함수는 다른 모든 객체처럼 속성과 메서드를 가질 수 있으므로 일급(first-class) 객체입니다.
다른 객체와 함수를 구별하는 것은, 함수는 호출할 수 있다는 점입니다.
간단히 말해, 함수는 Function 객체입니다.
🧁 2. 함수 정의
함수를 정의하는 방법에는 여러 가지가 있습니다.
👉 함수 선언 (function 명령문)
함수 정의 또는 함수 선언은 다음과 같은 함수 키워드로 구성되어 있습니다.
- 함수의 이름
- 함수의 매개변수들, 괄호로 묶고 쉼표로 구분합니다.
- 함수를 정의하는
JavaScript문으로 중괄호로 묶습니다.{/*...*/}
함수 정의의 예시는 다음과 같습니다.
function square(number) {
return number * number;
}number라는 매개변수를 받아 해당 수의 제곱을 반환하는 함수를 정의하였습니다.
이렇게 정의한 함수를 사용할 수 있어야겠죠?
const x = square(4);위와 같이 함수를 사용할 수 있습니다.
매개변수의 타입과 개수에 맞게 매개변수를 전달하면 square()함수 내에서 제곱 연산이 되어 x에는 16이 저장되게 됩니다.
showMassage(); // 함수 호출
function showMassage() {
alert("안녕하세요!");
}
showMassage(); // 함수 호출그리고 JavaScript에서는 함수 선언부보다 함수 호출이 상단에 있어도 호출이 가능합니다!
조금 더 제약 없이 함수를 사용할 수 있겠죠?
🧁 3. 사용자 정의 함수
이러한 함수는 사용자가 직접 정의하여 사용할 수 있습니다.
function 함수이름 ([매개변수...]) {
// 외부로부터 함수가 호출되면 실행할 코드들
[return [값];] // (필수 아님)
}사용자 정의 함수를 사용할 때는
- 접근제한자 및 리턴타입을 명시하지 않으며,
- 파라미터 변수 지정 시에도 데이터타입을 명시하지 않습니다.
🧁 4. 매개변수가 있는 함수
매개변수가 있는 함수의 형식은 다음과 같습니다.
// 함수 선언
function func2(num) {
console.log("전달받은 매개변수의 값 : ${num}");
}
// 함수 사용
var num = 10;
func2(num);매개변수로 10의 값이 들어있는 num을 받아 콘솔창에 전달받은 매개변수의 값 : 10을 출력하게 되는 함수의 코드입니다.
함수를 사용할 때는 반드시
- 함수의 이름이 같은지를 확인하고,
- 함수의 매개변수의 개수가 같은지를 확인해야 합니다.
유의해주세요!
👉 1) 매개변수의 기본값을 지정하는 함수
만약 매개변수가 있는 함수를 사용하였는데 매개변수의 부분에 아무것도 없다면 어떻게 될까요?
원래대로라면 에러가 나게 되지만 매개변수의 기본값을 지정한다면 기본값이 매개변수에 전달되게 됩니다.
예시는 다음과 같습니다.
// 함수 선언
function func4(name="트윅스") {
console.log("개발천재들이 있는 곳은 ${name}입니다.");
}
// 함수 사용
func4("천국"); // 개발천재들이 있는 곳은 천국입니다.
func4(); // 개발천재들이 있는 곳은 트윅스입니다.자, 우리는 매개변수가 한 개인 func4함수를 정의하였습니다.
그래서 매개변수를 한 개 넣어준 func4("천국")에서는 제대로 잘 출력이 될 것 같네요!
그런데 func4()에는 매개변수가 없습니다.
그렇다면 에러가 나는 건가요??
이 때 바로 매개변수의 기본값을 정하는 함수의 진가가 드러납니다.
아무것도 매개변수에 전달하지 않아도 기본값인 트윅스가 name에 저장되면서 개발천재들이 있는 곳은 트윅스입니다.가 잘 출력되게 됩니다.
이해가 되셨나요??
🧁 5. 반환값이 있는 함수
반환값이 있는 함수를 사용하면 값을 어딘가에 저장할 수 있게 됩니다.
아래는 반환값이 있는 함수의 형식입니다.
function 함수명(매개변수1, 매개변수2,..) {
// 함수가 호출되었을 때 실행할 문장;
return 값;
}전달받은 매개변수들로 어떠한 수행을 하여 어떠한 값을 리턴하고 있습니다.
예시를 통해 좀 더 자세히 알아봅시다.
// 함수 선언
function add(num1, num2) {
var sum = num1 + num2;
return sum;
}
// 함수 사용
var result1 = add(2,10);
var result2 = add(3,3);첫 번째로 사용되는 add()함수에서는 2가 num1에 저장되고, 10이 num2에 저장되어 서로 합해진 값이 sum에 저장됩니다.
그리고 그 값이 return되어 result1에 저장되게 됩니다.
결론적으로 result1에는 12라는 값이 저장되게 되는 것입니다.
두 번째로 사용되는 add()함수도 같은 과정을 거쳐 최종적으로 result2에 6이라는 값이 저장되게 됩니다.
이번 게시물에서는 자바스크립트의 함수가 무엇인지, 어떻게 선언하고 사용하는지, 그리고 함수의 종류에 대해 조금씩 다뤄보았습니다.
이해가 잘 되었는지 모르겠네요..
다음 게시물에서는 익명 함수와 즉시 실행 함수, 다양한 함수 표현식에 대해 공부해 보겠습니다!
트윅스스터디 완주를 향해~
