프론트엔드 스쿨 5기 TIL - 4월 4일 - Array (1)

크롱·2023년 4월 5일

JavaSrcipt

목록 보기

10/53

🌈 Array

베열은 항상 const로 설정
const는 값의 변화가 안된다고 하지 않앗나?
const arr = [10, 20, 30] 메모리 주소는항상 a1
안에 10,20의 값이 변해도 괜춘. 메모리 주소는 변하지 않으므로

<script>
  const arr = [10, 20, 30];
  arr[0] = 100;

  console.log(arr); // [ 100, 20, 30 ]
</script>

💡 배열 생성 new Array

<script>

let arr3 = new Array(4, 5, 6);
let arr4 = new Array(3);

console.log(arr3); // [ 4, 5, 6 ]
console.log(arr4); // [ <3 empty items> ]

</script>

💡 대괄호 표기법과 점 표기법의 차이

숫자 값은 대괄호로 밖에 호출할 수 없고,
문자로 입력된 값은 점(.)으로 호출할 수 있다.

<script>
const arr = [10, 20, 30];

console.log(arr[1]); // 20
// console.log(arr.1); // ERROR

console.log(arr["length"]); // 3
console.log(arr.length); // 3

arr.length = 10;
console.log(arr); // [ 100, 20, 30, <7 empty items> ]
</script>

💡 프로퍼티 추가

<script>
  const arr = [1,2,3];
  
  arr["김멋사"] = 100;
  arr.박멋사 = 1000;
  
  console.log(arr);   
  // [1, 2, 3, 김멋사: 100, 박멋사: 1000] length.에는 포함안됨! length는 여전히 3
</script>

💡 매트릭스 배열

<script>
  const arr6 = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
  ];

  console.log(arr6[1]); // [ 4, 5, 6 ]
  console.log(arr6[1][2]); // 6
</script>

💡 .push & .pop 과 .unshift & .shift

.push: 배열의 뒤에 값을 추가한다.
.pop: 배열의 마지막 값을 꺼내고, 그 값을 반환한다.

.unshift: 배열의 앞에 값을 추가한다.
.shift: 배열의 앞에서 값을 꺼내고, 그 값을 반환한다.

<script>
//push 실무예제
let tableBodyData = []
     for (const iterator of data) {
         tableBodyData.push(`          
             <tr>
                 <td>${iterator['a']}</td>
                 <td>${iterator['b']}</td>
                 <td>${iterator['c']}</td>
                 <td>${iterator['d']}</td>
                 <td>${iterator['e']}</td>
                 <td>${iterator['f']}</td>
            </tr>
         `)
     }
     document.querySelector('#dataTable > tbody').innerHTML = tableBodyData.join('')

</script>

💡 .splice

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

<script>
// arr.splice(start, deleteCount, items)
const arr = [1, 2, 3];
arr.splice(1, 0, 4); // arr에 1번째에, 아무것도 삭제하지 않고, 4를 넣겠다.
console.log(arr)    // [1, 4, 2, 3]


const arr = [1, 2, 3];
arr.splice(1, 0, ...[10, 20, 30]); 
console.log(arr)  // [1, 10, 20, 30, 2, 3]

const arr = [1, 2, 3];
arr.splice(1, 0, 10, 20, 30); // arr에 1번째에, 아무것도 삭제하지 않고, 10, 20, 30를 넣겠다.

//// 문제
const arr = [10, 20, 30, 40, 50]
const x = [1, 2, 3]
// 만들고 싶은 값 == [10, 1, 2, 3, 20, 30, 40, 1, 2, 3, 50]
// splice만 사용
arr.splice(1, 0, ...x);
arr.splice(7, 0, ...x);

const arr = [10, 20, 30, 40, 50]
arr.splice(2, 1, 5); // arr에 2번째에, 1개를 삭제하고, 5를 넣는다.
console.log(arr); // [10, 20, 5, 40, 50]

// arr.splice().splice() // 메서드 체이닝이 안되는 이유는  splice는 arr가 아니라 삭제된 값을 반환합니다.


const arr = [10, 20, 30, 40, 50]
arr.splice(2, 2);
// [30, 40]  2번째 인덱스에서 값 2개를 삭제합니다. 삽입되는 값은 없습니다.
console.log(arr) // [10, 20, 50]

const arr = [10, 20, 30, 40, 50]
arr.splice(1) // 1번째 부터 싹다 삭제 //[20, 30, 40, 50]
console.log(arr) // [10]
</script>

💡 .slice

slice() 메서드는 어떤 배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.

<script>
const arr = ['apple','banana','cherry','durian','elderberry']

console.log(arr.slice(1,4)) // ['banana','cherry','durian']
console.log(arr) // 원본은 안바껴요  ['apple','banana','cherry','durian','elderberry']

arr.slice(1) // ['banana', 'cherry', 'durian', 'elderberry']
</script>

💡 .forEach

forEach() 메소드는 배열의 각 요소에 대해 주어진 함수를 실행합니다. 이 때, 함수는 인자로 배열 요소, 인덱스를 받습니다. forEach() 메소드는 배열의 요소를 순환하면서 해당 요소를 함수로 전달하고, 이 함수가 각 요소에 대해 실행됩니다.

<script>
const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// Expected output: "a"
// Expected output: "b"
// Expected output: "c"

</script>

<script>
const arr = [10, 20, 30, 40, 50]
arr.forEach(function (item, index) {
    console.log(index, item)
    console.log('hello')
    console.log('world')
})
//
0 10
hello
world
1 20
hello
world ...
</script>

또다른 예시
0부터 99를 포함한 배열을 만들고 싶어용

<script>
const arr = Array(100).fill(0)
const arr2 = []

arr.forEach(function(item, index){
     arr2.push(index)
})

console.log(arr2) // [0, 1, 2, 3, 4, ''' 98, 99] length: 100

근데 저는 1부터 100까지 있었으면 좋겠읍니다

// 같은 코드1 (이름이 없는 함수 사용)
// arr.forEach(function(item, index){
//     arr2.push(index+1)
// })

// 같은 코드2 (화살표 함수 사용)
// arr.forEach((item, index) => {
//     arr2.push(index+1)
// })

// 같은 코드3 (중괄호를 생략한 화살표 함수 사용, 주로 이렇게 실무에서 사용합니다.)
// arr.forEach((item, index) => arr2.push(index+1))


</script>

실무코드

<script>
 fetch('api주소어쩌구')
    .then(data => data.json())
    .then(data => {
        data.forEach(item => {
            console.log(item.thumbnailImg)
            console.log(item.productName)
            console.log(item.price)
        })
    })

</script>

💡 map

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.
데이터를 뽑으려고 많이 사용
map은 forEach와 다르게 새로운 배열을 생성합니다.

<script>
  const array1 = [1, 4, 9, 16];

  // Pass a function to map
  const map1 = array1.map(x => x * 2);

  console.log(map1);
  //  Array [2, 8, 18, 32]
</script>

<script>
// 같은 코드 1
const arr = Array(100).fill(0)
arr.map((v, i) => i)

// 같은 코드 2
const arr = Array(100).fill(0)
arr.map(function (v, i) {
    return i
})

// 같은 코드 3
const arr = Array(100).fill(0)
arr.map((v, i) => {
    return i
})

// 같은 코드 4
const arr = Array(100).fill(0)
function hojun(v, i) {
    return i
}
arr.map(hojun)

</script>

📌 실무 팁! 중요 🤩

전개 구문(Spread Syntax) 을 통한 복사

깊은 복사가 이뤄져 원본(target) 값을 변경하지 않음.
단, 전개 구문을 사용한 경우 2차원 배열 이상의 값은 Deep Copy가 이뤄지지 않음.

<script>
  let tip1 = [1, 2, 3, 4, 5]

  // 원본 수정 없이 [1, 2, 3, 4] 값과 [5]라는 값을 얻어내고 싶을 때
  console.log([...tip1].pop()) // [5]
  console.log(tip1)            // [1, 2, 3, 4, 5]

  let tip2 = [...tip1]

  console.log(tip2)            //  [1, 2, 3, 4, 5]
  console.log(tip2.pop())     //   [5]
  console.log(tip2)          //   [1,2,3,4]
  console.log(tip1)         //    [1, 2, 3, 4, 5]
</script>

flat - 다차원 배열에서 최댓값, 최솟값

<script>
  const tip5 = [
      [1, 2, 3],
      [4, 5, 6],
      [7, 8, 9]
  ]

  // 다차원 배열에서 최솟값, 최댓값 찾기
  console.log(tip5.flat())               //[1,2,3,4,5,6,7,8,9]
  console.log(...tip5)                   // [1,2,3] [4,5,6] [7,8,9]
  console.log(...tip5.flat())            //1 2 3 4 5 6 7 8 9
  console.log(Math.max(...tip5.flat())) // 9
  console.log(Math.min(...tip5.flat()))  // 1
</script>

flat

<script>
  const tip6 = [
      [[1, 2], [1, 2], [1, 2]],
      [[1, 2], [1, 2], [1, 2]],
      [[1, 2], [1, 2], [1, 2]]
  ]

  console.log(tip6.flat()) // [ [1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2] ]
  console.log(tip6.flat(1)) // [ [1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2] ]
  console.log(tip6.flat(2)) // [1,2,1,2,1,2 ....]
  
  console.log(tip6.flat(Infinity)) // 다 펼쳐지면 스톱 // [1,2,1,2,1,2 ....]
  
  console.log(...tip6.flat(Infinity)) // 1,2,1,2,...
</script>

.fill 과 .from

<script>
const tip7 = new Array(10).fill(0) // Array(10).fill(0)도 됩니다.
const tip8 = Array.from('hello world')
 
console.log(tip7) //  [0,0,0,0,0,0,0,0,0,0]
console.log(tip8) // ["h","e","l","l","o"," ","w","o","r","l","d"]

'.'.repeat(100).split('.')// 권장하진않습니다. from을 사용하세요
</script>

.slice 와 .splice

<script>

  let tip9 = [1, 2, 3, 4, 5]
  console.log([tip9.slice(0, 2), 1000, tip9.slice(2, 5)]) 
  // [ [1,2] ,1000, [3,4,5] ]
  console.log([...tip9.slice(0, 2), 1000, ...tip9.slice(2, 5)]) 
  // [1, 2, 1000, 3, 4, 5]
  console.log(tip9) // [1,2,3,4,5] 원본은안바뀌는 slice


  let tip10 = [1, 2, 3, 4, 5]
  tip10.splice(2, 0, 1000) 
  console.log(tip10) //[1, 2, 1000, 3, 4, 5]
</script>

.map 맛보기

꼭 return 을 넣어주자~!

<script>
  const tip11 = Array(100).fill(0).map((v, i) => i + 1)
  console.log(tip11) // [1,2,3,....100]
</script>

<script>
  const tip12 = [
      {
          "_id": "642ba3980785cecff3f39a8d",
          "index": 0,
          "age": 28,
          "eyeColor": "green",
          "name": "Annette Middleton",
          "gender": "female",
          "company": "KINETICA"
      },
      {
          "_id": "642ba398d0fed6e17f2f50c9",
          "index": 1,
          "age": 37,
          "eyeColor": "green",
          "name": "Kidd Roman",
          "gender": "male",
          "company": "AUSTECH"
      },
      {
          "_id": "642ba39827d809511d00dd8d",
          "index": 2,
          "age": 39,
          "eyeColor": "brown",
          "name": "Best Ratliff",
          "gender": "male",
          "company": "PRISMATIC"
      }
  ]



  //같은코드 두개
  const ages1 = tip12.map((item) => item.age);

  const ages2 = tip12.map((item) => {
      return item.age
  }); 

  console.log(ages1); // [28,37,39]
  console.log(ages2); // [28,37,39]
</script>

크롱

👩‍💻안녕하세요🌞

다음 포스트