Javascript15(응용JS_비구조할당) feat.velopert

min seung moon·2021년 3월 6일
0

Javascript

목록 보기
18/23
post-custom-banner

비구조 할당(구조 분해)

01) 객체의 비구조 할당 함수 활용

const objec = { a : 1, b : 2 };

//함수의 기본 파라미터는 객체 구조 분해에서도 사용 가능하다
const { a, b = 2} = object;
console.log(a);
console.log(b);

// 함수 기본 파라미터
function print ({a, b = 2}) {
	console.log(a);
	// 만약에 b가 없을 때
	console.log(b || 2);
}
print(object);

02) 객체의 키워드 비구조 할당

const animal = {
	name : '멍멍이',
	type : '개'
};

const nickname = animal.name;

// 비구조 할당을 통해 name을 nickname으로 대체할 수 있는 변수를 만들 수 있다
// 원본은 그대로 이다
const { name : nickname } = animal.name;

console.log(nickname);

03) 배열 비구조할당

const array = [1,2];

const one = array[0];
const two = array[1];

// 배열 비구조 할당 && 기본 파라미터
const [one, two = 2] = array;

console.log(one);
console.log(two);

04) 복잡한 비구조 할당

const deepObject = {
	state : {
		information : {
			name : 'velopert',
			language : ['korean', 'english', 'chiness']
		}
	},
	value : 5
}

// 비구조 할당 2번
const { name, language : [first, second ]} =deepObject.state.information;
const { value } = deepObject;

// 비구조 할당 1번
const {
	state : {
		information : {
			name, langes: [firsetLang, secondLang]
		}
	},
	value
} = deepObject;

const extracted = {
	// name : name
	// 특정 객체를 만들 때 특정 키의 값이 있으면 value값 설정을 생략해도 된다
	name,
	//language 대신에
	first,
	second,
	value
};

console.log(extracted);
profile
아직까지는 코린이!
post-custom-banner

0개의 댓글