🌟 220712.TIL

배열 자르고 토막내기

---

1. pop

   let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
   fruits.pop();
   
   fruits = ['apple', 'banana', 'grapes', 'mango'];

배열 맨 뒤의 값을 삭제

2. push

    let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
    fruits.push('melon');
    
    fruits = ['apple', 'banana', 'grapes', 'mango', 'orange', 'melon'];

배열 맨 뒤에 값을 삽입

3. shift

    let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
    fruits.shift();
    
    fruits = ['banana', 'grapes', 'mango', 'orange'];

배열 맨 앞의 값을 삭제

4. unshift

let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
fruits.unshift('melon');

fruits = ['melon', 'apple', 'banana', 'grapes', 'mango'];

배열 맨 앞에 값을 삽입

5. splice

let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
fruits.splice(1, 1, 'melon'); // 1번째 인덱스에서 1개를 제거하고 'melon'을 추가

fruits = ['apple', 'melon', 'grapes', 'mango', 'orange']

index(첫번째 파라미터)부터 제거할 요소 갯수(두번째 파라미터) 까지 삭제하고
추가요소(세번째 파라미터)를 삽입
주의할 점은 첫번째 파라미터는 배열의 위치이지만 두번째 파라미터는 요소 개수

0713 추가

//변수에 할당할 때
let array1 = fruits.splice(3);
array1 = ['mango', 'orange']
fruits = ['apple', 'banana', 'grapes']
// 자른 값이 저장된다
// 또한 음수를 파라미터로 지정하면
let array2 = fruits.splice(-1,1)
array2 = ['orange']
fruits = ['apple', 'banana', 'grapes', 'mango']
// 뒤에서 부터 저장이 된다

6. slice

    let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
    let fruitsArray = fruits.slice(1, 2);
    
    fruitsArray = ['banana']

startindex(첫번째 파라미터) 부터 endindex(두번째 파라미터) 까지
기존 배열에 영향을 주지 않는 새로운 배열을 생성
주의할 점은 두번째 파라미터 직전까지 할당하기 때문에
위에 코드처럼 slice(1,2)를 했지만 ‘banana’ 만 출력되는 모습

7. reverse

let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
fruits.reverse();
= (5) ['orange', 'mango', 'grapes', 'banana', 'apple']

함수의 순서를 거꾸로 원본 배열을 변경한다

8. concat

    let array1 = ['a', 'b', 'c'];
    let array2 = ['d', 'f', 'g'];
    let array3 = array1.concat(array2);
    array3 = ['a', 'b', 'c', 'd', 'f', 'g']

기준 배열에 대상 배열을 병합하여 기존 배열에 영향을 주지 않는 새로운 배열을 생성

9. every & some

    let array = [1,2,3,4,5,6,7,8,9];
    let even = e => e % 2 === 0;
    array.every(even) = false;
    array.some(even) = true;

둘 다 boolean 값을 반환
every 는 배열이 함수의 조건 중 false 가 단 하나라도 있다면 false를 출력하고 전부 true 면 true
some 은 배열이 함수의 조건 중 true 가 단 하나라도 있다면 true를 출력하고 전부 false 면 false

10. filter

    // filter 로 배열에서 짝수만 골라내보자
    // 방법 1
    let array = [1,2,3,4,5,6,7,8,9];
    let filterArray = array.filter(e => e % 2 === 0);
    filterArray = [2, 4, 6, 8]
    
    // 방법 2
    let array = [1,2,3,4,5,6,7,8,9];
    function even(e) {
        return e % 2 === 0;
    }
    let filterArray = array.filter(even);
    filterArray = [2, 4, 6, 8]
    
    // 배열에서 어떤 특정 값을 가진 배열만 골라내보자
    // 올해 서른인 사람을 골라볼까 ?
    let array = [
      { name: 'merry', age: '30'},
      { name: 'jane', age: '29'},
      { name: 'joon', age: '30'},
      { name: 'eli', age: '27'},
      { name: 'bob', age: '25'}
    ];
    let thirtyYearsOld = array.filter(e => e.age === '30');
    
    thirtyYearsOld
    (2) [{…}, {…}]
    	0: {name: 'merry', age: '30'}
    	1: {name: 'joon', age: '30'}
    	length: 2
    	[[Prototype]]: Array(0)

배열을 순서대로 불러 각 요소에 대해 callback 함수을 실행하고
결과가 true인 요소들만으로 이루어진 새로운 배열을 반환

11. forEach & map

    // 기존 배열에 5씩 더하기
    let array = [1, 2, 3, 4, 5];
    
    array.forEach( (m,n) => {
      array[n] = m + 5
    });
    
    array
    (5) [6, 7, 8, 9, 10] // 사용에 주의할 것
    
    // 기존 배열에 5씩 더해서 새로운 배열을 만들기
    let array = [1, 2, 3, 4, 5];
    
    let mapArray = array.map( e => {
      return e + 5;
    });
    
    mapArray
    (5) [6, 7, 8, 9, 10]

forEach 와 map 도 filter 처럼 배열을 순서대로 불러 callback 함수를 실행하는 것은 같다
차이점은 수정된 배열을 리턴(Return)하는지 여부
callback 함수 실행 후 새로운 배열을 return 받고싶다면 map
기존배열을 가공하여 평균이나 합산을 구하고 싶다면 forEach

조금 이해하기 힘들었던 개념

forEach 를 사용할때는 얇은 복사 가 수행되어 기존의 배열이 수정되므로 주의해야 한다
얇은 복사는 실제 값을 복사한게 아닌 메모리의 주소를 복사한 것으로 참조된 실제 값은 같다

...
🧐🧐🧐🧐🧐🧐🧐🧐🧐🧐

---

평가

배열을 아예 모르는건 아니었는데
모르는게 아닌게 아니었던 것 같다 😇