배열, 배열 메소드

1.배열

- 여러 개의 값을 저장하고 관리할 수 있다.

1) 기본적인 배열 생성

// 1-1. 기본 생성

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

//                    0           1             2  

2) 배열의 크기 지정

// 1-2 크기 지정

let numbers = new Array(5); // 크기가 5인 5개인 요소를 가지고 있는 배열

크기가 5인, 5개인 요소를 가지고 있는 배열

 

2. 배열의 요소 접근

해당하는 배열의 [index] 값을 넣어 확인

2. 요소 접근

console.log(fruits[0]);   // "사과"

console.log(fruits[1]);   // "바나나"

console.log(fruits[2]);   // "오렌지"

3. 배열 메소드

1) push() 메소드

배열 마지막에 더하는 메소드

// 3-1 push 메소드 마지막에 더하는 메소드

fruits = ["사과", "바나나"];

console.log(fruits); // [사과, 바나나]

fruits.push("오렌지");

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

2) pop() 메소드

배열 마지막이 없어지는 메소드

// 3-2 pop 메소드 맨 뒤에가 없어짐

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

fruits.pop();

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

3) shift 메소드

배열 맨 앞이 없어지는 메소드

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

fruits.shift();

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

4) unshift 메소드

// 3-4 unshift 메소드 맨 앞에 추가해주는 메소드

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

fruits.unshift("사과");

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

5) splice 메소드 : 배열의 요소를 삭제하거나, 삭제 후 추가할 수 있다.

// 3-5. splice() 메소드  배열의 요소를 삭제하거나, 새로운 요소를 추가할 수 있다.

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

fruits.splice(1, 1, "포도");

console.log(fruits);   // ["사과", "포도", "오렌지"]

6) slice 메소드 : 배열의 일부분은 새로운 배열로 만든다.

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

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

console.log(slicedFruits);   // ["바나나"]

7) forEach 메소드 : 매소드 배열 내 모든 요소를 출력한다.

// 3-7. forEach() 메소드 배열 내 모든 요소를 출력한다.

// foreach 메소드는 배열의 각 요소에 대해 콜백 함수를 실행합니다.

// 매개변수 자리에 함수를 넣는것 = Callback 함수

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

numbers.forEach(function(number) {

  console.log(number);

});

https://www.freecodecamp.org/korean/news/javascript-foreach-how-to-loop-through-an-array/

JavaScript에서 forEach 함수를 사용해 배열 순회하기

8) map 메소드

기존에 있던 배열을 가공해서 새로운 배열을 만들어낸다.

// 3-8. map() 메소드

// 기존에 있던 배열을 가공해서, 새로운 배열을 만들어낸다.

// => 따라서 새로운 배열 지정과, return이 필수적이다.

let items = [10, 2, 3, 4, 5];

let newNumbers = items.map(function(items) {

  return items * items;

});

console.log(newNumbers);   // [1, 4, 9, 16, 25]

 

https://www.freecodecamp.org/korean/news/javascript-map-method/

JavaScript Map - JS.map() 함수 사용 방법 (배열 메소드)

9) filter 메소드

조건에 따라 만족한 값만 새로운 배열이 들어간다.

// 3-9. filter() 메소드

// return이 필요한다.

// 조건에 따라 만족한 값만 새로운 배열이 들어간다.

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

let evenNumbers = numbers.filter(function(number) {

  return number % 2 === 0;

});

console.log(evenNumbers);   // [2, 4]

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Array.prototype.filter() - JavaScript | MDN

 

10) reduce 메소드

reduce = 줄이다.

// 3-10 reduce 메소드

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

1. callback function

accumulator - accumulator는 callback함수의 반환값을 누적합니다.

currentValue - 배열의 현재 요소

index(Optional) - 배열의 현재 요소의 인덱스

array(Optional) - 호출한 배열

initialValue(Optional)

최초 callback함수 실행 시 accumulator 인수에 제공되는 값,

초기값을 제공하지 않을경우 배열의 첫 번째 요소를 사용하고, 빈 배열에서 초기값이 없을 경우 에러가 발생합니다.

let sum = numbers.reduce(function(accumulator, currentValue) {

  return accumulator + currentValue;

}, 0);

console.log(sum);

const number = [1, 2, 3, 4, 5];

function reducer(accumulator, currentValue, currentIndex) {

  const result = accumulator + currentValue;

  console.log('accumulator = ', accumulator, ', currentValue = ', currentValue, ', currentIndex = ', currentIndex, ', result = ', result);

  return result;

}

// initialValue가 없을 경우

number.reduce(reducer);

// 동작

// accumulator = 1, currentValue = 2, currentIndex = 1, result = 3

// accumulator = 3, currentValue = 3, currentIndex = 2, result = 6

// accumulator = 6, currentValue = 4, currentIndex = 3, result = 10

// accumulator = 10, currentValue = 5, currentIndex = 4, result = 15

// initialValue가 있을 경우

number.reduce(reducer, 0);

// 동작

// accumulator = 0, currentValue = 1, currentIndex = 0, result = 1

// accumulator = 1, currentValue = 2, currentIndex = 1, result = 3

// accumulator = 3, currentValue = 3, currentIndex = 2, result = 6

// accumulator = 6, currentValue = 4, currentIndex = 3, result = 10

// accumulator = 10, currentValue = 5, currentIndex = 4, result = 15

const friends = [

    {

      name: '양주진',

      age: 32,

      job: '코인러',

      married: false,

    },

    {

      name: '오영제',

      age: 32,

      job: '랩퍼',

      married: false,

    },

    {

      name: '서준형',

      age: 32,

      job: '2년차 유부남',

      married: true,

    }

];

 

  // initialValue 설정X

const ageSum = friends.reduce((accumulator, currentObject) => {

  return accumulator + currentObject.age;

},0);

console.log(ageSum)

 

  첫번째 콜백 실행

  accumulator = { name: '양주진', age: 32, job: '코인러', married: false }

  currentObject = { name: '오영제', age: 32, job: '랩퍼', married: false }

  currentObject.age = 32

  accumulator + currentObject.age = TypeError

  따라서 initialValue를 반드시 넣어야 한다.

좀 더 쉽게 알기 위해서는 

https://bigtop.tistory.com/69

[JavaScript] 자바스크립트 reduce 메서드 이해하기

 

 

11) find 메소드

//3-11. find() 메소드

// filter랑 상당히 유사, 그러나 해당하는 조건 중 그 결과에서 첫번째 요소만 뽑아낸다.

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

let foundNumber = numbers.find(function(number) {

  return number > 3;

});

console.log(foundNumber);   // 4

 

12) some 메소드

// 3-12. some() 메소드

// 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소가 하나라도 있는지 확인

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

let hasEvenNumber = numbers.some(function(number) {

  return number % 2 === 0;

});

console.log(hasEvenNumber);   // true

13) every 메소드

// 3-13. every() 메소드

// some과는 반대로, 모든 요소가 true일때 만 확인 가능

let numbers = [2, 4, 6, 8, 10];

let isAllEvenNumbers = numbers.every(function(number) {

  return number % 2 === 0;

});

console.log(isAllEvenNumbers);   // true

https://paperblock.tistory.com/67

[ES5] 배열 메소드 : every(), some()

 

14) sort 메소드

//3-14. sort() 메소드

// 순서대로 정렬해주는 메소드

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

numbers.sort(function(a, b) {

  return a - b;

});

console.log(numbers);   // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Array.prototype.sort() - JavaScript | MDN

15) reverse 메소드

//3-15 reverse() 메소드 역순으로 정렬

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

numbers.reverse();

console.log(numbers);   // [5, 4, 3, 2, 1]