많은 데이터를 저장하고 처리하기 위해 Array(배열)를 사용할 수 있으며, 그에따른 push, pop, slice, splice, filter, map method를 알아보자.
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>'); //배열 출력
}
var arrBooks = new Array('노르웨이의 숲', '이방인', '마담보바리', '달과6펜스'); //배열 선언 +생성
for (var i = 0; i < arrBooks.length; i++){
document.write(arrBooks[i]+'<br>'); //배열 출력
}
push()
는 배열의 마지막에 새로운 값을 추가해준다.
var arrBooks = new Array('노르웨이의 숲', '이방인', '마담보바리', '달과6펜스');
arrBooks.push('자기만의 방');
document.write(arrBooks); //출력 - 노르웨이의 숲,이방인,마담보바리,달과6펜스,자기만의 방
pop()
은 배열의 마지막 값을 제거해 준다.
var arrBooks = new Array('노르웨이의 숲', '이방인', '마담보바리', '달과6펜스');
arrBooks.pop();
document.write(arrBooks); //출력 - 노르웨이의 숲,이방인,마담보바리
slice()
는 원본 배열을 수정하지 않은채 처음부터 마지막 값 '전'까지의 배열을 복사하여 새로운 배열을 반환해준다. slice(start,end)
var arrBooks = new Array('노르웨이의 숲', '이방인', '마담보바리', '달과6펜스');
var arrBooks1 = arrBooks.slice(0, -2);
document.write(arrBooks1); // 출력 - 노르웨이 숲,이방인
slice(start,end)
start가
(1) undefined인 경우는 0부터
(2) 음수인 경우는 배열의 끝에서부터
(3) 배열의 길이와 같거나 큰 수인 경우는 빈 배열을 반환한다.
end가
(1) 지정되지 않았을 경우는 배열의 끝까지
(2) 음수로 지정된 경우는 끝에서 부터의 그 값의 전까지
(3) 배열이 길이와 같거나 큰 수인 경우는 배열의 끝까지를 반환한다.
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); // 출력 - 노르웨이의 숲
start가
(1) 음수일 경우는 배열의 끝에서부터 센다.
(2) 절댓값이 배열의 길이보다 긴 경우 0으로 세팅된다.
deleteCount가
(1) 생략되거나 array.length보다 클 경우는 star부터 모든 요소를 제거한다.
(2) 0이거나 0보다 작은 수일 경우 어떤 요소도 삭제하지 않는다.
(3) 배열의 길이보다 큰 수를 지정한 경우 실제 시작 인덱스틑 배열의 길이로 설정 (이 부분 아직 이해 못했다. 다시 보자!!)
추가요소를 지정하지 않을 경우 요소 제거만 하게된다.
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)
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의 기본적인 것들을 배워봤는데 여기까지 배운 것들을 통해 미니미니미니한 무언가라도 만들어 봐야겠다. 오늘도 코딩은 재밌다.👻
(array)
https://coding-factory.tistory.com/194?category=758270
(slice 더 알아보기)
음수 값은 뭘까하고 찾아본 글인데 설명도 자세하고 샘플코드도 많아서 이해가 쏙쏙되었다. https://im-developer.tistory.com/103
(splice 더 알아보기)
http://www.gisdeveloper.co.kr/?p=2113
(filter)
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
(map)
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map