220926_TIL
오늘 한 일
- spread Operator
- rest 파라미터
spread operator는 …이렇게 마침표 3개를 붙여서 사용한다. spread 연산자는 함수소괄호, 오브젝트 중괄호 내, 어레이 대괄호내에서 보통 사용해야한다. 다른 곳에서 그냥 썼다간 에러가날 수 있기 때문
spread operator의 역할은 ‘괄호를 제거 해주는 기계’ 라고 생각하면 쉽다.
var 어레이 = ['hello', 'world'];
console.log(어레이);
console.log(...어레이); /// 'hello', 'world'
변수를 만들어 array를 설정 후에 …을 붙여주면 괄호가 사라지면서 ‘hello’, ‘world’값이 출력됨을 알 수 있다.
문자열에 …을 붙여주어 spread operator를 사용하면 문자열의 인덱싱마다 분리가 된다.
var 문자 = 'hello';
console.log(문자);
console.log(...문자);
이렇게 하면 console.log(‘h’, ‘e’, ‘l’, ‘l’, ‘o’) 이렇게 한거랑 똑같은 결과 값이 출력된다.
이러한 spread operator는 참조 값 공유의 방지를 막을 수 있다.
var a = [1, 2, 3];
var b = a;
console.log(a);
console.log(b);
이렇게 하면 a와 b 변수는 [1,2,3]을 각각 따로 하나씩 가진게 아니라 값 공유가 일어나는데 독립적으로 값을 저장하기 위해 spread operator를 사용하면 좋다.
var a = [1, 2, 3];
var b = [...a];
console.log(a);
console.log(b);
이렇게 하면 spread를 이용해서 a값의 괄호를 제거해준 다음에 다시 괄호를 씌우는 거기 때문에 아까처럼 a와 b 변수의 값 공유가 일어나지 않는다!!
또 spread operator는 오브젝트와 어레이끼리 합치고 복사하는데 매우 자주 쓰이며 용이하다. 그런데 오브젝트 안이 key 값이 중복이 일어난다면 여기서는 뒤에 오는 값이 출력이 된다는 걸 주의해야 한다.
var o1 = { a: 1, b: 2 };
var o2 = { a: 3, ...o1 };
console.log(o2);
이렇게 하면 a의 값이 중복이 되는데 위치상 a : 1이 뒤에 오기 때문에 a는 1이 출력된다.
spread operator는 어레이 형태의 값을 파라미터에 넣을 때에도 쓸 수 있다.
function 더하기(a, b, c) {
console.log(a + b + c);
}
var 어레이 = [10, 20, 30];
더하기(...어레이);
이렇게 하면 a,b,c의 파라미터에 어레이의 대괄호가 풀리면서 10,20,30이 잘 들어가서 출력 값으로 60이 잘 나온다.
이렇게 spread operator는 다방면으로 이용할 수 있는 기능이라 배우면서도 재미있었다. spread operator가 없었을 때는 apply,call의 내장함수기능을 사용했었는데 이 기능도 배우면서 신기했지만 확실히 신기능인 spread operator가 훨씬 간단했다.
rest 파라미터
function 함수2(...파라미터들) {
console.log(파라미터들);
}
함수2(1, 2, 3, 4, 5, 6, 7);
이렇게 파라미터로 오는 자리에 숫자가 매우 많다면 일일히 a,b,c,d,e 등등 갯수를 맞춰서 적어줘야 하기 때문에 매우 귀찮고 갯수가 많아질수록 실수할 확률이 높다. 이때 파라미터 자리에 …을 붙여서 만들어주는게 rest 파라미터이다.
rest파라미터는 “이 자리에 오는 모든 파라미터를 [] 중괄호로 감싸준 파라미터” 라는 뜻이다. 즉 파라미터 안으로 들어오는 인자를 []로 감싸준다.
이런 기능들은 arguments를 이용하여도 충분하다. 그렇지만 rest 파라미터와는 차이점이 분명히 있다.
function 함수2(a, b, ...파라미터들) {
console.log(파라미터들);
}
함수2(1, 2, 3, 4, 5, 6, 7);
이처럼 파라미터를 따로 받을 수 있다. 첫 두개의 파라미터는 a, b로 쓰는데 a,b 그 뒤에 나오는 모든 파라미터는 중괄호에 감싸서 파라미터들이라는 array가 된다.
rest 파라미터는 이렇게 용이하지만 사용하는데 있어 주의사항이 존재한다. rest(나머지) 파라미터라는 뜻대로 나머지 부분에만 사용가능하다. 그니까 항상 파라미터가 여러개면 rest는 항상 마지막 파라미터로 넣어야 한다는 것이다.
function 함수2(a, ...파라미터들, b){
console.log(파라미터들)
}
이렇게 마지막 자리가 아닌 위치에 rest 파라미터를 사용하면 에러가 발생한다. 그렇기 때문에 당연히 2개이상 rest 파라미터를 사용해도 에러가 발생한다.
function 함수2(a, ...파라미터들, ...파라미터들2){
console.log(파라미터들)
}
오늘 느낀 점
- spread operator와 rest 파라미터, 그리고 apply, call, arguments 등 추가적으로 더 공부하면서 신기하고 재밌었다. 자바스크립트를 배우면 배울수록 다양한 기능이 존재하고 얼마나 손쉽게 기능구현을 할 수 있는지 신기하다. 그리고 같은 기능이지만 어떻게 활용하느냐에 따라 이렇게도 쓸 수 있구나 등을 문제를 풀면서 느꼈다.
댓글남기기