[JavaScript]코딩앙마 중급(5)구조분해할당, 나머지매개변수, 전개구문

Joy Ming·2023년 7월 10일

JavaScript

코딩앙마

목록 보기

7/13

구조 분해 할당(Destructuring assignment)

구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식

배열 구조 분해

split이용

배열 구조 분해 : 기본값

배열 구조 분해 : 일부 반환값 무시

공백과 쉼표를 이용해서 필요하지 않은 배열을 무시할 수 있음.

Tom은 공백으로 무시, 4번째 변수 Tony도 사용하는 변수가 없으므로 무시됨

배열 구조 분해: 바꿔치기

a에 b값을 넣고 b에 a값을 넣고 싶으면?

a=b라고 하는 순간 기존에 있는 a값은 없어져 버리니까 안됨

이럴땐 c=a로 기존의 a값을 잠시 저장.

그다음 b를 a로 옮김

그다음 임시로 저장했던 c의 값을 b로 옮김

그런데 위와 같은 과정은 복잡.
이럴때 구조분해 할당은 굉장히 편리함.

위와 같이 간단하게 구현할 수 있음. 임시변수 c가 필요 없음.

객체 구조 분해

순서를 바뀌어도 동일하게 동작

let user ={name : 'mike', age:30};

let {age, kiki}=user;

console.log(kiki, age);//undefined 30
console.log(user.kiki);//undefined

객체 구조 분해: 새로운 변수 이름으로 할당

객체 구조 분해: 기본값

나머지 매개변수(Rest parameters)

위와 같이 인수를 더 많이 받던 적게받던 에러는 발생하지 않음.
더 많이 받으면 그냥 있는 만큼만 찍히고(mike만)
못받으면 undefined가 찍힘
인수 갯수를 맞출 필요는 없음

function sum(a,b){
    return a+b;
}

console.log(sum(1));//NaN
console.log(sum());//NaN
console.log(sum(1,2,3));//3

arguments

arguments가 length 와 index가 있기때문에 배열이라고 생각할 수 있지만 사실 array형태의 객체임
그렇기에 forEach나 map같은거 사용불가 배열 아니고 객체니까.

function show(name){
    console.log(arguments)
}

show('mike','tom');//[Arguments] { '0': 'mike', '1': 'tom' }

let user ={name : 'mike', age:30};
console.log(user.length)//undefined

일반객체에는 length적용 불가

ES6환경이면 가급적 나머지 매개변수사용권장

나머지 매개변수

나머지 매개변수는 정해지지않은 갯수의 인수를 배열로 나타낼수 있게함
위와 같이 점 3개를 찍고 뒤에 배열 이름을 정해줌.
그러면 저 names배열안에 전달된 인수들이 들어감.
아무것도 전달하지 않으면 undefined 가 아니라 빈배열이 나타남

예제1

어떤 함수가 있는데 전달된 모든 수를 더해야함(사전에 정해진 갯수 없음)

arguments와 다르게 배열의 배소드들을 사용할 수 있음.

위와 같이 배열의 메소드 forEach, reduce사용해 합을 구함.

예제2

function User(name, age, ...skills){
    this.name = name;
    this.age = age;
    this.skills = skills;
}

const user1 = new User('mike', 30, 'html','css');
const user2 = new User('tom',20,'js','react','css');
const user3 = new User('jane', 10,'english','css','dance');

console.log(user1);
//User { name: 'mike', age: 30, skills: [ 'html', 'css' ] }

console.log(user2);
//User { name: 'tom', age: 20, skills: [ 'js', 'react', 'css' ] }

console.log(user3);
//User { name: 'jane', age: 10, skills: [ 'english', 'css', 'dance' ] }

주의 !! 나머지 매개변수는 항상 맨 마지막에 있어야 함.