자바스크립트 중급 (4) - 구조 분해 할당, 나머지 매개변수, 전개구문, 클로저

이번 포스트도 역시나 코딩앙마님의 강의를 보고 작성했습니다.

[자바스크립트 중급 강좌 : 140분 완성 - YouTube](https://www.youtube.com/watch?v=4_WLS9Lj6n4&t=5204s)

---

1. 구조 분해 할당

구조 분해 할당

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

let users = ["Mike","Tom"];

// let user1 = users[0];
// let user2 = users[1];
let [user1, user2] = users;

console.log(user1); // "Mike"
console.log(user2); // "Tom"

let str = "Mike-Tom-Jane";
let [usr1, usr2, usr3] = str.split("-");
console.log(usr2); // "Tom"

✔️undefined를 방지하기 위해 기본값을 줄 수 있다.

let [a, b, c = 5] = [1,2];
console.log(c); // 5

 

배열 구조 분해

배열의 일부 반환값을 무시할 수 있다.

let [user1, ,user2] = ['Mike', 'Tom', 'Jane'];
console.log(user1); // "Mike"
console.log(user2); // "Jane"

 

바꿔치기

let a = 1;
let b = 2;
[a,b] = [b,a];
console.log(a,b); // 2,1

 

객체 구조 분해

변수의 순서를 바꿔도 동일하게 동작한다.

변수를 새로운 변수 이름으로 할당 가능하고, 기본값이 설정 가능하다.

let user = {name:"Mike", age:30};

// let name = user.name;
// let age = user.age;
let {name : userName, age : userAge} = user;
console.log(userName); // "Mike"
console.log(userAge); // 30

---

2. 나머지 매개변수, 전개 구문

✔️ 인수 전달 : JS에서 함수에 전달하는 인수의 개수 제한은 따로 없다.

✔️ 인수 전달 방법

1. argument
   1. 나머지 매개 변수

 

arguments

함수로 넘어온 모든 인수에 접근한다.

함수 내에서 사용 가능한 지역 변수이다.

length와 index를 사용할 수 있는 Array 형태의 객체이다.

배열의 내장 메서드는 사용할 수 없다.(forEach, map)

function showName(name){
    console.log(arguments.length);
    console.log(arguments[0]);
    console.log(arguments[1]);
};
showName("Mike","Jane");
// 2
// "Mike"
// "Jane"

 

나머지 매개변수

받은 값을 배열로 반환한다.

함수에 받은 값이 없으면 빈 배열을 반환한다.

function showName(...names){
    console.log(names);
};

showName(); // []
showName("Mike"); // ["Mike"]
showName("Mike", "Jane"); // ["Mike", "Jane"]

 

전개 구문

배열과 객체를 복제한다.

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

let result = [...arr1, ...arr2];
console.log(result); // [1,2,3,4,5,6];

---

3. 클로저(Closure)

Javascript는 어휘적 환경(lexical)을 갖는다.

내부 lexical 환경은 외부 lexical 환경에 대한 참조를 갖는다.

// lexical 환경 - one : 초기화 X (사용 불가) / addOne : function (사용 가능)


let one; // lexical - one : undefined (사용 가능) / addOne : function
one = 1; // lexical - one : 1 / addOne : function

function.addOne(num){
    console.log(one + num);
};

addOne(5); // lexical은 두 가지로 나뉜다.
// 내부 lexical - num : 5
// 전역 lexical - one : 1 / addOne : function

 

클로저

함수와 Lexical 환경의 조합으로, 함수가 생성될 당시의 외부 변수를 기억한다.

함수가 생성된 이후에도 계속해서 접근이 가능하다.