ES6-style-function

정중식·2023년 2월 6일
0

자바스크립트

목록 보기
7/20

함수의 파라미터에 default 값을 부여할 수 있다.

function plus(a,b=10){
 console.log(a + b) 
}

plus(1);
// console.log(11)

그럼 위 코드 상태에서 plus(1,2); 를 해주면 어떻게될까?

function plus(a,b=10){
 console.log(a + b) 
}

plus(1,2);
// console.log(3)

결과는 3이 나온다.

즉 defualt 파라미터는 b라는 값을 안넣었을때 설정해주는 용도이다.

참고로 자바스크립트는 강력하게 규제를 안해주기때문에 아래와 같이 사용해도 에러가 안난다.

function plus(a,b){
 console.log(a + b) 
}
plus(1);

하지만 아무것도 안넣으면 NaN을 리턴해준다..

function plus(a,b){
 console.log(a + b) 
}
plus();
// NaN 출력해줌..

이 default 파라미터에 함수도 넣을 수 있다.

function test(){
 return 10; 
}

function plus(a,b=test()){
 console.log(a + b) 
}
plus(1);

마찬가지로, plus(1,2);를 해주면 b=test()는 무시된다.

function test(){
 return 10; 
}

function plus(a,b=test()){
 console.log(a + b) 
}
plus(1,2);

함수의 arguments

파라미터를 arguments 라고 부르지만 약간의 차이는 있다.
아래 코드에서 function test(a,b,c) 이 소괄호()안에있는것을 파라미터라고하고,
함수의 안에있는 console.log(a,b,c)를 arguments 라고 한다.

function test(a,b,c){
 console.log(a,b,c) 
}

명칭보단 쓰임새가 중요하다.
arguments는 모든 파라미터를 한꺼번에 싸잡아서 다루고싶을 경우 사용한다.

function test(a,b,c){
 console.log(arguments)
}

test(1,2,3);
// Arguments(3)[1,2,3]....

// 심화로 이런식으로도 가능하다
function test(a,b,c){
 console.log(arguments[0]) // 1을 리턴해준다
 console.log(arguments[1]) // 2을 리턴해준다
 console.log(arguments[2]) // 3을 리턴해준다
}

test(1,2,3);

arguments를 활용하여 확장성 가득한 코드를 짤 수도 있다.

function test(a,b,c)
	for (var i=0; i<arguments.length; i++){
     	console.log(arguments[i]); 
    }
}

test(1,2,3);

Rest 파라미터

ES6부터는 arguments라는 문법과 유사한 Rest 파라미터를 사용할 수 있다.
Rest 파라미터는 함수를 만들때 ...이라는 기호를 파라미터 왼쪽에 추가할 수 있다.

EX)

function test(...parameter){
  console.log(parameter)
}

test(1,2,3,4,5,6,7);
// 출력결과: [1,2,3,4,5,6,7])

위의 코드를 실행해보면 parameter들을 []array 안에 담아주고있다.
파라미터 왼쪽에 ...을 붙여주면, 이 자리에 오는 모든 파라미터를 [] 중괄호로 감싸준 파라미터 라는 뜻이다.

Rest파라미터는 파라미터가 여러개면 항상 마지막 파라미터로 넣어야하고,
2개 이상 사용할 수 없다.

아래는 에러의 예시이다.

// 에러
function test(a, ...parameter, b){
  console.log(parameter)
}

//에러
function test(a, ...parameter, ...parameter2){
  console.log(parameter)
}
profile
내 가치를 찾아서

0개의 댓글