TIL 05 에서는 Array (배열)에 대해 배우고 정리.
Array에서 요소를 수정, 추가, 삭제 등 의 코드를 배워보자!
🧐🧐🧐 🤨

✏️ 자바스크립트 / TIL 05

• Array

1. Array란
2. 배열에 데이터 저장하기
3. 배열 안의 배열
4. 배열 요소 접근
5. 배열 요소 수정
6. 다차원배열 접근
7. slice
8. splice
9. slice 와 splice의 차이점
10. filter
11. concat
12. concat응용
13. Populating
14. Array.push()
15. Array.pop( )
16. Array.shift( )

---

📒 Array

📌01. Array란

하나의 변수에 여러개의 데이터 (값)을 할당하고 싶다면 어떻게 해야할까?
그럴 때 사용하는 자료형(데이터형태)이 바로 배열(Array) 이다.
배열은 []를 이용해 데이터를 표현한다.
Let arr = [];
비어있는 대괄호를 변수에 할당하면, 할당된 변수는 배열 데이터를 가지고 있는 변수가 된다.
하지만, 배열에 데이터가 없기때문에 비어있는 배열 데이터이다.
비어있는 데이터를 채우는 방법은
Let arr = [10];
원하는 데이터를 대괄호 안에 넣어준다.
만약 데이터가 2개 이상일 때는
Let arr = [10,20];
콤마(,)로 구분해서 데이터를 넣어준다.
배열은 개수 제한이 없으며 자바스크립트에서 사용할 수 있는 모든 데이터를 다 포함 할 수 있다.

배열(array)이란?
자바스크립트에서 배열(array)은 이름과 인덱스로 참조되는 정렬된 값의 집합으로 정의된다.
배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 합니다.
✅ let myArray = [19, 14, 'good', false] ➡️ 요소 (element)
✅ let myArray = [19, 14, 'good', false] ➡️ [0, 1, 2, 3] ➡️ 순서(index)

배열(array)의 특징
1. 배열 요소의 타입이 고정되어 있지 않으므로, 같은 배열에 있는 배열 요소끼리의 타입이 서로 다를 수도 있습니다.
2. 배열 요소의 인덱스가 연속적이지 않아도 되며, 따라서 특정 배열 요소가 비어 있을 수도 있습니다.
3. 자바스크립트에서 배열은 Array 객체로 다뤄집니다.

📌02. 배열에 데이터 저장하기

JavaScript에서는 배열(Array)을 통해 여러개의 데이터를 한 곳에 저장할 수 있습니다. 배열은 대괄호로 감싸여져 있으며, 데이터의 요소와 요소는 쉼표로 구분합니다.

let sandwich = ["peanut butter", "jelly", "bread"];

• Assignment

myArray 배열을 만들어주세요.
makeArray 함수의 리턴값은 ["wecode", 2020] 가 되어야 합니다.

function makeArray() {
  // write your code below
let myArray = ["wecode", 2020] 
  
  // Do not change code below
  return myArray;
}
console.log(makeArray())
module.exports = { makeArray }

// -> [ 'wecode', 2020 ]

📌03. 배열 안의 배열

아래와 같이 배열 안에는 또 다른 배열이 요소로 포함될 수 있습니다.

[["Bulls", 23], ["White Sox", 45]]

이와 같은 형태의 배열을 다차원배열(multi-dimensional array)이라고 부른다.

• Assignment

myArray 배열을 만들어주세요.
함수의 리턴값은 [["becoming", 29], ["developers", 30]] 가 되어야 합니다.

function multiArray(){
  // write your code below
  let myArray = [["becoming", 29], ["developers", 30]]
  
  // do not change code below
  return myArray
}
console.log(multiArray())
module.exports = { multiArray }

// -> [ [ 'becoming', 29 ], [ 'developers', 30 ] ]

📌04. 배열 요소 접근

우리는 인덱스(index)를 사용해 배열 안의 데이터에 접근할 수 있습니다.

let array = [50,60,70];
array[0]; // equals 50
array[1]; // equals 60

• Assignment

변수 firstValue를 선언해주세요.
firstValue의 값은 배열 myArray의 첫 번째 값입니다.

function arrayIndex() {
  // do not change your code here
  const myArray = [50, 60, 70];
  
  // write your code below
firstValue = myArray[0];

  // do not change your code here
  return firstValue;  
}
console.log(arrayIndex())
module.exports = { arrayIndex }

/// -> 50

📌05. 배열 요소 수정

문자열 타입의 데이터와 달리 배열의 요소는 변할 수 있으면 쉽게 접근하여 수정할 수 있습니다.

let ourArray = [50,40,30];
ourArray[0] = 15; // --> ourArray equals [15,40,30]

• Assignment

myArray 배열의 1번 인덱스 요소의 값을 72로 바꿔주세요.

// Assignment - 다음 함수 안에 코드를 작성하시면 됩니다.
function modifyArray() {
  // 아래의 코드를 수정하지 마세요.
  let myArray = [18,64,99];
 
  // 아래에 코드를 작성해주세요
  let first = myArray[1]
  myArray[1] = 72
 
  // 아래의 코드를 수정하지 마세요.
  return myArray;
}
console.log(modifyArray())
module.exports = { modifyArray }

// -> [ 18, 72, 99 ]

📌06. 다차원배열 접근

배열은 또 다른 배열을 요소로 포함할 수 있다는 사실 기억하시나요?
위와 같은 형태의 배열을 다차원배열 (multi-dimensional array) 이라고 한다는 것도 배웠습니다.
다차원배열의 데이터는 아래와 같이 접근할 수 있습니다.

let arr = [
  [1,2,3],
  [4,5,6],
  [7,8,9],
  [[10,11,12], 13, 14]
];
arr[3]; // equals [[10,11,12], 13, 14]
arr[3][0]; // equals [10,11,12]
arr[3][0][1]; // equals 11

• Assignment

bracket notattion을 이용하여 myData의 값이 8이 될 수 있도록 7번째 줄 코드를 수정해주세요.

// Assignment - 다음 함수 안에 코드를 작성하시면 됩니다.
function accessArray() {
  // 아래의 코드를 수정하지 마세요.
  let myArray = [[1,2,3], [4,5,6], [7,8,9], [[10,11,12], 13, 14]];

  // 아래에 코드를 수정해주세요.
  let myData = myArray[2][1]
 
  // 아래의 코드를 수정하지 마세요.
  return myData;
}
console.log (accessArray())
module.exports = { accessArray }

// -> 8

📌07. slice

slice 메서드는 배열 내의 특정한 요소의 index 범위에 따라 새로운 배열을 리턴합니다.
splice 메서드와는 다르게 slice 메서드는 원본 배열을 변형시키지 않습니다.
그렇기 때문에 이 메서드를 사용할 때는 slice 메서드를 적용한 새로운 변수를 선언해주어야 합니다.

slice( start , end )

위의 slice( start , end ) 에서는 인자 2개가 들어갔지만, slice 메서드는 필요에 따라 인자를 최소 1개만 쓸 수도 있습니다.
• 첫번째 인자 : 배열의 index의 시작점
• 두번째 인자 : 배열의 index의 끝점
예를 들어, [1,2,3,4,5] 라는 배열이 있을 때, 숫자 2~4까지만 남기고 싶을땐 다음과 같이 메서드를 활용하시면 됩니다.

let nums = [1,2,3,4,5]
let nums_new = nums.slice(1,4)
console.log(nums) // [ 1, 2, 3, 4, 5 ]
console.log(nums_new) // [ 2, 3, 4 ]

콘솔창을 확인해보면 시작점인 index가 1인 요소부터 끝점인 index가 4인 요소까지를 포함해 2,3,4를 담은 배열을 리턴합니다.
slice 메서드를 사용한 이후에 원본 배열인 nums를 콘솔창에서 확인해보면 변함없는 것을 확인할 수 있습니다.
그렇기 때문에 slice를 사용할 때는 꼭 새로운 변수명을 할당해주어야 합니다.
첫번째 인자에 음수가 들어가는 경우도 있습니다.

let nums = [1,2,3,4,5]
let nums_new = nums.slice(-2)
console.log(nums) // [ 1, 2, 3, 4, 5 ]
console.log(nums_new) // [ 4, 5 ]

음수가 들어갈 경우 끝에서부터 해당하는 숫자 만큼의 요소를 배열에 담아 리턴하게 됩니다.

• Assignment

foodBox라는 배열이 있습니다. foodBox의 요소가 과일로만 이루어질 수 있도록 slice 메서드를 활용해 코드를 작성해주세요.

findFruits(['🍕', '🍤','🍇' ,'🥝','🍒','🍉','🍗', '🍟' ])
// 위의 코드를 실행하면 다음과 같은 결과가 나옵니다.
// [ '🍇', '🥝', '🍒', '🍉' ]

const findFruits = () => {
  let foodBox = ['🍕', '🍤','🍇' ,'🥝','🍒','🍉','🍗', '🍟' ];
  let fruitBox = foodBox.slice(2,6)
  return fruitBox
}
console.log (findFruits())
module.exports = { findFruits }

// -> [ '🍇', '🥝', '🍒', '🍉' ]

• Assignment

array 감옥에 갇힌 2를 구해주세요.
단, slice 메서드를 사용해야 하며, slice 메서드 괄호 안에는 음수만 들어갈 수 있습니다.

let prisoners = [[0, 1],[1,2],[0,0]];
saveNumberTwo(prisoners) // 2

function saveNumberTwo(prisoners) {
  let temp = prisoners.slice(-2,-1);
  // slice 메서드의 괄호 안에 음수만 넣어주세요
  let answer = temp[0][1]
  // 변수 answer에 특정한 값을 대입해주세요.
  
  return answer;
}
let prisoners = [[0, 1],[1,2],[0,0]];
console.log(saveNumberTwo(prisoners))

module.exports = { saveNumberTwo };

// -> 2

📌08. splice

splice 메서드는 배열 내의 특정한 요소를 삭제하거나, 다른 요소로 대치하거나 새로운 요소를 추가할 때 사용합니다.
splice 메서드를 쓸 때는 인자의 순서에 주의해야 합니다.

splice( start , delete , item )

위의 splice( start , delete, item ) 에서는 인자 3개가 들어갔지만, splice 메서드는 필요에 따라 인자를 최소 1개만 쓸 수도 있습니다.
• 첫번째 인자 : 배열의 index의 시작점
• 두번째 인자 : 삭제할 요소의 개수
• 세번째 인자 이후 : 추가하고 싶은 요소
예를 들어, [1,2,3,4,5] 라는 배열에서 숫자 3을 제거하고 그 자리에 10을 추가하려고 합니다.
그럴 땐 다음과 같이 메서드를 활용하시면 됩니다.

let num = [1,2,3,4,5];
num.splice(2,1,10);
console.log(num); // [ 1, 2, 10, 4, 5 ]

splice 메서드를 언제 쓸까, 이런게 진짜 필요할까 의문이 들 수도 있지만, 의외로 일상생활 속의 기능에 자주 쓰입니다.
보통 댓글 삭제 기능을 구현할 때 splice 메서드를 많이 활용한답니다 :)

• Assignment

사촌동생이 놀러와서 장을 보러 나왔는데, 이야기를 들어보니 사촌동생은 유당불내증이 있다고 합니다.

장바구니에서 우유를 제거하고, 두유를 추가하는 함수를 구현해주세요.

goToMart() // ['햄', '김밥김', '단무지', '두유', '시금치', '쌀', '당근', '계란']

function goToMart() {
  let shoppingCart = ['햄', '김밥김', '단무지', '우유', '시금치', '쌀', '당근', '계란'];
  // 여기에 코드를 작성해주세요
  shoppingCart.splice(3,1,"두유")
  return shoppingCart;
}
console.log(goToMart())
module.exports = { goToMart };

// -> ['햄', '김밥김', '단무지', '두유', '시금치', '쌀', '당근', '계란']

• Assignment

기념사진을 찍으려고 하는데, 키 큰 사람들이 앞으로 나와있습니다.
splice method를 이용해 175cm 이상인 사람은 뒤에 설 수 있도록 코드를 작성해주세요.
(단, splice 메서드 괄호 안에는 무조건 음수만 적용해야 합니다)

let lane1 = [{'철수':'150cm'}, {'영희': '153cm'}, {'바둑이': '155cm'},{'밍키': '160cm'}, {'살구' : '168cm'}, {'두팔': '175cm'}, {'여름': '180cm'}, {'소헌': '181cm'}];

extractOver175(lane1) // [{'두팔': '175cm'}, {'여름': '180cm'}, {'소헌': '181cm'}];

function extractOver175(list) {
  //괄호 안은 음수만 들어가야 합니다.
  let extractedPeople = list.splice(-3)

  return extractedPeople;
}

let lane1 = [{'철수':'150cm'}, {'영희': '153cm'}, {'바둑이': '155cm'},{'밍키': '160cm'}, {'살구' : '168cm'}, {'두팔': '175cm'}, {'여름': '180cm'}, {'소헌': '181cm'}];

console.log(extractOver175(lane1))
module.exports = { extractOver175 };

---

⭐️ 다차원 배열에 for문을 돌리는 방법

for문의 중괄호 안에는 또 다른 for문을 작성할 수 있습니다.
아래의 코드는 10 이상의 숫자만 배열에 담아 리턴하는 함수입니다.

let numBox = [[1,2,15,3],[4,5,6,10],[31,7,8,9,20]];
function extractOverTen(list) {
  let temp = [];
  for(let i=0; i < list.length; i++) {
    for(let j=0; j < list[i].length; j++) {
      if(list[i][j] >= 10) {
        temp.push(list[i][j]);
      }  
    }
  }
  return temp;
}
extractOverTen(numBox) // [ 15, 10, 31, 20 ]

• Assignment

시장을 봐왔는데 바구니를 보니 곰팡이가 피어있습니다.

바구니에서 곰팡이를 제거하는 함수를 작성해주세요!

let basket = [['양파','곰팡이'],['곰팡이','빵','딸기잼'],['귤','곰팡이','사과']];

removeGerm(basket) // [ [ '양파' ], [ '빵', '딸기잼' ], [ '귤', '사과' ] ];

let basket = [['양파','곰팡이'],['곰팡이','빵','딸기잼'],['귤','곰팡이','사과']];

function removeGerm(arr) {
  for (i=0; i<arr.length; i++) {
    for( j=0; j<arr[i].length; j++)
      if(arr[i][j] === '곰팡이'){
        arr[i].splice(j,1)
      }
  } // 여기에 코드를 작성해주세요!
  return arr;
}

console.log(removeGerm(basket)) // [ [ '양파' ], [ '빵', '딸기잼' ], [ '귤', '사과' ] ];

module.exports = { removeGerm }

---

📌09. slice 와 splice의 차이점

slice()와 splice()는 배열을 다룰 때 자주 사용하는 함수이다.
두 함수는 언뜻 보기에 비슷한 기능을 하는 것처럼 보이지만 큰 차이점이 있다.
slice() 메소드는 start부터 end 전까지의 복사본을 새로운 배열 객체로 반환한다. 즉, 원본 배열은 수정되지 않는다.
splice() 메소드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다. 이 메소드는 원본 배열 자체를 수정한다.

slice() 와 splice()의 차이점

위 링크는 slice 와 splice의 차이점이 잘 설명되어있는 블로그이다.

📌10. filter

filter() 메서드는 array 관련 메서드로 조건에 맞는 요소들만 모아서 새로운 배열을 반환합니다.
만약 조건에 부합되는 요소가 아무것도 없다면 빈 배열을 반환합니다.
filter() 메서드도 map() 메서드와 마찬가지로 크게 filter(callbackFunction, thisAgr) 2개의 인자를 가집니다.
그리고 callbackFunction 안에서 3개의 인자 (element, index, array) 를 가지는데 첫번째 부분인 element 인자만 필수로 지정되어야하고 나머지는 선택적입니다.
아래의 코드를 보면서 이해해봅시다.
value > 10 이라는 조건에 맞는 요소들로만 이루어진 새로운 배열이 생겼습니다.
let numbers = [10, 4, 32, 17, 5, 2];

// 첫번째 방법 (filter()의 인자에서 바로 함수를 써주는 방법) 
let result = numbers.filter((value)=> value > 10);
console.log(result);      // [ 32, 17 ]
// 두번째 방법 (밖에서 함수를 선언하고 filter()인자에서 callback하는 방법) 
function isBiggerThanTen (value) {
    return value > 10;
}
let result = numbers.filter(isBiggerThanTen);
console.log(result);      // [ 32, 17 ]

• Assignment

fruits 라는 배열이 있습니다. 'ap'가 들어간 과일들로 이루어진 새로운 배열을 filter()를 이용하여 반환해주세요.

결과는 아래와 같아야 합니다.

[ 'apple', 'grapes' ]

• 힌트: includes()를 사용해보세요

// Assignment 1 
let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

//아래의 함수를 완성해주세요.
function filtered () {
  return fruits.filter (value => value.includes('ap'))
}
console.log(filtered ())
module.exports = { filtered };

// -> [ 'apple', 'grapes' ]

• Assignment

courses 라는 배열이 있습니다. level이 'hard'인 과목들로만 이루어진 새로운 배열을 filter()를 이용하여 반환해주세요.결과는 아래와 같아야 합니다.

[
  { level: 'hard', subject: 'Mathmatic' },
  { level: 'hard', subject: 'Science' }
]

// Assignment 2 
let courses = [
{level:'easy', subject: "English" }, 
{level:'hard', subject: "Mathmatic" }, 
{level:'medium', subject: "Literature" }, 
{level:'hard', subject: "Science" }, 
{level:'medium', subject: "Socialogy" }
];

// 아래 함수를 작성해주세요. 
function filtered() {
 let result = courses.filter(value => value.level === 'hard')
 return result;;
}
console.log(filtered())
module.exports = { filtered };

// -> [{ level: 'hard', subject: 'Mathmatic' }, { level: 'hard', subject: 'Science' }]

📌11. concat

concat() 메서드는 주어진 배열에 기존 배열을 합쳐서 새로운 배열을 반환합니다.
원본 배열은 변하지 않으며 새로운 배열이나 원본 배열을 수정해도 서로 영향을 받지 않습니다.

let alphabet = ['a', 'b', 'c'];
let hangeul = ['ㄱ', 'ㄴ', 'ㄷ'];
alphabet.concat(hangeul);      // [ 'a', 'b', 'c', 'ㄱ', 'ㄴ', 'ㄷ' ]

아래의 코드를 살펴봅시다.
둘은 매우 비슷해보이지만 다른 결과를 반환합니다. 두번째의 경우는 배열을 3개로 인식했기 때문에 [2, 3]을 감싸는 대괄호가 사라졌습니다.
이런식으로 배열을 변수에 지정해서 인자로 넘겨줄 수도 있고, 바로 인자에서 배열을 작성해줄 수 있습니다.

const alpha = ['a', 'b', 'c'];
// 배열 2개 이어붙이기 
const arr = [1, [2, 3]];     
alpha.concat(arr);             // [ 'a', 'b', 'c', 1, [ 2, 3 ] ]
// 배열 3개 이어붙이기 
alpha.concat(arr);
alpha.concat(1, [2, 3]);       // [ 'a', 'b', 'c', 1, 2, 3 ]

중복된 숫자나 글자를 가진 배열을 합친다면 어떤 결과가 나올까요? 중복된 결과가 사라질까요?

const numbers = [1, 2, 3];
const numbers2 = [3, 4, 5];
numbers.concat(numbers2);      // [ 1, 2, 3, 3, 4, 5 ]

결과를 보면 그렇지 않다는 걸 알 수 있습니다. 요소의 중복과 상관없이 concat()은 배열을 합쳐줍니다.

• Assignment

1. month1&2 배열을 concat()을 이용해서 하나의 배열로 합쳐주세요.
   아래와 같은 결과가 나와야합니다.

[ 'July',
  'Aug',
  'Sept',
  'Oct',
  'Nov',
  'Dec',
  'Jan',
  'Feb',
  'March',
  'Apr',
  'May',
  'June' ]

// Assignment 1 
let month1 = ['Jan', 'Feb', 'March', 'Apr', 'May', 'June'];
let month2 = ['July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];

// 아래의 함수를 완성해주세요.
function combineMonth() {
let month3 = month2.concat(month1);
  return month3
}
console.log<(combineMonth())

2. num 배열안의 요소들을 concat()을 이용해서 하나의 배열로 합쳐지게 해주세요.
   아래와 같은 결과가 나와야 합니다.

(힌트: array에서 index로 접근)

[ 11, 12, 13, 14, 15, 16, 17, 18, 19 ]

// Assignment 2  
let num = [[11, 12, 13], [14, 15, 16], [17, 18, 19]]; 

//아래의 함수를 완성해주세요. 
function makeNewArr () {
let myArray = num[0].concat(num[1],num[2]);
return myArray
}
console.log(makeNewArr ())
module.exports = { combineMonth, makeNewArr };

📌12. concat응용

concat()을 사용하면 두 배열이 같은 요소를 가졌다해도 합쳐져서 새로운 배열을 반환할때 중복된 값이 나오는 것을 확인했습니다.

let array1 =  [1,2,3,4,5];
let array2 = [3,4,5,6,7];
let result = array1.concat(array2);
console.log(result);              
// 결과 (3,4,5 가 중복) 
 [
  1, 2, 3, 4, 5,
  3, 4, 5, 6, 7
]

그러면 이제는 중복된 값이 없는 배열이 되도록 해봅시다.
우리가 배웠던 filter() 를 사용하겠습니다.

let eraseDuplicates = result.filter((el,index)=> 
result.indexOf(el)===index);
console.log(eraseDuplicates);      
// 결과 (중복된 값이 사라짐) 
[
  1, 2, 3, 4,
  5, 6, 7
]

filter()가 어떻게 작동됐는지 살펴봅시다.
3을 보면 3은 중복된 값으로 result.indexOf(3)은 2가 나옵니다. 처음 3은 index[2]로 조건을 만족하지만 두번째 3은 index[5]로 조건을 만족하지 않아서 통과되지 않습니다. 그래서 두번째 3은 지워지게 됩니다. 이런식으로 중복된 3, 4,5가 지워지고 하나만 남게된 것입니다!
혹은 Set 객체를 사용해서 위와 같은 결과를 얻을 수도 있습니다.
Set객체는 요소의 값이 유일하기 위해 검사를 수행하기 때문에 중복된 값을 제거하고 싶을 때 사용합니다.
이번 세션에서는 Set을 다루지 않기 때문에 궁금하신 분들은 검색해서 공부하시는 것을 추천합니다 :)

console.log([...new Set(eraseDuplicates)]); 
// 결과 (중복된 값이 사라짐) 
[
  1, 2, 3, 4,
  5, 6, 7
]

• Assignment

파스타와 피자의 재료가 배열로 나타나있습니다. 위의 코드를 참고해서 중복된 재료를 뺀 전체 재료의 배열 한 개를만들어주세요.

아래와 같은 결과가 나와야 합니다.

// 중복된 재료를 뺀 전체 재료 
[ 'tomato', 'basil', 'onion', 'chicken', 'cheese', 'olive', 'beef' ]

// 아래 함수를 작성해주세요. 
// Assignment
let pasta = ['tomato', 'basil', 'onion','chicken'];

let pizza = ['tomato', 'cheese', 'onion','olive','beef'];

function totalIngredients () {
  let result = pasta.concat(pizza);

  let eraseDuplicates = result.filter((el,index)=>
  result.indexOf(el)===index);
  return eraseDuplicates
}
console.log(totalIngredients ())
module.exports = { totalIngredients };

📌13. Populating

우리가 배열을 만드는 방법은 간단히 []를 쓰는 방법도 있지만, new Array() 메소드를 쓰는 방법도 있습니다.
new Array(4)를 콘솔창에 입력해봅시다.
console.log(new Array(4))
콘솔창을 확인해보면 4개의 공간을 가진 배열이 나옵니다.

[ 〇 , 〇 , 〇 , 〇 ]

이처럼 n개의 공간을 가진 빈 배열을 만들기 위해서 우리는 new Array(n) 이라는 메소드를 사용합니다. 이렇게 만들어진 배열은 빈 배열이고 안에 요소를 포함하고 있지 않지만, 공간을 만들어주었기 때문에 arr.length를 콘솔창에 찍어보면 4가 나올 것입니다.
빈 배열에 값을 할당하려면 반복문을 이용하시면 됩니다.
예를 들어 1~4까지의 숫자를 위의 빈 배열에 할당해보겠습니다.

let arr = new Array(4);
for(let i=0; i< arr.length ; i++) {
  arr[i] = i+1
}
console.log(arr) // [ 1, 2, 3, 4 ]

• Assignment

new Array 메소드를 이용하여 0부터 9까지 각자 제곱한 수를 배열에 넣어주세요.

•new Array 메소드를 활용하셔야 합니다.
•반복문을 활용해주세요.
•이렇게 만들어진 배열의 길이는 10이 되어야 합니다.

console.log(makeSquare()) // [0, 1, 4, 9, 16, 25, 36, 49, 64, 81]

function makeSquare () {
  let arr = new Array(10);// 여기에 new Array method를 적용해주세요
  for(let i=0; i< arr.length ; i++ ) {
    arr[i] = Math.pow(i, 2)
  } // 여기에 for 반복문을 적어주세요.
  return arr;
}
console.log(makeSquare())
module.exports = { makeSquare };

📌14. Array.push()

자바스크립트에서는 push() 메서드를 사용하여 배열의 끝에 하나 이상의 요소를 추가할 수 있습니다.

let arr = [1,2,3];
arr.push(4); 
// arr is now [1,2,3,4]

• Assignment

배열 myArray의 끝에 ["dog", 3]`을 요소로 추가해주세요.

// Assignment - 다음 함수 안에 코드를 작성하시면 됩니다.
function arrayPush() {
  // 아래의 코드를 수정하지 마세요.
  let myArray = [["John", 23], ["cat", 2]];

  // 아래에 코드를 작성해주세요
  myArray.push(["dog", 3]);

  // 아래의 코드를 수정하지 마세요.
  return myArray;
}
console.log(arrayPush())
module.exports = { arrayPush };

📌15. Array.pop( )

변수를 조작하는 또 다른 방법 중의 하나는 .pop() 메소드를 사용하는 것입니다.
.pop() 메소드는 배열의 마지막 요소를 제거하며 제거된 요소를 반환합니다.

let threeArr = [1, 4, 6];
let oneDown = threeArr.pop();
console.log(oneDown); // Returns 6
console.log(threeArr); // Returns [1, 4]

• Assignment

.pop() 메소드를 사용하여 myArray 배열의 마지막 요소를 제거하세요.

// Assignment - 다음 함수 안에 코드를 작성하시면 됩니다.
function arrayPop() {
  // 아래의 코드를 수정하지 마세요.
  let myArray = [["John", 23], ["cat", 2]];

  // Only change code below this line.
  let arrayPop = myArray.pop()

  // 아래의 코드를 수정하지 마세요.
  return myArray;
}
console.log(arrayPop())
module.exports = { arrayPop }

📌16. Array.shift( )

.pop() 메소드는 배열의 마지막 요소를 제거합니다.
그렇다면 배열의 첫 번째 요소를 제거하고 싶은 경우에는 어떻게 해야 할까요?

• Assignment

•.shift() 메소드를 사용하여 myArray의 첫 번째 요소를 제거해주세요.
•함수의 리턴값은 [["dog", 3]] 가 되어야 합니다.

// Assignment - 다음 함수 안에 코드를 작성하시면 됩니다.
function arrayShift() {
  // 아래의 코드를 수정하지 마세요.
  let myArray = [["John", 23], ["dog", 3]];

  // 아래에 코드를 작성해주세요
  let arrayShift = myArray.shift()
  // 아래의 코드를 수정하지 마세요.
  return myArray;
}
console.log(arrayShift())
module.exports = { arrayShift }

---

✏️ 스터디 정리

검색을 잘하는 것이 개발자의 큰 능력이라고 하셨는데,
array(배열) 스터디 부분에서는 모르는 부분을 검색해 확인하고 추가적으로 배워야할 부분이 많았다. 그래서 이번 스터디는 array(배열) 데이터의 공부 뿐만 아니라 검색하는 방법 또한 배울 수 있었던 것 같다.

---

---