1강 / 자바스크립트 함수 업그레이드하기 (default parameter/arguments)
함수의 default 파라미터 넣기
함수를 만들 때 파라미터값을 실수로 안적거나 했을 경우
파라미터에 기본값(default 값)을 줄 수 있다.
이렇게 사용하면 된다.
function plusTest (a, b = 10){
console.log(a + b)
}
plusTest(1);위 코드를 실행하면 콘솔창에 뭐가 뜨냐면 11이 뜬다.
지금 plusTest() 함수는 파라미터를 두개 입력할 수 있다.
하지만 실수인지 일부러인지 1이라는 파라미터 하나밖에 쓰지 않았다.
그럴 때 저렇게 b = 10 선언해뒀던 default 파라미터값인 10이 b에 할당되게 된다.
그래서 콘솔창에 a + b가 11이 출력되게 되는 것이다.
default 파라미터를 주고 싶으면 저렇게 파라미터 선언할 때 등호로 입력해주시면 된다.
그럼 파라미터가 정의되지 않았을 때 등호 오른쪽 값이 발동된다.
default 파라미터로 별게 다 들어갈 수 있습니다.
function plusTest (a, b = 2 * 5){
console.log(a + b)
}
plusTest(1);수학 연산자도 사용가능하다. b 자리에 파라미터가 없으면 2 * 5라는 값을 할당해준다.
function plusTest (a, b = 2 * a){
console.log(a + b)
}
plusTest(3);다른 파라미터와 연산도 가능하다. 위 코드는 실행하면 콘솔창에 뭐가 출력될까?
먼저 b 자리에 파라미터가 없으니 2 * a라는 값을 할당해주고 a자리에 3이 들어왔으니 b 자리에는 2 * 3라는 값을 할당해준다.
그럼 b의 값은 6이 되고 이후에 함수안에 있는 코드가 실행되니
3 + 6 값이 콘솔창에 나오게 된다.
심지어 default 파라미터엔 함수입력도 가능하다.
function temporaryFunction(){
return 10
}
function plusTest (a, b = temporaryFunction() ){
console.log(a + b)
}
plusTest(3);위 코드는 실행하면 콘솔창에 뭐가 출력될까?
b자리에 파라미터가 들어오지 않으면 temporaryFunction()를 실행한 값을 b 파라미터에 할당해준다.
temporaryFunction()를 실행하면 그 자리에 10이 남는다.
(return 10이 그 뜻이다!)
그래서 console.log(3 + 10)을 실행해준다.
함수의 arguments
함수의 모든 파라미터들을 전부 한꺼번에 다루고 싶은 경우가 있다.
그럴 땐 arguments라는 키워드를 활용하면 된다.
함수 안에서 쓸 수 있는 미리 정의된 키워드 혹은 변수인데
한번 써보자.
function test(a,b,c){
console.log(arguments)
}
test(2,3,4);그러면 콘솔창에 [2,3,4]를 담은 array 비슷한 자료가 출력된다.
arguments는 즉, 모든 입력된 파라미터를 [ ] 안에 싸매주는 고마운 키워드였던 것이었다.
이제 파라미터들을 한꺼번에 다루고 싶을 때 자주 활용해주시면 된다.
예를 들면 이런 경우가 있다.
콘솔창에 모든 파라미터를 하나씩 출력해주고 싶은 경우
function test(a,b,c){
console.log(arguments[0])
console.log(arguments[1])
console.log(arguments[2])
}
test(2,3,4);이러면 될 것 같다. 그런데 조금 더 확장성있게 반복문을 쓴다면
function test(a,b,c){
for (var i = 0; i < arguments.length; i++){
console.log(arguments[i])
}
}
test(2,3,4);이러면 된다.
약간 편리하게 파라미터들을 다룰 수 있는 문법이었다.
하지만 ES6문법 부터는 파라미터를 더 쉽게 다룰 수 있는 rest 파라미터라는 문법이 등장하게 되는데..
그건 다음 강의에서 알아보자.
2강 / 함수에서 쓰는 점3개 Rest 파라미터를 알아봅시다
Rest 파라미터
함수를 만들 때 ...이라는 기호를 파라미터 왼쪽에 추가가능하다.
그러면 신기한 일이 일어난다.
function test(...parameters){
console.log(parameters)
}
test(1,2,3,4,5,6,7);위 코드를 실행해보면 parameters이라는 변수를 출력해준다.
parameters라는 변수는 모든 파라미터를 [] array 안에 담고 있다.
이게 바로 ES6 환경에서 쓸 수 있는 rest 파라미터이다.
원하는 파라미터 왼쪽에 ... 기호를 붙여주면
"이 자리에 오는 모든 파라미터를 [] 중괄호로 감싸준 파라미터" 라는 뜻이다.
그래서 출력해보면 저렇게 [1,2,3,4,5,6,7]이 나오는 것이다.
그 자리에 입력한 모든 파라미터(1,2,3,4,5,6,7)를 중괄호에 감싸주는게 rest 파라미터이다.
...을 다른 자리에 사용한다면
그 자리에 있는 파라미터를 [] 안에 감싸준다고 했으면
다른 자리에 쓰면 어떻게 될까?
function test(a, b, ...parameters){
console.log(parameters)
}
test(1,2,3,4,5,6,7);위 코드를 실행해보면 [3,4,5,6,7]이 출력된다.
첫 두개(1, 2)의 파라미터는 a, b로 쓰는데
a,b 그 뒤에 나오는 모든 파라미터는 중괄호에 감싸서 parameters이라는 array가 된다.
파라미터 종류가 많을 경우 arguments 문법보다 다루기 쉽고 간단해서 자주 사용한다.
쓰기 전 주의사항
rest(나머지) 파라미터라는 뜻대로 나머지 부분에만 사용가능하다.
그니까 항상 파라미터가 여러개면 rest는 항상 마지막 파라미터로 넣어야한다.
function test(a, ...parameters, b){
console.log(parameters)
}이렇게 사용하면 에러가난다.
function test(a, ...parameters, ...parameters2){
console.log(parameters)
}이것도 안된다. 2개 이상 사용할 수 없다.
간단한 연습문제
모든 파라미터를 전부 하나씩 콘솔창에 출력해주는 함수를 만들고 싶다.
어떻게 해야할까?
그냥 쉬우니까 답을 알려주겠다.
function test(a, b, c){
console.log(a);
console.log(b);
console.log(c);
}
test(1,2,3);이렇게 하면 되는거 아닌가?
근데 파라미터를 4개 5개 오바해서 입력한 경우엔 제대로 실행이 되지 않는 멍청한 함수가 완성되었을 뿐이다.
파라미터 갯수 제한없이 똑같은 기능을 실행해주는 함수를 만들려면 어떻게 해야할까?
rest 파라미터를 사용해 모두 [] 안에 집어넣어주고 반복문을 사용하여 rest 파라미터에 들어온 개수와 i를 비교하는 코드를 작성하여 콘솔에 숫자를 한개씩 나타낼 수 있다.
function test(...parameters) {
for (var i = 0; i < parameters.length; i++) {
console.log(parameters[i]);
}
}
test(1, 2, 3);
