#자바스크립트 스터디 7 - 배열 구조 분해, 나머지 매개변수, 전개구문

배열구조분해

//배열 구조 분해

let users = ['Mike', 'Tom', 'Jane'];
let [user1, user2, user3] = users;
//위 두 배열은 동일한 개념이다.
//let user1 = users[0];
//let user2 = users[1];
//let user3 = users[2];

구조분해 할당을 이용해 순서대로 할당됨

 

//배열 구조 분해

let str = "Mike-Tom-Jane";
let [user1, user2, user3] = str.split('-');

console.log(user1);
console.log(user2);
console.log(user3);

 

배열구조분해 : 바꿔치기

 

let a = 1;
let b = 2;

let c = a; //임시 c 변수에 a를 넣는다. 
a = b;
b = c;

//위와 같은 행위를 배열구조분해를 이용하여 아래와 같이 간단하게 가능

[a,b] = [b,a];

ㄴ 매우 간단하게 구조분해로 변수의 값을 바꿔치기할 수 있다. 

 

 

인수 전달

 

Mike 만 찍힘

 

arguments

 

• 함수로 넘어 온 모든 인수에 접근
• 함수내에서 이용 가능한 지역 변수
• length / index
• Array 형태의 객체
• 배열의 내장 메서드 없음

es6를 사용할 수 있는 환경이면 되도록 나머지 매개변수를 사용하라!

 

//나머지 매개변수!
function showName(...names){
    console.log(names);
};

showName();
showName('Mike');
showName('Mike', 'Tom');
//이런식으로 전달하면 두개의 인수를 전달할 수 있다

*아무것도 전달하지 않으면 빈 배열 생성,

*두개의 인수 전달하면 두개의 값이 들어간 배열 생성

 

 

실습1. 입력 받은 모든 수를 더하기

//나머지 매개변수
//전달 받은 모든 수를 더해라
function showNum(...numbers){
    let result = 0; 
    numbers.forEach((num)=>{ //numbers가 배열로 넘어오기 때문에 forEach로 조회
        result += num;
    });
    console.log(result); // 덧셈 결과 출력
};


showNum(1,2,3,4,5);

 

forEach() 안에 인수에는 조회하는 각각의 배열 인자 값이 들어간다!! 복기할 것

 

 

실습2. 실습1과 동일한 예제, arr.reduce() 사용해보기

//나머지 매개변수
//전달 받은 모든 수를 더해라
function showNum(...numbers){
    let result = 0; 
    result = numbers.reduce((prev, cur) => {
        prev += cur;
        return prev;
    });

    console.log(result);
};


showNum(1,2,3,4,5);

 

 

 

실습3. user 객체를 만들어주는 생성자 만들기

//user 객체를 만들어주는 생성자함수
//나머지 매개변수

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 ('Jane', 30, 'c', 'css');
const user3 = new User ('Tom', 30, 'c++', 'css');
const user4 = new User ('Chaey', 30, 'python', 'javascipt');


console.log(user1);
console.log(user2);
console.log(user3);
console.log(user4);

 

 

전개구문 : 배열

 

 

 

실습1.  arr1에 arr2배열의 값 추가해주기

//전개 구문
//arr1을 [4,5,6,1,2,3]으로

let arr1 = [1,2,3];
let arr2 = [4,5,6];

arr2.reverse().forEach(num =>{ // reverse() 없이 돌려주면 [6,5,4,1,2,3] 순서가 나와서 err
    arr1.unshift(num); 

});

console.log(arr1);

 

 

 

실습2. 실습1의 내용을 전개구문을 이용해 간단하게 해주기!

//전개 구문
//arr1을 [4,5,6,1,2,3]으로

let arr1 = [1,2,3];
let arr2 = [4,5,6];

//arr1.unshift(arr2) //이렇게 되면 배열 자체가 들어가버려서 [[4,5,6],1,2,3]
arr1 = [...arr2, ...arr1]; //전개된 값이기 때문에 배열이 들어가지 않음

console.log(arr1);

 

 

실습3. 전개구문을 사용해서 객체에 프로퍼티 추가하기

//객체로 전개구문 사용하기
let user = {name : "Mike"};
let info = {age : 30};
let fe = ["JS", "CSS"];
let lang = ["KOREAN", "ENGLISH"];

//user = Object.assign({skills : []}, user, info); 
// skills : [] 가 뒤에 추가되고 앞에 추가 되고 차이
//{ skills: [], name: 'Mike', age: 30 } 객체 만들어짐


user = Object.assign({}, user, info, { // Object.assign() 메소드를 통해 복제한다.
    skills : [], // user 객체에 skill 배열 프로퍼티 추가해줌
});

user.skills = [...fe, ...lang]; //전개구문 사용해주기

console.log(user); 
//{ name: 'Mike', age: 30, skills: [] } 객체 만들어짐