Modern JavaScript Array

 

---

 

1.  배열의 형태

 

const arrLiteral = ['a','b','c'];
const objLiteral = {
      'A' : 'a'
    , 'B' : 'b'
    , 'C' : 'c'
}

 

• 배열리터럴 (Array.prototype)   : 프로퍼티명 없이 요소만 존재, 인덱스 0 부터 시작
• 객체리터럴 (Object.prototype) : 중괄호로 'key : value' 형태로 구성 

 

 

• 다양한 타입의 데이터가 배열의 요소로 들어갈 수 있다.

const misc = [
  'string',
  10,
  true,
  null,
  undefined,
  NaN,
  Infinity,
  ['nested array'],
  { object: true },
  function () {}
];

---

 

2.  배열 생성자와 연산자

 

// 배열 생성자
const arr = new Array(1, 2, 3);
console.log(arr); 			  // [1, 2, 3]

// 배열 접근
console.log(Object.keys(arr)); // [ '1','2','3' ]

// 배열 요소 삭제
delete arr[2];    			   // 두번째 인덱스 요소 삭제
arr.splice(2, 1);

// 배열 순회
for (const key in arr) {
  console.log('key: ' + key, 'value: ' + arr[key]);
}

//배열 길이
arr.length

 

---

 

3. Array Method

// 1. isArray : 인수가 배열이면 true
Array.isArray([]);
Array.isArray([1, 2]);
Array.isArray(new Array());


// 2. Array.from : iterable object를 변환하여 새로운 배열 생성
const arr1 = Array.from('Hello');
console.log(arr1); // [ 'H', 'e', 'l', 'l', 'o' ]


// 3. Array.of : 전달된 인수를 요소로 갖는 배열 생성
const arr2 = Array.of(1, 2, 3);
console.log(arr2); // [1, 2, 3]

const arr = Array.of('string');
console.log(arr); // 'string'

// 4. Array.prototype.indexOf() : 인수를 검색하여 가장 먼저 나온 요소 반환 (요소 부재시 -1 반환)
const arr = [1, 2, 2, 3];
arr.indexOf(2, 2); // 2 : 두번째 인수는 시작시 인덱스

const foods = ['apple', 'banana', 'orange']; // 활용 case
if (foods.indexOf('orange') === -1) {   
  foods.push('orange');
} // foods 배열에 'orange' 요소가 존재하지 않으면 'orange' 요소를 추가


// 5. Array.prototype.concat() : 배열의 요소를 합침
const arr1 = [1, 2];
const arr2 = [3, 4];
let result = arr1.concat(arr2);
console.log(result); // [1, 2, 3, 4]


// 6. Array.prototype.join() : 배열을 구분자로 연결하여 문자열로 반환
const arr = [1, 2, 3, 4];
result = arr.join('');
console.log(result); // '1234'


// 7. Stack (Last In First Out) : push, pop
// Array.prototype.push() : 배열의 마지막 요소에 추가
const arr = [1, 2];
let result = arr.push(3, 4);
console.log(result); // 4

arr[arr.length] = 3; // 원하는 위치에 직접 요소를 추가


// Array.prototype.pop() : 마지막요소를 제거하고 이후의 요소 반환
const arr = [1, 2];
console.log(arr.pop()); // [1]


// 8. Array.prototype.reverse() : 요소 순서를 반대로 변경
const a = ['a', 'b', 'c'];
a.reverse();
console.log(a); // [ 'c', 'b', 'a' ]

// 9. Que (First In First Out) : shift, push  
// Array.prototype.shift() : 첫요소 제거후 제거한 요소를 반환
const a = ['a', 'b', 'c'];
const c = a.shift();
console.log(a); // [ 'b', 'c' ]
console.log(c); //  'a'

 

shift / unshift / push / pop

// 10. Array.prototype.slice(start,end=this.length)
// start 부터 end 인덱스를 가진 요소전까지 복사
const items = ['a', 'b', 'c'];

var res = items.slice(1, 2);
console.log(res);  // [ 'b' ]

var res = items.slice(-1);
console.log(res);  // [ 'c' ] : 음수의 경우 끝에서 부터 요소 반환

// 11. Array.prototype.splice(start, deleteCount, items) 
// 기존 배열 요소를 제거하고 해당 위치에 새로운 요소 추가

const items1 = [1, 2, 3, 4];
const res1 = items1.splice(1, 2);
console.log(items1); // [ 1, 4 ]
console.log(res1);   // [ 2, 3 ]


// 배열 요소를 해체하여 추가 재결합하는 방법
const items = [1, 4];

// items.splice(1, 0, [2, 3]);     // [ 1, [ 2, 3 ], 4 ]
Array.prototype.splice.apply(items, [1, 0].concat([2, 3]));

// items.splice(1, 0, ...[2, 3]);  // ES6
console.log(items); 			   // [ 1, 2, 3, 4 ]

 

---

 

4. 자바스크립트에서의 배열

 

밀집배열 (java)        /         희소배열 (javascript)

 

밀집배열	희소배열
요소의 크기가 동일하게 연속적으로 이루어져 있다.	각 메모리 공간이 동일한 크기를 갖지 않아도 되며, 연속적이지 않을 수 있다.
인덱스로 배열 요소에 빠르게 접근 가능	인덱스를 프로퍼티 키로 가지며 요소는 프로퍼티 값 (해시테이블 객체)
특정 요소 탐색, 삽입, 삭제시 비효율적	배열로서 성능은 느리지만 탐색, 삽입, 삭제시 효율적

 

---

5. 배열 고차 함수

 

• 고차함수 : 함수를 필요한 시점에 호출하거나, 클로저를 생성하여 반환
• 데이터의 불변성을 지향하는 함수형 프로그래밍에 기반함
• 순수함수 + 보조함수의 조합으로 로직내에 존재하는 조건문과 반복문을 제거하여 상태변경을 피함 (부수효과 억제)

 

원본배열을 변경하는 경우
Array.prototype.sort()	오름차순
Array.prototype.reverse()	내림차순

 

원본배열을 변경하지 않는 경우
Array.prototype.forEach()	반복형태이나 break문 사용 불가
Array.prototype.map<>()	콜백함수의 반환값으로 새로운 배열 생성
Array.prototype.filter()	콜백함수의 실행결과가 true인 배열요소의 값만 추출하여 새로운 배열 형성
Array.prototype.reduce<>()	각 요소에 대하여 이전 콜백함수 반환값을 전달하여 콜백함수 실행하고 결과반환
Array.prototype.some()	배열 내 일부 요소가 콜백 함수의 테스트를 통과하는지 확인하여 결과를 boolean 형태로 반환
Array.prototype.every()	배열 내 모든 요소가 콜백함수의 테스트를 통과하는지 확인하여 결과를 boolean으로 반환
Array.prototype.find()	콜백함수를 실행하여 결과가 참인 첫번째 요소를 반환
Array.prototype.findIndex()	콜백함수를 실행하여 결과가 참인 첫번째 요소 인덱스를 반환

 

// 1. forEach 예시
const numbers = [1, 2, 3];

numbers.forEach(function (item) {
  pows.push(item ** 2);
});

// 화살표 함수이용
// numbers.forEach(item => pows.push(item ** 2));

console.log(pows); // [ 1, 4, 9 ]

Array.prototype.map

 

//2. Array.prototype.map 예시
const numbers = [1, 4, 9];

// 반환값이 새로운 배열의 요소가 된다. 반환값이 없으면 새로운 배열은 비어 있다.
const roots = numbers.map(function (item) {
  return Math.sqrt(item);
});

// 축약형태
// const roots = numbers.map(Math.sqrt);
console.log(roots);   // [ 1, 2, 3 ]

//3. Array.prototype.filter() 예시

const result = [1, 2, 3, 4, 5].filter(function (item, index, self) {
  console.log(`[${index}] = ${item}`);
  return item % 2; // 홀수만을 필터링 (1은 true)
});

console.log(result); // [ 1, 3, 5 ]

 

Array.prototype.reduce

//4. Array.prototype.reduce 예시

const sum = [1, 2, 3, 4, 5].reduce(function (pre, cur) {
  return pre + cur;
}, 5);

console.log(sum); // 20
// 5 + 1 => 6 + 2 => 8 + 3 => 11 + 4 => 15 + 5

//5. Array.prototype.some 예시

// 배열 내 요소 중 특정 값이 1개 이상 존재하는지 확인
let res = ['apple', 'banana', 'mango'].some(function (item) {
  return item === 'banana';
});
console.log(res); // true

//6. Array.prototype.every 예시

// 배열 내 모든 요소가 10보다 큰 값인지 확인
let res = [21, 15, 89, 1, 44].every(function (item) {
  return item > 10;
});
console.log(res); // false

// 7. Array.prototype.find 예시

const users = [
  { id: 1, name: 'Lee' },
  { id: 2, name: 'Kim' },
  { id: 2, name: 'Choi' },
  { id: 3, name: 'Park' }
];

// 콜백함수를 실행하여 그 결과가 참인 첫번째 요소 반환
let result = users.find(function (item) {
  return item.id === 2;
});

// 화살표함수
// const result = users.find(item => item.id === 2;);

console.log(result); // { id: 2, name: 'Kim' }

//8. Array.prototype.findIndex 예시

const users = [
  { id: 1, name: 'Lee' },
  { id: 2, name: 'Kim' },
  { id: 2, name: 'Choi' },
  { id: 3, name: 'Park' }
];

// 콜백함수를 실행하여 그 결과가 참인 첫번째 요소의 인덱스를 반환
function predicate(key, value) {
  return function (item) {
    return item[key] === value;
  };
}

// id가 2인 요소의 인덱스
let index = users.findIndex(predicate('id', 2));
console.log(index); // 1

// name이 'Park'인 요소의 인덱스
index = users.findIndex(predicate('name', 'Park'));
console.log(index); // 3