웹프로그래밍 : Array

chanyeong yu ·2025년 4월 21일

웹프로그래밍

목록 보기
7/12

Array

배열 선언

let o1 = [1.1, true, "a"]; 
----------------------------------
let o2 = [
  [1, { x: 1, y: 2 }],
  [2, { x: 3, y: 4 }],
];
----------------------------------
let a = [1,2,3]
let b = [0, ...a, 4]; //스프레드 오퍼레이터. b==[0,1,2,3,4] 
----------------------------------
let original = [1, 2, 3];
let copy = [...original]; //독립적인 배열이 생긴다
----------------------------------
let c = new Array(5, 4, 3, 2, 1, "testing, testing");
----------------------------------
Array.of(1, 2, 3); // => [1, 2, 3] //Array.of
----------------------------------
let original = [1, 2, 3];
let copy = Array.from(original); //Array.from
  • 비교적 아주 자유롭게 배열을 선언할 수 있다. 배열도 그냥 property를 가진다고 생각하면 편하다. 따라서 아주 이상한 값들도 인덱스가 될 수 있다(-값이든 뭐든)

Iterable한 속성을 가진다.

let digits = [..."0123456789ABCDEF"];
digits; // => ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"]
------------
let letters = [..."hello world"];
[...new Set(letters)]; // => ["h","e","l","o","","w","r","d"]
  • 이터러블한 속성을 통해 이런식으로 하나하나 분리해서 새로운 배열을 만들 수 있다.

인덱스값이 엄청 자유롭다.

o[1] = "one"; 
o["1"]; //문자1이 숫자 1하고 같다. 
-
a[-1.23] = true; // -값으로 인덱스를 사용할 수 있다.
a["1000"] = 0; // This the 1001st element of the array
a[1.0] = 1; //1.0은 1과 같다. 
  • 그냥 객체의 프로퍼티처럼 생각하면 편하다. 뭐든 다 된다.

length..

let a = new Array(5); 
a = [];
a[1000] = 0; 
// 이러면 length는 1001이 되어버린다. sparse해지지만..
let a2 = [undefined]; // undefined는 0이다. 
-- 
a = [1, 2, 3, 4, 5]; 
a.length = 3; // a는 잘려서 [1,2,3].
  • 배열은 길이를 함부로 조절하면 그만큼 없어져버린다.

for/of 반복문

let letters = [..."Hello world"]; // 알파벳 하나하나 분해해서 들어갈 것이고 
let string = "";
// 🔥🔥  배열은 for문에서 of를 사용한다.
// 🔥🔥  객체는 for문에서 in을 사용했었다. 
for (let letter of letters) {
  string += letter;
}
string;
  • 객체와 배열을 잘 구분하자.

entries() 메소드

let letters = [..."Hello world"]; 
let everyother = "";
// 🔥🔥 entries = 인덱스와 원소값들을 뱉어준다.
for (let [index, letter] of letters.entries()) {
  if (index % 2 === 0) everyother += letter; // 
}
everyother; // => "Hlowrd"
  • entries()를 사용하면, 값 뿐만 아니라 인덱스도 뱉어준다.

forEach() (정말 중요하다)

let letters = [..."Hello world"]
let uppercase = ""
letters.forEach((letter) => {
  uppercase += letter.toUpperCase();
});
uppercase;
  • forEach()는 인자로 함수를 받는다. 이때 함수는 계속 쓸 것이 아니니까 굳이 정의해서 사용하지 않아도 된다. 그리고 화살표함수를 사용해서 써도 된다.

forEach() 연장선 (v, i, a)

let data = [1, 2, 3, 4, 5],
data.forEach(function (v, i, a) {
  console.log(v, i, a);
  a[i] = v + 1;
}); // 🔥 data 배열이 변경됨. data == [2,3,4,5,6]
  • (v, i, a)(값, 인덱스, 전체 배열)을 반환한다.

정규표현식

let letters = [..."Hello world"]; 
let vowels = "";
for (let i = 0; i < letters.length; i++) {
  // For each index in the array
  let letter = letters[i]; 
  if (/[aeiou]/.test(letter)) { // 이 영문이 있냐 없냐? 
    vowels += letter; 
  }
}
vowels; // => "eoo"
  • 특정한 형태나 규칙을 가진 문자열을 찾아내기 위해서 패턴을 정의한다.

map()

// map()은 forEach()와 달리 new array (b) 를 반환함.
let a = [1, 2, 3];
let b = a.map((x) => x * x); 
  • 값 하나하나를 가져다가 조건에 맞는 새로운 배열을 반환한다.

filter()

let a = [5, 4, 3, 2, 1];
let b = a.filter((x) => x < 3); // [2,1]
-
let c = a.filter((v, k) => {
  console.log("value", v, "index", k);
  return k % 2 === 0;  //[5,3,1]
});
-
let d = a.filter((v, k) => k % 2 === 0); //[5,3,1]
  • 특정 조건을 함수로 안에다가 줘서 새로운 배열을 반환한다.

reduce()

let a = [1, 2, 3, 4, 5];
a.reduce((x, y) => x + y, 0); // => 15; 
a.reduce((x, y) => x * y, 1); // => 120;
a.reduce((x, y) => (x > y ? x : y)); // => 5;
  • 조건시작 인덱스에 따라서 쭉쭉 살펴보면서 하나의 값을 반환한다. reduceRight()는 상위 인덱스에서 시작하는 점이 다름.

flat()

let a = [1, [2, [3, [4]]]];
a.flat(1); // => [1, 2, [3, [4]]]
a.flat(2); // => [1, 2, 3, [4]]
a.flat(3); // => [1, 2, 3, 4]
a.flat(4); // => [1, 2, 3, 4]
  • 다차원 배열을 인덱스값에 따라서 차원을 줄여나간다.

flatMap()

let phrases = ["hello world", "the definitive guide"];
let words = phrases.flatMap((phrase) => phrase.split(" ")); // 공백으로 구분
words; // => ["hello", "world", "the", "definitive", "guide"];
-
[-2, -1, 1, 2].flatMap((x) => (x < 0 ? [] : Math.sqrt(x))); 
// => [1, 2**0.5]
[-2, -1, 1, 2].map((x) => (x < 0 ? [] : Math.sqrt(x))); 
// => [[], [], 1, 2**0.5]
  • 배열을 펼침과 동시에 연산을 수행할 수 있는 메소드다.
  • 두번째 예시의 경우 그냥 map()을 사용하면 공백을 제거할 수 없다.
    flatMap()을 사용해서 공백을 지워버린다.

array도 Object의 일종이다..

let a = {};
let i = 0;
while (i < 10) {
  a[i] = i * i;
  i++;
}
a.length = i; // 🌟 length property. 그럴듯하게 만든것.
  • Array에는 Object에는 없는 특징들이 존재한다.
    특히 .length() 프로퍼티를 가진다는 점이 있다.

0개의 댓글