Top

01. 배열 속성 : length : 배열 길이 구하기 : 반환(숫자)

번호 기본값 메서드 리턴값
1 [100, 200, 300, 400, 500] .length
2 ['a', 'b', 'c', 'd', 'e'] .length
3 [1, 2, ['a', 'b']] .length
{
        const arrNum = [100, 200, 300, 400, 500];
        const arrNumLength = arrNum.length;
    
        const arrText = ['a', 'b', 'c', 'd', 'e'];
        const arrTextLength = arrText.length;
    
        const arr = [1, 2, ['a', 'b']];
        const arrLength = arr.length;
    }

02. 배열 메서드 : join() : 배열 요소 문자열 결합 : 반환(문자열)

번호 기본값 메서드 결괏값
1 [100, 200, 300, 400, 500] join('*')
2 [100, 200, 300, 400, 500] join('-')
3 [100, 200, 300, 400, 500] join('')
4 [100, 200, 300, 400, 500] join('')
{
        const arrNum = [100, 200, 300, 400, 500];
        const text1 = arrNum.join("*");
        const text2 = arrNum.join("-");
        const text3 = arrNum.join("");
        const text4 = arrNum.join(" ");
    }

03. 배열 메서드 : push() / pop()

번호 기본값 메서드 리턴값 결괏값
1 [100, 200, 300, 400, 500] push(600)
2 [100, 200, 300, 400, 500] pop()
//03. 배열 메서드 : push() : 배열 마지막 요소에 추가 : 반환(숫자)
    {
        const arrNum1 = [100, 200, 300, 400, 500];
        const arrPush = arrNum.push(600);
    }
    
    //04. 배열 메서드 : pop() : 배열 마지막 요소에 삭제 : 반환(삭제된 요소)
    {
        const arrNum2 = [100, 200, 300, 400, 500];
        const arrPop = arrNum.pop();
    }

04. 배열 메서드 : unshift() / shift()

번호 기본값 메서드 리턴값 결괏값
1 [100, 200, 300, 400, 500] unshift(600)
2 [100, 200, 300, 400, 500] shift()
//05. 배열 메서드 : unshift() : 배열 처음 요소에 추가 : 반환(숫자)
    {
        const arrNum1 = [100, 200, 300, 400, 500];
        const arrNumUnshift = arrNum1.unshift(600);
    
    }
    
    //06. 배열 메서드 : shift() : 배열 처음 요소 삭제 : 반환(삭제된 요소)
    {
        const arrNum2 = [100, 200, 300, 400, 500];
        const arrNumShift = arrNum2.shift();
    }

05. 배열 메서드 : reverse() / sort()

번호 기본값 메서드 결괏값
1 [100, 200, 300, 400, 500] reverse()
2 [100, 200, 300, 400, 500] sort()
3 [100, 200, 300, 400, 500] sort(function(a,b){return b-a})
4 [500, 400, 300, 200, 100] sort(function(a,b){return a-b})
5 ['c', 'd', 'e', 'a', 'b'] sort((a,b) => a.localeCompare(b))
6 ['c', 'd', 'e', 'a', 'b'] sort((a,b) => b.localeCompare(a))
//07. 배열 메서드 : reverse() : 배열 요소의 순서를 반대로 정렬 : 반환(배열)
    {
        const arrNum1 = [100, 200, 300, 400, 500];
        const arrNumReverse = arrNum1.reverse();
    }
    
    //08. 배열 메서드 : sort() : 배열 요소를 정렬할 때 : 반환(배열)
    {
        const arrNum2 = [100, 200, 300, 400, 500];
        const arrNumSort2 = arrNum2.sort();
        
        const arrNum3 = [100, 200, 300, 400, 500];
        const arrNumSort3 = arrNum3.sort(function(a,b){return b-a});
    
        const arrNum4 = [500, 400, 300, 200, 100];
        const arrNumSort4 = arrNum4.sort(function(a,b){return a-b});
    
        const arrNum5 = ['c', 'd', 'e', 'a', 'b'];
        const arrNumSort5 = arrNum5.sort((a,b) => a.localeCompare(b));
    
        const arrNum6 = ['c', 'd', 'e', 'a', 'b'];
        const arrNumSort6 = arrNum6.sort((a,b) => b.localeCompare(a));
    
    }

06. 배열 메서드 : concat() : 펼침연산자 : 배열 요소 결합

번호 기본값 메서드 결괏값
1 [100, 200, 300], [400, 500, 600] arrNum1.concat(arrNum2)
2 [100, 200, 300], [400, 500, 600] [...arrNum1, ...arrNum2]
{
        const arrNum1 = [100, 200, 300];
        const arrNum2 = [400, 500, 600];
    
        const arrConcat = arrNum1.concat(arrNum2);
    
        const arrSpread = [...arrNum1, ...arrNum2];
    }

07. 배열 메서드 : reduce() / reduceRight()

번호 기본값 메서드 결괏값
1 [100, 200, 300, 400, 500] reduce(element => element)
2 [100, 200, 300, 400, 500] reduce((p, c) => p + c)
3 [100, 200, 300, 400, 500] for()
4 [[100, 200], [300, 400]] reduce((p,c) => p.concat(c))
5 ['javascript', 'react', 'vue'] reducRight((p,c) => p+c)
{
        const arrNum1 = [100, 200, 300, 400, 500];
        const arrReduce1 = arrNum1.reduce(element => element);
    
        const arrNum2 = [100, 200, 300, 400, 500];
        const arrReduce2 = arrNum2.reduce((previous, current) => previous + current);
    
        const arrNum3 = [100, 200, 300, 400, 500];
        let sum = 0;
        for(let i = 0 ; i < arrNum3.length ; i++){
            sum += arrNum2[i];
        }
    
        const arrNum4 = [[100, 200], [300, 400]];
        const arrReduce4 = arrNum4.reduce((p,c) => p.concat(c));
    
        const arrNum5 = ["javascript", "react", "vue"];
        const arrReduce5 = arrNum5.reduceRight((p,c) => p+c);
    }

08. 배열 메서드 : slice() : 배열 요소를 다른 요소로 변경 : 반환(배열)

번호 기본값 메서드 결괏값
1 [100, 200, 300, 400, 500] slice(2)
2 [100, 200, 300, 400, 500] slice(2, 3)
3 [100, 200, 300, 400, 500] slice(2, 4)
4 [100, 200, 300, 400, 500] slice(2, 5)
5 [100, 200, 300, 400, 500] slice(-2)
6 [100, 200, 300, 400, 500] slice(-2, 5)
{
        const arrNum = [100, 200, 300, 400, 500];
    
        const result = arrNum.slice(2);
    
        const result2 = arrNum.slice(2, 3);
    
        const result3 = arrNum.slice(2, 4);
    
        const result4 = arrNum.slice(2, 5);
    
        const result5 = arrNum.slice(-2);
    
        const result6 = arrNum.slice(-2, 5);
    }

09. 배열 메서드 : splice() : 배열 요소를 다른 요소로 변경 : 반환(배열)

번호 기본값 메서드 리턴값 결괏값
1 [100, 200, 300, 400, 500] splice(2)
2 [100, 200, 300, 400, 500] splice(2, 3)
3 [100, 200, 300, 400, 500] splice(2, 3, 'javascript')
4 [100, 200, 300, 400, 500] splice(1, 1, 'javascript')
5 [100, 200, 300, 400, 500] splice(1, 0, 'javascript')
6 [100, 200, 300, 400, 500] splice(0, 4, 'javascript')
{
        const arrNum = [100, 200, 300, 400, 500];
        const result = arrNum.splice(2);
    
        const arrNum2 = [100, 200, 300, 400, 500];
        const result2 = arrNum2.splice(2, 3);
    
        const arrNum3 = [100, 200, 300, 400, 500];
        const result3 = arrNum3.splice(2, 3, 'javascript');
    
        const arrNum4 = [100, 200, 300, 400, 500];
        const result4 = arrNum4.splice(1, 1, 'javascript');
    
        const arrNum5 = [100, 200, 300, 400, 500];
        const result5 = arrNum5.splice(1, 0, 'javascript');
    
        const arrNum6 = [100, 200, 300, 400, 500];
        const result6 = arrNum6.splice(0, 4, 'javascript');
    }

10. 배열 메서드 : indexOf() / lastIndexOf() / includes()

번호 기본값 메서드 결괏값
1 [100, 200, 300, 400, 500] indexOf(200)
2 [100, 200, 300, 400, 500] indexOf(300)
3 [100, 200, 300, 400, 500] indexOf(600)
4 [100, 200, 300, 400, 500] lastIndexOf(200)
5 [100, 200, 300, 400, 500] includes(200)
6 [100, 200, 300, 400, 500] includes(600)
{
        const arrNum = [100, 200, 300, 400, 500];
        const arrIndex = arrNum.indexOf(200);
    
        const arrNum2 = [100, 200, 300, 400, 500];
        const arrIndex2 = arrNum.indexOf(300);
    
        const arrNum3 = [100, 200, 300, 400, 500];
        const arrIndex3 = arrNum.indexOf(600);
    
        const arrNum4 = [100, 200, 300, 400, 200];
        const arrIndex4 = arrNum.lastIndexOf(200);
    
        const arrNum5 = [100, 200, 300, 400, 500];
        const arrIndex5 = arrNum.includes(200);
    
        const arrNum6 = [100, 200, 300, 400, 500];
        const arrIndex6 = arrNum.includes(600);
    }

11. 배열 메서드 : find() / findIndex()

번호 기본값 메서드 결괏값
1 [100, 200, 300, 400, 500] find(element => element === 300)
2 [100, 200, 300, 400, 500] find(element => element === 600)
3 ['javascript', 'react', 'vue'] fine(el => el === 'javascript')
4 ['javascript', 'react', 'vue'] fineIndex(el => el === 'javascript')
5 ['javascript', 'react', 'vue'] fineIndex(el => el === 'html')
{
        const arrNum = [100, 200, 300, 400, 500];
        const arrText = ["javascript", "react", "vue"];
    
        const result = arrNum.find(element => element === 300);
    
        const result2 = arrNum.find(element => element === 600);
    
        const result3 = arrText.find(el => el === "javascript");
    
        const result4 = arrText.findIndex(el => el === "javascript");
    
        const result5 = arrText.findIndex(el => el === "html");
    }

12. 배열 메서드 : filter()

번호 기본값 메서드 결괏값
1 [100, 200,300, 400, 500] filter(el => el === 300)
2 [100, 200,300, 400, 500] filter(el => el === 600)
3 [100, 200,300, 400, 500] filter(el => el === 600)
{
        const  arrNum = [100, 200,300, 400, 500];
        const result = arrNum.filter(el => el === 300);
    
        const  arrNum2 = [100, 200,300, 400, 500];
        const result2 = arrNum.filter(el => el === 600);
        
        const arrNum3 = [100, 200, 300, 400, 500];
        const result3 = arrNum2.filter(el => el >= 300);
    }

13. 배열 메서드 : map()

번호 기본값 메서드 결괏값
1 [100, 200,300, 400, 500] map(el => el)
2 [100, 200,300, 400, 500] map(el => el + 'j')
3 [100, 200,300, 400, 500] map(el => el + 100)
4 [{a:100}, {a:200}, {a:300}] map(el => el.a)
{
        const arrNum1 = [100, 200, 300, 400, 500];
        const result1 = arrNum1.map(el => el);
    
        const arrNum2 = [100, 200, 300, 400, 500];
        const result2 = arrNum2.map(el => el + "J");
    
        const arrNum3 = [100, 200, 300, 400, 500];
        const result3 = arrNum3.map(el => el + 100);
    
        const arrNum4 = [{a:100}, {a:200}, {a:300}];
        const result4 = arrNum4.map(el => el.a);
    }

14. 배열 메서드 : Array, from()

번호 기본값 메서드 결괏값
1 javascript Array.from()
2 javascript Array.from(text2, el => el+'10')
3 javascript [...text3].map(el => el)
{
        const text = "javascript";
        const result = Array.from(text);
    
        const text2 = "javascript";
        const result2 = Array.from(text2, el => el+"10");
    
        const text3 = "javascript";
        const result3 = [...text3].map(el => el);
    }

MISSION

번호 기본값 메서드 결괏값
1 [100, 200, 300 ,400 ,500, 600 ,700] splice(2,2)
2 [100, 200, 300 ,400 ,500, 600 ,700] filter(el => el >= 300 && el <= 400)
3 [100, 200, 300 ,400 ,500, 600 ,700] filter(el => el % 200 != 0)
4 [100, 200, 300 ,400 ,500, 600 ,700] reduce((p,c,i) => {if(c % 200 != 0){ result4.push(c); return c}}, 0)
5 [100, 200, 300 ,400 ,500, 600 ,700] find(el => el == 700)
6 [100, 200, 300 ,400 ,500, 600 ,700] filter(el => el == 700)
7 ['j', 'b', 'c', 'd', 'e'] find(el => el == 'j'))
8 ['j', 'b', 'c', 'd', 'e'] filter(el => el == 'j')
9 ['j', 'b', 'c', 'd', 'e'] filter(el => el == 'j' || el == 'c')
10 ['j', 'b', 'c', 'd', 'e'] splice(1,4,'c')
11 ['j', 'b', 'c', 'd', 'e'] slice(0,4)
12 ['j', 'b', 'c', 'd', 'e'] splice(4,1)
{
        const arrBox1 = [100, 200, 300 ,400 ,500, 600 ,700];
        const arrBox2 = [100, 200, 300 ,400 ,500, 600 ,700];
        const arrBox3 = [100, 200, 300 ,400 ,500, 600 ,700];
        const arrBox4 = [100, 200, 300 ,400 ,500, 600 ,700];
        const arrBox5 = [100, 200, 300 ,400 ,500, 600 ,700];
        const arrBox6 = [100, 200, 300 ,400 ,500, 600 ,700];
    
        //300, 400
    
        const result1 = arrBox1.splice(2,2);
        const result2 = arrBox2.filter(el => el >= 300 && el <= 400);
        console.log(result1)
        console.log(result2)
    
    
        //100, 300, 500, 700
        const result3 = arrBox3.filter(el => el % 200 != 0);
        const result4 = [];
        arrBox4.reduce((p,c,i) => {
            if(c % 200 != 0){
                result4.push(c);
                return c
            }
        }, 0)
        console.log(result3);
        console.log(result4);
    
        //700
        const result5 = arrBox5.find(el => el == 700);
        const result6 = arrBox6.filter(el => el == 700);
        console.log(result5);
        console.log(result6);
    }
    {
        const arrBox1 = ["j", "b", "c", "d", "e"];
        const arrBox2 = ["j", "b", "c", "d", "e"];
        const arrBox3 = ["j", "b", "c", "d", "e"];
        const arrBox4 = ["j", "b", "c", "d", "e"];
        const arrBox5 = ["j", "b", "c", "d", "e"];
        const arrBox6 = ["j", "b", "c", "d", "e"];
    
        //j
        const result1 = arrBox1.find(el => el == 'j');
        const result2 = arrBox2.filter(el => el == 'j');
        console.log(result1);
        console.log(result2);
    
        //jc
        const result3 = arrBox3.filter(el => el == 'j' || el == 'c');
        arrBox4.splice(1,4,'c');
        console.log(result3);
        console.log(arrBox4);
    
        //jbcd
        const result5 = arrBox5.slice(0,4);
        arrBox6.splice(4,1);
        console.log(result5);
        console.log(arrBox6);
    }