[JS] Javascript의 Array(배열)

Array(배열)

배열은 순서가 있는 데이터 집합입니다.
자바스크립트에의 배열의 요소가 모두 같은 타입일 필요는 없습니다. 다른 배열이나, 객체도 포함할 수 있습니다.
배열 리터럴은 대괄호([])로 만들고, 배열 요소애 접근할 때도 대환호를 사용합니다.
숫자 인덱스를 통해 배열 항목에 접근하게 해 줍니다.

예제를 통해 알아보겠습니다.

// 숫자로 구성된 배열
const arr1 = [1, 2, 3, 4];
// 여러 타입의 값으로 구성된 배열
const arr2 = ['one', 2, { number: 3 }];

// 요소에 접근하기
arr1[0]; // 1
arr1[1]; // 2
arr2[2]; // {number: 3}

// 배열의 길이
arr1.length // 4
arr2.length // 3

Array 메서드

1) push, pop과 unshift, shift

push, pop, unshift, shift 메서드 모두 배열에 요소를 추가하거나 제거하는 메서드입니다.
push, pop은 배열의 가장 끝에 추가, 제거하는 메서드입니다.
unshift, shift은 배열의 가장 처음에 추가, 제거하는 메서드입니다.
배열 자체를 수정하는 메서드입니다.

예제를 통해 알아보겠습니다.

// 배열에 끝에 추가하기
arr1.push(5); 
arr1; // [1, 2, 3, 4, 5]

// 배열의 끝에 제거하기
arr1.pop();
arr1; // [1, 2, 3, 4]

// 배열의 맨앞에 추가하기
arr1.unshift(0);
arr1; // [0, 1, 2, 3, 4]

// 배열의 맨앞에 제거하기
arr1.shift();
arr1; // [1, 2, 3, 4]

push, pop은 데이터를 쌓아 올리는 Stack에 해당하는 행동이고, unshift, shift은 Queue에 해당하는 행동입니다.

2) concat

배열 끝에 요소를 추가한 사본을 반환합니다.

예제를 통해 알아보겠습니다.

const arr1 = [1, 2, 3];
const arr2 = arr1.concat([4, 5, 6]);
// concat 메서드를 사용후 반환된 사본 배열
arr2; // [1, 2, 3, 4, 5, 6]
// 대상이 되었던 배열
arr1; // [1, 2, 3]

concat 사용 후 새로운 배열이 반환되어, 대상이 되었던 배열 arr1은 수정되지 않았습니다.

3) slice

배열의 일부 요소만 얻기 위해 사용됩니다.
slice는 두 개의 매개변수를 받습니다. 첫 번째 매개변수는 어디서 시작할지, 두 번째 변수는 어디까지 가져올지(바로 앞 인덱스) 지정합니다.
두 번째 매개변수를 생략하면 끝까지 가져옵니다.

예제를 통해 알아보겠습니다.

const arr1 = [1, 2, 3, 4, 5];
arr1.slice(0, 2); // [1, 2]
arr1.slice(1); // [2, 3, 4, 5]

4) splice

배열을 자유롭게 추가하거나 제거할 때 사용하는 메서드입니다.
splice(index, count_to_remove, addElement1, addElement2,...)
index은 수정을 시작할 인덱스, count_to_remove은 index부터 제거될 요소 숫자, 나머지는 추가될 요소입니다.

예제를 통해 알아보겠습니다.

const arr1 = [1, 2, 3, 4, 5];
arr1.splice(1, 2, 'two', 'three');
arr1; // [1, 'two', 'three', 4, 5]

// 아무것도 제거하지 않기 위해서는 두번째 매개변수에 0를 넣으면 된다.
arr1.splice(1, 0, 2, 3);
arr1; // [1, 2, 3, 'two', 'three', 4, 5]

5) fill

ES6에서 도입한 새 메서드입니다.
fill를 사용해 특정값으로 배열을 채울 수 있습니다.
fill(addElement, startIndex, endIndex)
addElement: 추가할 요소, startIndex: 추가할 요소의 시작 인덱스, endIndex: 끝 인덱스

예제를 통해 알아보겠습니다.

const arr1 = new Array(3).fill('result');
arr1; // ['result', 'result', 'result']
arr1.fill('test', 1, 3); // ['result', 'test', 'test']

6) sort

배열 요소의 순서를 정렬합니다.
기본 정렬 순서는 문자열의 유니코드를 따릅니다.
유의할 점은 배열 자체가 변형됩니다.

sort() 메서드에 대해 알아보겠습니다.

const arr1 = [2, 4, 1, 3];
arr1.sort(); 
arr1; // [1, 2, 3, 4]

const arr2 = ['a', 2, 4, 1, 3];
arr2.sort();
arr2; // [1, 2, 3, 4, 'a']

문자열과 숫자가 함께 있는 sort()를 사용하면 문자열로 변환되어 유니코드 숫자를 통해 비교하게 됩니다.
즉, 문자열 'a'는 97, 1... 4는 1씩 증가하여 49... 52가 됩니다. 오름차순으로 정렬이 되어 결국 [1, 2, 3, 4, 'a']로 정렬이 되게 됩니다.

sort메서드는 정렬 함수를 매개변수로 받습니다. 정렬 함수의 반환 값에 따라 오름차순, 내림차순, 기존과 동일하게 정렬됩니다.
우선 숫자 배열을 정렬 함수를 매개변수로 사용하여 정렬하도록 하겠습니다.

const arr1 = [7, 3, 6, 4, 1, 8, 2, 5];

// 오름차순 정렬
arr1.sort(function(a, b) => {
          return a - b;
          });
arr1; //  [1, 2, 3, 4, 5, 6, 7, 8]

// 내림차순 정렬
arr1.sort(function(a, b) => {
          return b - a;
          });

// 동일
arr1.sort(function(a, b) => {
          return a == b;
          });

위의 예제를 통해 이미 규칙을 찾았을 거라 생각합니다.
매개변수의 정렬함수 반환 값이 0보다 크다면 오름차순, 0보다 작다면 내림차순, 동일하다면 정렬의 변화가 없습니다.

그렇다면 객체 내부의 속성 값도 정렬해보도록 하겠습니다.

const items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic', value: 13 },
  { name: 'Zeros', value: 37 }
];

// value순으로 정렬 
items.sort(function (a, b) {
  if (a.value > b.value) {
    return 1;
  }
  if (a.value < b.value) {
    return -1;
  }
  // a must be equal to b
  return 0;
});

// value으로 간단하게 정렬
items.sort(function(a, b) {
               return a.value - b.value
           });
items // [{name: "The", value: -12}, {name: "Magnetic", value: 13}, {name: "Edward", value: 21}, {name: "Sharpe", value: 37}, {name: "Zeros", value: 37}, {name: "And", value: 45}

// name으로 정렬
items.sort(function(a, b) {
  var nameA = a.name.toUpperCase(); // ignore upper and lowercase
  var nameB = b.name.toUpperCase(); // ignore upper and lowercase
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }
  // 이름이 같을 경우
  return 0;
});

위의 예제도 마찬가지로 반환 값이 양수라면 오름차순, 음수라면 내림차순, 0일 경우는 변동이 없는 것을 확인할 수 있습니다.

7) map과 filter

실무에서 가장 유용하게 쓰이는 메서드라고 말할 수 있습니다.
map()은 배열의 요소를 변형합니다. 즉, 형식을 변형할 때 쓰입니다.

예제를 통해 알아보겠습니다.

// name 속성의 값만 가져오는 배열 만들기
const arr1 = [{ name: 'oyg0420', age: '31' }, { name: 'javascript', age: '34' }, { name: 'react', age: '10' }, { name: '티스토리', age: '35' }, { name: '자바스크립트', age: '20' }];
const nameArr = arr1.map(data => data.name);
nameArr; // ["oyg0420", "javascript", "react", "티스토리", "자바스크립트"]

// 두 배열를 결합된 오브젝드 배열 만들기
const ages = [31, 29, 33, 20];
const names = ["oyg0420", "javascript", "react", "티스토리"];
const person = names.map((data, index) => ({ name: data, age: ages[index]}));
person // [{name: "oyg0420", age: 31}, {name: "javascript", age: 29}, {name: "react", age: 33}, {name: "티스토리", age: 20}]

위 예제처럼 map을 활용해 간단하게 원하는 데이터를 만들었습니다.

filter메서드는 이름으로 집작 할 수 있듯이 필요한 것 듦만 남길 목적으로 만들어졌습니다.

예제를 통해 알아보겠습니다.

// 30대 이상의 사람
const arr1 = [{ name: 'oyg0420', age: 31 }, { name: 'javascript', age: 34 }, { name: 'react', age: 10 }, { name: '티스토리', age: 35 }, { name: '자바스크립트', age: 20 }];
arr1.filter(data => data.age >= 30); // [{name: "oyg0420", age: 31}, {name: "javascript", age: 34}, {name: "티스토리", age: 35}]

// 이름이 'oyg0420'인 사람
arr1.filter(data => data.name == 'oyg0420'); // {name: "oyg0420", age: 31}

배열에 필요한 것들만 남기도록 조건을 주었습니다. 그렇다면 나이가 30대 이상인 사람의 이름을 알고 싶다면 어떻게 처리하면 좋을까요?
map과 filter를 함께 사용하여 쉽게 데이터를 얻을 수 있습니다. 아래 예제를 통해 알아보겠습니다.

const arr1 = [{ name: 'oyg0420', age: 31 }, { name: 'javascript', age: 34 }, { name: 'react', age: 10 }, { name: '티스토리', age: 35 }, { name: '자바스크립트', age: 20 }];
arr1.filter(data => data.age >= 30).map(person => person.name); // ["oyg0420", "javascript", "티스토리"]

filter메서드 통해서 조건에 부합하는 데이터를 얻습니다. 그리고 map메서드를 통해 필요한 요소를 얻습니다.

배열은 실무에서 굉장히 많이 쓰입니다. 따라서 배열이 갖고 있는 메서드를 명확하게 알고 있다면 쉽게 문제를 해결하고 원하는 데이터를 얻을 수 있다고 장담합니다.

 

파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음