린트 사용(Debuge)
배열(Array)
배열또한 객체와 같은 객체형 자료이다. 때문에 내부에 모든 값들을 저장할 수 있다. 객체형으로 많은 요소들을 저장 할 수 있다. 하지만 순서가 없는 자료구조를 활동할 때에는 용의하지만, 순서가 필요로한 자료구조에서는 한계점이 보인다.
배열과 객체의 가장 큰 차이점은 자료구조의 순서를 정렬한다는 차이점이 있다. 배열이라는 말 그대로 순서를 나열하여 정렬한다라는 의미를 가지기에 배열의 기본 구조는 key 에는 배열의 이름을 정의하는 숫자값이 오고, value 에는 다양한 값이 저장될 수 있다.
let Arry = [] //빈 객체 생성
let arr = new Array(); //배열 선언배열또한 객체와 같은 구조이기에 내부의 프로퍼티를 불러오는 방법은 동일하다. 객체에서 내부값을 불러올 때에 점 표기법과, 대괄호 표기법이 있었다. 배열에서는 대괄호 표기법을 주로 사용한다.
let arr = ["apple", "banana", "orange"];
alert(arr[1]); // "apple"
alert(arr[2]); // "banana"
alert(arr[3]); // "orange"
alert(arr.lenght) // 3pop & push와 shift & unshift
- 끝 요소를 추가하고 제거할 수 있는 메소드이다.
큐자료구조에 사용되는 예로 많이 활용된다.
pop() : 배열의 맨 끝에 요소를 제거합니다. 반환 값은 제거된 값이다.(다중 제거는 불가능)
push() : 배열의 마지막 요소에 추가된다. 반환 값은 추가된 배열의 길이이다.(다중 추가 가능)
- 배열의 맨 앞 요소에 추가 제거를 할 수 있는 메소드이다.
unshift() : 배열의 맨 앞 요소에 추가한다. 반환 값은 추가된 배열의 길이이다.
shift() : 배열의 맨 앞 요소를 제거한다. 반환 값은 제거된 값이다.
배열의 내부 동작
배열을 선언하고 콘솔을 통해 그 배열을 출력해보면, 우리가 추가하지 않은 기본값 length 가 나오는 것을 볼 수 있다.
let arr = ['a', 'b', 'c'];
console.log(arr)
//(3) ['a', 'b', 'c']
//0: "a"
//1: "b"
//2: "c"
//length: 3
//[[Prototype]]: Array(0)legnth라는 프로퍼티는 왜 생기는 것일까?
자바스크립트에서 배열(Array)에 자동으로 제공해주는 프로퍼티 중 하나가 length 이다. 내부의 값에 따라 자동으로 프로퍼티의 값을 계산해준다.
따라서 선언을 할 때에 배열의 길이를 지정해 줄 수 있다.
let x = new Array(99);
console.log(x.length); // 99위 코드에는 비어있는 undefined 상태의 배열 99개가 존재한다. new Array()로 배열을 선언할 경우 내부 값을 추가하는 것이 아닌 배열의 길이를 지정하는 것이 된다.
- 배열의
key프로퍼티 이름을 지정할 수 도 있다.
let x = [];
x.name = 5;
console.log(x);
//[name: 5]
//name: 5
//length: 0
//[[Prototype]]: Array(0)하지만 이러한 방식을 추천하지 않는 것이 에초에 배열이라는 자료형에서 정렬되어야 할 아이템들에 포함이 되지 못하기 때문이다.
위 코드에서도 보다시피 length 에 name프로퍼티가 추가되지 못하는 것을 볼 수 있다. 이처럼 배열의 목적에 맞게 사용하기 위해서 이러한 방식은 피하되, 사용하고 싶다면 객체 선언을 통해 사용하는 것이 올바른 방법이라고 볼 수 있을 것 같다.
객체 순환
배열을 사용하다 보면 내부 값을 순서대로 출력해야 할 상황이 자주 생기곤 한다. 이럴 때 for()을 사용하게 되는데, 보통의 형태는 이러하다.
let arr = ["a", "b", "c", "d"];
for(let i = 0; i < arr.length; i++){
console.log(arr[i]); // "a", "b", "c", "b"
}배열 arr 의 전체 길이보다 변수 i가 커질 때 까지 i는 증가하며 루프가 반복 된다.
for ..in과 for ..of
for ..in(객체 순환) : 객체의 모든 프로퍼티를 대상으로 순회한다. 때문에 숫자가 아닌 프로퍼티도 순회 대상에 포함된다.
let arrs = ["a", "b", "c", "d"];
arrs.age = 25;
for(let arr in arrs){
console.log(arr); //0, 1, 2, 3, "age"
}객체 순환 루프를 배열에 사용을 하게 될 경우, age 의 값도 추가되어 순회하게 된다. 따라서 필요없는 프로퍼티들이 함께 순회를 하며 문제를 일으킬 가능성이 있다.
그렇다면 어떠한 방법이 좋을까?
for ..of(배열 순환) : 현재 배열의 요소 인덱스는 얻을 수 없고, 값만 얻을 수 있다. 때문에 순환을 하며 배열에 저장되어있는 값을 순서대로 사용할 수 있다.
배열을 사용할 경우에는 for ..of를 사용하는 것을 추천한다.
let arrs = ["a", "b", "c", "d"];
arrs.age = 25;
for(let arr of arrs){
console.log(arr); //a, b, c, d
}우리의 목적에 맞도록 사용해보자.
length 프로퍼티
- 배열에 담고있는 프로퍼티의 개수를 출력해준다.
- 배열 인덱스 + 1 === arr.length 이다.
.length는 수정이 가능하다. 값이 커질 때에는undefined값이 추가되며, 기존 배열보다 줄어들 경우 배열이 잘리는 문제가 생긴다.
실습
함수 sumArray()을 작성해 보시오.
pormpt창을 통해 사용자가 숫자를 입력할 수 있도록 요청하시오.- 입력 받은 값이 숫자일 경우에만 값을 배열에 저장하며, 숫자 이외의 문자 또는 취소를 누를 시 반복을 중단하시오.
- 함수가 끝나면 배열의 모든 합을 리턴한다.
function sumArray() {
let arr = [];
let sum = 0;
let count = 0;
order : while(true) {
let userInput = prompt("숫자를 입력해주세요", 0);
if(!!userInput && Number.inNaN(Number(userInput))) {
console.log("숫자를 입력하셨군요!);
arr.push(Number(userInput));
sum+=arr[count];
count++;
} else {
break order;
}
}
return sum;
}배열 메소드
splic
배열에서의 splice 는 만능 맥가이버 칼과 같은 메소드이다. 요소를 자유롭게 다룰 수 있게 해주기 때문이다. 배열의 중간을 잘라내거나, 중간에 몇 개의 배열을 추가하거나, 처음부터 중간까지의 배열을 잘라내거나 등 배열을 자유롭게 수정 할 수 있다.
기본 구조
arr.splice(index[, deleteCount, elem1, ..., elemN])- 첫 번째 매개변수는 조작을 가할 첫 번째 요소를 가리키는
인덱스(index)이다. - 두 번째 매개변수는
deleteCount로, 제거하고자 하는 요소의 개수를 나타낸다. elem1, ..., elemN은 배열에 추가할 요소를 나타낸다.
실용코드
let arr = ["a", "b", "c"];
arr.splice(1,2); // -> ["a"]
arr.splice(0,0, "c", "d", "e"); // -> ['c', 'd', 'e', 'a']
arr.splice(-2,2, 1,2); // -> ['c', 'd', 1, 2]위처럼 배열의 모든 값을 자유롭게 수정이 가능하다.
“첫 번째의 값을 기준으로 두 번째 순서까지 제거를 하며, 위 값들을 추가한다.”로 이해를 하면 편할 듯 하다.
splice() 의 두 번째 인수에 0을 사용하면, “첫 번째 인수를 기준으로 0번째 까지 지우겠다.”라는 의미가 되기 때문에 사실상 제거를 하지 않는 의미가 된다. 즉 제거 없이 배열의 중간에 값을 추가하고 싶을 경우에 이처럼 사용하면 된다.
splice()메소드의 첫 번째 인수에는 음수가 올 수 있는데, 배열의 순서는 0을 시작으로 인텍스가 시작하지만 음수가 올 경우 맨 끝을 첫 번째로 정하게 된다. 즉 세 번째 arr.splice를 보게되면, -2라는 값이 오기때문에 "e"가 기준이 된다.
slice
slice() 메소드는 “시작” 인덱스부터 “끝”인덱스 전까지의 요소를 복사한 새로운 배열을 반환한다.
기본구조
arr.slice([start], [end]);- 문자열 매서드
str.slice()와 비슷하게 동작을 한다. arr.slice의 인수에 값을 입력하지 않고 호출시에 동일한 배열을 복사할 수 있다.
concat
기존 배열의 요소를 사용해 새로운 배열을 만들거나 기존 배열에 요소를 추가하고자 할 때 사용한다.
기본 구조
arr.concat(arg1, arg2 ...);배열의 합집합을 만드는 것이라고 보면 될 듯 하다.
인수에는 배열이나 값이 올 수 있는데, 인수 개수에는 제한이 없다. 메소드를 호출하면 arr 에 속한 모든 요소와 arg1 , arg2 등에 속한 모든 요소를 합한 새로운 배열이 반환 된다.
forEach
Array 인스턴스의 forEach() 메서드는 각 배열 요소에 대해 제공된 함수를 한 번씩 실행한다.
기본 구조
arr.forEach(function(item, index, array) {
// 코드 작성
});arr 배열의 item을 각각 출력하며, 이 item 은 array 배열의 index 번째 요소이다.
배열 찾기
indexOf
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf
기본 구조
arr.indexOf(item, from)from부터 시작해서 배열의 item을 찾는다. 발견하면 해당 요소의 인덱스를 반환하고, 발견하지 못하면 -1을 반환한다.
lastIndexOf
기본 구조
arr.lastIndexOf(item, from)indexOf()와 기능은 같으나 item 찾기를 끝에서부터 시작하게 된다. 즉 마지막 인덱스를 시작으로 from까지 item을 찾게 된다.
includes
기본 구조
arr.includes(item, from)작동 방식은 동일하다. 다만 찾았을 경우 true , 없을 경우 false를 반환하게된다.
let arr = [1, 0, false];
console.log( arr.indexOf(0) ); // 1
console.log( arr.indexOf(1) ); // 0
console.log( arr.indexOf(false) ); // 2
console.log( arr.indexOf(ture) ); // -1;- 위 메소드는 항등연산자를 사용하여 비교를 한다.
incluedes는NaN도 정확하게 처리한다는 점에서indexOf,lastIndexOf와 차이가 있다.
find & findIndex
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/find
지금까지는 완전한 배열의 상태에서 조건을 두었다. 하지만 배열의 내부에 객체가 포함될 경우를 배제할 수 없다.
기본 구조
const array = [5, 12, 8, 120, 43];
const found = array.find((item) => item>10);- 함수가 참을 반환하면 탐색이 종료된다. 따라서 종료된 시점의
요소를 반환하게된다. 요소를 찾지 못한경우undefined를 반환한다.
const person = [
{name : "Lio", age : 24},
{name : "Savina", age : 21},
{name : "Brand", age : 19},
];
let student = person.find(user => user.age < 20)
consol.log(student.name) // "Brand"
let student = person.findIndex(user => user.age <20)
console.log(student) // 2find와 동일한 구조이지만, findIndex는 해당 요소의 index를 반환한다.
filter
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
find의 경우 단 하나의 참 값만 나오더라도, 더 이상 탐색 없이 종료가 되기 때문에 복수의 조건을 구하는 경우에는 filter를 사용해야 한다.
filter는 find와 문법이 유사하지만, 참에 해당되는 모든 요소를 반환한다는 차이점이 있다.
참에 해당되는 요소를 반환할 때에 요소들을 담은 배열의 형태로 반환하게 된다.
let results = arr.filter((item, index, arry) => {
// 조건이 참인 요소가 results []에 순차적으로 추가된다.
})조건이 참인 경우 [] 빈 배열을 반환한다.
const person = [
{name : "Lio", age : 24},
{name : "Savina", age : 21},
{name : "Brand", age : 19},
];
let nameIncludesToI = person.filter(user => user.name.includes("i");
nameIncludesToI.forEach(user => console.log(user.name)) // "Lio", Savina"배열의 재정렬 및 변형
map
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
arr.map은 위 메소드들과 다르게 무조건 모든 요소를 순회하며, 각 한번 씩 함수가 실행된다.
let result = arr.map((item, index, arry) => {
// 요소 대신 새로운 값을 반환한다.
})예를들어 person의 배열에 각 객체의 age만을 가진 배열을 만들고 싶을 경우
const person = [
{name : "Lio", age : 24},
{name : "Savina", age : 21},
{name : "Brand", age : 19},
];
let totalAge = person.map(user => user.age) //[24, 21, 19]sort
sort는 배열의 요소를 정렬해준다. 때문에 배열의 자체가 변경되기 때문에 신중하게 사용해야 하는 메소드이다.
메소드를 호출할 경우 재 정렬된 배열이 반환 되지만, 이미 기존의 배열이 수정되었기 때문에 반환 값을 사용하는 경우가 적다.
let arr = ["a", "c", "e", "B", "j"]
arr.sort(); //['B', 'a', 'c', 'e', 'j']sort의 재정렬 기준은 문자열이기 때문에 모든 요소는 문자열로 변경이 된 후 사전편집 순으로 재정렬된다. 때문에 숫자 배열이 있는 경우 숫자순으로 배열이 재 정렬되지 않는다.- 새로운 정렬 기준을 만들기 위해서는
arr.sort()에 함수를 사용해야 한다. 이때 함수의 인수는 반드시 두 개의 값을 비교할 수 있어야한다.
function compareNumeric(a, b) {
if (a > b) return 1;
if (a == b) return 0;
if (a < b) return -1;
}
let arr = [ 1, 2, 15 ];
arr.sort(compareNumeric);
alert(arr); // 1, 2, 15즉 사전 편집순으로 정렬을 원하지 않을 경우, 사용자가 원하는 정렬 기준에 따른 정렬함수 가 필요로하다.
reverse
reverse는 배열의 요소를 역순으로 재정렬시켜주는 매소드이다.
let arr = [1, 2, 3, 4, 5];
arr.reverse();
alert( arr ); // 5,4,3,2,1반환값은 재 정렬된 배열이다.
split & join
split은 문자열을 배열로 나누어주는 메소드이다. join은 반대로 배열을 문자로 합쳐주는 메소드이다.
split(separator)의 인수는 배열에 요소로 나눌 기준을 정한다.
let names = 'Ari, Pize, Alista';
let arr = names.split(", "); // ,를 기준으로 배열을 만든다.
console.log(arr) // ['Ari', 'Pize', 'Alista']split은 두 번째 인수로 숫자를 받을 수 있다. 이 숫자는 배열의 길이를 지정할 수 있는 값이다. 예를 들어 여러 단락으로 나누어진 하나의 문장에 앞에서부터 3개만을 배열로 만들고 싶을 때 두 번째 인수로 3을 입력하면 된다.
let string = "Apple";
let arr = string.split("") // 모든 문자를 하나씩 나눔
console.log(arr) // ['A', 'p', 'p', 'l', 'e']join은 배열을 문자열로 만들어주는 메소드이기 때문에 사용 방법은 split과 동일하다.
let arr = ["a", "p", "p", "l", "e"];
let string = arr.join("")
console.log(string) // "apple"reduce & redduceRight
배열의 요소들을 모두 합하여 return하려면 어떻게 해야 할까?
const arrs = [1, 2, 3, 4, 5];
function sumArray(arr) {
let sum = 0;
for (let item of arr) {
sum += item;
}
return sum;
}
sumArray(arrs) // 15위 형식처럼 복잡한 코드가 생성된다. 이러한 누적계산을 도와주는 메소드가 reduce이다. 의미를 해석해보아도 “바꾸다”이기도 하다.
기본 구조
let value = arr.reduce((accumulator, item, index, array)=>{
// 내부 함수 코드
}, [initial])accumulator: 이전 함수 호출 결과값을 가진다.initial: 함수 최초 호출 시 사용되는 초깃값을 나타냄(option)item: 현재 배열 요소index: 현제 요소의index값array: 함수를 호출한 배열
출처
https://ko.javascript.info/array-methods#ref-923
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array
