Top

01. 배열 속성 : 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() : 배열 요소 문자열 결합 : 반환(문자열)

번호 기본값 메서드 결괏값 
{
    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()

번호 기본값 메서드 리턴값 결괏값 
//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()

번호 기본값 메서드 리턴값 결괏값 
//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()

번호 기본값 메서드 결괏값 
//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() : 펼침연산자 : 배열 요소 결합

번호 기본값 메서드 결괏값 
{
    const arrNum1 = [100, 200, 300];
    const arrNum2 = [400, 500, 600];

    const arrConcat = arrNum1.concat(arrNum2);

    const arrSpread = [...arrNum1, ...arrNum2];
}

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

번호 기본값 메서드 결괏값 
{
    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() : 배열 요소를 다른 요소로 변경 : 반환(배열)

번호 기본값 메서드 결괏값 
{
    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() : 배열 요소를 다른 요소로 변경 : 반환(배열)

번호 기본값 메서드 리턴값 결괏값 
{
    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()

번호 기본값 메서드 결괏값 
{
    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()

번호 기본값 메서드 결괏값 
{
    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()

번호 기본값 메서드 결괏값 
{
    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()

번호 기본값 메서드 결괏값 
{
    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()

번호 기본값 메서드 결괏값 
{
}

MISSION

번호 기본값 메서드 결괏값 
{
    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);
}
document.querySelector(".sample14_M2").innerHTML = "Array.from()"; document.querySelector(".sample14_R2").innerHTML = result2; const text2 = "javascript"; const result3 = [...text3].map(el => el); document.querySelector(".sample14_N3").innerHTML = 3; document.querySelector(".sample14_Q3").innerHTML = "javascript"; document.querySelector(".sample14_M3").innerHTML = ".map()"; document.querySelector(".sample14_R3").innerHTML = result3; } // //숙제 // { // arrBox = [100, 200, 300, 400, 500, 600, 700] // //300, 400 // const result1 = arrNum.slice(2, 3); // document.querySelector(".sample14_N1").innerHTML = 1; // document.querySelector(".sample14_Q1").innerHTML = "[100, 200, 300, 400, 500, 600, 700]"; // document.querySelector(".sample14_M1").innerHTML = "slice(2, 4)"; // document.querySelector(".sample14_R1").innerHTML = result1; // const arrNum3 = [100, 200, 300, 400, 500, 600, 700]; // const result3 = arrNum3.filter(el => el == 300,400) // document.querySelector(".sample14_N2").innerHTML = 2; // document.querySelector(".sample14_Q2").innerHTML = "[100,200,300,400,500, 600, 700]"; // document.querySelector(".sample14_M2").innerHTML = "filter(el =>el == 700)"; // document.querySelector(".sample14_R2").innerHTML = result3; // //100,300,400,700 // //700 // const arrNum3 = [100, 200, 300, 400, 500, 600, 700]; // const result3 = arrNum3.filter(el => el == 700) // document.querySelector(".sample14_N3").innerHTML = 3; // document.querySelector(".sample14_Q3").innerHTML = "[100,200,300,400,500, 600, 700]"; // document.querySelector(".sample14_M3").innerHTML = "filter(el =>el == 700)"; // document.querySelector(".sample14_R3").innerHTML = result3; // arrBox2 = ["j", "b", "c", "d", "e"] // //j // const arrNum4 = ["j", "b", "c", "d", "e"]; // const result1 = arrNum1.filter(el => el == j) // document.querySelector(".sample15_N4").innerHTML = 1; // document.querySelector(".sample15_Q4").innerHTML = "['j', 'b', 'c', 'd', 'e']"; // document.querySelector(".sample15_M4").innerHTML = "filter(el =>el == 'j')"; // document.querySelector(".sample15_R4").innerHTML = result1; // //jc // //jdcd // //10e단계{ // //18-19 // //20-21 // // 티스토리 // }