๋ชฉ์ฐจ
๋ฐฐ์ด์ ๋ค๋ฃฐ ๋๋ CRUD๋ฅผ ํ์ธํ๋ฉด ๋๋ค.
Create, Read, Update, Delete
(์์ฑ, ์ฝ๊ธฐ, ์์ , ์ญ์ )
JS ๋ฐฐ์ด์ CRUD๋ฅผ ์์๋ณด์
Create
1. ์ด๊ธฐํ์ ์ ์ธ ๋์์
const arr1 = [1,2,3,4];
const arr2 = [1,'2',3,'4'];
๊ฐ์ฒด์ ๋ง์ฐฌ๊ฐ์ง๋ก
๋ฐฐ์ด๋ ๊ทธ ์์ฒด๋ฅผ ์๋ก์ด ๊ฒ์ผ๋ก ๋ฎ์ด๋ฒ๋ฆฌ๋ ๊ฒฝ์ฐ๊ฐ ๊ฑฐ์ ์์ผ๋ฏ๋ก
const๋ก ์์ ์ ์ธ์ ์ฃผ๋ก ํด์ค๋ค.
๋ฐฐ์ด ์ ์์๋ค์ ์๋ฃํ์ ํต์ผ๋์ง ์์๋ ๋๋ค!
2. ๊ฐ์ฒด๋ก ์ ์ธ (์ด๊ธฐํX ์ ์ธ)
const arr = new Array()
๋ฐฐ์ด์ ๊ฐ์ฒด๋ก ์ ์ธํ ์ ์๋ค!
์ด ๊ฒฝ์ฐ์๋ ์ด๊ธฐํ๋ฅผ ํ์ง ์์ ๋น ๋ฐฐ์ด์ด๋ค.
์์ ๊ณผ์ ์ ๊ฑฐ์น ํ ์๋์ ๊ฐ์ด
์ด๋ ํ ํน์ ์ธ๋ฑ์ค๋ง ๊ฐ์ ๋ฃ์ด์ค๋ค๋ฉด,
const arr = new Array() //๋น์ด์๋ ๋ฐฐ์ด ์ ์ธ ์ฃผ๋ ๋ฐฉ๋ฒ
arr[1] = 1;
console.log(arr)
>>>
[ <1 empty item>, 1 ]
๋น์ด์๋ ์ธ๋ฑ์ค์๋
undefined ๊ฐ์ฒด๊ฐ ๋ค์ด๊ฐ๋ค.
Read
const arr = new Array()
arr[0] = 1;
arr[1] = 2;
console.log(arr[0], arr[1], arr[arr.length -1])
>>>
1 2 2
์ธ๋ฑ์ฑ์ ํตํด ๋ฐฐ์ด์ ๊ฐ์ ์ฝ์ด์ค ์ ์๋ค.
์ฃผ์ํ ํ์ด์ฌ๊ณผ ๋ค๋ฅธ ์ ์
"-1"์ด๋ผ๋ ์ธ๋ฑ์ค๋ก ๋ฐฐ์ด์ ๋ง์ง๋ง ์์์ ์ ๊ทผํ ์ ์๋ค.
๋ฐ๋ผ์ "(๋ฐฐ์ด์ ๊ธธ์ด) -1" ์ ์ธ๋ฑ์ค๋ก ๋ฃ์ด์ ์ ๊ทผํด์ฃผ๋ฉด ๋๋ค!
Update
const arr = [1,2,3];
arr[0] = 2;
console.log(arr);
>>>
[2,2,3]
์ธ๋ฑ์ค์ ์ ๊ทผํด์ ๊ฐ์ ํ ๋น์ํจ๋ค.
๋ง์ง๋ง ์ธ๋ฑ์ค์ ์ถ๊ฐ
"๋ฐฐ์ด.length"๋ฅผ ์ด์ฉํ์ฌ ๋ง์ง๋ง ์ธ๋ฑ์ค์ ๊ฐ์ ์ถ๊ฐํ๋ค.
const arr = [1,2,3];
arr[arr.length] = 4;
console.log(arr);
>>>
[1,2,3,4]
ํน์ "push" ๋ฉ์๋๋ฅผ ์ด์ฉํ๋ค.
const arr = [1,2,3];
arr.push(4);
console.log(arr);
>>>
[1,2,3,4]
์ฒซ ๋ฒ์งธ ์ธ๋ฑ์ค์ ์ถ๊ฐ
"unshift" ๋ฉ์๋๋ฅผ ์ด์ฉํด ๊ฐ์ ์ถ๊ฐํ๋ค.
const arr = [1,2,3];
arr.unshft(0);
console.log(arr);
>>>
[0,1,2,3]
Delete
.splice()๋ฉ์๋๋ฅผ ์ด์ฉํด์ค๋ฉด ํน์ ์์๋ฅผ ์ญ์ ํ ์ ์๋ค.
๋ฐฐ์ด.splice(์์์ธ๋ฑ์ค, ๊ฐ์)
const arr = [1,2,3,4,5];
arr.splice(1,3);
console.log(arr);
>>>
[1, 5]
splice๋ฅผ ํ๋ฉด ํด๋น ๋ฐฐ์ด์ ๊ณง๋ฐ๋ก ์ ์ฉ์ด ๋๋ค.
(์๋ก์ด ๊ณต๊ฐ ๋ง๋๋ ๊ฒ X)
๋ฐฐ์ด ์ ์์
JS์ ๋ฐฐ์ด๋ ํ์ด์ฌ์ฒ๋ผ
๋ค์ํ ๋ฐ์ดํฐํ์ ์ ์์ดํ ์ผ๋ก ๊ฐ์ง ์ ์๋ค.
number, string, null ๋ฑ์ ํ ๋ฐฐ์ด ์์ ๋ฃ์ ์ ์๊ณ ,
๊ฐ์ฒด๋ ์์ดํ ์ผ๋ก ๊ฐ์ง ์ ์๋ค.
const arr = [
{a: '1', b:10},
{a: '2', b:20}
];
// { } ์ค๊ดํธ๋ ๊ฐํ
๋ฆฌํฐ๋ด์ ํตํ ๊ฐ์ฒด๋ก ์ธ์ง
๋ฐฐ์ด ์์ ๋ฐฐ์ด, n์ฐจ์ ๋ฐฐ์ด๋ ๋ฌผ๋ก ๊ฐ๋ฅํ๋ค.
'๐ | WEB DEV > Vanilla JS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
JS_๋ฌธ๋ฒ (1)_์ผํญ์ฐ์ฐ์, ๊ตฌ์กฐ๋ถํด ํ ๋น1 (0) | 2022.02.15 |
---|---|
JS_๊ธฐ๋ณธ๋ฌธ๋ฒ (6)_๋ฐฐ์ด 2 (๊ด๋ จ ํจ์) (0) | 2022.02.15 |
JS_๊ธฐ๋ณธ๋ฌธ๋ฒ (4)_๋ฐ๋ณต๋ฌธ (0) | 2022.02.11 |
JS_๊ธฐ๋ณธ๋ฌธ๋ฒ (3)_๊ฐ์ฒด (0) | 2022.02.10 |
JS_๊ธฐ๋ณธ ๋ฌธ๋ฒ (2)_์ฐ์ฐ์&ํจ์ (0) | 2022.02.08 |
๋๊ธ