>

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

length 속성은 배열의 길이를 구할 수 있습니다.

번호 기본값 메서드 리턴값
1 [100, 200, 300, 400, 500] length 5
1 ['a','b','c','d','f'] length 5
1 [1, 2, ['a', 'b']] length 3 
//01번
const arrNum = [100, 200, 300, 400, 500];


//02번
const arrTxt = ['a','b','c','d','f'];

//03번
const arr = [1, 2, ['a', 'b']];

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

length 속성은 배열의 길이를 구할 수 있습니다.

번호 기본값 메서드 리턴값
1 [100,200,300,400,500] join('') 100200300400500
2 [100,200,300,400,500] join(' ') 100 200 300 400 500
3 [100,200,300,400,500] join('★') 100★200★300★400★500
4 [100,200,300,400,500] join('-') 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(

push() 메서드는 배열 마지막 요소에 추가하고, pop()메서드는 배열 마지막 요소를 삭제합니다.

번호 기본값 메서드 리턴값 결과값
1 [100,200,300,400,500] push(600) 6 100,200,300,400,500,600
2 [100,200,300,400,500] pop(600) 500 100,200,300,400 
//01번
const arrNum = [100, 200, 300, 400, 500];
const arrPush = arrNum.push(600


//02번
const arrNum2 = [100, 200, 300, 400, 500];
const arrPush2 = arrNum2.pop();

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

unshift() 배열 처음 요소에 추가하고, shift()배열 요소의 순서를 반대로 정렬.

번호 기본값 메서드 리턴값 결과값
1 [100,200,300,400,500] unshift() 6 600,100,200,300,400,500
2 [100,200,300,400,500] shift() 100 200,300,400,500 
const arrNum1 = [100, 200, 300, 400, 500];
const arrNumUnshift = arrNum1.unshift(600);

const arrNum2 = [100, 200, 300, 400, 500];
const arrNumShift = arrNum2.shift(600);

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

reverse() : 배열의 순서를 반전합니다. 첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 됩니다.
sort() : 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환

번호 기본값 메서드 리턴값
1 [100,200,300,400,500] reverse() 500,400,300,200,100
2 [100,200,300,400,500] sort() 100,200,300,400,500
3 [100,200,300,400,500] sort(function (a,b){return b-a}) 500,400,300,200,100
4 [500,400,300,200,100] sort(function (a,b){return a-b}) 100,200,300,400,500
5 ['c','b','e','w','h'] a.localeCompare(b) b,c,e,h,w
6 ['c','b','e','w','h'] b.localeCompare(a) w,h,e,c,b 
const arrNum1 = [100, 200, 300, 400, 500];
const arrNumReverse = arrNum1.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', 'b', 'e', 'w', 'h'];
const arrNumSort5 = arrNum5.sort(function (a, b) {return a.localeCompare(b)});

const arrNum6 = ['c', 'b', 'e', 'w', 'h'];
const arrNumSort6 = arrNum6.sort(function (a, b) {return b.localeCompare(a)});

06. 배열 메서드 : concat()

06. 배열 메서드 : concat() 펼침연산자 : 배열 요소를 결합(연결)해주는 함수

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


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

07. 배열 메서드 : concat()

07. 배열 메서드 : concat() 펼침연산자 : 배열 요소를 결합(연결)해주는 함수

번호 기본값 메서드 리턴값
1 [100,200,300,500,500] push(600)
2 [100,200,300,500,500] push(600)
3 [100, 200, 300, 400, 500] arrNum5.reduce(element => element) 6
4 [[100,200], [300,400]] reduce((p,c) => p.concat(c)) 100,200,300,400
5 ['javascript', 'react', 'vue'] reduce((p,c) => p.concat(c)) vuereactjavascript 
const arrNum5 = [1, 2, 3, 4, 5];
let sum2 = 0;

for (i = 0; i < arrNum5.length; i++) {
    if (arrNum5[i] % 2 == 0)
        sum2 = sum2 + arrNum5[i];
}

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


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

08. 배열 메서드 : slice()

08. 배열 메서드 : concat() 펼침연산자 : 배열 요소를 결합(연결)해주는 함수

번호 기본값 메서드 리턴값
6 [100,200,300,400,500] arrNum.slice(-2, 5) 400,500
2 [100,200,300,500,500] push(600)
3 [100,200,300,500,500] push(600)
4 [100,200,300,500,500] push(600)
5 [100,200,300,500,500] push(600) 
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] arrNum.slice(2) 300,400,500 100,200
2 [100,200,300,400,500] arrNum.slice(2, 3) 100,200,300,400,500
3 [100,200,300,400,500] arrNum3.splice(2, 3, 'javascript') 300,400,500 100,200,javascript
4 [100,200,300,400,500] arrNum4.splice(1, 1, 'javascript') 200 100,javascript,300,400,500
5 [100,200,300,400,500] arrNum5.splice(1, 1, 'javascript') 200 100,javascript,300,400,500
6 [100,200,300,400,500] arrNum6.splice(1, 1, 'javascript') javascript 100,200,300,400,500 
arrNum = [100, 200, 300, 400, 500]
const result = arrNum.splice(2);


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


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


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

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

arrNum6 = [100, 200, 300, 400, 500];
const result6 = arrNum5.splice(1, 1, 'javascript');

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

다른 요소로 변경해주더라구요

번호 기본값 메서드 리턴값
1 [100,200,300,400,500] arrNum.indexOf(200) 1
2 [100,200,300,400,500] arrNum.indexOf(300) 2
3 [100,200,300,400,500] arrNum.indexOf(600) 2
4 [100,200,300,400,500] arrNum.lastIndexOf(200) 2
5 [100,200,300,400,500] arrNum.includes(200) true
6 [100,200,300,400,500] arrNum.includes(600) false 
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(300);

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


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


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

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

다른 요소로 변경해주더라구요

번호 기본값 메서드 리턴값
1 [100,200,300,400,500] find(e => e === 300) 300
2 [100,200,300,400,500] find(e => e === 600) undefined
3 [100,200,300,400,500] find(el => el === 'javascript') javascript
4 [100,200,300,400,500] findIndex(el => el === 'javascript') 0
5 [100,200,300,400,500] findIndex(el => el === 'html') 0 
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(e => e === 300);


const result2 = arrNum.find(e => e === 600);

const arrText = ['javascript', 'jquery', 'react'];
const result3 = arrText.find(el => el === "javascript");


const result4 = arrText.findIndex(el => el === "javascript");

const result5 = arrText.findIndex(el => el === "javascript");

12. 배열 메서드 : filter()

다른 요소로 변경해주더라구요

번호 기본값 메서드 리턴값
1 [100,200,300,400,500] filter(e => e === 300) 300
3 [100,200,300,400,500] filter(e => e >= 300) 300,400,500
2 [100,200,300,400,500] push(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 = arrNum.filter(el => el >= 300);

13. 배열 메서드 : map()

다른 요소로 변경해주더라구요

번호 기본값 메서드 리턴값
1 [100,200,300,400,500] arrNum.map(el => el) 100,200,300,400,500
2 [100,200,300,400,500] arrNum2.map(el => el) 100,200,300,400,500
3 [100,200,300,400,500] arrNum2.map(el => el) 100,200,300,400,500
4 [{a:100}, {a:200}, {a:300}] arrNum2.map(el => el) 100,200,300 
const arrNum = [100, 200, 300, 400, 500];
const result = arrNum.map(el => el);

document.querySelector(".sample13_N1").innerHTML = "1";
document.querySelector(".sample13_Q1").innerHTML = "[100,200,300,400,500]";
document.querySelector(".sample13_M1").innerHTML = "arrNum.map(el => el)";
document.querySelector(".sample13_P1").innerHTML = result; //600을 추가하고 숫자레르 셈

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

document.querySelector(".sample13_N2").innerHTML = "2";
document.querySelector(".sample13_Q2").innerHTML = "[100,200,300,400,500]";
document.querySelector(".sample13_M2").innerHTML = "arrNum2.map(el => el)";
document.querySelector(".sample13_P2").innerHTML = result2; //600을 추가하고 숫자레르 셈


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

document.querySelector(".sample13_N3").innerHTML = "3";
document.querySelector(".sample13_Q3").innerHTML = "[100,200,300,400,500]";
document.querySelector(".sample13_M3").innerHTML = "arrNum2.map(el => el)";
document.querySelector(".sample13_P3").innerHTML = result3; //600을 추가하고 숫자레르 셈


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

document.querySelector(".sample13_N4").innerHTML = "4";
document.querySelector(".sample13_Q4").innerHTML = "[{a:100}, {a:200}, {a:300}]";
document.querySelector(".sample13_M4").innerHTML = "arrNum2.map(el => el)";
document.querySelector(".sample13_P4").innerHTML = result4; //600을 추가하고 숫자레르 셈

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

다른 요소로 변경해주더라구요

번호 기본값 메서드 리턴값
1 javascript Array.from(text) j,a,v,a,s,c,r,i,p,t
2 javascript Array.from(text2, el => el + '10') j10,a10,v10,a10,s10,c10,r10,i10,p10,t10
3 javascript [...text3].map(el => el) j,a,v,a,s,c,r,i,p,t 
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_P1").innerHTML = result; //600을 추가하고 숫자레르 셈


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

    document.querySelector(".sample14_N2").innerHTML = "1";
    document.querySelector(".sample14_Q2").innerHTML = "javascript";
    document.querySelector(".sample14_M2").innerHTML = "Array.from(text2, el => el + '10')";
    document.querySelector(".sample14_P2").innerHTML = result2; //600을 추가하고 숫자레르 셈


    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_P3").innerHTML = result3; //600을 추가하고 숫자레르 셈