겁나게 헷갈렸던 Function의 매개변수(parameter), 인수(argument)의 사용법에 대해 적어보자. 이제 함수 밖에서 변수를 선언했을 때, 인자와 인수를 문법에 맞게 사용할 수 있게 되었으며, 매개변수, 인수의 역할과 위치를 정확히 알고 함수를 호출할 수 있다.....
Function의 인자와 인수❓❓
함수의 구성요소와 역할
-
함수의 구성요소
(출처 : https://lpla.tistory.com/128) -
각 구성요소의 의미와 역할
- 매개변수 : parameter. 함수 내부로 입력을 전달받는 변수이다
- 인수 : argument. 함수가 정의되면 정의된 일련의 과정을 실행하기 위해 필요한 입력, 즉 '인수'를 매개변수를 통해 함수에 전달하면서 함수의 실행을 명시적으로 지시해야 한다.
- 함수 이름 : 특정 함수를 구별하기 위해서 식별자인 함수 이름을 사용할 수 있다
함수의 3가지 정의법과 함수호출
- ✨함수 선언문 : 함수 선언문을 사용해 함수를 정의하는 방식이며 함수 이름은 생략 불가능
// 함수 선언문
function add(x, y) {
return x + y;
}
// 함수 호출
console.log(add(x,y)) // 참조 에러 : 매개변수 x, y는 함수 몸체 안에서만 유효하다
console.log(add()) // NaN : 인수로 (없는 값, 없는 값)을 넣어서 매개변수가 받아서 더한 값은 NaN
console.log(add(2, 5)) // 7
함수 이름 add도 매개변수와 마찬가지로 함수 몸체 내에서만 참조할 수 있는 식별자이므로 함수를 호출할 수 없다. 그러나 자바스크립트 엔진이 생성된 함수를 호출하기 위해 함수 이름과 동일한 add라는 식별자를 암묵적으로 생성하고, 거기에 함수 객체를 할당한다.
- ✨함수 표현식 : 자바스크립트의 함수는 객체 타입의 값이다. 따라서 변수에 할당할 수도 있고, 프로퍼티의 값이 될 수도 있으며, 배열의 요소가 될 수도 있다.(JS의 함수는 일급 객체이다) 함수 리터럴로 생성한 함수 객체를 변수에 할당한 정의 방식을 함수 표현식이라고 한다
// 함수 표현식
var add = function foo (x, y) {
retrun x + y;
};
console.log(foo(2, 5)) // 참조 에러 발생
console.log(add(2, 5)) // 7
함수를 호출할 때는 함수 이름이 아니라 함수 객체를 가리키는 식별자를 사용해야 한다. 함수 이름은 함수 몸체 내부에서만 유효한 식별자이므로 함수 이름으로 함수를 호출할 수 없다.
- ✨ 화살표 함수 : ES6에서 도입된 화살표 함수는 function 키워드 대신 화살표 =>를 사용해서 좀 더 간략한 방법으로 함수를 선언할 수 있다. 화살표 함수는 항상 익명 함수로 정의한다.
// 화살표 함수
const add = (x, y) => x + y;
console.log(add(2, 5)); // 7
함수의 호출과 인자 & 인수
- ✨매개변수와 인수
.jpg)
- 매개변수는 함수 몸체 내부에서만 참조할 수 있고, 함수 몸체 외부에서는 참조할 수 없다
- 함수를 실행하기 위해 필요한 값을 함수 외부에서 함수 내부로 전달할 필요가 있는 경우, 매개변수(인자)를 통해 인수를 전달한다.
// "I LOVE WECODE"의 문자열 길이를 콘솔에 찍는 함수
방법 1)
function getStringLength(y) {
return y.length;
}
let x = "I LOVE WECODE"
console.log(getStringLength(x)) // 13
방법2)
function getStringLength() {
let x = "I LOVE WECODE"
return x.length;
}
console.log(getStringLength()) // 13
방법3) 출력 안 됨❗
function getStringLength(x) {
let x = "I LOVE WECODE"
return x.length;
}
console.log(getStringLength()) // x가 이미 매개변수로서 선언되었기 때문에, 함수 안에서 x를 다시 선언하고 할당할 수 없다
방법4) 출력 안 됨❗
function getStringLength(x) {
return x.length;
}
let x = "I LOVE WECODE"
console.log(getStringLength(x)); // x는 이미 매개변수로 사용되었기 때문에 다시 함수 밖에서 선언되거나 함수를 호출할 때, 인수로 사용될 수 없다
방법5)
function getStringLength(x) {
return x.length;
}
let y = "I LOVE WECODE"
console.log(getStringLength(y)); // 13
방법6)
function getStringLength() {
return x.length;
}
let y = "I LOVE WECODE"
console.log(getStringLength(y)); // 매개변수를 생략할 수도 있다
방법7) 함수 밖에서 변수를 선언하고 함수 몸체 안에서 return value로 변수를 사용해도 무방
function myName(){
return name;
}
let name = "지연비"
console.log(myName()) // "지연비"
방법8) 함수 몸체 안에서 변수를 선언하고, return value로 사용한 후, 함수명으로 호출해도 됨
function myName(){
let name = "지연비"
return name;
}
console.log(myName()) // "지연비"
- ✨인수확인 : ES6에서 도입된 매개변수 기본값을 사용하면 함수 내에서 수행하던 인수체크 및 초기화를 간소화할 수 있다. 매개변수 기본값은 매개변수에 인수를 전달하지 않았을 경우와 undefined를 전달한 경우에만 유효하다.
function add(a=0, b=0, c=0){
return a + b + c;
}
console.log(add(1,2,3)) // 6
console.log(add(1,2)) // 3
console.log(add(1)) // 1
console.log(add()) // 0
- ✨반환문
- 함수는 return 키워드와 표현식(반환값)으로 이뤄진 반환문을 사용해 실행결과를 함수 외부로 반환(return)할 수 있다
- 반환문의 특징 : 반환문은 함수의 실행을 중단하고 함수 몸체를 빠져나간다.(switch문의 break와 같은 역할) 반환문은 return 키워드 뒤에 오는 표현식을 평가해 반환한다. 반환문은 생략이 가능하다
1) 반환문은 함수의 실행을 중단하고 함수 몸체를 빠져나가는 성질. return 뒤의 console.log는 실행되지 않는다
function multiply(x, y) {
return x * y;
console.log('실행되지 않는다');
}
console.log(multiply(1, 2)); // 2
2) 반환문은 생략이 가능하다
function foo() {
return;
}
console.log(foo()); // undefinded : 함수는 return을 실행한 후 암묵적으로 undefinded를 반환한다
👀반환문의 특징을 이용한 함수의 실행
function sum(x, y) {
if( x > 3) {
return
} return x + y
}
console.log(sum(1, 2)); // 3
console.log(sum(0, 2)); // 2
♪(^∇^*) 워-후!!（＾∀＾*）ﾉｼ