๐2018๋ 06์ 28์ผ โ ๐TutorialPost โ โณ5๋ถ
๋ฐฐ์ด(Array)์ JavaScript ๊ฐ์ฒด์ ํน์ํ ํํ๋ก์จ, ๊ฐ์ฒด์ ํ๋กํผํฐ๋ช ์ด 0๋ถํฐ ์์ํด์ ์์ฐจ์ ์ผ๋ก ์ปค์ง๋ ์์ฐ์๋ก ์ด๋ฃจ์ด์ง ํํ๋ผ๊ณ ์๊ฐํ ์ ์์ต๋๋ค. ์ด๋ฅผ ํตํด ์ด๋ ํ ๋ฐ์ดํฐ๋ฅผ ์์ฐจ์ ์ผ๋ก ์ ์ฅํ๊ฑฐ๋ ์กฐํํ๋๋ฐ ์ ์ฉํ๊ฒ ์ฌ์ฉ๋ฉ๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ๋ฐฐ์ด์ Array ํ์ ๊ฐ์ฒด๊ฐ ์ ๊ณตํ๋ ๋ฉ์๋๋ค์ ์ฌ์ฉํ์ฌ ์์ฝ๊ฒ ๋ฐฐ์ด ์กฐ์์ ์ฒ๋ฆฌํ ์ ์์ต๋๋ค.
๋ฐฐ์ด์ ๊ธฐ์ด
๋ฐฐ์ด์ ๊ฐ์ ์์ฐจ์ ์ผ๋ก ์ ์ฅํ๋ ์ฉ๋๋ก ์ฌ์ฉํฉ๋๋ค. ๋ฐฐ์ด์ ํ๊ธฐ ํ์์ ์๋์ฒ๋ผ ๋๊ดํธ [] ๋ฅผ ์ด์ฉํด ํ๊ธฐํ๋ฉฐ ๋ด๋ถ์๋ ์ด๋ ํ ๋ฐ์ดํฐ ํ์ ๋ ์ ์ฝ์์ด ๊ฐ์ผ๋ก ์ฌ์ฉํ ์ ์์ต๋๋ค.
ํ์ง๋ง ๊ฒฐ๊ตญ์ ๋์ผํ ๋ฐ์ดํฐ ํ์ ์ ๋์ดํ๋ ์ฉ๋๋ก ์ฃผ๋ก ์ฌ์ฉํ๊ฒ ๋ฉ๋๋ค.
๋ฐฐ์ด์ ์์๋ฅผ ํ์ธํ๊ฑฐ๋ ๋ฐฐ์ด์ ๊ธธ์ด๋ฅผ ํ์ธํ๊ธฐ ์ํด์๋ ์๋์ ๊ฐ์ด ์ฌ์ฉํฉ๋๋ค. ์ญ์๋ ๋ฐฐ์ด์ ์ฒซ๋ฒ์งธ ์์๋ 0๋ถํฐ ์์ํฉ๋๋ค.
// ๋ฐฐ์ด ์์์ ์ ๊ทผํ๊ธฐ arr[0]; // 1 arr[2]; // 3 // ๋ฐฐ์ด ์์์ ๊ฐ์ ํ์ธํ๊ธฐ arr.length // 3 // ๋ง์ง๋ง ์์์ ์ ๊ทผ arr[arr.length - 1]; //=> 3
๋ฐฐ์ด์ ์์์ ์๋ก์ด ๊ฐ์ ํ ๋นํ๊ธฐ ์ํด์๋ ๋์ ์ฐ์ฐ์๋ฅผ ์ด์ฉํด ๋ฐฐ์ด์ ์์์ ์๋ก์ด ๊ฐ์ ํ ๋นํด ์ฃผ๋ ๋ฐฉ๋ฒ์ด ์์ต๋๋ค.
arr[2] = 4; console.log(arr); // [ 1, 2, 4 ]
๋ฐฐ์ด์ ๋ฉ์๋
๋ฐฐ์ด์ ์๋ฐ์คํฌ๋ฆฝํธ์์ ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํ ๋ ๊ฐ์ฅ ํญ๋๊ฒ ์ฌ์ฉ๋๋ ๋ฐ์ดํฐ ํ์ ์ ํ๋์ ๋๋ค. ๋ฐ๋ผ์ ์์ฝ๊ฒ ๋ฐฐ์ด์ ์กฐ์ํ ์ ์๋๋ก ๋ค์ํ ๋ฉ์๋๋ฅผ ์ ๊ณตํ๊ณ ์์ต๋๋ค.
Array ๋ฉ์๋
Array.from()
์ ์ฌ ๋ฐฐ์ด ํน์ ๋ฐ๋ณต๊ฐ๋ฅํ ๊ฐ์ฒด๋ก๋ถํฐ ์ Array ์ธ์คํด์ค๋ฅผ ๋ง๋ญ๋๋ค.
Array.from(arrayLike[, mapFn[, thisArg]])
์ด ๋ฉ์๋๋ฅผ ์ด์ฉํ๋ฉด ํจ์์ arguments๋ฅผ ๋ฐฐ์ด๋ก ์์ฝ๊ฒ ๋ณ๊ฒฝํ ์ ์์ต๋๋ค.
function f() { var args = Array.from(arguments); console.log(args); } f(1, 2, 3); // [ 1, 2, 3 ]
Array.isArray()
์ธ์๋ก ์ ๋ฌ๋ฐ์ ๊ฐ์ฒด๊ฐ ๋ฐฐ์ด์ด๋ฉด true, ๊ทธ๋ ์ง ์์ผ๋ฉด false๋ฅผ ๋ฆฌํดํ์ฌ ํด๋น ๊ฐ์ฒด๊ฐ ๋ฐฐ์ด์ธ์ง ํ์ธ ํฉ๋๋ค.
Array.isArray([1, 2, 3]); // true Array.isArray({foo: 123}); // false Array.isArray('foobar'); // false
์๋ณธ ๋ฐฐ์ด์ ์์ ํ๋ ๋ฉ์๋
์๋์ ๋ฉ์๋๋ค์ ์๋ณธ ๋ฐฐ์ด์ ๋ฐ๋ก ์์ ํ๋ ๋ฉ์๋๋ค ์ ๋๋ค. ๋ฐ๋ผ์ ์ฌ์ฉ์ ์ฃผ์ํด์ผ ํ๋ฉฐ, ์๋ณธ ๋ฐ์ดํฐ์ ๋ณ๊ฒฝ ์์ด ๋ฐฐ์ด ์กฐ์์ ๊ฒฐ๊ณผ๊ฐ์ด ํ์ํ ๊ฒฝ์ฐ์๋ ๋ค๋ฅธ ๋ฉ์๋๋ค์ ์ฌ์ฉํด์ผ ํฉ๋๋ค.
๋ฐฐ์ด ์์ ์ถ๊ฐ ์ ๊ฑฐ ๋ฉ์๋
๋ฐฐ์ด์ ์ฒ์ ํน์ ๋ง์ง๋ง์ ์์๋ฅผ ์ถ๊ฐํ๊ฑฐ๋ ์ ๊ฑฐํ๋ ๋ฉ์๋๋ค ์ ๋๋ค.
- push ๋ฉ์๋ : ๋ฐฐ์ด์ ๋ง์ง๋ง์ ์๋ก์ด ์์๋ฅผ ์ถ๊ฐํ ํ, ๋ณ๊ฒฝ๋ ๋ฐฐ์ด์ ๊ธธ์ด๋ฅผ ๋ฐํ
- pop ๋ฉ์๋ : ๋ฐฐ์ด์ ๋ง์ง๋ง ์์๋ฅผ ์ ๊ฑฐํ ํ, ์ ๊ฑฐํ ์์๋ฅผ ๋ฐํ
- unshift ๋ฉ์๋ : ๋ฐฐ์ด์ ์ฒซ ๋ฒ์งธ ์๋ฆฌ์ ์๋ก์ด ์์๋ฅผ ์ถ๊ฐํ ํ, ๋ณ๊ฒฝ๋ ๋ฐฐ์ด์ ๊ธธ์ด๋ฅผ ๋ฐํ
- shift ๋ฉ์๋ : ๋ฐฐ์ด์ ์ฒซ ๋ฒ์งธ ์์๋ฅผ ์ ๊ฑฐํ ํ, ์ ๊ฑฐํ ์์๋ฅผ ๋ฐํ
var arr = [1, 2, 3]; // ๋ฐฐ์ด์ ๋ง์ง๋ง ์์ ์ ๊ฑฐ, ์ ๊ฑฐ๋ ์์ ๋ฆฌํด arr.pop(); // 3 // ๋ฐฐ์ด ๋ง์ง๋ง์ ์์ ์ถ๊ฐ, ๋ฐฐ์ด์ ํฌ๊ธฐ ๋ฆฌํด arr.push("new"); // 3 console.log(arr); //-> [ 1, 2, 'new' ] // ๋ฐฐ์ด์ ์ฒซ๋ฒ์งธ ์์ ์ ๊ฑฐ, ์ ๊ฑฐ๋ ์์ ๋ฆฌํด arr.shift(); // 1 // ๋ฐฐ์ด์ ์ฒ์์ ์์ ์ถ๊ฐ, ๋ฐฐ์ด์ ํฌ๊ธฐ ๋ฆฌํด arr.unshift("new"); // 3 console.log(arr); //-> [ 'new', 2, 'new' ]
splice ๋ฉ์๋ - ๋ฐฐ์ด ์์ ์ถ๊ฐ ์ญ์
Array.prototype.splice() ๋ฉ์๋๋ ๋ฐฐ์ด์ ํน์ ์์น์ ๋ฐฐ์ด ์์๋ฅผ ์ถ๊ฐํ๊ฑฐ๋ ์ญ์ ํ๋๋ฐ ์ฌ์ฉํฉ๋๋ค. ๋ฆฌํด๊ฐ์ ์ญ์ ํ ๋ฐฐ์ด ์์์ ๋๋ค. ์ญ์ ํ ์์๊ฐ ์๋๋ผ๋ ๋น ๋ฐฐ์ด์ ๋ฐํํฉ๋๋ค.
/* ๋ฐฐ์ด ์์์ ์์น์ ์์ ์ถ๊ฐ ์ ๊ฑฐ */ // start - ์์ ํ ๋ฐฐ์ด ์์์ ์ธ๋ฑ์ค // deleteCount - ์ญ์ ํ ์์ ๊ฐ์, ์ ๊ฑฐํ์ง ์์ ๊ฒฝ์ฐ 0 // el - ๋ฐฐ์ด์ ์ถ๊ฐ๋ ์์ arr.splice(start, deleteCount, el); var arr = [1, 5, 7]; arr.splice(1, 0, 2, 3, 4); // [], arr: [1, 2, 3, 4, 5, 7] arr.splice(1, 2); // [2, 3], arr: [1, 4, 5, 7]
reverse ๋ฉ์๋ - ๋ฐฐ์ด ์์ ์์ ๋ฐ์
Array.prototype.reverse() ๋ฉ์๋๋ ๋ฐฐ์ด ์์์ ์์๋ฅผ ๋ค์ง์ต๋๋ค.
// ์์ ์์๋ฅผ ๋ฐ์ ์ํด var arr = [1, 3, 5, 7]; arr.reverse(); // [7, 5, 3, 1]
sort ๋ฉ์๋ - ๋ฐฐ์ด ์์ ์ ๋ ฌ
Array.prototype.sort() ๋ฉ์๋๋ ๋ฐฐ์ด ๋ด๋ถ์ ์์๋ฅผ ์ ๋ ฌํ๋๋ฐ ์ฌ์ฉํฉ๋๋ค.
sort ํจ์๋ ๊ธฐ๋ณธ์ ์ผ๋ก ๋ฐฐ์ด์ ์์๋ฅผ ๋ฌธ์์ด๋ก ๋ณํํ ํ ์ค๋ฆ์ฐจ์์ผ๋ก ์ ๋ ฌํฉ๋๋ค.
var arr = [11, 1, 115, 42, 12]; arr.sort(); //-> [ 1, 11, 115, 12, 42 ]
์ด๋ ๊ฒ ์ฌ์ฉํ ๊ฒฝ์ฐ ์ ์์ ์ ๊ฐ์ด ์๋ํ์ง ์์ ๊ฒฐ๊ณผ๋ฅผ ๋๋ ค์ค ๊ฒฝ์ฐ๊ฐ ์์ต๋๋ค. ์ด๋ ๋ด๋ถ์ ์ผ๋ก ์ซ์๋ฅผ ๋ฌธ์์ด๋ก ๋ณํํ ํ ๊ฐ์ ๋น๊ตํ๊ธฐ ๋๋ฌธ์ ๋๋ค.
๋ฐ๋ผ์ ๋๋ถ๋ถ์ ๊ฒฝ์ฐ sort ํจ์์ ์ธ์๊ฐ์ผ๋ก ๋น๊ต ํจ์๋ฅผ ์ ๋ฌํ์ฌ ์ ๋ ฌํ๊ฒ ๋ฉ๋๋ค.
var arr = [11, 1, 115, 42, 12]; arr.sort(function(a, b) { return a - b; }); //-> [ 1, 11, 12, 42, 115 ]
๋น๊ตํจ์๋ ๋๊ฐ์ ์ธ์ (a, b) ๋ฅผ ๋ฐ์ผ๋ฉฐ ๊ฐ๊ฐ ๋น๊ตํ ์ฒซ ๋ฒ์งธ, ๋ ๋ฒ์งธ ์์๊ฐ ๋ฉ๋๋ค. ๋น๊ตํจ์๋ ๋ฐฐ์ด ์์์ ๊ฐ์ฅ ์ฒ์ ๋ ์์๋ถํฐ ์์ฐจ์ ์ผ๋ก ๋น๊ตํด๊ฐ๋ฉฐ ์ ๋ ฌ์ ์คํํฉ๋๋ค.
๋น๊ตํจ์ function(a, b) {} ์ ๋ฐํ๊ฐ์ ๋ฐ๋ผ ์ ๋ ฌ ๊ท์น์ ์๋์ ๊ฐ์ต๋๋ค.
- ๊ฒฐ๊ณผ๊ฐ์ด 0๋ณด๋ค ์์ผ๋ฉด a๊ฐ ๋ฎ์ ์์ธ์ผ๋ก ์ ๋ ฌ๋ฉ๋๋ค.
- ๊ฒฐ๊ณผ๊ฐ์ด 0์ด๋ฉด a์ b์ ์์๋ฅผ ๋ฐ๊พธ์ง ์์ต๋๋ค.
- ๊ฒฐ๊ณผ๊ฐ์ด 0๋ณด๋ค ํฌ๋ฉด b๊ฐ ๋ฎ์ ์์ธ์ผ๋ก ์ ๋ ฌ๋ฉ๋๋ค.
์์ ์์์ 11๊ณผ 1์ ๋น๊ตํ ๊ฒฝ์ฐ a - b ๋ 10์ผ๋ก 0๋ณด๋ค ํฌ๋ฏ๋ก b ๊ฐ ์์ผ๋ก ์ด๋ํ๊ฒ ๋ฉ๋๋ค.
๋น๊ตํจ์๋ ๋ค์ํ ๋ฐฉ๋ฒ์ผ๋ก ์ฌ์ฉํ ์ ์์ต๋๋ค. ๋ฐฐ์ด์ ๋์ด๋ ๊ฐ์ฒด์ ๊ฐ์ผ๋ก ์ ๋ ฌํ๋ ค๋ฉด ์๋์ ๊ฐ์ด ์ฌ์ฉํ ์ ์์ต๋๋ค.
var arr = [ {name: "Dinah"}, {name: "Jack"}, {name: "Alice"}, {name: "Ada"} ]; // name ํ๋กํผํฐ์ ๊ฐ์ ๊ธฐ์ค์ผ๋ก ์ํ๋ฒณ ์์ผ๋ก ์ ๋ ฌ arr.sort(function(a, b) { return a.name > b.name });