Javascript 레퍼런스

{
    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;

}

{
    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() : 배열 마지막 요소에 추가 : 반환(숫자)
    // 반환값: 호출한 배열의 새로운 length 속성.    
    const arrNum = [100, 200, 300, 400, 500];
    const arrPush = arrNum.push(600)

    // 04. 배열 메서드 : pop() : 배열 마지막 요소에 삭제 : 반환(삭제된 요소)
    const arrNum = [100, 200, 300, 400, 500];
    const arrPop = arrNum.pop()
}

{
    // 05. 배열 메서드 : unshift() : 배열 처음 요소에 추가 : 반환(숫자)
    // 반환값: '메서드를 호출한 배열'의 새로운 length 속성.
    const arrNum = [100, 200, 300, 400, 500];
    const arrNumUnshift = arrNum.unshift(600);

    // 06 .배열 메서드 : shift() : 배열 처음 요소 삭제 : 반환(삭제된 요소)
    const arrNum = [100, 200, 300, 400, 500];
    const arrNumShift = arrNum.shift()
}

{
    // 07.배열 메서드 : reverse() : 배열 요소의 순서를 반대로 정렬 : 반환(배열)
    const arrNum = [100, 200, 300, 400, 500];
    const arrNumReverse = arrNum.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));
}

{
    //09.배열 메서드 : concat() : 배열 요소 결합 : 반환(배열)
    const arrNum1 = [100,200,300];
    const arrNum2 = [400,500,600];

    const arrConcat = arrNum1.concat(arrNum2);
    const arrSpread = [...arrNum1, ...arrNum2];
}

{
    //reduce() 메서드 배열의 각 요소에 대해 주어진 리듀서(reducer) '함수를 실행'하고, '하나의 결과값'을 반환
    // 10.배열 메서드 : reduce() : 배열 요소 하나로 정리 : 반환(결과값)
    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);  
     //100 + 200 + 300 + 400 + 500
        
     //for문을 사용시
    const arrNum3 = [100, 200, 300, 400, 500]; 
    let sum = 0
    for(let i=0; i<arrNum3.length; i++) {
        sum = sum + arrNum3[i]  // = previous + current
    }  
    
    const arrNum4 = [[100, 200],[300,400]];
    const arrReduce4 = arrNum4.reduce((p,c) => p.concat(c));
        
    // 11.배열 메서드 : reduceRight() : 배열 요소  하나로 정리 : 반환(결과값)
    const arrNum5 = ["javascript", "react", "vue"];
    const arrReduce5 = arrNum5.reduceRight((p,c) => p+c);
}

{
    // 12.배열 메서드 : slice() : 배열 요소를 다른 요소로 변경 : 반환(배열)
    //slice("시작 값", "끝나는 값");
    const arrNum = [100, 200, 300, 400, 500]
    
    //slice() 메소드는 begin부터 end 전까지의 복사본을 새로운 배열 객체로 반환한다. 즉, 원본 배열은 수정되지 않는다.
    //반환값: 추출한 요소를 포함한 새로운 배열.
    const result1 = 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);
}

{
    //13.배열 메서드 : splice() : 배열 요소를 다른 요소로 변경 : 반환(배열)
    //splice(위치, 갯수, 요소1...)

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

{
    //14.배열 메서드 : indexOf() : 배열 요소 검색 : 반환(숫자)
    const arrNum = [100, 200, 300, 400, 500];
    const arrIndex = arrNum.indexOf(200);

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

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

    //15.배열 메서드 : lastIndexOf() : 마지막 배열 요소 검색 : 반환(숫자))
    //문자열에서 탐색하는 문자열이 마지막으로 등장하는 위치에 대한 index를 반환
    //반환값: 검색된 문자열이 처음 발견된 위치에 해당하는 index 값
    const arrNum4 = [100, 200, 300, 400, 500];
    const arrIndex4 = arrNum4.lastIndexOf(200)

     //16.배열 메서드 : includes() : 배열 요소 검색 : 반환(불린)
    const arrNum5 = [100, 200, 300, 400, 500];
    const arrIndex5 = arrNum5.includes(200)

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

{
    // 17.배열 메서드 : find() : 배열 요소 검색 : 반환(요소)
    const arrNum = [100, 200, 300, 400, 500];
    /*const result = arrNum.find(function(element){
        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 arrText = ["javascript", "react", "vue"];
    const result3 = arrText.find(el => el === "javascript");

    // 18.배열 메서드 : findIndeX() : 배열 첫 요소 검색 : 반환(숫자) 
    const arrText4 = ["javascript", "react", "vue"];
    const result4 = arrText4.findIndex(el => el === "javascript");

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

{
    // 19.배열 메서드 : filter() : 조건에 만족하는 배열 요소 검색 : 반환(배열)
    // 배열.filter(콜백함수)
    const arrNum = [100, 200, 300, 400, 500];
    const result = arrNum.filter(el => el === 300);

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

{
    // 20.배열 메서드 : map() : 배열 요소 추출하여 새로운 배열로 만듦 : 반환(배열)
    // 배열.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);
}

{
    //21. 배열 메서드 : Aarry.from(): 배열 요소 추출하여 새로운 배열로 만듦 : 반환(배열)
    //문자를 배열에 넣어줄 때 쓴다
    const text = "javascript"
    const result = Array.from(text);
    document.querySelector(".sample14_R1").innerHTML = result;

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

    const text3 = "javascript"
    const result3 = Array.from([...text3].map(el => el));
    document.querySelector(".sample14_R3").innerHTML = result3;
}