Javascript 이론 공부 - 4 : Array

# 배열 생성

// 자바스크립트에서는 배열을 생성할 수 있는 기본적인 방법
// 1. Array 객채를 이용한 배열 생성
let array = new Array(3); // [ , , , ] 생성

// 1-1. Array 객체의 생성자 함수를 이용한 배열 생성
array = new Array(1, 2, 3); // [1, 2, 3] 생성

// 1-3. Array 객체의 static 함수를 이용한 배열 생성
// 인자의 수나 유형에 관계 없이 가변 인자를 가지는 새 Array 인스턴스를 만듦
array = Array.of(3); // [3] 생성
array = Array.of(1, 2); // [1, 2]  생성

// 2. 배열 리터럴을 이용한 배열 생성
const array2 = [1, 2, 3, 4]; // [1, 2, 3, 4] 생성


// 기존 배열에서 새로운 배열을 만들 때 from() 함수를 사용.
// from 함수는 얕은 복사(shallow copy)를 하기 때문에, 유의해서 사용해야함
// ex.  array2의 배열 값을 변경하거나 추가하면 array 함수도 변경됨!!!
array = Array.from(array2);  // [1, 2, 3, 4] 생성

// from함수 인자값에 string을 넣으면 1개씩 문자를 쪼개서 배열을 생성함
array = Array.from('woow'); // ['w', 'o', 'o', 'p'] 생성

 

- 일반적으로 배열은 동일한 메모리 크기를 가지고 있고 연속적으로 이어져야 하지만, 자바스크립트는 그렇지 않음

  - 자바스크립트에서의 배열은 오브젝트와 유사함

    > 따라서, 일반적인 배열의 동작을 흉내낸 특수한 객체라고 할 수 있음.

    Q. "동일한 메모리 크기를 가지고 있고 연속적으로 이어져야 하는 일반적인 배열"과는 다르다면, 이슈가 생길 수도 있을것 같은데요..?

    A. 이걸 보완하기 위해서 타입이 정해져 있는 타입 배열을 제공함! (Type Collections)

 

# 추가, 삭제와 관련된 Array의 내장 함수들

// 가장 기본적인 배열 추가 삭제 
// 현재는 side effect가 발생할 수 있기 때문에 아래처럼 사용하지 않음!! 
let array = [1, 2, 3, 4];

// 추가
// side effect : 만약 이미 있는 index에 값을 넣게 된다면 기존에 있는 값이 덮어씌워지게 됨
array[4] = 5; // [1, 2, 3, 4, 5]


// 삭제
// side effect : 배열의 '값'만 삭제하고 index는 남아있음. 즉, undefined라는 빈 공간이 생김
// 이후 프로그래밍 할때, 이슈가 발생할 수 있음
delete array[3]; // [1, 2, 3, undefined, 5];

  > 예전에는 이렇게 했는데.. 프로젝트가 커질수록 side effect가 발생할 확률이 너무 높음.

  > 그러니까 자체적으로 Array에서 제공하는 함수를 사용하자!

 

// 배열 자체를 변경하는지, 새로운 배열을 반환하는지 포인트로 둠
let arr = [1, 2, 3, 4 ];

// isArray()
// 특정한 오브젝트가 배열인지 체크 하는 함수
// return 값 : boolean
Array.isArray(arr)); // true
Array.isArray({})); // false : 객체임


// indexOf()
// 특정한 아이템의 위치를 찾을때 사용하는 함수
// return 값 : 배열 인덱스 
arr.indexOf(3)); // 2


// includes()
// 배열안에 특정한 아이템이 있는지 확인하는 함수
arr.includes(3)); // true
arr.includes(6)); // false

// push()
// 추가 - 제일 뒤에다가 추가하는 함수 & 배열 자체를 수정함
// return 값 : 배열의 길이
let length = arr.push(5);  // [1, 2, 3, 4, 5] 배열 업데이트, 결과값 5 반환


// unshift()
// 추가 - 제일 앞에다가 추가 & 배열 자체를 수정함
// return 값 : 배열의 길이
length = arr.unshift('6'); // [6, 1, 2, 3, 4, 5] 배열 업데이트, 결과값 6 반환


// pop()
// 제거 - 제일 뒤 값을 제거하는 함수 & 배열 자체를 수정함
// return 값 : 제거한 값
let last = arr.pop(); // [6, 1, 2, 3, 4] 배열 업데이트, 결과값 5 반환


// shift()
// 제거 - 제일 앞을 제거하는 함수 & 배열 자체를 수정함
// return 값 : 제거한 값
last = arr.shift(); // [1, 2, 3, 4] 배열 업데이트, 결과값 6 반환

// splice()
// 배열 중간에 추가 또는 삭제하는 함수 & 배열 자체를 수정함
// splice(시작하는 index, 배열에서 제거할 요소 개수, 배열에 추가할 개수)
// return 값 : 제거한 요소를 담은 배열 (아무것도 제거한게 없으면 빈 배열 반환)
let deleted = arr.splice(1, 1);  // [1, 3, 4] 배열 업데이트 
arr.splice(1, 0, 2, 5); // [ 1, 2, 5, 3, 5] 배열 업데이트

// slice()
// 잘라진 새로운 배열을 만듦
// 기존에 있는 배열은 건들지 않음
// slice(시작 index, 끝 index(생략 가능))
// return 값 : 시작 index부터 끝 index 직전까지 잘라진 새로운 배열.
let newArr = arr.slice(0, 2); // [1, 2] 배열 생성 후 반환
newArr = arr.slice(-1); // [2] 생성 후 반환


// concat()
// concat() 함수는 얕은 복사(shallow copy)를 하기 때문에, 유의해서 사용해야함
// 여러개의 배열을 붙여주는 함수
// return 값 : 합친 배열
const a1 = [1, 2, 3];
const a2 = [4, 5, 6];
const a3 = a1.concat(a2); // [1, 2, 3, 4, 5, 6] 생성

// 배열의 순서를 거꾸로 뒤집어주는 함수
// return 값 : 모든 값을 뒤집어준 배열
const a4 = a3.reverse(); // [6, 5, 4, 3, 2, 1] 생성


// 중첩 배열을 하나의 배열로 쫙 펴주는 함수
// flat() 함수 인자로 몇번까지 필 껀지 넣어줄 수 있음.
// 기본은 한번
// return 값 : 펼친 배열

let arr2 = [
  [1, 2, 3],
  [4, [5, 6]],
];

arr2.flat(); // [1, 2, 3, 4, [5, 6]]
arr2.flat(2); // [1, 2, 3, 4, 5, 6]

// 특정한 값으로 배열을 채우는 함수 & 배열 자체를 수정함
// fill(채울 값, 시작 index(생략 가능), 끝 index(생략 가능))
// return 값 : 시작 index부터 끝 index 직전까지 채울 값으로 만들어진 배열
arr.fill(0); // [0, 0, 0, 0, 0]
arr.fill('s', 1, 3); // [0, 's', 's', 0]
arr.fill('s', 0); // // ['s', 's', 's', 0]


// 배열을 문자열로 합칠 수 있는 함수
// join(배열의 각 요소를 구분할 문자열(default = ','))
// return 값 : string
let text = arr.join(); // 's,s,s,0' 
text = arr.join('|'); // 's|s|s|0'
text = arr.join(''); // 'sss0'

 

 

# 자주 사용하는 Array 관련 내장 함수들

const arr = [1, 2, 3, 4];

// forEach() 
// 배열을 돌면서 원하는 것을(콜백함수) 할때 자주 사용
fruits.forEach((value) => console.log(value));


// find()
// 조건에 맞는(콜백함수) 아이템을 찾을때 사용
// 대신 조건에 맞는 모든 값을 반환하는게 아니라, 첫번째 요소를 반환해줌
const item1 = { name: 'hi', last: 'world' };
const item2 = { name: 'hello', last: 'world2' };
const item3 = { name: 'wow', last: 'world3' };
const items = [item1, item2, item3, item2];

let result = items.find((value) => value.name === 'hello'); 

// findIndex()
// 제일 먼저 조건에 맞는 아이템의 인덱스를 반환
// 대신 조건에 맞는 모든 값을 반환하는게 아니라
// 첫번째 요소의 index를 반환해줌
result = items.findIndex((value) => value.name === 'hello'); // 1

// some()
// 배열의 아이템들이 부분적으로 조건(콜백함수)에 맞는지 확인
result = items.some((item) => item.name === 'hello'); // true

// every()
// 배열의 아이템들이 전부 조건(콜백함수)에 맞는지 확인
result = items.every((item) => item.name === 'hello'); // false

// filter()
// 조건에 맞는 모든 아이템들을 새로운 배열로 만들때 사용
// return 값 : 조건에 맞는 아이템들로 새로 만든 배열
// 배열의 아이템들이 부분적으로 조건(콜백함수)에 맞는지 확인
result = items.filter((item) => item.name === 'hello');

// map()
// Map 배열의 아이템들을 각각 다른 아이템으로 매핑할 수 있는 것들로
// 변환해서 새로운 배열 생성할때 사용
const nums = ['1', '2', '3', '4', '5'];
result = nums.map((item) => +item); // [1, 2, 3, 4, 5]

// flatMap()
// 배열을 펼칠때 쓰는 함수
result = nums.flatMap((item) => [1, 2]); // [ 1, 2, 1, 2, 1, 2, 1, 2, 1, 2]


// sort() 
// 배열의 아이템들을 정렬할때 쓰는 함수
// 문자열 형태의 오름차순으로 정렬 & 기존의 배열을 업데이트 함
const texts = ['xyz', 'abc'];
texts.sort(); // ['abc', 'xyz']

// 주의!!
// number 배열의 경우 그냥 sort()를 하면 문자열 형태로 변환하여 정렬
// 원하는 형태로 sort()가 안됨.
const numbers = [0, 5, 4, 2, 1, 10];
numbers.sort(); // [0, 1, 10, 2, 4, 5]

// 숫자를 원하는 방법으로 sorting 하고 싶을때 이렇게 쓰면 됨
// < 0 a가 앞으로 정렬, 오름차순
// > 0 b가 앞으로 정렬, 내림차순
numbers.sort((a, b) => a - b);
console.log(numbers);


// reduce()
// 배열의 요소들을 중첩해서 값을 하나로 만들때 사용
// reduce(리턴할 변수, 배열 값들이 들어갈 변수, 초기화값)
result = [1, 2, 3, 4, 5].reduce((sum, value) => (sum += value), 0); // 15

 

 

Array 관련 추가 공부 참고 자료 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array