배열이나 객체에 저장된 여러 개의 값들을 분해해서 각각 다른 변수에 할당하는 문법
배열의 구조 분해 할당
- let [변수명1, 변수명2, 변수명3] = 배열명;
- 배열에 담긴 순서대로 앞에 변수에 값을 할당
- 배열의 길이보다 변수가 적은 경우 차례대로 저장 후 짤림
- 배열의 길이보다 변수가 많은 경우 모두 할당 한 후 나머지는 undefined, 단 undefined 일 경우 초기값 설정 가능
let arr = [1, 2, 3];
let [one, two, three=2, four, five=5] = arr;
console.log(one, two, three, four, five); // 1 2 3 undefined 5
객체의 구조 분해 할당
- let {키명1, 키명2, 키명3} = 객체명;
- 순서 상관없이 해당 키명에 객체안에 속성의 키명의 값이 할당 됨
- 해당 속성이 없을 경우 undefined 반환, 단 undefined일 경우 초기값 설정 가능
- 변수명을 키명가 다른 이름으로 사용하고 싶은 경우 {키명:변수명}으로 작성 가능
let person = {
name: "luna",
age: 27,
hobby: "테니스",
};
let { age: myAge = 40, hobby, extra, name: myName, sayHi="hello"} = person;
console.log(myName, myAge, hobby, extra); // luna 27 테니스 undefined hello
매개변수를 구조 분해 할당으로 받는 법
함수에 인자로 배열, 객체를 받을 경우 구조 분해 할당으로 받을 수 있다
let person = {
name: "luna",
age: 27,
hobby: "테니스",
};
const func = ({ name:myName, age, hobby, extra=123 }) => {
console.log(myName, age, hobby, extra); // luna 27 테니스 123
};
func(person);
'프로그래밍언어 > JavaScript' 카테고리의 다른 글
[JavaScript] 배열의 메서드 (4) | 2025.06.19 |
---|---|
[JavaScript] Spread 연산자, Rest 매개변수 (1) | 2025.06.18 |
[JavaScript] Truthy&Falsy (0) | 2025.06.18 |
[JavaScript] AJAX(Asynchronous Javascript And XML) (0) | 2025.03.11 |
[JavaScript] JSON(JavaScript Object Notation) (0) | 2025.03.11 |
배열이나 객체에 저장된 여러 개의 값들을 분해해서 각각 다른 변수에 할당하는 문법
배열의 구조 분해 할당
- let [변수명1, 변수명2, 변수명3] = 배열명;
- 배열에 담긴 순서대로 앞에 변수에 값을 할당
- 배열의 길이보다 변수가 적은 경우 차례대로 저장 후 짤림
- 배열의 길이보다 변수가 많은 경우 모두 할당 한 후 나머지는 undefined, 단 undefined 일 경우 초기값 설정 가능
let arr = [1, 2, 3];
let [one, two, three=2, four, five=5] = arr;
console.log(one, two, three, four, five); // 1 2 3 undefined 5
객체의 구조 분해 할당
- let {키명1, 키명2, 키명3} = 객체명;
- 순서 상관없이 해당 키명에 객체안에 속성의 키명의 값이 할당 됨
- 해당 속성이 없을 경우 undefined 반환, 단 undefined일 경우 초기값 설정 가능
- 변수명을 키명가 다른 이름으로 사용하고 싶은 경우 {키명:변수명}으로 작성 가능
let person = {
name: "luna",
age: 27,
hobby: "테니스",
};
let { age: myAge = 40, hobby, extra, name: myName, sayHi="hello"} = person;
console.log(myName, myAge, hobby, extra); // luna 27 테니스 undefined hello
매개변수를 구조 분해 할당으로 받는 법
함수에 인자로 배열, 객체를 받을 경우 구조 분해 할당으로 받을 수 있다
let person = {
name: "luna",
age: 27,
hobby: "테니스",
};
const func = ({ name:myName, age, hobby, extra=123 }) => {
console.log(myName, age, hobby, extra); // luna 27 테니스 123
};
func(person);
'프로그래밍언어 > JavaScript' 카테고리의 다른 글
[JavaScript] 배열의 메서드 (4) | 2025.06.19 |
---|---|
[JavaScript] Spread 연산자, Rest 매개변수 (1) | 2025.06.18 |
[JavaScript] Truthy&Falsy (0) | 2025.06.18 |
[JavaScript] AJAX(Asynchronous Javascript And XML) (0) | 2025.03.11 |
[JavaScript] JSON(JavaScript Object Notation) (0) | 2025.03.11 |