자바스크립트 배열

1. 배열 생성

1-1. 기본 생성

예시

 

let fruits = ["사과", "오렌지", "바나나"];

 

1-2. 크기 지정

 

let number = new.Array[5];

console.log(number.length);

 

이렇게 작성하면

5칸짜리의 배열이 생성된다.

 

2. 요소 접근

배열이니 index로 접근

예시

 

console.log(frutis[0]);

 

결과는 사과가 출력됨

 

3. 배열 메서드

3-1. push

기존 배열에 새로운 값을 넣어준다.

예시

 

let fruits = ["사과", "오렌지"];

fruits.push("바나나");

 

이러면 배열 마지막에 바나나가 추가된다.

3-2. pop

마지막 값을 삭제

예시

 

fruits.pop();

 

위에서 다시 생겼던 바나나가 삭제된다.

3-3. shift

첫 번째 값을 삭제

예시 

 

fruits.shift();

 

사과가 삭제된다.

3-4. unshift

반대로 맨 앞에 새 값을 추가한다.

예시

 

fruits.unshift("배");

 

출력하면 맨 앞에 배가 추가된다.

3-5. splice

예시

fruits.splice(1, 1, "망고");

 

해석은 시작하는 위치 1에서 1개를 지우고

그 자리에 망고를 넣으라는 코드이다.

3-6. slice

예시

 

let fruits = ["사과", "오렌지", "바나나"];

let slicedFruits = fruits.slice(1, 2);

console.log(slicedFruits);

 

결과는 오렌지가 출력된다.

해석은 1번째 오렌지부터 2번째 바나나 전까지 잘라서

slicedFruits에 새로 추가하는 코드이다.

 

다음은 조금 어려운 메서드이다.

3-7. foreach

간단하게 말해 반복문

매개변수 안에 function을 넣어 사용하는데 이게 콜백함수이다.

numbers.forEach(function(item){});

예시

 

let numbers = [1,2,3,4,5];

numbers.forEach(function(item){

console.log("item입니다 =>", item);

});

 

실행하면

item입니다 => 1

item입니다 => 2

item입니다 => 3

item입니다 => 4

item입니다 => 5

이렇게 출력된다. 배열 값 5개만큼 반복한 것이다.

3-8. map

예시

 

 = numbers.map(function(item){

return item + 2;

});

console.log(newNumbers);

 

반드시 return문 사용해야 함

map의 역할은 기존 배열을 가공해서 새로운 배열을 생산하기 때문

이러면 출력은 [3, 4, 5, 6, 7] 이렇게 새로 생성된다.

3-9. filter

예시

 

let numbers = [1,2,3,4,5];

let filteredNumbers  = numbers.filter(function(item){

return item === 5

});

l console.log (filteredNumbers);

 

필터링할 조건이 들어간다. 예시로는 조건을 5로 설정했으니

기존 numbers에서 5만 출력된다.

3-10. find

예시

 

let numbers = [1,2,3,4,5];

let result = numbers.find(function(item){

return item > 3;

});

console.log(result);

 

이것도 해당 조건에 맞는 배열의 숫자를 출력한다.

위에 filter와 다른 점은 filter는 해당되는 모든 값을 가져오지만

find는 조건에 해당되는 가장 앞에 있는 값만 출력한다.