자바스크립트 다지기 - 구조분해할당, 나머지 매개변수, 전개구문

Janny·2023년 4월 14일
0

헷갈리는 개념 정리

목록 보기
11/17
post-custom-banner

구조분해할당

배열 구조 분해

기본값

let [a, b, c] = [1, 2];
// 이 때 c는 undefined
// 그래서 기본값을 줘야 한다.
let [a=3, b=4, c=5] = [1, 2];
console.log(b); // 2
console.log(c); // 5

일부 반환값 무시

let[user1, , user2] = ['Mike', 'Tom', 'Jane', 'Tony'];

console.log(user1); // 'Mike'
console.log(user1); // 'Jane'

바꿔치기

a = 2
b = 1
일 때 두 값을 바꾸고 싶다면

let a = 1;
let b = 2;

[a, b] = [b, a]

객체 구조 분해

새로운 변수 이름으로 할당

let user = {name: 'Mike', age: 30};
let {name, age} = user; // name과 age 순서가 바뀌어도 된다.
let {name: userName, age: userAge} = user; // 새로운 이름으로 할당할 수도 있다.

기본값

let user = {name: 'Mike', age: 30};
let {name, age, gender} = user; // 여기서 gender는 undefined
let {name, age, gender = 'male'} = user; // 'male'이 기본값으로 설정된다. 

나머지 매개변수 (rest parameter)

...

인수전달

함수의 인수를 얻는 방법
1) arguments로 접근 (화살표 함수에는 없음)

  • 함수로 넘어온 모든 인수에 접근
  • 함수 내에서 이용가능한 지역 변수
  • length/index (그렇지만 배열은 아님)
  • Array 형태의 객체
  • 배열의 내장 메서드가 없음 (forEach, map 사용 불가)

2) 나머지 매개변수

  • 정해지지 않은 매개변수를 배열로 나타낼 수 있도록 한다.
function showName(...names){
	console.log(names);
}
showName(); // []
showName('Mike'); // ['Mike']
showName('Mike', 'Tom'); // ['Mike', 'Tom']

주의할 점은, 나머지 매개변수는 항상 마지막에 있어야한다.

전개구문(Spread syntax)

배열, 객체

배열이나 객체에 넣고 빼고 하는 게 번거로운데 전개구문을 이용하면 편리하게 할 수 있다.

복제

복제를 해서 작업하게 되면 기존 데이터는 영향을 미치지 않는다.

let arr = [1, 2, 3];
let arr2 = [...arr];

let user = {name: 'Mike', age: 30};
let user2 = {...user};

user2.name = "Tom";

console.log(user.name); // "Mike"
console.log(user2.name); // "Tom"
profile
🐣병아리 개발자의 기록을 위한 공간
post-custom-banner

0개의 댓글