- array
- for~in
- for~of
- join
- push, pop
- shift, unshift
- sort
- filter
1) array
비슷한 성격의 요소들을 모아둔 것을 객체라고 부른다.
객체에는 숫자, 문자, 함수, 배열, 내장객체가 모두 들어갈 수 있고 처리속도가 빠르고 유지보수가 좋아 사용한다.
배열을 만드는 형식엔 두 가지가 있다.
형식1)
let 배열명 = new Array();
배열명[0] = 값;
배열명[1] = 값;
배열명[2] = 값;
배열명[3] = 값;
형식2)
let 배열명 = [];
배열명[0] = 값;
배열명[1] = 값;
배열명[2] = 값;
배열명[3] = 값;let arr = new Array();
arr[0] = 10;
arr[1] = 20;
arr[2] = 30;
arr[3] = 40;
arr[4] = 50;
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);
console.log(arr[4]);
10
20
30
40
50
console.log로 arr의 인덱스 번호를 호출하면 각각 요소가 출력된다.
for(let i=0; i<=4; i++){
console.log(`${i}번 : ${arr[i]}`);
}
0번 : 10
1번 : 20
2번 : 30
3번 : 40
4번 : 50
for문을 사용하면 편리하게 호출할 수 있다.
let arr1 = [];
arr[0] = 10;
arr[1] = 20;
arr[2] = 30;
arr[3] = 40;
// 값이 길 때
let arr2 = new Array(10, 20, 30, 40);
// 잘 사용 안함
let arr3 = [10, 20, 30, 40];
// 값이 짧을 때
위와 같은 방법으로 배열을 초기화할 수 있다.
2) for~in
let str='abcde';
for(let x in 'abcde'){
console.log(x)
}
0
1
2
3
4
for~in의 경우 abcde의 값을 불러오는 게 아니라 각각의 인덱스 번호를 호출한다.
따라서 abcde가 아닌 12345를 for~in으로 호출해도 마찬가지로 각각 인덱스 번호인 01234가 호출된다.
3) for~of
console.log(`--------------------`);
for(let y of 'abcde'){
console.log(y)
}
a
b
c
d
e
반면 for~of의 경우 인덱스 번호가 아닌 요소 값을 불러오기 때문에 0번 인덱스인 a, 1번 인덱스 b가 순서대로 호출된다.
let data = [
{id:1, name:'이승기', age:20},
{id:2, name:'강호동', age:30},
{id:3, name:'이수근', age:40},
{id:4, name:'MC몽', age:30},
{id:5, name:'은지원', age:20}
]
console.log(data);
console.log(`---------------------------------`);
console.log(data[0]);
console.log(`---------------------------------`);
console.log(data[0].id, data[0].name, data[0].age);
console.log(`---------------------------------`);
console.log(data[0]['id'], data[0]['name'], data[0]['age']);
console.log(`---------------------------------`);
for(let i=0; i<data.length; i++){
console.log(`번호 : ${data[i].id} 이름 : ${data[i].name} 나이 : ${data[i].age}`)
}
console.log(`---------------------------------`);
for(let item of data){
console.log(item)
}
[
{ id: 1, name: '이승기', age: 20 },
{ id: 2, name: '강호동', age: 30 },
{ id: 3, name: '이수근', age: 40 },
{ id: 4, name: 'MC몽', age: 30 },
{ id: 5, name: '은지원', age: 20 }
]
---------------------------------
{ id: 1, name: '이승기', age: 20 }
---------------------------------
1 이승기 20
---------------------------------
1 이승기 20
---------------------------------
번호 : 1 이름 : 이승기 나이 : 20
번호 : 2 이름 : 강호동 나이 : 30
번호 : 3 이름 : 이수근 나이 : 40
번호 : 4 이름 : MC몽 나이 : 30
번호 : 5 이름 : 은지원 나이 : 20
---------------------------------
{ id: 1, name: '이승기', age: 20 }
{ id: 2, name: '강호동', age: 30 }
{ id: 3, name: '이수근', age: 40 }
{ id: 4, name: 'MC몽', age: 30 }
{ id: 5, name: '은지원', age: 20 }
data전체를 호출하면 {}가 포함된 전체 내용이 호출되고.
data[0]를 호출하면 data의 0번 인덱스인 { id: 1, name: '이승기', age: 20 }가 호출된다.
그리고 data[0].id를 호출하게 되면 data의 0번 인덱스 중 id의 값인 1이 호출되는 것이다.
4) join
join()메서드는 배열의 모든 요소들을 하나의 문자열로 연결시켜 준다.
let colors = ['red', 'green', 'blue', 'black'];
let str1 = colors.join();
console.log(str1, typeof str1);
let str2 = colors.join('+');
str2 = colors.join(' + ');
str2 = colors.join(' * ');
str2 = colors.join(' - ');
// 아래에 추가할 경우덮어씌우기 된다 배열을 하나의 문자열로
console.log(str2, typeof str2);
let menus = ['menu1', 'menu2', 'menu3', 'menu4'];
console.log(menus.join('-'));
red,green,blue,black string
red - green - blue - black string
menu1-menu2-menu3-menu4
str2의 경우 처음에 '+'로 연결해 주었으나 맨 마지막에 join(' - ')을 함으로써 기존의 join들은 무시가 되기 때문에 가장 마지막에 사용한 join이 적용돼 출력되는 것이다.
<script>
'use strict';
let menus = ['menu1', 'menu2', 'menu3', 'menu4'];
document.write(menus.join('<br>'));
</script>
이처럼 join에 <br>을 넣으면 객체 요소들을 줄 바꿈을 할 수 있다.
5) push, pop
push와 pop은 배열의 가장 마지막 요소를 다룰 때 사용한다.
push는 새로운 요소를 추가하고 pop은 제거한다.
let arr = ['red', 'green', 'blue'];
arr.push('black');
arr.push('white');
arr.push('orange');
console.log(arr);
// 배열의 맨 끝에 새로운 요소를 추가
arr.pop();
arr.pop();
console.log(arr);
// 배열의 맨 끝 요소를 제거
arr.pop();
console.log(arr);
[ 'red', 'green', 'blue', 'black', 'white', 'orange' ]
[ 'red', 'green', 'blue', 'black' ]
[ 'red', 'green', 'blue' ]
처음 arr에서 black, white, orange를 순서대로 추가했고, pop을 두 번 했을 땐 orange와 white가 순서대로 제거 됐다.
그리고 한 번 더 pop을 사용해 black까지 제거한 모습이다.
6) shift, unshift
shift와 unshift는 배열의 맨 앞 요소를 다룰 때 사용한다.
shift는 배열 맨 앞에 추가를 하고 unshift는 배열 맨 앞 요소를 제거한다.
let arr = ['red', 'green', 'blue'];
arr.push('black');
arr.push('white');
arr.push('orange');
console.log(arr);
arr.unshift('빨강');
arr.unshift('초록');
console.log(arr);
// 배열 맨 앞에 요소 추가
arr.shift();
console.log(arr);
// 배열 맨 앞 요소 제거
[ 'red', 'green', 'blue', 'black', 'white', 'orange' ]
[
'초록', '빨강',
'red', 'green',
'blue', 'black',
'white', 'orange'
]
[
'빨강', 'red',
'green', 'blue',
'black', 'white',
'orange'
]7) sort
숫자 요소들이 정렬 없이 배열에 들어가 있을 때 오름차순, 내림차순으로 정렬시킬 수 있다.
let arr1 = [60, 50, 100, 20, 150, 120, 10, 30, 230]
console.log(arr1.sort());
[
10, 100, 120, 150,
20, 230, 30, 50,
60
]
하지만 sort만 사용하면 맨 앞자리 숫자만 기준이 되기 때문에 20이 150보다 앞에 오게 된다.
arr1.sort(function(a, b){
if(a>b){
return 1;
} else if (a<b) {
return -1;
} else {
return 0;
}
})
[
10, 20, 30, 50,
60, 100, 120, 150,
230
]
따라서 sort안에 함수를 넣어 정렬을 해야 한다.
* 위 함수의 원리를 알려하지 말고 MDN에서 가져다 사용하라고 배웠다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
8) filter
filter는 함수 조건에 맞는 요소들만 모아 새로운 배열로 반환한다.
만약 조건에 맞는 요소가 하나도 없다면 빈 배열을 반환한다.
let arr = [10, 20, 30, 40, 50, 60];
let arr1 = arr.filter(function(element, index, array){
// 조건
if(element % 3 === 0){
return true;
} else {
return false;
}
})
console.log(arr1);
[ 30, 60 ]
요소들 중 3으로 나누었을 때 나머지가 0인 요소들만 출력되도록 해 보았다.
let arr = [10, 20, 60, 40, 50, 30];
let arr1 = arr.filter(function(element, index, array){
// 조건
if(element % 3 === 0){
return true;
} else {
return false;
}
})
console.log(arr1);
[ 60, 30 ]
* 30과 60의 자리를 바꾸었을 때 60이 먼저 반환되는 것으로 보아 filter엔 정렬 기능이 없는 것 같다.
만약 filter로 받은 배열을 새로 지정하고 sort를 한번 더 써야 정렬이 될 것으로 보인다.