Top
Back

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 aarrLength = arr.length
}

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

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

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

번호 기본값 메서드 리턴값 결괏값
{
    const arrNum = [100, 200, 300, 400, 500]
    const arrPush = arrNum.push(600);

    const arrNum = [100, 200, 300, 400, 500]
    const arrPop = arrNum.pop();
}

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

번호 기본값 메서드 리턴값 결괏값
{
    const arrNum = [100, 200, 300, 400, 500]
    const arrNumUnshift = arrNum.unshift(600)

    const arrNum = [100, 200, 300, 400, 500]
    const arrNumshift = arrNum.shift()
}

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

번호 기본값 메서드 결괏값
{
    const arrNum = [100, 200, 300, 400, 500]
    const arrNumResult = arrNum.reverse();

    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 = sum + arrNum3[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 result5 = 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', 'jquery');
}

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);
}

10. find() / findIndex

번호 기본값 메서드 결괏값
{ 
    const arrNum = [100, 200, 300, 400, 500];
    // const result = arrNum.find(function(){
    //     return element === 300
    // });
    // const result = arrNum.find((element) => {
    //     return element === 300
    // });
    // const result = arrNum.find(element => {
    //     return element === 300
    // });
    const result = arrNum.find(el => el === 300)

    const result2 = arrNum.find(el => el === 600)

    const arrText3 = ["javascript", "react", "vue"];
    const result3 = arrText3.find(el => el === "javascript");

    const arrText4 = ["javascript", "react", "vue"];
    const result4 = arrText4.findIndex(el => el === "javascript");

    const arrText5 = ["javascript", "react", "vue"];
    const result5 = arrText5.findIndex(el => el === "html");
}

12. 배열 메서드 : filter() : 조건에 만족하는 배열 요소 검색 : 반환(배열)

번호 기본값 메서드 결괏값
{
    const arrMum = [100, 200, 300, 400, 500];
    const result = arrMum.filter(el => el === 300);

    const arrMum2 = [100, 200, 300, 400, 500];
    const result2 = arrMum.filter(el => el === 600);

    const arrNum3 =[100, 200, 300, 400, 500];
    const result3 = arrNum3.filter(el => el >= 300);
}

13. 배열 메서드 : map() : 배열 요소를 추출하여 새로운 배열로 만듦 : 반환(배열)

번호 기본값 메서드 결괏값
{
    const arrNum =[100, 200, 300, 400, 500];
    const result = arrNum.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() : 배열로 반환하기 : 반환(정리)

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