배열
1. 생성
1-1. 기본 생성
배열는 나열이며, index를 가지고 있다.
순서를 중요시하기 때문에 항상 요소는 자기가 몇번째 항목인지 알고 있다.
이 순서는 항상 0부터 시작한다.
let fruits = ["사과", "바나나", "오렌지"];
console.log(fruits); // 실행 결과: [ '사과', '바나나', '오렌지' ]
console.log(fruits.length); // 실행 결과: 3
1-2. 크기 지정
let number = new Array(5); // 크기가 5인, 즉 다섯 개의 요소를 가지고 있는 배열을 만들어라.
console.log(number); // 실행 결과: [ <5 empty items> ]
console.log(number.length); // 실행 결과: 5 , 배열과 length는 자주 같이 쓰이니 알아두자
2. 요소 접근
console.log(fruits[0]); // 실행 결과: 사과
console.log(fruits[1]); // 실행 결과: 바나나
console.log(fruits[2]); // 실행 결과: 오렌지
3. 배열 메소드
3-1. push 밀어넣는다
let fruits01 = ["사과", "바나나"];
console.log("1", fruits01); // 실행 결과: 1 [ '사과', '바나나' ]
fruits01.push("오렌지");
console.log("2", fruits01); // 실행 결과: 2 [ '사과', '바나나', '오렌지' ]
3-2. pop 마지막 요소를 삭제한다.
let fruits02 = ["사과", "바나나"];
console.log("1", fruits02); // 실행 결과: 1 [ '사과', '바나나' ]
fruits02.pop("사과");
console.log("2", fruits02); // 실행 결과: 2 [ '사과' ]
fruits02.pop("바나나");
console.log("3", fruits02); // 실행 결과: 3 []
// 마지막 요소를 삭제하기 때문에 pop() 안에 요소명을 넣는 것으로는 조절이 되지 않는다.
3-3. shitf 첫번째 요소를 삭제한다. pop과 반대이다.
let fruits03 = ["사과", "바나나", "키위"];
console.log("1", fruits03); // 실행 결과: 1 [ '사과', '바나나', '키위' ]
fruits03.shift();
console.log("2", fruits03); // 실행 결과: 2 [ '바나나', '키위' ]
fruits03.shift("키위");
console.log("3", fruits03); // 실행 결과: 2 [ '키위' ]
// 첫번째 요소를 삭제하기 때문에 shift() 안에 요소명을 넣는 것으로는 조절이 되지 않는다.
3-4. unshift 맨 앞 순서에 요소를 추가한다. 노래방 우선예약
fruits03.unshift("포도");
console.log(fruits03); // 실행 결과: [ '포도', '키위' ]
3-5. splice 위치를 지정해서 특정 요소를
fruits03.splice(1, 1, "망고"); // 첫번째 요소부터 1개의 요소를 삭제하고 "포도"를 넣어라
console.log(fruits03); // 실행 결과: [ '포도', '망고' ]
3-6. slice 잘라내기
let fruits04 = ["사과", "바나나", "키위", "포도", "망고"];
// fruits04 배열에서 두번째 요소부터 세번째 요소까지 잘라내어 slicedFruits라는 새로운 배열을 만들어줘
let slicedFruits01 = fruits04.slice(1, 2);
console.log("sliced 1", slicedFruits01); // 실행 결과: sliced [ '바나나' ]
console.log("remain", fruits04) // 실행 결과: remain [ '사과', '바나나', '키위', '포도', '망고' ]
// 잘라낸다고 말했지만 원본 배열에서 요소가 사라지는건 아니다.
let slicedFruits02 = fruits04.slice(3, 5);
console.log("sliced 2", slicedFruits02); // 실행 결과: sliced 2 [ '포도', '망고' ]
4. forEach
let numbers = [2, 4, 1, 5, 3];
// 매개변수 자리에 함수를 넣어주는 것을 콜백함수라고 부른다. 4주차에 자세히 배운다.
// 아래 예시에선 배열 numbers의 요소들이 하나씩 함수에 들어가게 되며, 배열 요소의 개수만큼 함수를 수행한다.
numbers.forEach(function(item){
console.log("item입니다.", item);
});
// 실행 결과:
// item입니다. 2
// item입니다. 4
// item입니다. 1
// item입니다. 5
// item입니다. 3
5. map 기존에 있던 배열을 가공해서 새로운 배열을 생산한다.
반드시 return이 필요하다.
let numbers = [2, 4, 1, 5, 3];
console.log("before map", numbers); // 실행 결과: before map [ 2, 4, 1, 5, 3 ]
let newNumbers = numbers.map(function(item){
return item * 2;
});
console.log("after map", newNumbers); // 실행 결과: after map [ 4, 8, 2, 10, 6 ]
// 항상 원본 배열의 길이만큼이 return 되며, 만약 return 없이 실행한다면
// [ undefined, undefined, undefined, undefined, undefined ] 와 같은 결과가 나오게 된다.
6. filter 필터링한다. 조건에 맞는 요소들을 골라 return하기 때문에 return이 반드시 필요하다.
let numbers = [2, 4, 1, 5, 3];
console.log("before filter", numbers); // 실행 결과: before filter [ 2, 4, 1, 5, 3 ]
let fliternumber = numbers.filter(function(item){
return item === 5;
});
console.log("after filter", fliternumber); // 실행 결과: after filter [ 5 ]
// map은 원본 배열의 길이만큼 return되나 filter는 정해진 조건만 return 하며, 만약 return이 없다면 []를 출력한다.
let fliternumber = numbers.filter(function(item){
return item > 3;
});
console.log("after filter", fliternumber);
// 실행 결과: after filter [ 4, 5 ]
let fliternumber = numbers.filter(function(item){
return item !== 5;
});
console.log("after filter", fliternumber);
// 실행 결과: after filter [ 2, 4, 1, 3 ]
// 등으로 응용할 수 있다.
7. find 요소를 찾는다. 조건에 맞는 요소를 골라 return하기 때문에 return이 반드시 필요하다.
let numbers = [2, 4, 1, 5, 3];
console.log("before find", numbers); // 실행 결과: before find [ 2, 4, 1, 5, 3 ]
let findednumber = numbers.find(function(item){
return item > 3;
});
console.log("after find", findednumber); // 실행 결과: after find 4
//배열의 형태가 아니다.
console.log(typeof findednumber); // 실행 결과: number
// filter와는 다르게 배열 요소의 데이터 타입으로 출력한다.
