Top

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

번호 기본값 속성 리턴값 
{
1   const arrNum =[100, 200, 300, 400, 500];
    const arrNumlength = arrNum.length;

2   const arrText =['a', 'b', 'c', 'd', 'e'];
    const arrTextLength= arrText.length;

3   const arr =[1, 2, ['a', 'b']];
    const arrLength= arr.length;    
}

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

번호 기본값 메서드 결괏값 
{
    const arrNum = [100, 200, 300, 400, 500];
1   const text1 = arrNum.Join("*")

2   const text2 = arrNum.Join("-")

3   const text3 = arrNum.Join("")

4   const text4 = arrNum.Join(" ")        
}

03, 04 배열 메서드 : push() / pop() : 배열 마지막 요소에 추가 / 삭제 : 반환(숫자 / 삭제된 요소)

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

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

05, 06. 배열 메서드 : unshift() / shift() : 배열 처음 요소에 추가 / 삭제 : 반환(숫자/삭제된 요소)

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

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

07, 08. 배열 메서드 : reverse() / sort(): 배열 요소의 순서를 반대로 정렬 : 반환(배열)

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

2   const arrNum2 = [100, 200, 300, 400, 500];
    const arrNumSort2 = arrNum2.sort();

3   const arrNum3 = [100, 200, 300, 400, 500];
    const arrNumSort3 = arrNum3.sort(function(a,b){return b-a});

4   const arrNum4 = [500, 400, 300, 200, 100];
    const arrNumSort4 = arrNum4.sort(function(a,b){return a-b});

5   const arrNum5 = ['c','d','e','a','b'];
    const arrNumSort5 = arrNum5.sort((a,b) => a. localeCompare(b));

6   const arrNum6 = ['c','d','e','a','b'];
    const arrNumSort6 = arrNum5.sort((a,b) => b. localeCompare(a));    
}

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

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

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

10, 11. 배열 메서드 : reduce() / reduceRight() : 배열 요소 하나로 정리 : 반환(결괏값)

번호 기본값 메서드 결괏값 
{
1   const arrNum1 = [100, 200, 300, 400, 500];
    const arrReduce1 = arrNum1.reduce(element => element)

2   const arrNum2 = [100, 200, 300, 400, 500];
    const arrReduce2 = arrNum2.reduce((previous, current) => previous + current);

3   const arrNum3 = [100, 200, 300, 400, 500];
    let sum = 0;
    for (let i = 0; i < arrNum3.length; i++) {

        sum = sum + arrNum3[i]
    }

4   const arrNum4 = [
        [100, 200],
        [300, 400]
    ];
    const arrReduce4 = arrNum4.reduce((p, c) => p.concat(c));

5   const arrNum5 = ["javascript", "react", "vue"];
    const arrReduce5 = arrNum5.reduceRight((p, c) => p + c);        
}

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

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

2   const result2 = arrNum.slice(2, 3);

3   const result3 = arrNum.slice(2, 4);

4   const result4 = arrNum.slice(2, 5);

5   const result5 = arrNum.slice(-2);

6   const result6 = arrNum.slice(-2, 5);
}

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

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

2   const arrNum2 = [100, 200, 300, 400, 500];
    const result2 = arrNum2.splice(2, 3);

3   const arrNum3 = [100, 200, 300, 400, 500];
    const result3 = arrNum3.splice(2, 3, 'javascript');

4   const arrNum4 = [100, 200, 300, 400, 500];
    const result4 = arrNum4.splice(1, 1, 'javascript');

5   const arrNum5 = [100, 200, 300, 400, 500];
    const result5 = arrNum5.splice(0, 0, 'javascript');

6   const arrNum6 = [100, 200, 300, 400, 500];
    const result6 = arrNum6.splice(0, 4, 'javascript', 'jquery');        
}

14. 배열 메서드 : indexOf() : 배열 요소 검색 : 반환(숫자)
15. 배열 메서드 : lastIndexOf() : 배열 요소 끝에서 검색 : 반환(숫자)
16. 배열 메서드 : includes() : 배열 요소 검색 : 반환(불린)

번호 기본값 메서드 결괏값 
{
1   const arrNum1 = [100, 200, 300, 400, 500];
    const arrIndex1 = arrNum1.indexOf(200);

2   const arrNum2 = [100, 200, 300, 400, 500];
    const arrIndex2 = arrNum2.indexOf(300);

3   const arrNum3 = [100, 200, 300, 400, 500];
    const arrIndex3 = arrNum3.indexOf(600);

4   const arrNum4 = [100, 200, 300, 400, 500];
    const arrIndex4 = arrNum4.lastIndexof(200);

5   const arrNum5 = [100, 200, 300, 400, 500];
    const arrIndex5 = arrNum5.includes(200);

6   const arrNum6 = [100, 200, 300, 400, 500];
    const arrIndex6 = arrNum6.includes(600);
}

17. 배열 메서드 : find() : 배열 요소 검색 : 반환(요소)
18. 배열 메서드 : findIndex() : 배열 첫 요소 검색 : 반환(요소)

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

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

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

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

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

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

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

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

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

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

번호 기본값 메서드 결괏값 
{
1   const arrNum1 = [100, 200, 300, 400, 500];
    const result1 = arrNum1.map(el => el);

2   const arrNum2 = [100, 200, 300, 400, 500];
    const result2 = arrNum2.map(el => el +"j");

3   const arrNum3 = [100, 200, 300, 400, 500];
    const result3 = arrNum3.map(el => el + 100);

4   const arrNum4 = [{a: 100}, {a:200}, {a:300}];
    const result4 = arrNum4.map(el => el.a);       
}

21. 배열 메서드 : Array.from() : 배열로 변환하기 : 반환(배열)

번호 기본값 메서드 결괏값 
{
    const text = "javascript"
    const result = Array.from(text)
    
    document.querySelector(".sample14_N1").innerHTML = 1;
    document.querySelector(".sample14_Q1").innerHTML = "javascript";
    document.querySelector(".sample14_M1").innerHTML = "Array.from(text)";
    document.querySelector(".sample14_R1").innerHTML = result;
    console.log(result)

    const text2 = "javascript"
    const result2 = Array.from(text2, el => el +"10");

    document.querySelector(".sample14_N2").innerHTML = 2;
    document.querySelector(".sample14_Q2").innerHTML = "javascript";
    document.querySelector(".sample14_M2").innerHTML = "Array.from(text2, el => el +'10')";
    document.querySelector(".sample14_R2").innerHTML = result2;
    
    const text3 = "javascript"
    const result3 = [...text3].map(el => el);

    document.querySelector(".sample14_N3").innerHTML = 3;
    document.querySelector(".sample14_Q3").innerHTML = "javascript";
    document.querySelector(".sample14_M3").innerHTML = "[...text3].map(el => el)";
    document.querySelector(".sample14_R3").innerHTML = result3;
    console.log(result) 
}