09_비구조할당.html
비구조 할당(구조 분해)
예) const object = {a:1, b:2, c:3}
const {a, b, c} = object 낱개로 받음
object.a
object.b
이렇게 쓸 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const dog = {
name: '멍멍이',
age: 2
}
console.log(dog.name, dog.age)
</script>
</body>
</html>
배열 형태로도 쓸 수 있다 !! 알아두기
console.log(dog.name, dog.age)
console.log(dog['name'], dog['age'])
비구조 할당
//비구조 할당
const {name, age} = dog;
console.log(name, age)
3가지 방법 다 쓴 경우
const data = {
name2: '홍길동',
kor: 95,
eng: 100,
math: 85
}
console.log(data.name2, data.kor, data.eng, data.math)
console.log(data['name2'], data['kor'], data['eng'], data['math'])
const {name2, kor, eng, math} = data;
console.log(name2, kor, eng, math)
10_spread.html
spread (전개 연산자) - 나열하겠다.
[형식]
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const arr1 = ['강아지', '고양이', '토끼', '펭귄']
const arr2 = arr1.concat();
const arr3 = [...arr1]
console.log('arr1 = ' + arr1) //원본 유지
console.log('arr2 = ' + arr2)
console.log('arr3 = ' + arr3)
</script>
</body>
</html>
데이터 값 추가하기
//추가
const arr4 = arr1.concat('코끼리', '기린')
const arr5 = [...arr1, '코끼리', '기린']
const arr6 = [ '코끼리', ...arr1, '기린'] console.log('arr4 = ' + arr4)
console.log('arr5 = ' + arr5)
console.log('arr6 = ' + arr6)
스프레드를 이용하면 원하는 자리에 추가할 수 있다는 장점 !
const dog1 = {
name: '멍멍이',
age: 2
}
const dog2 = {...dog1, name: '진돗개', age: 5};
console.log('dog2 = ' + dog2)
배열에서는 추가가 되지만, 객체에서는 덮어쓴다.
11_spread.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const data1 = [
{id: 1, name: '홍길동', age:5},
{id: 2, name: '라이언', age:10},
{id: 3, name: '프로도', age:20},
{id: 4, name: '어피치', age:30},
{id: 5, name: '죠르디', age:15},
]
console.log('data1 = ' + data1)
console.log('-----------------------')
const data2 = [...data1];
console.log('data2 = ' + data2)
console.log('-----------------------')
</script>
</body>
</html>
추가 => id: 6, name: '브라운', age: 20
//추가 => id: 6, name: '브라운', age: 20
const data3 = [...data1, {id: 6, name: '브라운', age: 20}];
console.log('data3 = ' + data3)
console.log('-----------------------')
문제
id가 6번인 '브라운'을 '제이지'로 변경하고, 나이를 30에서 35로 변경
//문제
//id가 6번인 '브라운'을 '제이지'로 변경하고, 나이를 30에서 35로 변경
const data4 = data3.map((item, index) => {
if(item.id === 6){
return {...item, name: '제이지', age: 35}
}else{
return item;
}
});
console.log('data4 = ' + data4)
console.log('-----------------------')
map은 item만 써도되고 index랑 같이 써도 된다.
반복되는 문장이 하나면 괄호와 return을 생략해도 된다.
괄호가 들어가면 return도 들어가야한다.
if문은 복잡해서 안 쓰려고 한다.
//if문은 복잡해서 안 쓰려고 한다.
const data5 = data3.map(item => item.id === 6 ? {...item, name: '제이지', age: 35} : item)
console.log('data5 = ' + data5)
'REACT' 카테고리의 다른 글
| DAY 76 - React HOMEWORK (2024.10.24) (1) | 2024.10.24 |
|---|---|
| DAY 76 - React - Hook: useEffect / 컴포넌트별 CSS (2024.10.24) (3) | 2024.10.24 |
| DAY 75 - React / HOMEWORK (2024.10.23) (3) | 2024.10.23 |
| DAY 74 - React (2024.10.22) (2) | 2024.10.22 |
| DAY 73 - ES6 (2024.10.21) (0) | 2024.10.21 |
