[Javascript] 8강 Index 기반 컬렉션

 

1. 배열 생성

const arr1 = new Array(element0, element1, /* ..., */ elementN);
const arr2 = Array(element0, element1, /* ... , */ elementN);
const arr3 = [element0, element1, /* .. , */ elementN];

 

element0, element1, ... , elementN은 배열의 요소에 대한 값의 목록으로 배열은 해당 값을 배열의 요소로 초기화 됩니다. 배열의 length 속성은 인수의 수로 설정됩니다. 대괄호 구문을 "배열 리터럴" 또는 "배열 초기자(array Initializer)"라고 합니다. 배열 생성을 위한 다른 형태보다  짧아 일반적으로 선호하는 방법입니다.

const arr = new Array(arrayLength);

const arr2 = Array(arrayLength); // 결과 동일

// 동일
const arr3 = [];
arr.length = arrayLength

 

새로이 정의된 혹은 이미 존재하는 객체 변수의 속성으로 배열을 할당할 수 있습니다.

const obj = {};

obj.prop [element0, element1, /* ..., */ elementN];

// OR
const obj = { prop: [element0, element1, /* ..., */ elementN]};

 

같은 숫자인 하나의 요소만을 가지는 배열을 생성하고자 할 경우 반드시 대괄호 문법을 사용해야 하며, 하나의 숫자 값을 Array() 생성자에게 전달할 경우, 그 숫자 값은 해당 배열의 요소가 아닌 arrayLength로 해석됩니다.

// 숫자 42라는 하나의 요소를 가진 배열 생성
const arr = [42];

// arr.length 가 42이면서 요소가 없는 배열 생성
const arr = Array(42);

// 동일
const arr = [];
arr.length = 42;

 

N의 분수 부분이 0이 아닌 정수가 아닌 경우 Array(N)을 호출하면 RangeError가 발생합니다.

const arr = Array(9,3); // RangeError: Invalid array length

 

만약 임의의 데이터 유형의 단일 요소를 가지는 배열을 생성할때, 배열 표기법을 사용하는 것이 안전합니다. 혹은 빈 배열을 먼저 선언하고 임의의 데이터 값을 해당 배열에 추가하는 법도 있습니다. 요소가 하나인 배열을 만들기 위해 Array.of 정적 메서드를 사용할 수 있습니다.

 

const wArray = Array.of(10,5); // wArray는 오직 하나의 요소인 10,5를 가지고 있음

 

2. 배열 요소의 참조

요소의 속성이므로 속성 접근자를 사용해 요소에 접근할 수 있습니다.

const myArray = ["After", "Before", "Stay"];

 

배열의 첫번째 요소는 myArray[0]로 참조할 수 있고, 두번째 요소는 myArray[1]로 참조할 수 있습니다. 배열의 인덱스 값은 0부터 시작합니다. 속성 접근자는 객체처럼 배열의 다른 속성에 접근하기 위해 사용할 수 있습니다.

const arr = ["focus", "fain", "of"];
console.log(arr[2]); // fain
console.log(arr["length"]);  // 3

 

3. 배열 채우기

요소에 값을 할당함으로서 배열을 채울 수 있습니다.

const dampsy = [];
dampsy[0] = "key";
dampsy[1] = "cora";
dampsy[2] = "check";

console.log(dampsy[1]); // cora

 

배열 생성 시 배열을 채울 수 있습니다.

const myArray = new Array("come on", myVar, 3.14159);
// OR
const myArray = ["MongoDB", "Apple", "Sia"];

 

4. 길이(length)에 대한 이해

실제 구현 단계에서 배열은 배열에 포함된 요소들을 배열의 인덱스 값을 속성 이름으로 사용해 표준 객체의 속성으로 저장합니다. length 속성은 좀 특별한데 배열의 길이는 항상 마지막 요소의 인덱스에 1을 더한 값을 반환합니다.

 

const cage = [];
cage[25] = ["coke"];
console.log(cage.length); // 26

 

length 속성에 값을 할당할 수 있습니다. 저장된 항목 수보다 작은 값을 쓰면 배열이 잘립니다. 0은 배열을 완전히 비웁니다.

const cats = ["Dempsy", "Kiko", "Twing"];
console.log(cats.length); //3

cats.length = 2;
console.log(cats); // ['Dempsy', 'Kiko'] 

cats.length = 1;
console.log(cats); // ['Dempsy']

cats.length = 3;
console.log(cats); // [ 'Dempssy', <3 empty items> ]

 

5.배열의 요소를 반복처리하기

배열을 사용한 일반적인 연산은 배열의 값을 반복해 각 값을 어떤 방식으로 처리하는 것입니다. 배열의 어떤 요소도 불리언 컨텍스트에서 false로 평가되지 않습니다. 

const colors = ["red", "blue", "yellow"];
for (let i = 0; i < colors.length; i++) {
    console.log(colors[i]);
    
}

const divs = document.getElementsByTagName("div");
for (let i = 0, div; (div = divs[i]); i++) {
    /*div in some way */
}

 

첫번째 코드를 위처럼 바꿔 배열의 길이를 확인하는 오버헤드를 피할수 있으며, 루프가 반복될 때마다 div 변수가 현재 항목에 재할당되어 편의성을 높일 수 있습니다.  forEach() 메서드는 배열을 반복하는 또다른 방법입니다.

const characters = ["Zelda", "Mario", "Sonic"];
characters.forEach((character) => console.log(character));
// Zelda 
// Mario
// Sonic

 

forEach에 전달된 함수는 배열의 모든 항목에 대해 한 번씩 실행되며, 배열 항목이 함수의 인수로 전달됩니다. 할당되지 않은 값은 forEach 반복문에서 반복되지 않습니다. 배열을 정의 시 생략된 요소는 forEach 반복문으로 배열의 요소를 순회할 때 처리 대상이 되지 않는 것에 유의해야 합니다.  undefined이 요소에 수동으로 할당된 경우 목록에 나열됩니다.

const colors = ["red", "blue", "yellow"];
for (let i = 0; i < colors.length; i++) {
    console.log(colors[i]);
    
}

// const divs = document.getElementsByTagName("div");
// for (let i = 0, div; (div = divs[i]); i++) {
//     /*div in some way */
// }

const characters = ["Zelda", "Mario", "Sonic"];
characters.forEach((character) => console.log(character));
// Zelda 
// Mario
// Sonic

const Soccer = ["Messi", "Son", "Beckham"];

Soccer.forEach((element) => {
    console.log(element);
    
})

// Logs : Messi Son Beckham

if(Soccer[2] === undefined) {
    console.log("존재하지 않습니다."); // true
}

const nonesparseArray = ["first", "second", undefined, "fourth"];

nonesparseArray.forEach((element) => {
    console.log(element);
    
})

// Logs: 
// first
// second
// undefined
// fourth

 

6. 배열의 메서드

Array 객체는 다음과 같은 메서드들을 가지고 있습니다. concat() 메서드는 두 개의 배열을 합쳐 새로운 배열을 반환합니다.

let myArray = ["1", "2", "3"];
myArray = myArray.concat("a", "b", "c");
console.log(myArray); // [ '1', '2', '3', 'a', 'b', 'c' ]

 

join() 메서드는 배열의 모든 요소를 하나의 문자열로 연결해 반환합니다.

const fifaWorldCup = ["1994", "1998", "2002"];
const list = fifaWorldCup.join(" - "); 
console.log(list); // 1994 - 1998 - 2002

 

push() 메서드는 하나 혹은 그 이상의 요소를 배열의 마지막에 추가하고 추가된 요소를 포함한 length를 반환합니다.

const myArray = ["1", "2"];
myArray.push("3"); // myArray is now ["1", "2", "3"]
console.log(myArray);

 

pop() 메서드는 배열의 마지막 요소를 제거하고 그 제거된 요소를 반환합니다.

const myArray = ["1", "2", "3"];
const list = myArray.pop(); // ["1","2"], last = "3"
console.log(myArray);

 

shift() 메서드는 배열의 첫번째 요소를 제거하고 그 제거된 요소를 반환합니다.

const myArray = ["1", "2", "3"];

// 5.shift()
const list = myArray.shift(); // ["2", "3"], last = "1"


console.log(myArray);

 

unshift() 메서드는 하나 혹은 그 이상 요소를 배열의 앞쪽에 추가하고 추가한 요소를 포함한 길이를 반환합니다.

const myArray = ["1", "2", "3"];
myArray.unshift("4", "5"); // ["4", "5", "1", "2", "3"]


console.log(myArray);

 

slice() 메서드는 배열의 특정 부분을 추출해 그 추출된 부분을 포함하는 새로운 배열을 반환합니다.

let myArray = ["a", "b", "c", "d", "e", "f"];
// 7.slice()
myArray = myArray.slice(1,5); // ["b", "c", "d", "e"]

console.log(myArray);

 

at() 메서드는 배열의 지정된 인덱스에 있는 요소를 반환 또는 인덱스가 범위를 벗어난 경우 undefined를 반환합니다. 특히 배열의 끝에 요소에 접근하는 음수 인덱스에 사용합니다.

const myArray = ["a", "b", "c", "d", "e", "f"];

console.log(myArray.at(-2)); // "e", the second-last element of myArray

 

splice() 메서드는 배열에서 요소를 제거 후 대체합니다. 배열에서 제거된 항목을 반환합니다.

// 9. splice 
const myArray = ["1", "2", "3", "4", "5", "6"];

myArray.splice(1,3, "g", "h", "c", "d" )
console.log(myArray);

// myArray는 ["1", "g", "h", "c", "d", "5","6"]이됨
// 첫 번째 인덱스 ("3이" 값이 있는 곳)에서 시작 
// 3개의 요소 삭제 후 그 자리에 연속된 모든 요소 삽입

 

reverse() 메서드는 배열의 요소를 첫 번째 배열 요소가 마지막, 마지막 요소가 첫번째가 되는 식으로 배열의 요소를 바꿉니다.

const myArray = ["1", "2", "3"];
myArray.reverse();
console.log(myArray)
// ["3", "2", "1"]

 

flat() 메서드는 지정된 깊이까지 재귀적으로 연결된 모든 하위 배열 요소가 포함된 새 배열을 반환합니다.

// 11.flat()
let myArray = [1,2, [3,4]];
console.log(myArray = myArray.flat()) // [1,2,3,4], sine the [3,4] subarray is flattened

 

sort() 메서드는 배열의 요소를 새로운 배열이 아닌 주어진 배열 내 정렬하고 배열에 대한 참조를 반환합니다. 어떻게 해당 배열의 요소를 정렬할지 결정하는 콜백 함수를 인자로 받을 수 있으며, 콜백 함수는 배열에서 온 두 값을 두 개의 인수로 사용하여 호출됩니다.

 

이 함수는 이 두 값을 비교해 두 값의 순서를 나타내는 양수, 음수 또는 0을 반환합니다. 예를 들어 다음은 문자열의 마지막 문자를 기준으로 배열을 정리합니다.

const myArray = ["april", "march", "june"];
console.log(myArray.sort()); // ["april", "june", "march"]

 

const sortFn = (a,b) => {
    if (a[a.length -1] < b[b.length - 1]) {
        return -1; // 음수 => a < b, a는 b에 앞에옴
    } else if (a[a.length - 1] > b[b.length - 1]) {
        return 1; // 양수 => a > b, a 는 b에 뒤에옴
    }

    return 0; // 0 => a = b, a와 b는 원래 순서를 유지
};

console.log(myArray.sort(sortFn));

 

• 정렬 시스템에 의해 a가 b보다 작으면, -1(또는 임의의 음수)을 반환함
• 정렬 시스템에 의해 a가 b보다 작으면, 1(또는 임의의 양수)을 반환함
• a와 b가 동등할 시 0을 반환

indexOf(). 메서드는 배열에서 searchElement를 찾아 첫 번째 일치하는 요소의 인덱스를 반환합니다.

const a = ["a", "b", "a", "b", "a"];
console.log(a.indexOf("b")) // 1

console.log(a.indexOf("b", 2)); //3
console.log(a.indexOf("z")); // -1, z not search

 

lastIndexOf() 메서드는 indexOf 메서드와 유사하게 작동하나 배열의 뒤쪽에서부터 요소를 찾습니다.

const a = ["a", "b", "a", "d", "a", "b"];

console.log(a.lastIndexOf("b")); // 5


// 마지막 일치한 요소부터 다시 시작
console.log(a.lastIndexOf("b", 4)); // 1
console.log(a.lastIndexOf("z"));

 

forEach() 메서드는 배열의 모든 요소에 대해 반복적으로 주어진 callback 함수를 실행해 undefined를 반환합니다.

// 16. forEach();
const a = ["a", "b", "c"];
a.forEach((element) => {
    console.log(element);
    
});
// Logs: 
// a 
// b 
// c

 

 

콜백을 받는 forEach 메서드는 어떤 방식으로든 전체 배열을 반복하기 때문에 반복적인(iterative) 메서드로 알려저 있으며, 각 메서드는 thisArg 라는 선택적 두 번째 인수를 받습니다. 이 인수가 제공되면 thisArg는 콜백 함수 안에 있는 this 키워드의 값이 되고 제공되지 않을 시 함수가 명시적 객체 컨텍스트 외부에서 호출되는 다른 경우와 마찬가지로 , this는 함수가 엄격한 모드가 아닐 경우 전역 객체(window, globalThis 등)을 참조하게 됩니다. 엄격 모드일 경우 undefined를 참조합니다.

 

map(). 메서드는 배열의 모든 요소에 대해 callback 함수를 실행하고 이 결과를 새로운 배열에 담아 반환합니다.

const ake = ["japan", "usa", "mexico"];
const ake2 = ake.map((item) => item.toUpperCase());
console.log(ake2); // [ 'JAPAN', 'USA', 'MEXICO' ]

 

flatmap(). 메서드는 map()에 이어 깊이 1의 flat()을 실행합니다.

const ake = ["japan", "usa", "mexico"];
const ake2 = ake.flatMap((item) => [item.toUpperCase(), item.toLowerCase()]);
console.log(ake2); // [ 'JAPAN', 'japan', 'USA', 'usa', 'MEXICO', 'mexico' ]

 

filter() 메서드는 callback 함수가 true를 반환하는 요소를 새로운 배열에 담아 반환합니다.

const ake = ["japan", 10,  "usa", 20, "mexico", 30];
const ake2 = ake.filter((item) => typeof item === "number");
console.log(ake2); // [10, 20, 30]

 

find(). 메서드는 callback이 true를 반환하는 첫 번째 항목을 반환합니다.

const ake = ["japan", 10,  "usa", 20, "mexico", 30];
const ake2 = ake.find((item) => typeof item === "number");
console.log(ake2); // 10

 

findLast() 메서드는 callback이 true를 반환하는 마지막 항목을 반환합니다.

const ake = ["japan", 10,  "usa", 20, "mexico", 30];
const ake2 = ake.findLast((item) => typeof item === "number");
console.log(ake2); // 30

 

findIndex(). 메서드는 callback이 true를 반환하는 첫 번째 항목의 인덱스를 반환합니다.

const ake = ["japan", 10,  "usa", 20, "mexico", 30];
const ake2 = ake.findIndex((item) => typeof item === "number");
console.log(ake2); // 1

 

findLastIndex(). 메서드는 callback이 true를 반환하는 마지막 항목의 인덱스를 반환합니다.

const ake = ["japan", 10,  "usa", 20, "mexico", 30];
const ake2 = ake.findLastIndex((item) => typeof item === "number");
console.log(ake2); // 5

 

every() 메서드는 callback이 배열의 모든 항목에 대해 true를 반환하면 true를 반환합니다.

function isNumber(value) {
    return typeof value === "number";
}

const ake = [1,2,3];
console.log(ake.every(isNumber)); // true

const ake2 = [1, "2", 3];
console.log(ake2.every(isNumber)); // false

 

some() 메서드는 배열에 적어도 callback이 true를 적어도 한번이라도 반환 시 true를 반환합니다.

function isNumber(value) {
    return typeof value === "number";
}

function isString(value) {
    return typeof value === "string";
}

const ake = [1,2,3];
console.log(ake.some(isNumber)); // true

const ake2 = ["hi", "hello", "my"];
console.log(ake2.some(isString)); // true

const ake3 = [1,2,3]; 
console.log(ake3.some(isString)); // false

 

reduce(). 메서드는 배열 내 요소를 하나의 요소로 줄이기 위해 callback(accumulator, currentValue, currentIndex, array)을 각 값마다 적용합니다. reduce 함수는 callback 함수가 반환하는 마지막 값을 반환합니다.

 

initialValue이 명시되면 callback은 첫 번째 매개변수 값으로, initialValue을, 두 번째 매개변수 값으로 배열의 첫번째 항목의 값을 사용해 호출합니다.

 

initialValue이 명시되지 않은 경우, callback의 처음 두 매개변수 값은 배열의 첫 번째와 두 번째 요소가 되며, 이후 호출 때마다 첫 번째 매개변수 값은 이전 호출에서 callback이 반환된 값이 되고, 두 번째 매개변수 값은 배열의 다음 값이 됩니다.

 

callback이 처리 중인 항목의 인덱스에 접근하거나 전체 배열에 접근해야 할 경우 선택적인 매개변수를 사용할 수 있습니다.

const a = [10,20,30];
const total = a.reduce(
    (accumulator, currentValue) => accumulator + currentValue, 
    0,
);

console.log(total);

 

reduceRight(). 메서드는 reduce() 처럼 동작하나 마지막 요소부터 시작합니다. reduce와 reduceRight는 반복 배열 메서드 중 가장 명확하지 않은 메서드며, 시쿼스를 단일 값으로 줄이기 위해 두 값을 재귀적으로 결합해 알고리즘용으로 사용해야합니다.

 

7. 희소 배열

배열에는 undefined라는 값으로 채워진 슬롯과는 다른 "빈 슬롯"이 포함될 수 있습니다.  빈 슬롯은 다음 중 한가지 방법으로 만들 수 있습니다.

// 배열 생성자
const a = Array(5); // [ <5 empty items> ]
console.log(a);



// 배열 리터럴의 연속된 쉼표
const b = [1,2,,, 5]; // [1,2, <2 empty items>, 5]
console.log(b);


// array.length 보다 큰 인덱스의 슬롯에 직접적 값 설정
const c = [1,2];
c[4] = 5; // [1 ,2 ,<2 empty items>, 5]
console.log(c);

// .length를 직접 설정해 배열 늘리기
const d = [1,2];
d.length = 5; // [ 1,2, <3 empty items>]
console.log(d);

// 요소 삭제
const e = [1,2,3,4,5];
delete e[3]; // [1,2,3,<1 empty items>, 5]
console.log(e)

 

일부 작업에서는 빈 슬롯이 'undefined"로 채워진 것처럼 동작합니다.

// undefined 채우기
const arr = [1,2, , , 5]; // 희소 배열 생성

// 인덱스 접근
console.log(arr[3]); // undefined

// for...of
for(const i of arr) {
    console.log(i);
    
}

// Logs: 1 2 undefined undefined 5

// 전개 연산
const another = [...arr]; 
console.log(another); // [ 1, 2, undefined, undefined, 5]

 

다른 경우(특히 대다수 배열 반복 메서드)에서는 빈 슬롯을 건너뜁니다.

 const mapped = arr.map((i) => i + 1); // [2,3, <2 empty items>, 6]
arr.forEach((i) => console.log(i)); // 1 2 5
const filtered = arr.filter(() => true); // [1,2,5]
const hasFalsy = arr.some((k) => !k); // false

// 속성 열거
const keys = Object.keys(arr) ; // ['0', '1', '4']

for (const key in arr) {
    console.log(key);    
}


// Logs: '0', '1', '4'
// 결과 값이 객체일 경우 배열의 반복자가 아닌 속성 열거 사용
const objectSpread = { ...arr }; // { '0': 1, '1' : 2, '4' : 5 }

 

8.다차원 배열

배열은 중첩될 수 있고, 하나의 배열은 또 다른 배열을 요소로 포함될 수 있습니다. 배열의 이런 특성을 사용해, 다차원 배열을 만들 수 있습니다.

const a = new Array(4);
for (let i = 0; i < 4; i++) {
    a[i] = new Array(4);

    for(let j = 0; j < 4; j++){
        a[i][j] = `[${i}, ${j}]`;
    }
}

const shin = new Array(25);

for (let k = 0; k < 25; k++) {
       shin[k] = new Array(25);

       for (let j = 0; j < 25; j++) {
        console.log(shin[k][j] = `짱구는 못말려 ${j}기`);
       }
       return;
}

 

9.다른 속성을 담기 위한 배열 사용

const arr = [1,2,3];
arr.property = "value";
console.log(arr.property) // value

 

예를 들어, 정규식과 문자열이 일치하는 결과로 배열이 생성되면 배열은 일치에 대한 정보를 제공하는 속성 및 요소를 반환합니다, 배열의 반환 값으로 RegExp.prototype.exec(), String.prototype.match() 및 String.prototype.split()입니다. 정규 표현식과 함께 배열을 사용하는 방법은 정규 표현식에서 참조하세요

 

10.  유사 배열 객체 다루기

document.getElementByTagName().에서 반환되는 NodeList 또는 함수 본문 내 사용가능한 arguments 객체와 같은 일부 Javascript 객체는 표면적으로는 배열처럼 보이고 동작하지만 모든 메서드를 공유하지는 않습니다. arguments 객체는 length 속성을 제공하지만, forEach().와 같은 배열 메서드는 구현하지 않습니다. 배열 메서드는 유사 배열 객체에서 직접적인 호출이 불가능 합니다.

function printArguments() {
  arguments.forEach((item) => {
    console.log(item);
  }); // TypeError: arguments.forEach is not a function
}

 

하지만 Function.propertype.call()을 사용해 간접적 호출이 가능합니다.

function printArguments() {
    Array.prototype.forEach.call(arguments, (item) => {
        console.log(item);
        
    })
}


printArguments(1,2,3, "123")

function printString() {
    Array.prototype.forEach.call("a string man", (chr) => {
        console.log(chr);
        
    })
}

printString();

 

참고 자료

 

인덱스 기반 컬렉션 - JavaScript | MDN

 

GitHub - javascript-only/javascript-bloging