- 01. 배열 속성 : length : 배열 길이 구하기 : 반환(숫자)
- 02. 배열 메서드 : join() : 배열 요소 문자형 결합 : 반환(문자열)
- 03. 배열 메서드 : push() : 배열 마지막 요소에 추가 : 반환(숫자)
- 03. 배열 메서드 : pop() : 배열 마지막 요소 삭제 : 반환(삭제된 요소)
- 04. 배열 메서드 : unshift() : 배열 처음 요소에 추가 : 반환(숫자)
- 04. 배열 메서드 : shift() : 배열 처음 요소 삭제 : 반환(삭제된 요소)
- 05. 배열 메서드 : reverse() : 배열 요소 순서를 반대로 정렬 : 반환(배열)
- 05. 배열 메서드 : sort() : 배열 요소를 정렬 : 반환(배열)
- 06. 배열 메서드 : concat() : 배열 요소를 결합 : 반환(배열)
- 07. 배열 메서드 : reduce() : 배열 요소 하나로 정리 : 반환(결괏값)
- 07. 배열 메서드 : reduceRight() : 배열 요소 하나로 정리 : 반환(결괏값)
- 08. 배열 메서드 : slice() : 배열 요소를 다른 요소로 변경 : 반환(배열)
- 09. 배열 메서드 : splice() : 배열 요소를 다른 요소로 변경 : 반환(배열)
- 10. 배열 메서드 : indexOf() : 배열 요소 검색 : 반환(숫자)
- 10. 배열 메서드 : lastIndexOf() : 배열 요소 끝에서 검색: 반환(숫자)
- 10. 배열 메서드 : includes() : 배열 요소 검색 : 반환(불린)
- 11. 배열 메서드 : find() : 배열 요소 검색 : 반환(요소)
- 11. 배열 메서드 : findIndex() : 배열 첫 요소 검색 : 반환(숫자)
- 12. 배열 메서드 : filter() : 조건에 만족하는 배열 요소 검색 : 반환(배열)
- 13. 배열 메서드 : map() : 배열 요소 추출하여 새로운 배열로 만듦 : 반환(배열)
- 14. 배열 메서드 : Array.from() : 배열로 변환하기 : 반환(배열)
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 tex1 = arrNum.join('*');
const tex2 = arrNum.join('-');
const tex3 = arrNum.join('');
const tex4 = arrNum.join(' ');
}03. 배열 메서드 : push() / pop()
| 번호 | 기본값 | 메서드 | 결괏값 | 리턴값 |
|---|---|---|---|---|
{
const arrNum1 = [100, 200, 300, 400, 500];
const arrPush = arrNum1.push(600);
const arrNum2 = [100, 200, 300, 400, 500];
const arrPop = arrNum2.pop();
}04. 배열 메서드 : unshift() / shift()
| 번호 | 기본값 | 메서드 | 결괏값 | 리턴값 |
|---|---|---|---|---|
{
const arrNum1 = [100, 200, 300, 400, 500];
const arrUnshift = arrNum1.unshift(600);
const arrNum2 = [100, 200, 300, 400, 500];
const arrShift = arrNum2.shift(600);
}05. 배열 메서드 : reverse() / sort()
| 번호 | 기본값 | 메서드 | 결괏값 |
|---|---|---|---|
{
const arrNum1 = [100, 200, 300, 400, 500];
const arrReverse = arrNum1.reverse();
const arrNum2 = [100, 200, 300, 400, 500];
const arrSort2 = arrNum2.sort();
const arrNum3 = [100, 200, 300, 400, 500];
const arrSort3 = arrNum3.sort(function(a,b){return b-a});
const arrNum4 = [500, 400, 300, 200, 100];
const arrSort4 = arrNum4.sort(function(a,b){return a-b});
const arrNum5 = ['c', 'd', 'e', 'a', 'b'];
const arrSort5 = arrNum5.sort((a,b) => a.localeCompare(b));
const arrNum6 = ['c', 'd', 'e', 'a', 'b'];
const arrSort6 = 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 arrNum1 = [100, 200, 300, 400, 500];
const arrSlice1 = arrNum1.slice(2);
const arrNum2 = [100, 200, 300, 400, 500];
const arrSlice2 = arrNum2.slice(2,3);
const arrNum3 = [100, 200, 300, 400, 500];
const arrSlice3 = arrNum3.slice(2,4);
const arrNum4 = [100, 200, 300, 400, 500];
const arrSlice4 = arrNum4.slice(2,5);
const arrNum5 = [100, 200, 300, 400, 500];
const arrSlice5 = arrNum5.slice(-2);
const arrNum6 = [100, 200, 300, 400, 500];
const arrSlice6 = arrNum6.slice(-2,5);
}09 배열 메서드 : splice() : 배열 요소를 다른 요소로 변경 : 반환(배열)
| 번호 | 기본값 | 메서드 | 결괏값 | 리턴값 |
|---|---|---|---|---|
{
const arrNum1 = [100, 200, 300, 400, 500];
const arrSplice1 = arrNum1.splice(2);
const arrNum2 = [100, 200, 300, 400, 500];
const arrSplice2 = arrNum2.splice(2,3);
const arrNum3 = [100, 200, 300, 400, 500];
const arrSplice3 = arrNum3.splice(2,3,'javascript');
const arrNum4 = [100, 200, 300, 400, 500];
const arrSplice4 = arrNum4.splice(1,1,'javascript');
const arrNum5 = [100, 200, 300, 400, 500];
const arrSplice5 = arrNum5.splice(1,0,'javascript');
const arrNum6 = [100, 200, 300, 400, 500];
const arrSplice6 = arrNum6.splice(0,4,'javascript','jquery');
}10 배열 메서드 : indexOf() / lastIndexOf() / includes()
| 번호 | 기본값 | 메서드 | 결괏값 |
|---|---|---|---|
{
const arrNum1 = [100, 200, 300, 400, 500];
const arrIndexOf1 = arrNum1.indexOf(200);
const arrNum2 = [100, 200, 300, 400, 300];
const arrIndexOf2 = arrNum2.indexOf(300);
const arrNum3 = [100, 200, 300, 400, 500];
const arrIndexOf3 = arrNum3.indexOf(600);
const arrNum4 = [100, 200, 300, 400, 200];
const arrIastIndexOf4 = arrNum4.lastIndexOf(200);
const arrNum5 = [100, 200, 300, 400, 500];
const arrIncludes5 = arrNum5.includes(200);
const arrNum6 = [100, 200, 300, 400, 500];
const arrIncludes6 = arrNum6.includes(600);
}11 배열 메서드 : find() / findIndex()
| 번호 | 기본값 | 메서드 | 결괏값 |
|---|---|---|---|
{
const arrNum1 = [100, 200, 300, 400, 500];
const arrFind1 = arrNum1.find(el => el === 300);
const arrNum2 = [100, 200, 300, 400, 500];
const arrFind2 = arrNum2.find(el => el === '300');
const arrText3 = ['javascript', 'react', 'vue'];
const arrFind3 = arrText3.find(el => el === 'javascript');
const arrText4 = ['javascript', 'react', 'vue'];
const arrFindIndex4 = arrText4.findIndex(el => el === 'javascript');
const arrText5 = ['javascript', 'react', 'vue'];
const arrFindIndex5 = arrText5.findIndex(el => el === 'html');
}12 배열 메서드 : filter() : 조건에 만족하는 배열 요소 검색 : 반환(배열)
| 번호 | 기본값 | 메서드 | 결괏값 |
|---|---|---|---|
{
const arrNum1 = [100, 200, 300, 400, 500];
const arrFilter1 = arrNum1.filter(el => el === 300);
const arrNum2 = [100, 200, 300, 400, 500];
const arrFilter2 = arrNum2.filter(el => el === 600);
const arrNum3 = [100, 200, 300, 400, 500];
const arrFilter3 = arrNum3.filter(el => el >= 300);
}13 배열 메서드 : map() : 배열 요소 추출하여 새로운 배열로 만듦 : 반환(배열)
| 번호 | 기본값 | 메서드 | 결괏값 |
|---|---|---|---|
{
const arrNum1 = [100, 200, 300, 400, 500];
const arrMap1 = arrNum1.map(el => el);
const arrNum2 = [100, 200, 300, 400, 500];
const arrMap2 = arrNum2.map(el => el + 'j');
const arrNum3 = [100, 200, 300, 400, 500];
const arrMap3 = arrNum3.map(el => el + 100);
const arrNum4 = [{a:100}, {a:200}, {a:300}];
const arrMap4 = arrNum4.map(el => el.a);
}14 배열 메서드 : Array.from() : 배열로 변환하기 : 반환(배열)
| 번호 | 기본값 | 메서드 | 결괏값 |
|---|---|---|---|
{
const text = "javascript"
const result = Array.from(text);
document.querySelector(".sample14_N1").innerHTML = 1;
document.querySelector(".sample14_Q1").innerHTML = "javascript";
document.querySelector(".samlpe14_M1").innerHTML = "Array.from(text)";
document.querySelector(".sample14_R1").innerHTML = 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(".samlpe14_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(".samlpe14_M3").innerHTML = "[...text3].map(el => el)";
document.querySelector(".sample14_R3").innerHTML = result3;
}