[Javascript] 배열과 배열 메소드 / Array & Array Method

📕 Javascript 배열과 배열 메소드

1. 배열 (array) 생성

 

1) 기본적인 배열 생성 방법

• 객체는 그냥 just 나열
• 배열은 index(순서)를 가지고 있다. 0번째부터 시작

대괄호 [ ] : 배열 생성
쉼표(,) : 이용해서 구분

•  

let fruit = ["사과", "바나나", "오렌지"];  
console.log(fruit.length); // 3

2) 크기 지정

let number = new Array(5); 

console.log(number); // <5 empty items>

▶️ 크기가 5인 배열을 만들어줘.

 

2.요소 접근

• 객체에서는 key로 접근
• 배열에서는 index로 접근 : [ ] 대괄호 안에 인덱스 값 입력

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

console.log(fruit[0]); // 사과  
console.log(fruit[1]); // 바나나  
console.log(fruit[2]); // 오렌지

 

3. 배열 메소드

1) push()

: 배열 마지막(끝)에 요소 추가하기

let fruits = ["사과", "바나나"];  
console.log(fruits); // [ '사과', '바나나' ]

fruits.push("오렌지");  
console.log(fruits); //  [ '사과', '바나나', '오렌지' ]

2) pop()

: 배열에 있던 마지막 요소 삭제하기

let fruits = ["사과", "바나나"];  
console.log(fruits); // [ '사과', '바나나' ]

fruits.pop();  
console.log(fruits); //[ '사과' ]

3) shift()

: 첫 번째 요소 삭제하기

let fruits = ["사과", "바나나","키위"];  
console.log(fruits); // [ '사과', '바나나', '키위' ]

fruits.shift();  
console.log(fruits); // [ '바나나', '키위' ]

4) unshift()

: 맨 앞자리에 새로운 것을 추가

let fruits = ["사과", "바나나","키위"];  
console.log(fruits); // [ '사과', '바나나', '키위' ]

fruits.unshift("포도");  
console.log(fruits); // [ '포도', '사과', '바나나', '키위' ]

5) splice()

: N 번째 요소부터 M개 만큼 삭제 후 -> NEW name (추가하고자 하는 요소)로 갈아 끼워줘!

fruits.splice(N, M, "NEW name")  // 기본 구조

let fruits = ["사과", "바나나","키위"];  
console.log(fruits); // [ '사과', '바나나', '키위' ]

fruits.splice(1,1,"포도");  
console.log(fruits); // [ '사과', '포도', '키위' ]

▶️ [1] 번째 요소부터 1개 만큼 삭제 후("바나나") -> "포도"로 갈아 끼워줘!

6) slice()

: N 번째 요소부터 M 번째 요소 전까지 새로운 배열로 만들어줘!

fruits.slice(N, M)  // 기본 구조

let fruits = ["사과", "바나나","키위"];  
console.log(fruits); // [ '사과', '바나나', '키위' ]

let slicedFruits = fruits.slice(1,2);  
console.log(slicedFruits); // ['바나나']

▶️ [1] 요소부터 [2]요소 전까지 새로운 배열로 만들어서 반환해줘.

📌 forEach(), map(), filter(), find()
: 콜백 함수를 실행

** 콜백 함수 : 매개변수 자리에 함수를 넣는 것

• 기본구조

  변수이름.메소드이름(function(){});

7) forEach()

: 배열 내 모든 요소에 대하여 콜백 함수 실행

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


numbers.forEach(function(item){  
console.log('item입니다 =>', item);  
});

▶️ 실행 시,
item입니다 => 4
item입니다 => 1
item입니다 => 3
item입니다 => 2
item입니다 => 5

✅ 모든 요소에 대해서 반복하여 함수 실행된다.

8) map()

: 기존에 있었던 배열을 가공해서 새로운 배열을 생산해 내는 것.

• map에 들어가는 function은 "반드시 return문"을 가져야 한다.
• 항상 원본 배열의 길이 만큼이 그대로 return 된다!

let newNumbers = numbers.map(function(item){  
    return item * 2;  
})  
console.log(newNumbers); // [8,2,6,4,10]

• return 없이 실행하면, 길이만큼 undefined 값이 들어간 채로 나온다.

let newNumbers = numbers.map(function(item){  
})  
console.log(newNumbers); // [ undefined, undefined, undefined, undefined, undefined ] : 길이는 유지

9) filter()

: filtering 할 조건이 들어간다. 조건이 true에 해당하는 값만 새로운 배열로 반환.

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

let filteredNumbers = numbers.filter(function(item){  
    return item !== 5;  
})  
console.log(filteredNumbers); // [4,1,3,2]

10) find()

: 조건에 맞게 콜백 함수 실행 후, 결과가 true인 첫 번째 요소 반환.

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

let result = numbers.find(function(item){  
return item > 3;  
})  
console.log(result); // 4