자바스크립트 배열과 메서드

숩딩·2022년 5월 4일
JavaScript멋사TIL
0

[멋쟁이 사자처럼] 프론트엔드 스쿨 2기

목록 보기
25/28
post-thumbnail

배열 (array)

  • 데이터의 집합
  • 여러 개체(Entity) 값을 순차적으로 나열한 자료 구조
  • 배열의 각 값은 원소(element) 혹은 요소 라고 부르고 배열 요소는 index 로 접근
  • 순서가 있는 자료를 저장하는 용도로 만들어진 특수한 자료구조.
    (배열 내장 메서드는 이런 용도에 맞게 만들어졌다.)
  • 대표 속성(property) 과 메서드(method)

배열 선언

// 배열을 선언하는 다양한 방법
let arr = [];
let arr = new Array();
// 배열선언 
let 과일 = ['사과', '수박', '복숭아', '딸기', '바나나'];
let 과일 = new Array(5);
let 과일 = new Array('사과', '수박', '복숭아', '딸기', '바나나');
  • 배열 요소의 자료형에는 제약이 없다. 
// 요소에 여러 가지 자료형이 섞여 있습니다.
let arr = [ '사과', { name: '수수' }, true, function() { alert('안녕하세요.'); } ];

요소 추가 제거 메서드

push() / pop()

push : 배열 끝에 요소를 추가
pop : 배열 끝 요소를 제거하고, 제거한 요소를 반환

let fruits = ["apple", "orange", "melon"];
let ret; //반환된 값을 사용하기 위해 변수를 따로 줌

ret = fruits.push("cherry");
console.log(ret); // 4
console.log(fruits); //[ 'apple', 'orange', 'melon', 'cherry' ]

ret = fruits.pop(); // 맨 뒷 요소를 밖으로 꺼내겠다!
console.log(ret); //cherry : 꺼내진 맨뒤 값

console.log(fruits); //[ 'apple', 'orange', 'melon' ]

헷갈리는점
fruits.push(...)를 호출하는 것은 fruits[fruits.length] = ...하는 것과 같은 효과를 보인다. 

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

ret = fruits.push("cherry"); //4 
ret = fruits.pop(); //'cherry'

console.log(fruits); //['apple', 'orange', 'melon']

shift() / unshift()

unshift : 배열 앞에 요소를 추가 

const cafe = ["coffee", "cake", "tea", "cookie"];

const count = cafe.unshift("bread");

console.log(count); // 5 
console.log(cafe); //['bread', 'coffee', 'cake', 'tea', 'cookie']

shift: 배열 앞 요소를 제거하고, 제거한 요소를 반환

let first = cafe.shift();
console.log(first); //bread

cafe.unshift(first);
console.log(cafe); //['coffee', 'cake', 'tea', 'cookie']

참고하기
push와 pop은 빠르지만 shift와 unshift는 느리다.
shift 를 연산하기 위해서는 인덱스가 0 인 요소를 제거해야 할 뿐만 아니라 제거 대상이 아닌 나머지 요소들의 인덱스를 수정해줘야한다.
shift아래 3가지 동작을 수행해야 이루어진다.

splice()

  • 요소 추가, 삭제, 교체가 모두 가능
  • arr.splice(index[, deleteCount, elem1, ..., elemN])
  • 첫 번째 매개변수 : 조작을 가할 첫 번째 요소를 가리키는 인덱스(index).
  • 두 번째 매개변수 deleteCount : 제거하고자 하는 요소의 개수를 나타냅니다.
  • elem1, ..., elemN : 배열에 추가할 요소
var fish = ["정어리", "고등어", "돌고래", "참치", "고래상어", "코끼리"];
// 1. splice 를 이용해 코끼리를 제거해보세요
// 2. 참치 다음에 다금바리를 추가해보세요
// 3. 돌고래를 제거하고 옥돔과 갈치를 추가해보세요

fish.splice(-1, 1); //맨 뒤 인덱스부터 1번째 제거 
fish.splice(-1, 0, "다금바리"); // 맨 뒤 인덱스부터 제거없이 문자추가
fish.splice(2, 1, "옥돔", "갈치"); //2시작해서 1번쩨 제거하고 문자추가
console.log(fish); 
['정어리','고등어','옥돔','갈치', '참치','다금바리','고래상어']

slice()

arr.slice([start], [end])

  • "start" 인덱스부터 ("end"를 제외한) "end"인덱스까지의 요소를 복사한 새로운 배열을 반환한다.
  • 원본 요소가 바뀌지 않는것이 포인트! 특히 두 번째 인자에 해당하는 인덱스의 아이템은 포함하지 않는다. 
var fish = ["정어리", "고등어", "돌고래", "참치", "고래상어", "코끼리"];
// 다음 배열에서 물고기가 아닌것을 slice로 선택해 콘솔로 출력해 보세요.
console.log(fish.slice(2, 3)); 
console.log(fish.slice(5));

배열을 변형하는 메서드

sort()

sort() : 배열의 요소를 정렬한 후 그 배열을 반환

let avengers = ["spiderman", "ironman", "hulk", "thor"];
avengers.sort();
console.log(avengers); //[ 'hulk', 'ironman', 'spiderman', 'thor' ]

let avengers2 = ["스파이터맨", "아이언맨", "헐크", "토르"];
avengers2.sort();
console.log(avengers2); //[ '스파이터맨', '아이언맨', '토르', '헐크' ]

숫자를 sort() 해줄때

  • 숫자는 문자열로 바꾼뒤 유니코드 순서대로 바꾼다. 
let arrNum = [13, 9, 10, 3, 44, 21];
arrNum.sort();
console.log(arrNum); //[ 10, 13, 21, 3, 44, 9 ] 문자열로 바꾼뒤 유니코드 순서대로 바꾼다.
  • 바로 이 숫자형 데이터 정렬의 단점을 해결하기 위해 비교 함수(compareFunction)를 사용할 수 있다.
  • 문자코드로 바꾸기 이전에 함수를 통해 sort 해주는것
  • 양수를 반환하는 경우 첫 번째 인수가 두 번째 인수보다 '크다’를 나타내고, 음수를 반환하는 경우 첫 번째 인수가 두 번째 인수보다 '작다’ 를 나타내기만 하면 된다.
    결론은
    a - b 일때 음수이면 a가 앞으로, 양수이면 b 가 앞으로 정렬된다. 를 기억하자 
arrNum.sort(function (a, b) {
  return a - b;
});

더 간단하게 화살표 함수를 이용해서 작성할 수 있다 

arr.sort( (a, b) => a - b );

9-3 => 양수이기 때문에 3이 앞으로 간다. [3,9]

var arrNum2 = [13, 9, 10, 2];
        // 오름차순으로 정렬할 경우 (a - b)
        // 13 - 9 == 4 --> 양수임으로 9를 앞으로
        // 13 - 10 == 3 --> 양수임으로 10을 앞으로
        // 9 - 10 == -1 --> 음수임으로 9를 앞으로 [9, 10, 13, 2]
        // 13 - 2 == 11 --> 양수임으로 2를 앞으로 [9, 10, 2, 13]
        // 10 - 2 == 8 --> 양수임으로 2를 앞으로 [9, 2, 10, 13]
        // 9 - 2 == 7 --> 양수임으로 2를 앞으로 [2, 9, 10, 13]
let arrNum = [13, 9, 10, 3, 44, 21];
arrNum.sort(function (a, b) {
  if (a > b) {
    return -1;
  } else if (b > a) {
    return 1;
  } else {
    return 0;
  }
});

반대로 해보자

a-b일때 음수면 b를 앞으로 보내자라는 약속

let arrNum3 = [9, 3, 44, 13, 21];
arrNum3.sort(function (a, b) {
  return b - a;
});
console.log(arrNum3); //[ 44, 21, 13, 9, 3 ]

/*
내림차순 정렬
3-9 == -6 음수니까 a 가 앞으로
44 - 3 == 41 양수
[9, 44, 3] 
*/

더 가보자아 

// 다음 배열에서 sort 함수를 이용해 원소의 product의 값을 기준으로 가나다순으로 정렬해보세요.
var studentList = [
  {
    id: 1,
    product: "연필",
    stock: 10,
  },
  {
    id: 2,
    product: "색종이",
    stock: 33,
  },
  {
    id: 3,
    product: "체육복",
    stock: 2,
  },
  {
    id: 4,
    product: "만연필",
    stock: 0,
  },
];

studentList.sort(function (a, b) {
  if (a.product < b.product) {
    return -1;
  } else if (b.product < a.product) {
    return 1;
  } else {
    return 0;
  }
});
console.log(studentList);
/*[
  { id: 4, product: '만연필', stock: 0 },
  { id: 2, product: '색종이', stock: 33 },
  { id: 1, product: '연필', stock: 10 },
  { id: 3, product: '체육복', stock: 2 }
]
*/

reverse() : 순서를 거꾸로 뒤집을 때

const cafe = ['coffee', 'cake', 'tea', 'cookie']
console.log(cafe.reverse()); //['cookie', 'tea', 'cake', 'coffee']

map()

  • 배열 요소 전체를 대상으로 함수를 호출하고, 함수 호출 결과를 배열로 반환
let result = arr.map(function(item, index, array) {
  // 요소 대신 새로운 값을 반환
});
arr = [1, 2, 4, 5, 6];
arr.map((i) => i + 100); //[(101, 102, 104, 105, 106)];

reduce()

  • 각 요소에 누적해주며 실행하고 싶을 때 
let value = arr.reduce(function(accumulator, item, index, array) {
  // ...
}, [initial]);
  • Array.prototype.reduce() 메소드는 배열 내의 각 요소에 주어진 reducer 함수를 실행하고, 단 1개의 결과값을 반환
  • 4개의 매개변수를 가짐.
  • 누적값 : 바로 직전 콜백함수의 반환값을 누적
  • 현재값 : 순회를 돌고 있음
  • 현재 돌고있는 요소의 index
  • array 전체
  • 보통 index 와 array 많이 생략 
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

arr.reduce((누적값, 현재값) => 누적값+현재값)
//expected output: 55

arr.reduce((누적값, 현재값, index, array) => 누적값+현재값)
//expected output: 55

arr.reduce((누적값, 현재값, index, array) => 누적값-현재값)
//expected output: -53

let arr = [1, 2, 3, 4, 5];
let result = arr.reduce((sum, current) => sum + current, 0);
console.log(result); // 15
  1. 함수 최초 호출 시, reduce의 마지막 인수인 0(초깃값)이 sum에 할당.
    current엔 배열의 첫 번째 요소인 1이 할당된다. 따라서 함수의 결과는 1이 됨
  2. 두 번째 호출 시, sum = 1 이고 여기에 배열의 두 번째 요소(2)가 더해지므로 결과는 3이 됨
  3. 세 번째 호출 시, sum = 3 이고 여기에 배열의 다음 요소가 더해진다. 이런 과정이 계속 이어짐

배열 탐색하기

indexOf() : 요소의 인덱스 찾기

Array.prototype.indexOf()

  • 배열에서 지정한 요소를 찾아 해당 요소의 인덱스를 탐색한다.
  • 배열에 존재하지 않는 요소를 찾거나 해당 인덱스에서 지정된 요소가 탐색되지 않을 시 -1을 출력한다.
  • 첫번째 매개변수는 탐색하고자 하는 요소를 입력
  • 두번째 매개변수에는 탐색을 시작하고자 하는 인덱스를 입력, 생략 가능
const cafe = ['coffee', 'cake', 'tea', 'cookie']

cafe.indexOf('tea') //2
cafe.indexOf('coffe', 1) //-1
cafe.indexOf('bread') //-1

includes() : 요소가 있는지

arr.includes(item, from)

  • 인덱스 from부터 시작해 item이 있는지를 검색
  • 해당하는 요소를 발견하면 true를 반환
  • NaN도 제대로 처리한다는 점에서 indexOf/lastIndexOf와 약간의 차이가 있다.
let arr = [1, 0, false];
arr.includes(1); //true

find() & findIndex()

find : 하나의 요소라도 조건을 만족하는지 확인할때, 조건에 맞는 딱 하나만 찾아줌! (아이디찾을때 굳)

  • item – 함수를 호출할 요소 (거의 이것만 쓰임)
  • index – 요소의 인덱스
  • array – 배열 자기 자신
let result = arr.find(function(item, index, array) {
  // true가 반환되면 반복이 멈추고 해당 요소를 반환
  // 조건에 해당하는 요소가 없으면 undefined를 반환
});
const arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

arr2.find((i) => i > 5);
//expected output: 6 ;

findIndex

  • find() 와 동일한 역할을 하지만 , 조건에 맞는 요소를 반환하는 대신 해당 요소의 인덱스를 반환
  • 조건에 맞는 요소가 없으면 -1이 반환된다.

filter()

  • 조건을 충족하는 요소가 여러개일때 사용
let results = arr.filter(function(item, index, array) {
  // 조건을 충족하는 요소는 results에 순차적으로 더해진다
  // 조건을 충족하는 요소가 하나도 없으면 빈 배열이 반환
});
let users = [
  {id: 1, name: "A"},
  {id: 2, name: "B"},
  {id: 3, name: "C"}
];

// 앞쪽 사용자 두 명을 반환
let someUsers = users.filter(item => item.id < 3);
someUsers.length; // 2

그 외 메서드

isArray() : 배열이세요?

Array.isArray() :

  • 입력받은 매개변수가 배열인지 아닌지 여부를 판별
  • boolean 값으로 출력 (배열이면 true, 아니면 false)
Array.isArray('coffee'); //false
Array.isArray(false); //false
Array.isArray([1]); //true

join() : 요소 연결

Array.prototype.join()

  • 배열 내 원소들을 연결해 하나의 값으로 만든다
  • 그 값의 자료형은 문자열이다.
  • 요소가 null 또는 undefined 일 경우 빈 문자열로 반환
let number = ["010", "1111", "2222"];
console.log(number.join("-")); // 010-1111-2222

split() : 쪼개쪼개

  • 구분자를 기준으로 문자열을 쪼개준다
let names = 'A, B, C';

let arr = names.split(', '); // , 를 기준으로 쪼개짐

for (let name of arr) {
  alert( `${name}에게 보내는 메시지` ); // A에게 보내는 메시지 , B 에게 보내는 메세지, C에게 보내는 매세지 
}
  • 인수에 아무것도 없는 빈 문자열로 지정하면 문자열을 글자 단위로 분리할 수 있다.
let str = "test";

str.split(''); // t,e,s,t

fill()

  • 빈 배열을 동일한 값으로 채울때
let test = ["2", "3", "1", "4"];
test.fill("hi");
console.log(test); //[ 'hi', 'hi', 'hi', 'hi' ]
//빈 배열을 만들어 주고 싶을때
console.log(Array(5)); //[ <5 empty items> ]

console.log(Array.from("hello".repeat(5)));
/**
 * [
  'h', 'e', 'l', 'l', 'o', 'h',
  'e', 'l', 'l', 'o', 'h', 'e',
  'l', 'l', 'o', 'h', 'e', 'l',
  'l', 'o', 'h', 'e', 'l', 'l',
  'o'
]
/*hello를 붙여서 fill하고 싶을땐*/
console.log(Array(5).fill("hello")); //[ 'hello', 'hello', 'hello', 'hello', 'hello' ]

foreach()

  • foreach() : 각각의 요소를 실행하고 싶을때 ( 순회만 함. 뭘 생성해주지 않음 )
arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.forEach((i) => console.log(i));
// expected output: 1
// expected output: 2
// expected output: 3
// expected output: 4
// expected output: 5
// expected output: 6
// expected output: 7
// expected output: 8
// expected output: 9
// expected output: 10

(배열 메서드를 좀 더 쉽게 이해할 수 있는 그림 첨부)

참고 : 모던자바스크립트 튜토리얼 (https://ko.javascript.info/array-methods)

profile
숩딩
Front-End Developer ✨
이전 포스트

GitHub 모던자바스크립트 튜토리얼 오픈소스 기여하기

다음 포스트

자바스크립트 반복문 뽀개기 (+ 활용문제)

0개의 댓글