본문 바로가기

프론트

[자바스크립트] 전개 연산자 (Spread Operator)

반응형

...

???

코드를 살피다가 나를 당황하게 만든 의문의 점 세개.

 

배열이나 객체를 편하게 나열해 주는 전개 연산자다.

사용법은 간단하다.

...[변수명]

이렇게 하면 변수 안의 내용물들을 자연스럽게 풀어 놓는다.

let arr = [3,4,5,6];
console.log(...arr); 
// 출력결과 : [3,4,5,6]

 위 처럼 간단하게 풀어 놓을 수도 있고,

함수의 변수로 넣어 버릴 수도 있다.

let arr2 = [1,3];
const fnc1 = (...arr2) =>{ // 함수내용}

이 연산자의 유용함은 배열이나 객체를 merge 시키는데도 사용 할 수 있다는 것이다.

연산자 뒤에 오는 내용은 앞에 연산한 내용을 덮어 쓴다.

let arr3 = {"aa" : 1,
            "bb" : 2,
            "cc" : 3,
}
let arr4 = {...arr3, "cc" : 5}
console.log(arr4)
// 실행결과
// { aa: 1, bb: 2, cc: 5 }

 

앞으로 점 세개가 나오더라도 당황하지 말자. ㅎ

반응형

'프론트' 카테고리의 다른 글

tailwind css 사용 설명서  (0) 2022.09.14