[JS] Array 선언과 Method 정리

devCecy·2020년 10월 28일

JavaScript Map Pop TIL array filter js push slice splice

JavaScript

목록 보기

5/14

많은 데이터를 저장하고 처리하기 위해 Array(배열)를 사용할 수 있으며, 그에따른 push, pop, slice, splice, filter, map method를 알아보자.

1. Array 선언 방법

(1) 빈 배열 선언 > 배열 생성 > 배열 출력

var arrBooks = new Array(); //배열 선언
  arrBooks[0] = '노르웨이의 숲';
  arrBooks[1] = '이방인';![](https://velog.velcdn.com/images%2Fcecy-coding%2Fpost%2F410dc54c-2cd2-4903-93a3-c6186220db85%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-11-21%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%207.29.34.png)![](https://velog.velcdn.com/images%2Fcecy-coding%2Fpost%2Feb82d1c5-a277-4e36-b42f-11fbe5a8a4e7%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-11-21%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%209.58.22.png)![](https://velog.velcdn.com/images%2Fcecy-coding%2Fpost%2Fc916f180-a2fb-40c4-93ff-426c56fa6b76%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-11-21%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%209.58.22.png)
  arrBooks[2] = '마담 보바리';
  arrBooks[3] = '달과 6펜스';  //배열 생성

  for (var i = 0; i < arrBooks.length; i++){
      document.write(arrBooks[i]+'<br>');  //배열 출력
  }

(2) 초기에 값을 주어 배열 생성 > 배열 출력

var arrBooks = new Array('노르웨이의 숲', '이방인', '마담보바리', '달과6펜스');  //배열 선언 +생성

  for (var i = 0; i < arrBooks.length; i++){
      document.write(arrBooks[i]+'<br>');  //배열 출력
  }

2. Array와 관련된 Method들

(1) push()

push()는 배열의 마지막에 새로운 값을 추가해준다.

var arrBooks = new Array('노르웨이의 숲', '이방인', '마담보바리', '달과6펜스');
arrBooks.push('자기만의 방');

document.write(arrBooks); //출력 - 노르웨이의 숲,이방인,마담보바리,달과6펜스,자기만의 방

(2) pop()

pop()은 배열의 마지막 값을 제거해 준다.

var arrBooks = new Array('노르웨이의 숲', '이방인', '마담보바리', '달과6펜스');
arrBooks.pop();

document.write(arrBooks); //출력 - 노르웨이의 숲,이방인,마담보바리

(3) slice()

slice()는 원본 배열을 수정하지 않은채 처음부터 마지막 값 '전'까지의 배열을 복사하여 새로운 배열을 반환해준다. slice(start,end)

 var arrBooks = new Array('노르웨이의 숲', '이방인', '마담보바리', '달과6펜스');
 var arrBooks1 = arrBooks.slice(0, -2); 

document.write(arrBooks1);  // 출력 - 노르웨이 숲,이방인

*slice 더 알아보기

slice(start,end)
start가
(1) undefined인 경우는 0부터
(2) 음수인 경우는 배열의 끝에서부터
(3) 배열의 길이와 같거나 큰 수인 경우는 빈 배열을 반환한다.

end가
(1) 지정되지 않았을 경우는 배열의 끝까지
(2) 음수로 지정된 경우는 끝에서 부터의 그 값의 전까지
(3) 배열이 길이와 같거나 큰 수인 경우는 배열의 끝까지를 반환한다.

(4) splice()

splice()는 기존 배열의 요소를 삭제,교체,추가하여 배열을 반환한다. splice(start,deleteCount,추가요소1,추가요소2..)

 // 0번째 요소부터 2개가 삭제된다.
    var arrBooks = new Array('노르웨이의 숲', '이방인', '마담보바리', '달과6펜스');
    var arrBooks1 = arrBooks.splice(0, 2);

    document.write(arrBooks); //출력 - 마담보바리,달과6펜스
    document.write(arrBooks1); // 출력 - 노르웨이의 숲,이방인

//0번째 요소부터 2개가 삭제되고, 그자리에 새로운 요소가 추가된다.
    var arrBooks = new Array('노르웨이의 숲', '이방인', '마담보바리', '달과6펜스');
    var arrBooks1 = arrBooks.splice(0, 2, '인생의 베일');

    document.write(arrBooks); //출력 - 인생의베일,마담보바리,달과6펜스
    document.write(arrBooks1); // 출력 - 노르웨이의 숲,이방인

//3번째 요소부터 0개가 삭제되고, 그자리에 새로운 요소가 추가된다.
    var arrBooks = new Array('노르웨이의 숲', '이방인', '마담보바리', '달과6펜스');
    var arrBooks1 = arrBooks.splice(3, 0, '인생의 베일');

    document.write(arrBooks); //출력 - 노르웨이의 숲,이방인,마담보바리,'인생의 베일,달과6펜스
    document.write(arrBooks1); // 출력 - end가 0이기 때문에 아무것도 반환하지 않는다.

//start의 절댓값이 배열의 길이보다 길기때문에 start는 0이다. 즉, 0번째 요소부터 1개가 삭제된다. 
var arrBooks = new Array('노르웨이의 숲', '이방인', '마담보바리', '달과6펜스');
var arrBooks1 = arrBooks.splice(-5,1);

document.write(arrBooks); //출력 - 이방인,마담보바리,'인생의 베일,달과6펜스
document.write(arrBooks1); // 출력 - 노르웨이의 숲

*splice 더 알아보기

start가
(1) 음수일 경우는 배열의 끝에서부터 센다.
(2) 절댓값이 배열의 길이보다 긴 경우 0으로 세팅된다.

deleteCount가
(1) 생략되거나 array.length보다 클 경우는 star부터 모든 요소를 제거한다.
(2) 0이거나 0보다 작은 수일 경우 어떤 요소도 삭제하지 않는다.
(3) 배열의 길이보다 큰 수를 지정한 경우 실제 시작 인덱스틑 배열의 길이로 설정 (이 부분 아직 이해 못했다. 다시 보자!!)

추가요소를 지정하지 않을 경우 요소 제거만 하게된다.

(5) filter()

filter()는 주어진 함수조건에 해당하는 모든 요소를 새로운 배열로 반환한다. 기존 배열을 filter(element[,index[,array]])[,thisArg])

var arrBooks = new Array('노르웨이의 숲', '이방인', '마담보바리', '달과6펜스');
var arrBooks1 = arrBooks.filter(arrBooks => arrBooks.length >6);

console.log(arrBooks1); // 출력 - 노르웨이의 숲

thisArg 매개변수가 filter에 제공된 경우, 호출될 때 그 값은 callback의 this 값으로 전달되고,callback에 의해 관찰될 수 있는 this 값은 this를 결정하는 함수의 평소 규칙에 따라 결정된다.

function isBigEnough(value) {
        return value >= 6;
    }
var filltered = [1,2,3,4,5,6,7,8,9,10].filter(isBigEnough);
    console.log(filltered)

(6) map()

map()은 배열내의 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열로 반환한다.

// 요소에 5곱하기 
var arr = [1,2,3,4,5];
var map = arr.map(x => x * 5);
   console.log(map);  // 출력 - 5,10,15,20,25

// 함수 사용해서 배열 재구성하기
var abArray = [{author:'무라카미 하루키', book:'노르웨이의 숲'},
                  {author:'알베르 카뮈', book:'이방인'},
                  {author:'귀스타브 플로베르', book:'마담보바리'},
                  {author:'서머싯 몸', book:'달과 6펜스'}];
var reformattedArray = abArray.map(function(obj){
var rObj = {};
rObj[obj.author] = obj.book;
return rObj;
   });
   console.log(reformattedArray);  // {무라카미 하루키 : "노르웨이의 숲"}
                                   // {알베르 카뮈: "이방인"}
                                   // {귀스타브 플로베르 : "마담보바리"}
                                   //{서머싯 몸 :"달과 6펜스"}

오늘의 생각

오늘 내용은 공부하는데 시간이 좀 걸렸다. 하나하나 개념을 보고 예제를 만들어 출력값을 확인했다. slice의 음수값이 이해가 되지 않아 구글링하고, splice에서 값이 삭제되지 않는 경우는 뭐지?하고 또 구글링하고, filter의 thisArg, map에서 function(obj) 너희들은 또 왜그러는 거니..?하며 구글링의 구글링을 거쳤다. 간단한 예제들을 따라 만들어보긴 했지만 좀 더 응용해서 마음껏 사용할 수 있도록 해야겠다. 한 주 동안 JS의 기본적인 것들을 배워봤는데 여기까지 배운 것들을 통해 미니미니미니한 무언가라도 만들어 봐야겠다. 오늘도 코딩은 재밌다.👻