배열
- 특징
- 대괄호([ ]) 안에 각 요소(element)들을 콤마(,)로 구분한다
- 배열 안에는 순서가 있으며 왼쪽부터 0번 index ~ 이다.
- 선언하기
let myArray = [19, '한글', true];
// index 0 1 2- 접근하기
how to access element in array in javascript
👉 Array - JavaScript - MDN Web Docs - Mozilla
let myArray = [19, '한글', true];
console.log( myArray[0] ) // 19
console.log( myArray[1] ) // '한글'
console.log( myArray[2] ) // true let myArray = [19, '한글', true];
myArray[0] = 200;
console.log( myArray ) // [200, '한글', true]- 길이 구하기
let myArray = [19, '한글', true];
console.log( myArray.length ) // 3- 요소 추가, 삭제하기(add, remove)
let myArray = [19, '한글', true];
myArray.push('grape');
console.log( myArray ) // [19, '한글', true, 'grape'] let myArray = [19, '한글', true];
myArray.pop();
console.log( myArray ) // [19, '한글'] let myArray = [19, '한글', true];
myArray.shift();
console.log( myArray ) // ['한글', true]- 배열 안의 배열 요소
let myArray = [19, '한글', [10, 20, 30], true];
// index 0 1 2 3
console.log( myArray[2] ) // [10, 20, 30]
console.log( myArray[2][0] ) // 10
console.log( myArray[2][0] ) // 20
console.log( myArray[2][0] ) // 30- 활용
let myArray = [10, 20, 300];
myArray[myArray.length-1]; // [3-1] -> [2]
Assignment
00. Array Intro
/*
makeBurger 함수에서 아래에서 설명하는 배열을 반환해주세요.
사진 속 햄버거 재료들을 순서대로 배열에 담아주세요.
햄버거 재료는 다음과 같습니다. (양상추는 위치가 애매해서 쓰지 않았습니다. 참고하세요!)
['빵_위', '치즈', '피클', '양파', '흰소스', '접시', '빵_아래', '케첩', '스테이크', '토마토']
*/
function makeBurger() {
let Burger = ['빵_위', '흰소스', '양파', '토마토', '케첩', '피클', '치즈', '스테이크', '빵_아래', '접시'];
let Burger2 = [];
for(i=0;i<Burger.length;i++){
Burger2[i] = Burger[Burger.length-1-i];
}
return Burger2;
}
}
console.log(makeBurger())
module.exports = { makeBurger }
01. 배열에 데이터 저장하기
// `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 }
02. 배열 안의 배열
//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 }
03. 배열 요소 접근
// 변수 firstValue를 선언해주세요.
// firstValue의 값은 배열 myArray의 첫 번째 값입니다.
function arrayIndex() {
// do not change your code here
const myArray = [50, 60, 70];
// write your code below
const firstValue = myArray[0];
// do not change your code here
return firstValue;
}
console.log(arrayIndex())
module.exports = { arrayIndex }
탐구하기
왜 배열에서는 변수 선언을 const로 했을까?
👉 let은 변수에 값을 재할당 가능, const는 변수를 재할당 불가.
👉 현재 구현된 함수 내에서 재할당할 필요가 없으니 const로 선언한 것!
04. 배열 요소 수정
// Assignment - 다음 함수 안에 코드를 작성하시면 됩니다.
// myArray 배열의 1번 인덱스 요소의 값을 72로 바꿔주세요.
function modifyArray() {
// 아래의 코드를 수정하지 마세요.
let myArray = [18,64,99];
// 아래에 코드를 작성해주세요
myArray[1] = 72;
// 아래의 코드를 수정하지 마세요.
return myArray;
}
console.log(modifyArray())
module.exports = { modifyArray }
05. 다차원배열 접근
// Assignment - 다음 함수 안에 코드를 작성하시면 됩니다.
// - *bracket notattion*을 이용하여 myData의 값이 8이 될 수 있도록 7번째 줄 코드를 수정해주세요.
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 }
06. slice
slice 메서드
- 배열 내의 특정한 요소의 index 범위에 따라 새로운 배열을 리턴
- splice 메서드와는 다르게 slice 메서드는 원본 배열을 변형시키지 않음.
그렇기 때문에 이 메서드를 사용할 때는 slice 메서드를 적용한 새로운 변수를 선언해주어야 함.
위의 그림에서는 인자 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 ]음수가 들어갈 경우 끝에서부터 해당하는 숫자 만큼의 요소를 배열에 담아 리턴하게 됩니다.
/*
foodBox라는 배열이 있습니다. foodBox의 요소가 과일로만 이루어질 수 있도록
slice 메서드를 활용해 코드를 작성해주세요.
findFruits(['🍕', '🍤','🍇' ,'🥝','🍒','🍉','🍗', '🍟' ])
// 위의 코드를 실행하면 다음과 같은 결과가 나옵니다.
// [ '🍇', '🥝', '🍒', '🍉' ]
*/
const findFruits = () => {
let foodBox = ['🍕', '🍤','🍇' ,'🥝','🍒','🍉','🍗', '🍟' ];
let newFoodBox = foodBox.slice(2,6);
return newFoodBox;
}
console.log(findFruits())
module.exports = { findFruits }
탐구하기
(param1, param2, …, paramN) => { statements } (param1, param2, …, paramN) => expression // 다음과 동일함: => { return expression; } // 매개변수가 하나뿐인 경우 괄호는 선택사항: (singleParam) => { statements } singleParam => { statements } // 매개변수가 없는 함수는 괄호가 필요: () => { statements }
const findFruits = () => { (생략) return newFoodBox; }
console.log(findFruits())- findFruits 라는 변수를 선언
- 그 변수에 newFoodBox 를 리턴하는 함수를 할당
- 따라서 findFruits는 함수가 됨
- 그래서 console.log() 로 출력 시 findFruits 뒤에 괄호()가 붙음
- 참고로 괄호를 빼고 console.log(findFruits) run 실행 시:
07. slice 2
/*
array 감옥에 갇힌 2를 구해주세요.
단, slice 메서드를 사용해야 하며, slice 메서드 괄호 안에는 음수만 들어갈 수 있습니다.
*/
function saveNumberTwo(prisoners) {
let temp = prisoners.slice(-2)
// slice 메서드의 괄호 안에 음수만 넣어주세요
let answer = temp[0][1];
// 변수 answer에 특정한 값을 대입해주세요.
return answer;
}
let prisoners = [[0, 1],[1,2],[0,0]];
saveNumberTwo(prisoners)
console.log(saveNumberTwo(prisoners)) // 2
module.exports = { saveNumberTwo };08. splice 1
splice 메서드는 배열 내의 특정한 요소를 삭제하거나, 다른 요소로 대치하거나 새로운 요소를 추가할 때 사용합니다.
splice 메서드를 쓸 때는 인자의 순서에 주의해야 합니다.
위의 그림에서는 인자 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 메서드를 많이 활용한답니다 :)
/*
사촌동생이 놀러와서 장을 보러 나왔는데, 이야기를 들어보니 사촌동생은 유당불내증이 있다고 합니다.
장바구니에서 우유를 제거하고, 두유를 추가하는 함수를 구현해주세요.
*/
function goToMart() {
let shoppingCart = ['햄', '김밥김', '단무지', '우유', '시금치', '쌀', '당근', '계란'];
// 여기에 코드를 작성해주세요
shoppingCart.splice(3,1,'두유');
return shoppingCart;
}
console.log(goToMart())
module.exports = { goToMart };
탐구하기
let num = [1,2,3,4,5];
// 한줄씩만 콘솔로 찍어보면 ->
// num.splice(0) -> [1, 2, 3, 4, 5] 왼쪽기준 0
// num.splice(1) -> [2, 3, 4, 5] :index1부터 추출
// num.splice(2) -> [3, 4, 5] : index2부터 추출
// num.splice(3) -> [4, 5] : index3부터 추출
// num.splice(4) -> [5] : index4부터 추출
// num.splice(5) -> [] : index5부터 추출
// num.splice(-1) -> [5] : 오른쪽기준 0 1번째 미만 추출
// num.splice(-2) -> [4, 5] : 오른쪽기준 0 2번째 미만 추출
// num.splice(-3) -> [3, 4, 5] : 오른쪽기준 0 3번째 미만 추출
// num.splice(-4) -> [2, 3, 4, 5] : 오른쪽기준 0 4번째 미만 추출
// num.splice(-5) -> [1, 2, 3, 4, 5] : 오른쪽기준 0 5번째 미만 추출09. filter 1
filter() 메서드는 array 관련 메서드로 조건에 맞는 요소들만 모아서 새로운 배열을 반환합니다.
만약 조건에 부합되는 요소가 아무것도 없다면 빈 배열을 반환합니다.
filter() 메서드도 map() 메서드와 마찬가지로 크게 filter(callbackFunction, thisArg) 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 ]
let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
//아래의 함수를 완성해주세요.
// 첫번째 방법
let result1 = fruits.filter((fruit)=> fruit.includes('ap'));
// 두번째 방법
function filtered (fruit) {
return fruit.includes('ap') ;
}
let result2 = fruits.filter(filtered);
console.log("result1: ", result1)
console.log("result2: ", result2)
10. filter 2
// Assignment 2
/*
courses 라는 배열이 있습니다. level이 'hard'인 과목들로만 이루어진 새로운 배열을
filter()를 이용하여 반환해주세요.결과는 아래와 같아야 합니다.
[
{ level: 'hard', subject: 'Mathmatic' },
{ level: 'hard', subject: 'Science' }
]
*/
let courses = [
{level:'easy', subject: "English" },
{level:'hard', subject: "Mathmatic" },
{level:'medium', subject: "Literature" },
{level:'hard', subject: "Science" },
{level:'medium', subject: "Socialogy" }
];
// 아래 함수를 작성해주세요.
function filtered (a) {
//courseHard에 level:'hard'인 배열을 할당 -> 어떻게??
return a.level === 'hard';
}
console.log(courses.filter(filtered));
// courses | courses 라는 배열에 대하여
// .filter() | filter() 라는 메서드를 사용하겠다
// (filtered) | callBackFuction 이름은 filtered 이다
// callBackFunction의 필수 파라미터는 element이다
module.exports = { filtered };
탐구하기
- key는 index이고, value는 element이다.
- filter() 메서드는 callBackFuction을 인자로 받는데
그 callBackFunction의 이름이 여기서는 'filtered'다 - callBackFunction은 element, index, array 최대 3개의 파라미터를 받을 수 있는데 여기서 파라미터가 1개이므로 element를 받는다
- courses라는 배열의 element인 객체'{ }'들을 a라는 파라미터로 입력받고
function filtered(a){
}- 그 element들의 index(key)가 level인데
function filtered(a){
return a.level;
}- 그 element(value)가 'hard'인 객체'{ }'를 리턴한다
function filtered(a){
return a.level === 'hard';
}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()은 배열을 합쳐줍니다.
- 배열을 3개로 인식했다는게 이해가 되지 않음.. 뭐뭐가 어떻게 해서 3개야?
/*
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(a,b) {
return b.concat(a);
}
console.log(combineMonth(month1,month2))
/*
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 (a,b,c) {
return (a.concat(b)).concat(c);
}
console.log(makeNewArr(num[0],num[1],num[2]))
module.exports = { combineMonth, makeNewArr };
12. concat 응용
우리는 이전 세션에서 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 ]
/*
파스타와 피자의 재료가 배열로 나타나있습니다. 위의 코드를 참고해서 중복된 재료를 뺀 전체 재료의 배열 한 개를만들어주세요.
아래와 같은 결과가 나와야 합니다.
// 중복된 재료를 뺀 전체 재료
[ 'tomato', 'basil', 'onion', 'chicken', 'cheese', 'olive', 'beef' ]
*/
// Assignment
let pasta = ['tomato', 'basil', 'onion','chicken'];
let pizza = ['tomato', 'cheese', 'onion','olive','beef'];
let result = pasta.concat(pizza);
// 아래 함수를 작성해주세요.
function totalIngredients (el, index, array) {
return array.indexOf(el) === index;
}
console.log(result.filter(totalIngredients));
module.exports = { totalIngredients };
탐구하기
주어진 string에서 괄호( )안의 값이 왼쪽에서부터 몇번째 글자에 위치하는가를 리턴해주는 메서드. (0번째부터 시작)
삽입 순서대로 element들을 순회한다. set내 값은 1번만 나타날 수 있다.
활용
let pasta = ['tomato', 'basil', 'onion','chicken'];
let pizza = ['tomato', 'cheese', 'onion','olive','beef'];
let result = pasta.concat(pizza);
console.log([...new Set(result)]);
// 결과는 위와 동일 console.log("[...new Set(result)] :", [...new Set(result)]);
console.log("...new Set(result) :", ...new Set(result));
console.log("new Set(result) :", new Set(result));
console.log("[new Set(result)] :", [new Set(result)]);
해석하기
- new Set(): 대문자 'S'로 시작하며, new로 생성해야 한다.
- new Set(array): Set{ ele1, ele2, ... }
- ...(Spread syntax): 배열에서 반복가능한 문자를 element로 확장해서 key-value 쌍으로 객체로 확장. 배열 복사
- [ ]: 배열
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 ]
/*
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 반복문을 적어주세요.
for(i=0; i<arr.length; i++){
arr[i] = i*i;
}
return arr;
}
console.log(makeSquare())
module.exports = { makeSquare };
14. splice 2
/*
기념사진을 찍으려고 하는데, 키 큰 사람들이 앞으로 나와있습니다.
splice method를 이용해 175cm 이상인 사람은 뒤에 설 수 있도록 코드를 작성해주세요.
(단, splice 메서드 괄호 안에는 무조건 음수만 적용해야 합니다)
extractOver175(lane1)
// [{'두팔': '175cm'}, {'여름': '180cm'}, {'소헌': '181cm'}];
*/
let lane1 = [ {'철수':'150cm'}, {'영희': '153cm'},
{'바1둑이': '155cm'}, {'밍키': '160cm'},
{'살구': '168cm'}, {'두팔': '175cm'},
{'여름': '180cm'}, {'소헌': '181cm'}];
function extractOver175(list) {
//괄호 안은 음수만 들어가야 합니다.
let extractedPeople = list.splice(-3)
return extractedPeople;
}
console.log( extractOver175(lane1) )
module.exports = { extractOver175 };
15. splice 3
Array 공부하면서 다차원배열에 접근 하는 방법을 배우셨을텐데요!
이번 시간엔 다차원 배열에 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 ]console창에 i와 j 값을 찍어서 확인해보세요.
그래도 헷갈린다면 아래의 그림을 참고해보세요!
시장을 봐왔는데 바구니를 보니 곰팡이가 피어있습니다.
바구니에서 곰팡이를 제거하는 함수를 작성해주세요!
let basket = [['양파','곰팡이'],['곰팡이','빵','딸기잼'],
['귤','곰팡이','사과']];
/* 다음 내용을 반복문으로 만들어야 한다.
basket[0].splice(1,1);
basket[1].splice(0,1);
basket[2].splice(1,1);
console.log(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); //내부 배열에서 index j부터 1개를 제거
}
}
}
return arr; // 제거한 뒤 나머지 배열을 리턴
}
console.log(removeGerm(basket))
// [ [ '양파' ], [ '빵', '딸기잼' ], [ '귤', '사과' ] ];
module.exports = { removeGerm }
탐구하기
- push()를 이용한 오답
function removeGerm(arr) {
let temp=[];
for(i=0;i < arr.length;i++){
for(j=0;j < arr[i].length;j++){
if(arr[i][j] !== '곰팡이'){
temp.push(arr[i][j]);
}
}
}
return temp;
}
// [ '양파', '빵', '딸기잼', '귤', '사과' ];
- push()를 이용한 같은 결과
function removeGerm(arr) {
let temp=[[],[],[]]; // 내부배열을 빈값으로 할당
for(i=0;i < arr.length;i++){
for(j=0;j < arr[i].length;j++){
if(arr[i][j] !== '곰팡이'){ // '곰팡이'가 아니면
temp[i].push(arr[i][j]); // 내부배열에 추가해라
}
}
}
return temp;
}
// [ [ '양파' ], [ '빵', '딸기잼' ], [ '귤', '사과' ] ];16. Array.push()
/*
자바스크립트에서는 `push()` 메서드를 사용하여
배열의 끝에 하나 이상의 요소를 추가할 수 있습니다.
let arr = [1,2,3];
arr.push(4);
// arr is now [1,2,3,4]
배열 `myArray`의 끝에 `["dog", 3`]`을 요소로 추가해주세요.
*/
// Assignment - 다음 함수 안에 코드를 작성하시면 됩니다.
function arrayPush() {
// 아래의 코드를 수정하지 마세요.
let myArray = [["John", 23], ["cat", 2]];
// 아래에 코드를 작성해주세요
myArray.push(["dog", 3]);
// 아래의 코드를 수정하지 마세요.
return myArray;
}
console.log(arrayPush())
module.exports = { arrayPush };
17. Array.pop()
/*
변수를 조작하는 또 다른 방법 중의 하나는 .pop() 메소드를 사용하는 것입니다.
`.pop()` 메소드는 배열의 마지막 요소를 제거하며 제거된 요소를 반환합니다.
let threeArr = [1, 4, 6];
let oneDown = threeArr.pop();
console.log(oneDown); // Returns 6
console.log(threeArr); // Returns [1, 4]
.pop() 메소드를 사용하여 myArray 배열의 마지막 요소를 제거하세요.
*/
// Assignment - 다음 함수 안에 코드를 작성하시면 됩니다.
function arrayPop() {
// 아래의 코드를 수정하지 마세요.
let myArray = [["John", 23], ["cat", 2]];
// Only change code below this line.
myArray.pop();
// 아래의 코드를 수정하지 마세요.
return myArray;
}
console.log(arrayPop())
module.exports = { arrayPop }
18. Array.shift()
/*
`.pop()` 메소드는 배열의 마지막 요소를 제거합니다.
그렇다면 배열의 첫 번째 요소를 제거하고 싶은 경우에는 어떻게 해야 할까요?
`.shift()` 메소드를 사용하여 `myArray`의 첫 번째 요소를 제거해주세요.
함수의 리턴값은 `[["dog", 3]]` 가 되어야 합니다.
*/
// Assignment - 다음 함수 안에 코드를 작성하시면 됩니다.
function arrayShift() {
// 아래의 코드를 수정하지 마세요.
let myArray = [["John", 23], ["dog", 3]];
// 아래에 코드를 작성해주세요
myArray.shift();
// 아래의 코드를 수정하지 마세요.
return myArray;
}
console.log(arrayShift())
module.exports = { arrayShift }
검색하고 기록하며 학습하는 백엔드 개발자