참고
반복문
for in 루프, for of 루프, forEach()
NOTE
var obj = {
a: 1,
b: 2,
c: 3
};
for (var item in obj) {
console.log(item) // a, b, c
}
JavaScript
복사
for in 루프 (객체 순환)
var arr = [1, 2, 3];
for (var item of obj) {
console.log(item) // Uncaught TypeError: obj is not iterable
}
var arr = [1, 2, 3];
for (var item in arr) {
console.log(item); // 0, 1, 2
}
JavaScript
복사
for of 루프 (객체 안됨, 반복객체 전용)
[10, 20, 30].forEach((value, index, array)=>{
console.log(`${index} : ${value}`); // 0 : 10, 1 : 20, 2: 30 출력
})
JavaScript
복사
forEach
배열 조작
NOTE
•
자바스크립트의 배열은 비균질적이다, 즉 한 배열의 요소가 모두 같은 타입일 필요가 없음
•
배열에 배열 길이보다 큰 인덱스 사용해 할당하면 자동으로 늘어나고 빈자리는 undefined가 채움 (단 접근만으로는 늘어나지 않음)
요소 조작 ( push/pop , shift/unshift )
NOTE
const arr = ["b","c","d"]
arr.push("e") // b c d e 가됨
arr.pop(); // b c d
arr.unshift("a") // a b c d
arr.shift(); // b c d
JavaScript
복사
•
push ,pop : 배열의 끝에 요소를 추가, 제거
•
shift, unshift : 각각 배열의 처음에 요소를 제거, 추가
끝에 여러 요소 추가 ( concat )
NOTE
const arr2=[1,2,3]
arr2.concat(4,5,6) // 1 2 3 4 5 6
arr2.concat([4,5,6]) // 1 2 3 4 5 6
arr2.concat([4,5],6) // 1 2 3 4 5 6
arr2.concat([4,[5,6]]) // 1 2 3 4 [5 6]
// concat은 제공받은 배열은 1번만 분해함
JavaScript
복사
concat은 새로운 배열반환함
배열 조작 - 일부 가져오기 ( slice )
NOTE
const arr3 = [1,2,3,4,5];
arr3.slice(3) // 4 5
arr3.slice(2,4) // 3 4
arr3.slice(-2) // 4 5
arr3.slice(1,-2) // 2 3
arr3.slice(-2,-1); // 4
console.log(arr3.slice(-1)) // 5
JavaScript
복사
slice 메서드 이용 (새로운 배열 반환)
임의의 위치에 요소 추가/제거하기 (splice)
NOTE
const arr4 = [1,5,7];
arr4.splice(1,0,2,3,4) // 1 2 3 4 5 7
arr4.splice(5,0,6) // 1 2 3 4 5 6 7
arr4.splice(1,2) // 1 4 5 6 7
arr4.splice(2,1,'a','b') // 1 4 a b 6 7
JavaScript
복사
•
splice: 배열을 자유롭게 수정
•
splice: 시작할 인덱스, 제거할 요소 숫자(제거 안할거면 0), 나머지 요소는 추가할 요소)
배열 안에서 요소 교체 (copyWithin)
NOTE
const arr5 = [1,2,3,4]
arr5.copyWithin(1,2) // 1 3 4 4
arr5.copyWithin(2,0,2) // 1 3 1 3
arr5.copyWithin(0, -3, -1) // 3 1 1 3
JavaScript
복사
copyWithin( 복사요소 위치, 복사 시작위치, 복사 끝낼 위치)
•
ES6에서 새로 도입한 메서드, 배열 요소를 복사해 다른 위치에 붙여넣고, 기존의 요소를 덮어쓴다.
특정 값으로 배열 채우기 (fill)
NOTE
const arr6 = new Array(5).fill(1); // 1 1 1 1 1
arr.fill('a') // a a a a a
arr.fill('b',1) // a b b b b
arr.fill('c', 2,4) // a b c c b
arr.fill(5.5,-4) // a 5.5 5.5 5.5 5.5
arr.fill(0, -3, -1); // a 5.5 0 0 5.5
JavaScript
복사
•
fill은 정해진 값으로 배열을 채움
•
일부만 채울때는 시작, 끝 인덱스를 지정하며 음수 인덱스도 사용가능
정렬과 역순 정렬 (reverse, sort)
NOTE
const arr7 = [1,2,3,4,5]
arr7.reverse(); //5 4 3 2 1
arr7.sort() // 1 2 3 4 5
const arr8 = [{name:"Suzanne"}, {name:"Jim"}, {name:"Irevor"}, {name:"Amanda"}];
arr8.sort();
console.log(arr8)
arr8.sort((a,b) => a.name > b.name);
// arr8은 name 프로퍼티의 알파벳 순으로 정렬됨
console.log(arr8)
arr8.sort((a,b) => a.name[1] < b.name[1]);
// arr8은 name 프로퍼티 두 번째 글자의 알파벳 역순으로 정렬됨
console.log(arr8)
// 0이 반환되면 sort는 순서상 같다고 간주해 순서를 바꾸지 않음
JavaScript
복사
•
reverse : 배열의 순서를 바꿈
•
sort : 배열의 순서를 정돈함
배열 검색
인덱스 반환(indexOf)
NOTE
const o = {name:"Jerry"};
const arr9 = [1,5,"a",0,true,5,[1.2],"9"];
arr9.indexOf(5); // 1
arr9.lastIndexOf(5); // 5
arr9.indexOf([1,2]) // -1
arr9.indexOf({name:"Jerry"}) // -1
arr9.indexOf("a", 5) // -1
arr9.lastIndexOf(5,4) // 1
arr9.lastIndexOf(true,3); // -1
JavaScript
복사
•
찾고자 하는 것과 정확히 일치하는 첫 번째 요소의 인덱스를 반환
•
시작지점을 정해줄수도 있음
•
찾지못하면 -1반환
검색(findIndex, find, this, some)
NOTE
const arr10 = [{id:5,name:"Judith"}, {id:7,name:"Francis"}];
arr10.findIndex(o => o.id === 5); // 0
arr10.findIndex(o => o.name === "Francis"); // 1
JavaScript
복사
검색 조건을 설정해줄수 있다
arr10.find(o => o.id == 5); // 객체
arr10.find(o => o.id === 2); // undefinded
JavaScript
복사
인덱스가 아닌 요소 그자체를 원할 때 사용한다
// 클래스
class Person{
constructor(name){
this.name = name;
this.id = Person.nextId++;
}
}
// 변수 초기화
Person.nextId = 0;
const jamie = new Person("Jamie"),
juilet = new Person("Juilet"),
petter = new Person("Petter"),
jay = new Person("Jay");
const arr = [jamie,juilet,petter,jay]
// 옵션 1 : id를 직접 비교
arr.find(p => p.id === juilet.id)
// 옵션 2 : this를 이용
let b = arr.find(function(p){
return p.id === this.id
}, juilet)
JavaScript
복사
map, filter, reduce
map
NOTE
const cart = [{name:"Widger",price:9.95}, {name:"Gadget", price:22.95}];
const names = cart.map(x => x.name); // Widger, Gadget
const prices = cart.map(x => x.price) // 9.95, 22.95
const discountPrices = prices.map(x => x*0.8) // 7.96, 18.36
const items = ["Widget", "Gadget"]
const prices2 = [9.95, 22.95]
const cart2 = items.map((x,i) => ({name:x, price:prices2[i]}))
// 호출될 요소, 요소 인덱스 , 배열 전체를 매개변수로 받음
// 괄호로 감싼이유는 화살표 표기법에서 이렇게 하지 않으면 객체 리터럴의 중괄호를 블록으로 판단하기 때문
JavaScript
복사
•
배열 요소를 변형한다, 어떠한 형태로든
•
새로운 배열을 반환하고, 원래배열은 그대로임
filter
NOTE
const cards = [];
for(let suit of ['H', 'C', 'D', 'S']) // 하트 클로버 다이아몬드 스페이드
for(let value= 1; value<=13; value++){
cards.push({suit, value})
}
// value가 2인 카드
const a = cards.filter( c => c.value === 2)
const b = cards.filter( c => c.suit === 'D')
const c = cards.filter( c => c.value > 10)
JavaScript
복사
•
배열에 필요한 요소만 남기기 위한 목적으로 사용, 사본을 만듬
reduce
NOTE
const arr = [5,7,2,4]
const sum = arr.reduce((a,x) => a+=x,0)
// 누적값 a와 현재 배열요소 x를 받음
// 1. 첫번째 배열 요소 5에서 함수 호출
// a의 초기값은 0이고 x의 값은 5 함수는 a와 x의 합 반환
// 이 값이 다음 단계 a의 값
// 2. 두번째 배열 요소 7 ~~
// 3. 최종적으로 모두 더해서 18이 sum에 들어감
// a에 값을 할당할 필요가없음 (0이 필요없다)
// 없으면 초기값을 할당하고 시작함
const words=["Beachball", 'Rodeo', "Angel","Aardvark","Xylophone","November"]
// 알파벳별 분류
const alphabetical = words.reduce((a,x) => {
if(!a[x[0]]) a[x[0]] = [];
a[x[0]].push(x);
return a;
},{});
console.log(alphabetical)
// 통계
const data = [3.3,5,7.2,12,4,6,10.3];
// 준수치적 알고리즘 (분산계산 위한 알고리즘)
const status = data.reduce((a,x) =>{
a.N++;
let delta = x-a.mean;
a.mean += delta/a.N
a.M2 += delta*(x-a.mean);
return a
},{N:0, mean:0, M2:0})
console.log(status)
// 6글자 이상 단어만 포함
const longWords = words.reduce((a,w) => w.length>6?a+" "+w:a)
console.log(longWords)
JavaScript
복사
•
콜백함수 ( 배열의 누산기, 현재요소, 인덱스, 배열자체)
•
reduce는 응용하면 앞의 기능 대부분을 대신할수 있음