Hey Tech
[JavaScript] ๊ฐ์ฒด ๋ณํฉ ๋ฐฉ๋ฒ(Objet.assign ํจ์, ์ ๊ฐ์ฐ์ฐ์) ๋ณธ๋ฌธ
[JavaScript] ๊ฐ์ฒด ๋ณํฉ ๋ฐฉ๋ฒ(Objet.assign ํจ์, ์ ๊ฐ์ฐ์ฐ์)
Tony Park 2021. 12. 3. 00:01๐ก ๋ชฉํ
JavaScript์์ ๊ฐ์ฒด ๋ณํฉ ๋ฐฉ๋ฒ์ ๋ํด ํ์ตํ๋ค.
๋ชฉ์ฐจ
1. Object.assign() ํจ์
2. ์ ๊ฐ์ฐ์ฐ์
3. ์ผ๋ฐ ํจ์ ์ ์
๋ค์ด๊ฐ๋ฉฐ
๊ฐ์ฒด๋ฅผ ๋ณํฉํ๋ ๋ฐฉ๋ฒ์ ํฌ๊ฒ 3๊ฐ์ง๊ฐ ์์ผ๋ฉฐ ๊ฐ๊ฐ ์์๋ณด๊ฒ ์ต๋๋ค.
๋จผ์ , 3๊ฐ ๊ฐ์ฒด๋ฅผ ์์๋ก ์ ์ํ๊ฒ ์ต๋๋ค.
let obj1 = {
a: 10,
b: 20,
c: 30
}
let obj2 = {
c: 30,
d: 40,
}
let obj3 = {
c: 770,
d: 477,
}
1. Objet.assign() ํจ์
ํจ์ ์ํ
Object.assign(๊ฐ์ฒด1, ๊ฐ์ฒด2, ๊ฐ์ฒด3, ... , ๊ฐ์ฒด N);
Object ๊ฐ์ฒด ๋ด assign ํจ์๋ ๊ฐ์ฒด์ ์์๋ฅผ ์ค๋ณต์ ํ์ฉํ์ง ์๊ณ ๋ณํฉํฉ๋๋ค.
๋จ, ์ค๋ณต๋๋ ์์๋ ๋์ค์ ๋ณํฉํ๋ ๊ฐ์ฒด์ ์์๋ก ์ต์ข ๋ณํฉํฉ๋๋ค.
์์
let objEx01 = Object.assign(obj1, obj2, obj3);
console.log(objEx01);
3๊ฐ์ ๊ฐ์ฒด๋ฅผ Objet ๊ฐ์ฒด ๋ด assign ํจ์๋ฅผ ํ์ฉํ์ฌ ๋ณํฉํฉ๋๋ค.
์คํ๊ฒฐ๊ณผ
{ a: 10, b: 20, c: 770, d: 477 }
2. ์ ๊ฐ์ฐ์ฌ์ ์ฌ์ฉ
ํจ์ ์ํ
๊ฐ์ฒด = {...๊ฐ์ฒด1, ... ๊ฐ์ฒด2, ...๊ฐ์ฒด3, ... , ๊ฐ์ฒด N};
Object ๊ฐ์ฒด ๋ด assign ํจ์๋ assign ํจ์์ ๋ง์ฐฌ๊ฐ์ง๋ก
๊ฐ์ฒด์ ์์๋ฅผ ์ค๋ณต์ ํ์ฉํ์ง ์๊ณ ๋ณํฉํฉ๋๋ค.
๋จ, ์ค๋ณต๋๋ ์์๋ ๋์ค์ ๋ณํฉํ๋ ๊ฐ์ฒด์ ์์๋ก ์ต์ข ๋ณํฉํฉ๋๋ค.
์์
let objEx02 = { ...obj1, ... obj2 };
console.log(objEx02);
์คํ๊ฒฐ๊ณผ
{ a: 10, b: 20, c: 30, d: 40 }
3. ์ผ๋ฐ ํจ์ ์ ์
function f1(obj){
console.log(obj);
console.log(obj.a, obj.b, obj.c, obj.d);
}
f1({ ...obj1, ... obj2});
์ ์ฝ๋๋ ์ค๋ฌด์์ ๊ฐ์ฒด ๋ณํฉ ์ ์์ฃผ ์ฌ์ฉ๋๋ ๊ตฌ์กฐ์ ๋๋ค.
๋ ๊ฐ์ฒด๋ฅผ ์ ๊ฐ์ฐ์ฐ์๋ฅผ ํ์ฉํ์ฌ ๋ชจ๋ ๋ณํฉํ๊ณ ,
๋ณํฉํ ๊ฐ์ฒด๋ฅผ ํจ์์ ์ ๋ฌํ์ฌ ํ๋ก๊ทธ๋จ ๋ชฉ์ ์ ๋ง๊ฒ ํ์ฉํ ์ ์๋๋ก ํธ๋ฆฌํ๊ฒ ์ค๊ณ๊ฐ ๊ฐ๋ฅํ๊ธฐ ๋๋ฌธ์ด์ฃ .
์คํ๊ฒฐ๊ณผ
{ a: 10, b: 20, c: 30, d: 40 }
10 20 30 40
ํฌ์คํ ๋ด์ฉ์ ์ค๋ฅ๊ฐ ์๋ค๋ฉด ์๋์ ๋๊ธ ๋จ๊ฒจ์ฃผ์ธ์!
๊ทธ๋ผ ์ค๋๋ ์ฆ๊ฒ๊ณ ํ๋ณตํ ํ๋ฃจ ๋ณด๋ด์๊ธธ ๋ฐ๋๋๋ค.
๊ณ ๋ง์ต๋๋ค :)