- 01. 배열 속성 : length : 배열 길이 구하기 : 반환(숫자)
- 02. 배열 메서드 : join() : 배열 요소 문자열 결합 : 반환(문자열)
- 03. 배열 메서드 : push() : 배열 마지막 요소에 추가 : 반환(숫자)
- 04. 배열 메서드 : pop() : 배열 마지막 요소에 삭제 : 반환(삭제된 요소)
- 05. 배열 메서드 : unshift() : 배열 처음 요소에 추가 : 반환(숫자)
- 06. 배열 메서드 : shift() : 배열 처음 요소 삭제 : 반환(삭제된 요소)
- 07. 배열 메서드 : reverse() : 배열 요소의 순서를 반대로 정렬 : 반환(배열)
- 08. 배열 메서드 : sort() : 배열 요소를 정렬할 때 : 반환(배열)
- 09. 배열 메서드 : concat() : 배열 요소를 결합 : 반환(배열)
- 10. 배열 메서드 : reduce() : 배열 요소 하나로 정리 : 반환(결괏값)
- 11. 배열 메서드 : reduceRight() : 배열 요소 하나로 정리 : 반환(결괏값)
- 12. 배열 메서드 : slice() : 배열 요소를 다른 요소로 변경 : 반환(배열)
- 13. 배열 메서드 : splice() : 배열 요소를 다른 요소로 변경 : 반환(배열)
- 14. 배열 메서드 : indexOf() : 배열 요소 검색하기 : 반환(숫자)
- 15. 배열 메서드 : lastIndexOf() : 배열 요소 끝에서 검색 : 반환(숫자)
- 16. 배열 메서드 : includes() : 배열 요소 검색 : 반환(불린)
- 17. 배열 메서드 : find() : 배열 요소 검색 : 반환(요소)
- 18. 배열 메서드 : findIndex() : 배열 첫 요소 검색 : 반환(숫자)
- 19. 배열 메서드 : filter() : 조건에 만족하는 배열 요소 검색 : 반환(배열)
- 20. 배열 메서드 : map() : 배열 요소 추출하여 새로운 배열로 만듦 : 반환(배열)
- 21. 배열 메서드 : Array, from() : 배열로 변환하기 : 반환(결괏값)
01. 배열 속성 : length : 배열 길이 구하기 : 반환(숫자)
번호 | 기본값 | 메서드 | 리턴값 |
---|---|---|---|
1 | [100, 200, 300, 400, 500] | .length | |
2 | ['a', 'b', 'c', 'd', 'e'] | .length | |
3 | [1, 2, ['a', 'b']] | .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() : 배열 요소 문자열 결합 : 반환(문자열)
번호 | 기본값 | 메서드 | 결괏값 |
---|---|---|---|
1 | [100, 200, 300, 400, 500] | join('*') | |
2 | [100, 200, 300, 400, 500] | join('-') | |
3 | [100, 200, 300, 400, 500] | join('') | |
4 | [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()
번호 | 기본값 | 메서드 | 리턴값 | 결괏값 |
---|---|---|---|---|
1 | [100, 200, 300, 400, 500] | push(600) | ||
2 | [100, 200, 300, 400, 500] | pop() |
//03. 배열 메서드 : push() : 배열 마지막 요소에 추가 : 반환(숫자)
{
const arrNum1 = [100, 200, 300, 400, 500];
const arrPush = arrNum.push(600);
}
//04. 배열 메서드 : pop() : 배열 마지막 요소에 삭제 : 반환(삭제된 요소)
{
const arrNum2 = [100, 200, 300, 400, 500];
const arrPop = arrNum.pop();
}
04. 배열 메서드 : unshift() / shift()
번호 | 기본값 | 메서드 | 리턴값 | 결괏값 |
---|---|---|---|---|
1 | [100, 200, 300, 400, 500] | unshift(600) | ||
2 | [100, 200, 300, 400, 500] | shift() |
//05. 배열 메서드 : unshift() : 배열 처음 요소에 추가 : 반환(숫자)
{
const arrNum1 = [100, 200, 300, 400, 500];
const arrNumUnshift = arrNum1.unshift(600);
}
//06. 배열 메서드 : shift() : 배열 처음 요소 삭제 : 반환(삭제된 요소)
{
const arrNum2 = [100, 200, 300, 400, 500];
const arrNumShift = arrNum2.shift();
}
05. 배열 메서드 : reverse() / sort()
번호 | 기본값 | 메서드 | 결괏값 |
---|---|---|---|
1 | [100, 200, 300, 400, 500] | reverse() | |
2 | [100, 200, 300, 400, 500] | sort() | |
3 | [100, 200, 300, 400, 500] | sort(function(a,b){return b-a}) | |
4 | [500, 400, 300, 200, 100] | sort(function(a,b){return a-b}) | |
5 | ['c', 'd', 'e', 'a', 'b'] | sort((a,b) => a.localeCompare(b)) | |
6 | ['c', 'd', 'e', 'a', 'b'] | sort((a,b) => b.localeCompare(a)) |
//07. 배열 메서드 : reverse() : 배열 요소의 순서를 반대로 정렬 : 반환(배열)
{
const arrNum1 = [100, 200, 300, 400, 500];
const arrNumReverse = arrNum1.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));
}
06. 배열 메서드 : concat() : 펼침연산자 : 배열 요소 결합
번호 | 기본값 | 메서드 | 결괏값 |
---|---|---|---|
1 | [100, 200, 300], [400, 500, 600] | arrNum1.concat(arrNum2) | |
2 | [100, 200, 300], [400, 500, 600] | [...arrNum1, ...arrNum2] |
{
const arrNum1 = [100, 200, 300];
const arrNum2 = [400, 500, 600];
const arrConcat = arrNum1.concat(arrNum2);
const arrSpread = [...arrNum1, ...arrNum2];
}
07. 배열 메서드 : reduce() / reduceRight()
번호 | 기본값 | 메서드 | 결괏값 |
---|---|---|---|
1 | [100, 200, 300, 400, 500] | reduce(element => element) | |
2 | [100, 200, 300, 400, 500] | reduce((p, c) => p + c) | |
3 | [100, 200, 300, 400, 500] | for() | |
4 | [[100, 200], [300, 400]] | reduce((p,c) => p.concat(c)) | |
5 | ['javascript', 'react', 'vue'] | reducRight((p,c) => p+c) |
{
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 += arrNum2[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() : 배열 요소를 다른 요소로 변경 : 반환(배열)
번호 | 기본값 | 메서드 | 결괏값 |
---|---|---|---|
1 | [100, 200, 300, 400, 500] | slice(2) | |
2 | [100, 200, 300, 400, 500] | slice(2, 3) | |
3 | [100, 200, 300, 400, 500] | slice(2, 4) | |
4 | [100, 200, 300, 400, 500] | slice(2, 5) | |
5 | [100, 200, 300, 400, 500] | slice(-2) | |
6 | [100, 200, 300, 400, 500] | slice(-2, 5) |
{
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] | splice(2) | ||
2 | [100, 200, 300, 400, 500] | splice(2, 3) | ||
3 | [100, 200, 300, 400, 500] | splice(2, 3, 'javascript') | ||
4 | [100, 200, 300, 400, 500] | splice(1, 1, 'javascript') | ||
5 | [100, 200, 300, 400, 500] | splice(1, 0, 'javascript') | ||
6 | [100, 200, 300, 400, 500] | splice(0, 4, 'javascript') |
{
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');
}
10. 배열 메서드 : indexOf() / lastIndexOf() / includes()
번호 | 기본값 | 메서드 | 결괏값 |
---|---|---|---|
1 | [100, 200, 300, 400, 500] | indexOf(200) | |
2 | [100, 200, 300, 400, 500] | indexOf(300) | |
3 | [100, 200, 300, 400, 500] | indexOf(600) | |
4 | [100, 200, 300, 400, 500] | lastIndexOf(200) | |
5 | [100, 200, 300, 400, 500] | includes(200) | |
6 | [100, 200, 300, 400, 500] | includes(600) |
{
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);
}
11. 배열 메서드 : find() / findIndex()
번호 | 기본값 | 메서드 | 결괏값 |
---|---|---|---|
1 | [100, 200, 300, 400, 500] | find(element => element === 300) | |
2 | [100, 200, 300, 400, 500] | find(element => element === 600) | |
3 | ['javascript', 'react', 'vue'] | fine(el => el === 'javascript') | |
4 | ['javascript', 'react', 'vue'] | fineIndex(el => el === 'javascript') | |
5 | ['javascript', 'react', 'vue'] | fineIndex(el => el === 'html') |
{
const arrNum = [100, 200, 300, 400, 500];
const arrText = ["javascript", "react", "vue"];
const result = arrNum.find(element => element === 300);
const result2 = arrNum.find(element => element === 600);
const result3 = arrText.find(el => el === "javascript");
const result4 = arrText.findIndex(el => el === "javascript");
const result5 = arrText.findIndex(el => el === "html");
}
12. 배열 메서드 : filter()
번호 | 기본값 | 메서드 | 결괏값 |
---|---|---|---|
1 | [100, 200,300, 400, 500] | filter(el => el === 300) | |
2 | [100, 200,300, 400, 500] | filter(el => el === 600) | |
3 | [100, 200,300, 400, 500] | filter(el => el === 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 = arrNum2.filter(el => el >= 300);
}
13. 배열 메서드 : map()
번호 | 기본값 | 메서드 | 결괏값 |
---|---|---|---|
1 | [100, 200,300, 400, 500] | map(el => el) | |
2 | [100, 200,300, 400, 500] | map(el => el + 'j') | |
3 | [100, 200,300, 400, 500] | map(el => el + 100) | |
4 | [{a:100}, {a:200}, {a:300}] | map(el => el.a) |
{
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);
}
14. 배열 메서드 : Array, from()
번호 | 기본값 | 메서드 | 결괏값 |
---|---|---|---|
1 | javascript | Array.from() | |
2 | javascript | Array.from(text2, el => el+'10') | |
3 | javascript | [...text3].map(el => el) |
{
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);
}
MISSION
번호 | 기본값 | 메서드 | 결괏값 |
---|---|---|---|
1 | [100, 200, 300 ,400 ,500, 600 ,700] | splice(2,2) | |
2 | [100, 200, 300 ,400 ,500, 600 ,700] | filter(el => el >= 300 && el <= 400) | |
3 | [100, 200, 300 ,400 ,500, 600 ,700] | filter(el => el % 200 != 0) | |
4 | [100, 200, 300 ,400 ,500, 600 ,700] | reduce((p,c,i) => {if(c % 200 != 0){ result4.push(c); return c}}, 0) | |
5 | [100, 200, 300 ,400 ,500, 600 ,700] | find(el => el == 700) | |
6 | [100, 200, 300 ,400 ,500, 600 ,700] | filter(el => el == 700) | |
7 | ['j', 'b', 'c', 'd', 'e'] | find(el => el == 'j')) | |
8 | ['j', 'b', 'c', 'd', 'e'] | filter(el => el == 'j') | |
9 | ['j', 'b', 'c', 'd', 'e'] | filter(el => el == 'j' || el == 'c') | |
10 | ['j', 'b', 'c', 'd', 'e'] | splice(1,4,'c') | |
11 | ['j', 'b', 'c', 'd', 'e'] | slice(0,4) | |
12 | ['j', 'b', 'c', 'd', 'e'] | splice(4,1) |
{
const arrBox1 = [100, 200, 300 ,400 ,500, 600 ,700];
const arrBox2 = [100, 200, 300 ,400 ,500, 600 ,700];
const arrBox3 = [100, 200, 300 ,400 ,500, 600 ,700];
const arrBox4 = [100, 200, 300 ,400 ,500, 600 ,700];
const arrBox5 = [100, 200, 300 ,400 ,500, 600 ,700];
const arrBox6 = [100, 200, 300 ,400 ,500, 600 ,700];
//300, 400
const result1 = arrBox1.splice(2,2);
const result2 = arrBox2.filter(el => el >= 300 && el <= 400);
console.log(result1)
console.log(result2)
//100, 300, 500, 700
const result3 = arrBox3.filter(el => el % 200 != 0);
const result4 = [];
arrBox4.reduce((p,c,i) => {
if(c % 200 != 0){
result4.push(c);
return c
}
}, 0)
console.log(result3);
console.log(result4);
//700
const result5 = arrBox5.find(el => el == 700);
const result6 = arrBox6.filter(el => el == 700);
console.log(result5);
console.log(result6);
}
{
const arrBox1 = ["j", "b", "c", "d", "e"];
const arrBox2 = ["j", "b", "c", "d", "e"];
const arrBox3 = ["j", "b", "c", "d", "e"];
const arrBox4 = ["j", "b", "c", "d", "e"];
const arrBox5 = ["j", "b", "c", "d", "e"];
const arrBox6 = ["j", "b", "c", "d", "e"];
//j
const result1 = arrBox1.find(el => el == 'j');
const result2 = arrBox2.filter(el => el == 'j');
console.log(result1);
console.log(result2);
//jc
const result3 = arrBox3.filter(el => el == 'j' || el == 'c');
arrBox4.splice(1,4,'c');
console.log(result3);
console.log(arrBox4);
//jbcd
const result5 = arrBox5.slice(0,4);
arrBox6.splice(4,1);
console.log(result5);
console.log(arrBox6);
}