사이트로 로고

객체와 배열 고급

다중 할당

배열기반의 다중할당
  • 최신 자바스크립트부터 배열과 비슷한 작성 방법으로 값을 할당하고 전개할 수 있는 기능들이 추가되었다.
  • [식별자, 식별자, 식별자, ...] = 배열 와 같은 구문으로 값을 할당한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const [a,b,c,d] = [1,2,3,4]
console.log(a); //출력결과 : 1
console.log(a,b,c,d); //출력결과 : 1 2 3 4
 
 
const [a,b] = [1,2] //는 아래와 같다
const a = 1;
const b = 2;
 
 
//동일한 개수여야 할 필요는 없다
const wrap = [5,6,7,8,9];
const [e,f,g] = wrap;
console.log(e,f,g) //출력결과 5 6 7
객체에서 속성을 꺼내서 변수에 할당하기
  • {빼낼속성이름, 빼낼속성이름} = 해당 속성을 빼올 객체명
  • {지정할변수명 = 빼낼속성이름, 지정할변수명 = 빼낼속성이름} = 해당 속성을 빼올 객체명
1
2
3
4
5
6
7
8
9
10
11
12
const wrap = {
    name:"랩스튜디오",
    since:2019
}
 
const {name, since} = wrap;
console.log(name); //출력결과 : 랩스튜디오
console.log(since); //출력결과 : 2019
 
const {a=name, b=since} = wrap;
console.log(a); //출력결과 : 랩스튜디오
console.log(b); //출력결과 : 2019

배열 복사하기

  • 복사하는 방법에는 얕은 복사(참조복사)와 깊은 복사가 있다.
얕은 복사(참조복사)
  • 얕은 복사는 다른 이름이 붙을 뿐 같은 값이 나온다. 복사한 후 복사된 배열에 값을 추가해도 기존 배열에도 값이 추가된다.
1
2
3
4
5
6
7
const wrap = [1,2,3,4];
const hi = wrap;
hi.push(5);
hi.push(6);
 
console.log(wrap); //출력결과 : (6)[1,2,3,4,5,6]
console.log(hi);  //출력결과 : (6)[1,2,3,4,5,6]
깊은 복사 : 전개연산자를 사용한 배열 복사
  • 전개 연산자[...배열]를 사용하면 두 배열이 복사된 후에 독립적으로 작동한다.
1
2
3
4
5
6
7
const wrap = [1,2,3,4];
const hi = [...wrap]; //배열을 전개해서 hi라는 변수에 넣어으므로 같이 움직이는게 아니라 따로 움직인다고 생각하면 쉬울듯 하다.
hi.push(5);
hi.push(6);
 
console.log(wrap); //출력결과 : (4)[1,2,3,4]
console.log(h1); //출력결과 : (6)[1,2,3,4,5,6]
전개연산자를 사용한 배열요소 추가
  • [...배열, 요소, 요소, 요소]의 형태로 추가할 수 있다.
1
2
3
4
5
const wrap = [1,2,3,4];
const hi = [...wrap,'a','b','c'];
 
console.log(wrap); //출력결과 : (4)[1,2,3,4]
console.log(hi); //출력결과 (7)[1,2,3,4,'a','b','c']

객체 복사하기

얕은 복사(참조복사)
  • 배열과 같이 얕은 복사에서는 이름만 다른 이름이 붙을 뿐 한개를 수정하면 같이 수정된다.
1
2
3
4
5
6
7
8
9
10
const wrap = {
    name:"랩스튜디오",
    since:2019
}
 
const sitero = wrap;
sitero.name = "사이트로";
 
console.log(wrap) //출력결과 : {name: '사이트로', since: 2019}
console.log(sitero) //출력결과 : {name: '사이트로', since: 2019}
깊은 복사 : 전개연산자를 사용한 객체 복사
  • {...객체}의 형태로 객체를 복사할 수 있다. 복사된 후 독립적으로 작동한다.
1
2
3
4
5
6
7
8
9
10
const wrap = {
    name:"랩스튜디오",
    since:2019
}
 
const sitero = {...wrap};
sitero.name = "사이트로";
 
console.log(wrap) //출력결과 : {name: '랩스튜디오', since: 2019}
console.log(sitero) //출력결과 : {name: '사이트로', since: 2019}
전개연산자를 사용한 객체요소 추가
  • [...객체, 요소, 요소, 요소]의 형태로 추가할 수 있다. 전개연산자는 꼭 맨앞에 써야하는 것은 아니다. 추가하고 싶은 위치에 추가해도 된다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const wrap = {
    name:"랩스튜디오",
    since:2019
}
 
const sitero = {
    ...wrap,
    name:"사이트로",
    인원:6
}
 
console.log(wrap); //출력결과 : {name: '랩스튜디오', since: 2019}
console.log(sitero); //출력결과 : {name: '사이트로', since: 2019, 인원: 6}
 
같은 name 속성이 sitero 객체에서 추가되므로, 나중에 추가한 name 값으로 덮어씌기 된다.