Array

1. Array

2. 배열 선언, 접근, 속성

3. 배열의 실체

4. 배열 타입 확인 및 요소 삭제

5. 배열 조작

6. 배열 반복문

7. 배열 탐색

8. 배열 변형

9. 고차함수 배열 메서드

10. sort()

11. forEach(), map()

12. find(), filter()

13. reduce()

14. some(), every()

15. N차원 배열

1. Array

여러 개체(Entity)값을 순차적으로 나열한 자료 구조 (알고리즘 내 사용 빈도 많음)
배열 내 값을 요소(element)라고 하며, 배열 요소는 index로 접근
대표 속성(property)과 메서드(method)
- 배열 크기 및 배열 여부 확인: Array.length, Array.isArray()
- 배열 추가/삭제: Array.push(), Array.pop(), Array.shift(), Array.unshift(), Array.splice(), Array.slice() 등
- 배열 탐색: Array.indexOf(), Array.lastIndexOf(), Array.includes()
- 배열 변형(callback 미사용): Array.sort(), Array.reverse(), Array.join()

2. 배열 선언, 접근, 속성

선언: "new Array()" 혹은 "[]"를 통해 선언하며, 사이즈 혹은 값을 입력하여 초기화도 가능
접근 방법: "Array[index]"를 통해 index를 통하여 O(1) 접근
배열 속성: "Array.length"를 통해 배열 요소의 개수 확인 가능

let arr_1 = new Array(10);
let arr_2 = [];

console.log(arr_1); // output: [ <10 empty items> ]
console.log(arr_2); // output: []

let fruits = ["apple", "orange", "melon"];
console.log(fruits); // output: ["apple", "orange", "melon"]
console.log(fruits.length); // output: 3
console.log(fruits[0]); // output: apple

fruits[1] = "kiwi";
console.log(fruits); // output: ["apple", "kiwi", "melon"]

3. 배열의 실체

자바스크립트에서 배열은 다른 언어에서 말하는 일반적인 배열이 아닌 Hash 기반의 객체
메모리가 연속적인 밀집 배열(dense array)가 아닌 비 연속적인 희소 배열(sparse array)

let nums = [];

nums.push("one");
nums.push("two");
console.log(nums.length); // output: 2
console.log(nums); // output: ["one", "two"]

nums["once"] = "once";
nums["twice"] = "twice";
console.log(nums.length); // output: 2
console.log(nums); // output: ["one", "two", once: "once", twice: "twice"]

console.log(Object.getOwnPropertyDescriptors(nums));
/* output:
{
  '0': { value: 'one', writable: true, enumerable: true, configurable: true },
  '1': { value: 'two', writable: true, enumerable: true, configurable: true },
  length: { value: 2, writable: true, enumerable: false, configurable: false },
  once: { value: 'once', writable: true, enumerable: true, configurable: true },
  twice: { value: 'twice', writable: true, enumerable: true, configurable: true }
}
*/

4. 배열 타입 확인 및 요소 삭제

배열 타입 확인: Array.isArray(value)
배열 요소 삭제: delete array[index] (삭제해도 배열 사이즈가 그대로인 문제점)

let num = 123;
let str = "here";
let fruits = ["apple", "orange"];

console.log(Array.isArray(num)); // output: false
console.log(Array.isArray(str)); // output: false
console.log(Array.isArray(fruits)); // output: true

console.log(fruits.length); // output: 2
delete fruits[1];
console.log(fruits.length); // output: 2
console.log(fruits); // output: [ "apple", <1 empty item> ]

5. 배열 조작

배열 추가: Array.push(element), Array.unshift(element)
배열 삭제: Array.pop(), Array.shift(), Array.slice(start, end)
배열 삭제/변경: Array.splice(index, deleteCount, elem1, ..., elemN)
배열 병합: Array.concat(arg1, arg2...)

/* push, pop */
let fruits = ["apple", "orange", "melon"];

let ret = fruits.push("watermelon");
console.log(fruits); // output: ["apple", "orange", "melon", "watermelon"]
console.log(ret); // output: 4
ret = fruits.pop();
console.log(fruits); // output: ["apple", "orange", "melon"]
console.log(ret); // output: watermelon

/* shift, unshift */
ret = fruits.shift();
console.log(fruits); // output: ["orange", "melon"]
console.log(ret); // output: apple
ret = fruits.unshift("watermelon");
console.log(fruits); // ["watermelon", "orange", "melon"]
console.log(ret); // output: 3

/* splice */
console.log(fruits.splice(1)); // output: ["orange", "melon"]
console.log(fruits); // output: ["watermelon"]

fruits = ["apple", "orange", "melon", "strawberry"]
console.log(fruits.splice(1, 1)); // output: ["orange"]
console.log(fruits); // output: ["apple", "melon", "strawberry"]

console.log(fruits.splice(1, 1, "mango", "kiwi")); // output: ['melon']
console.log(fruits); // output: ["apple", "mango", "kiwi", "strawberry"]

/* slice */
let fruits = ["apple", "orange", "melon"];

console.log(fruits.slice(1)); // output: ["orange", "melon"]
console.log(fruits); // output: ["apple", "orange", "melon"];

console.log(fruits.slice(1, 2)); // output: ["orange"]
console.log(fruits.slice(-2)); // output: ["orange", "melon"]

/* concat */
let fruits = ["apple", "orange", "melon"];

console.log(fruits.concat("strawberry")); // output: ["apple", "orange", "melon", "strawberry"]
console.log(fruits.concat(["cherry", "banana"])); // output: ["apple", "orange", "melon", "cherry", "banana"]
console.log(fruits.concat(["cherry", "banana"], "mango"));
// output: ["apple", "orange", "melon", "cherry", "banana", "mango"]

6. 배열 반복문

반복문 문법: for ... length(index 접근), for ... of (element 접근), for ... in (key 접근)

let fruits = ["apple", "orange", "melon"];

// use for index
// output apple, orange, melon
for (let i=0;i<fruits.length;i++){
  console.log(fruits[i]);
}

// use for ...(element) of
// output: apple, orange, melon
for (let fruit of fruits){
  console.log(fruit);
}

// use for ...(key) in
// output: 0, 1, 2
for (let key in fruits){
  console.log(key);
}

7. 배열 탐색

index 탐색(앞에서부터): Array.indexOf(item, from)
index 탐색(뒤에서부터): Array.lastIndexOf(item, from)
값 포함 여부 확인: Array.includes(item, from)

let fruits = ["apple", "orange", "banana", "orange", "melon"];

console.log(fruits.indexOf("orange")); // output: 1
console.log(fruits.indexOf("Orange")); // output: -1
console.log(fruits.indexOf("orange", 2)); // output: 3

console.log(fruits.lastIndexOf("orange")); // output: 3
console.log(fruits.lastIndexOf("orange", -3)); // output: 1
console.log(fruits.lastIndexOf("orange", 0)); // output: -1

console.log(fruits.includes("orange")); // output: true
console.log(fruits.includes("Orange")); // output: false

8. 배열 변형

배열 정렬: Array.sort()
배열 순서 반대: Array.reverse()
배열 변환(문자열로 변환): Array.join(separator)

let nums = [1, -1, 4, 5, 2, 0];

console.log(nums.reverse()); // output: [0, 2, 5, 4, -1, 1]
console.log(nums.sort()); // output: [-1, 0, 1, 2, 4, 5]

let fruits = ["apple", "orange", "banana"];

console.log(fruits.join("")); // output: appleorangebanana
console.log(fruits.join()); // output: apple,orange,banana
console.log(fruits.join(";")); // output: apple;orange;banana

9. 고차함수 배열 메서드

고차함수 : 하나 이상의 함수를 매개변수로 취하거나 함수를 결과로 반환하는 함수
매개변수로 전달되는 함수는 콜백 함수(Callback function)
임의 정렬: Array.sort()
반복 작업: Array.forEach()
콜백함수 결과 배열 반환: Array.map()
조건 만족하는 하나의 값 반환: Array.find()
조건 만족하는 값 배열로 변환: Array.filter()
누적 결과 값 반환: Array.reduce()

10. sort()

문제점: sort 메서드로 정렬될 때 배열의 요소가 일시적으로 문자열로 변경되어 발생
- 해결방법: 오름차순 sort((x, y) => x-y), 내림차순 sort((x, y) => y-x)
문제점: 대소문자 구분 없이 정렬하고 싶지만, 대소문자 구분되어 정렬
- 해결방법: toUppercase()를 통해 통일시킨 후 정렬

let nums = [-1, 1, 4, 0, 2, 10, 20];

console.log(nums.sort()); // output: [-1, 0, 1, 10, 2, 20, 4]
console.log(nums.sort((x,y)=> x-y)); // output: [-1, 0, 1, 2, 4, 10, 20]

let fruits = ["apple", "orange", "melon", "Orange"];

console.log(fruits.sort()); // output: ["Orange", "apple", "melon", "orange"]
console.log(fruits.sort((x, y)=>{
  x = x.toUpperCase();
  y = y.toUpperCase();

  if (x>y) return 1;
  else if (y>x) return -1;
  else return 0;
}))
// output: ["apple", "melon", "orange", "Orange"]

/* 공용화 함수 */
let ascending_order = function(x, y){
  if (typeof x === "string") x = x.toUpperCase();
  if (typeof y === "string") y = y.toUpperCase();

  return x > y ? 1 : -1;
};

let descending_order = function(x, y){
  if (typeof x === "string") x = x.toUpperCase();
  if (typeof y === "string") y = y.toUpperCase();

  return x <> y ? 1 : -1;
};

let nums = [1, -1, 4, 0, 10, 20, 12];
let fruits = ["apple", "Orange", "orange", "melon"];
console.log(nums.sort(ascending_order));
console.log(fruits.sort(ascending_order))

11. forEach(), map()

forEach()
- 배열 요소 별 콜백 함수 각각에 실행
- Array.forEach(function(item, index, array){})
map()
- 배열 요소 별 함수 호출 및 결과를 배열로 반환
- Array.map(function(item, index, array){})

let nums = [1, 2, 3];
nums.forEach((v)=>console.log(v)); // output: 1 2 3

let new_nums = nums.map(v=>v*2);
console.log(nuew_nums); // output: [2, 4, 6]

12. find(), filter()

find()
- 콜백 함수의 조건을 만족하는, 단 하나의 값만 반환
- Array.find(function(item, index, array){})
filter()
- 콜백 함수의 조건을 만족하는 값을 배열로 반환
- Array.filter(function(item, index, array){})

let users = [
  { name: "bob", age:17, job: false },
  { name: "alice", age: 20, job: false },
  { name: "john", age: 27, job: true }
];

let find_job = users.find((user) => user.job == false)
console.log(find_job); // output: { name: 'bob', age: 17, job: false }

let filter_job = users.filter((user) => user.job == false)
console.log(filter_job); // output: [{name: 'bob', age: 17, job: false}, {name: "alice", age:20, job: false}]

13. reduce()

요소 별 함수 수행 누적 결과값 반환
Array.reduce(function(accumulator, item, index, arary){})

let nums = [1, 2, 3, 4, 5];
let call_count = 0;

console.log("result\tvalue\tindex");
let sum = nums.reduce(function (accumulator, item, index, array) {
  console.log(accumulator, "\t\t", item, "\t\t", index);
  call_count++;
  return accumulator + item;
}, 0); // initial 없다면 index 1부터 시작
/* output
result value  index
0       1       0
1       2       1
3       3       2
6       4       3
10      5       4  */

console.log(call_count); // output: 5
console.log(sum); // output: 15

14. some(), every()

some()
- 배열 내 단 하나라도 콜백 함수의 조건을 만족하는 요소가 있다면 true, 아니면 false 반환(빈 배열인 경우 false)
- Array.some(function(item, index, array){}), item: 배열 요소, index: 배열 위치, array: 배열
every()
- 배열 내 모든 요소가 콜백 함수의 조건을 만족한다면 true, 아니면 false 반환(빈 배열인 경우 true)
- Array.every(function(item, index, array){}), item: 배열 요소, index: 배열 위치, array: 배열

/* 1. some() */
let users = [
  { name: "bob", age: 17, job: false },
  { name: "alice", age: 20, job: false },
  { name: "john", age: 27, job: true },
];

let some_job = users.some(function (user){
  return user.job == false;
});
console.log(some_job); // output: true

let some_age = users.some(function (user){
  return user.age < 16;
});
console.log(some_age); // output: false

let empty = [].some((item) => item > 16);
console.log(empty); // output: false

/* 2. every() */
let every_job = users.every(function (user){
  return user.job == false;
});
console.log(every_job); // output: false

let every_age = users.every(function (user){
  return user.age > 16;
});
console.log(every_age); // output: true

let empty = [].every((item) => item > 16);
console.log(empty); // output: true

15. N차원 배열

배열(Array) 안에 N개 만큼의 배열이 존재하는 객체
2/3차원 지도 정보, RGB를 저장하는 2차원 사진 파일 등을 표현할 때 활용 가능
2차원 배열은 array[N][m]으로 접근하며, 배열(Array) 전체를 push(), pop() 가능

// 2차원 배열 예제
let array = [
  [101, 102, 103],
  [201, 202, 203],
  [301, 302, 303],
];

console.log(array); // output: [[101, 102, 103], [201, 202, 203], [301, 302, 303]]
console.log(array[0]); // output: [101, 102, 103]
console.log(array[1][0]); // output: 201
console.log(array[2][2]); // output: 303

let arr_2 = array.pop();
console.log(array.length); // output: 3
console.log(arr_2); // output: [301, 302, 303]
console.log(array); // output: [[101, 102, 103], [201, 202, 203]]

let array_num = array.push([401, 402, 403]);
console.log(array.length); // output: 3
console.log(array_num); // output: 3
console.log(array); // output: [[101, 102, 103], [201, 202, 203], [401, 402, 403]]

// 2차원 배열 반복문 예제
let array = [[101, 102, 103], [201, 202, 203], [301, 302, 303]];

for (let i=0;i<array.length;i++){
  for (let j=0;j<array[i].length;j++){
    console.log(array[i][j]);
  }
}
// output: 101 ... 303

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

13. Array.md

13. Array.md

Array

1. Array

2. 배열 선언, 접근, 속성

3. 배열의 실체

4. 배열 타입 확인 및 요소 삭제

5. 배열 조작

6. 배열 반복문

7. 배열 탐색

8. 배열 변형

9. 고차함수 배열 메서드

10. sort()

11. forEach(), map()

12. find(), filter()

13. reduce()

14. some(), every()

15. N차원 배열

Files

13. Array.md

Latest commit

History

13. Array.md

File metadata and controls

Array

1. Array

2. 배열 선언, 접근, 속성

3. 배열의 실체

4. 배열 타입 확인 및 요소 삭제

5. 배열 조작

6. 배열 반복문

7. 배열 탐색

8. 배열 변형

9. 고차함수 배열 메서드

10. sort()

11. forEach(), map()

12. find(), filter()

13. reduce()

14. some(), every()

15. N차원 배열