[JavaScript] Array정리

프로그래밍을 할 때 array와 array를 다루는 메소드의 중요성을 느낀 적이 많았다. 이번에 map같은 자료구조도 같이 정리하려고 한다.

 

1. 배열 선언 / 배열 길이

var data = ['first', 'second', 'third'];
//배열 선언

console.log(data.length);
//3

var mix = ['str', 1, 50 , null , [2,3,4]];
//배열 안에 모든 타입이 다 들어갈 수 있다. ex) function, array, object ...

 

2. 배열에 데이터 삽입

var arr = [5]; 
// length는 1
arr[1000] = 4;
// console.log(arr)로 콘솔에 찍어보면 (1001) [4, empty × 999, 3] 이런 배열을 확인할 수 있다...

위와 같은 형태보다는 push메소드를 통해 배열 뒤에 순차적으로 넣는게 일반적이다.

var arr = [4];
arr.push(5);
console.log(a.length);

 

3. 배열 메소드

배열을 가공하고 활용할 때 유용한 메소드들

[1,2,3,4].concat("오","육");
// [1,2,3,4,"오","육"]; : conacat으로 배열을 새로운 데이터를 합칠 수 있다

[1,2,3,4].slice(2);
// [3,4] : 앞에서 숫자만큼 자른다.

[1,2,3,4].indexOf(3);
// 2 : 배열의 원소에 특정 값이 들어 있는지 확인.

이러한 메소드 중 기존의 배열을 변경시키기도 하지만 새로운 배열을 반환하는 경우도 있으니 반드시 주의해서 사용해야한다!

 

ex) concat()은 새로운 배열을 반환한다.

var ori = [2,3,4];
var cha = ori.concat();

console.log(ori);  // [2,3,4]
console.log(cha); // [2,3,4]

console.log(ori === cha); // false

4. 배열 탐색 (forEach)

배열을 순회하면서 데이터를 가공할 경우가 많다. for문 말고도 forEach문을 이용해서 배열을 순회할 수 있다.

var arr = [1,2,3,4,"오","육"];
arr.forEach((element) => {
 console.log(element);
})

forEach는 함수를 인자로 받는다.(arrow function으로 표기) 기존의 for문의 조건들은 JS의 파서가 알아서 처리함으로써 for문으로 인해 발생할 수 있는 실수를 줄여준다.

 

5. map 

 map() 메서드는 배열 내의 요소들에 대해 함수를 호출한 결과를 모아 새로운 배열로 반환한다.

var newArr = ["apple","tomato"]

const sentence = newArr.map((value, index) => {
   return index + "번째 과일은 " + value + "입니다.";
});
console.log(sentence)
// 결과 : ["0번째 과일은 apple입니다.", "1번째 과일은 tomato입니다."]

 

6. filter

filter()메서드는 주어진 판별함수를 통과하는 요소들만 모아 새로운 배열을 반환한다.

var nums = [5, 6, 7, 8, 9];

const result = words.filter(num => num > 7);

console.log(result);
//  Array [8,9]

7. every

every()메서드는 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트합니다.

(빈 array에서 호출 시 무조건 true를 반환)

function isBelow(thisValue) {
  return thisValue < 10;
}

var arr = [1, 4, 7, 3, 8];
var arr2 = [1, 4, 5, 10, 15];

console.log(arr.every(isBelow)); 
// expected output: true

console.log(arr2.every(isBelow));
// expected output: false   --> 10, 15 요소에서 걸림

[ edwith - 웹프로그래밍 부스트코스 ] 를 개인적으로 공부하고 정리한 공간입니다. 잘못된 부분은 피드백 주시면 감사하겠습니다