Array
👀 데이터를 순차적으로 저장하기 위한 방법
👀 어떤 데이터 타입의 조합이라도 포함할 수 있다!
변수를 그룹화 하는 방법 : [대괄호] 안에 값들을 쉼표로 분리하여 입력
그룹에서 특정 변수값 선택 : 변수명 [값 순서]
예시
const mon = "mon"
const tue = "tue"
const wed = "wed"
const thu = "thu"
const fri = "fri"
const sat = "sat"너무 많네요... 👇내용을 간단하게 해보자!
const dayOfWeek = mon + tue + wed + thu + fri + sat;
console.log(dayOfWeek);
// montuewedthufrisat
// ❌string을 합쳐 나열하기 때문에 출력된 값의 순서를 지정할 수 없다🙋♀️내용을 그룹화 해보자!
const dayOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat"];
// array로 만들어줌!
console.log(dayOfWeek);
// "mon", "tue", "wed", "thu", "fri", "sat"
// 6개의 각각의 값으로 출력// 콘솔에 dayOfWeek 변수 그룹의 특정값 선택하기
const dayOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat"];
console.log(dayOfWeek[2]);
// wed
// 컴퓨터는 0부터 수를 세기 때문에 wed 출력된다
// mon=0 / tue=1 / wed=2 / thu=3 / fri=4 / sat=5
// dayOfWeek 변수 그룹에 값 추가하기
dayOfWeek.push("sun")
console.log(dayOfWeek);
// "mon", "tue", "wed", "thu", "fri", "sat", "sun"
// 7개의 각각의 값으로 출력
// dayOfWeek 변수 그룹에 값 수정하기
dayOfWeek[6]="sun"
console.log(dayOfWeek[6]);
// "sun"🙋♀️만약 특정값 선택을 잘못하면…?
const dayOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat"];
dayOfWeek.push("sun")
console.log(dayOfWeek[6]);
// sun
console.log(dayOfWeek[7]);
// undefined = 값이 없다!📝 Method
Array.isArray(obj)
: obj가 array인지 판별 (객체가 Array라면 true, 아니라면 false.)
prototype.unshift(elementN)
: 새로운 요소(elementN)를 배열의 맨 앞쪽에 추가
👉 새로운 길이로 반환
prototype.push(elementN)
: 새로운 요소(elementN)를 배열의 끝에 추가
👉 새로운 길이로 반환
Array.prototype.join(separator)
: 배열의 모든 요소를 연결해 하나의 문자열로 만듬
👉 새로운 문자열 반환
: separator 값을 생략하면 배열의 요소들이 쉼표로 구분
빈 문자열('')이면 아무 문자 없이 연결됨 / 값이 있으면 값으로 연결됨
// 배열을 문자열로 바꾸기
const arr = ['🌱','🍀','🌿']
const aj = arr.join()
const aj2 = arr.join('') //
const aj3 = arr.join('+')
console.log(aj) // 🌱,🍀,🌿
console.log(aj2); // 🌱🍀🌿
console.log(aj3); // 🌱+🍀+🌿prototype.splice(start 기준 값, 기준 값으로부터 제거할 요소의 수, 추가할 요소명)
: 배열의 기준값으로부터 끝 위치까지를 제외한 제거, 추가
(추가할 요소명을 입력하지 않으면 제거만 된다)
: 제거할 요소에 0을 넣고 추가할 요소명을 입력할 경우 추가만 된다
👉 새로운 배열을 반환
prototype.slice(start 기준 값, 복사할 갯수)
: 배열의 기준값으로부터 복사할 개수만큼 복사
👉 새로운 배열을 반환
const num = [4, 1, 2, 3];
Array.isArray(num); // true = array입니다!
console.log(num); // [4, 1, 2, 3]
num.unshift([-1], 4, 5);
console.log(num); // [Array(1), 4, 5, 4, 1, 2, 3]
// array도 추가된다!
// => Array(1) = [-1] , array[0] = [-1]
console.log(num[0][0]); // -1
const a = ["A","B","C","D","E","F"]
a.splice(2,5) // -> ["C","D","E","F"] 선택
console.log(a) // -> ["A","B"]
a.slice(0,2) // -> ["A","B"]
console.log(a) // -> ["A","B","C","D","E","F"]
// <- 배열을 바꾸지 않고 값만 반환해서 기존 배열은 변화 없음!
prototype.sort()
: 배열의 요소를 적절한 위치에 정렬
👉 배열을 반환
const num = [ 3, 2, 5, 7, 23, 10]
num.sort();
console.log(num); // [10, 2, 23, 3, 5, 7]
// 문자순으로 정렬하기 때문에 1이 가장 작음
num.sort(function(a,b){
return a - b
});
console.log(num); //[2, 3, 5, 7, 10, 23]
// num의 자료를 a,b 자리에 넣어서 뺀 수를 비교해서 정렬prototype.map()
: 배열을 가공하여 새로운 형태의 배열을 만듬
👉 새로운 배열을 반환 ⇒ return 키워드 필수!
prototype.filter()
: 배열에서 특정한 값을 가진 데이터를 필터링 함
👉 새로운 배열을 반환 ⇒ return 키워드 필수!
prototype.reduce(acc,cur,idx,src)
: 배열의 값을 이용하여 특정 값을 도출하거나 재가공 함 (배열을 합치거나 계산할때 등 사용)
👉 새로운 배열을 반환 ⇒ return 키워드 필수!
reduce는 총 4개의 인자를 가진다!
acc - 누산기(연산 결과 등을 일시적으로 저장해 두는 레지스터)
cur - 현재 값
idx - 현재 인덱스
src - 원본 배열작동방법:
return값 누산기에 할당 → 누산기는 순환 중 유지됨으로 최종 하나의 결과가 나옴
const people = [
{ name="kim", age="10"},
{ name="Su", age="12"},
{ name="Young", age="23"}
]
// 1. map
const peopleMap = people.map((v,i) => {
return v.name
})
console.log(peopleMap)
// ["Kim","Su","Young"] <- 새로운 배열을 만듬
// 2. filter
const peopleFilter = people.filter(function(v,i){
return v.age > 11;
})
console.log(peopleFilter);
// [{name="Su",age="12"},{name="Young",age="23"}] <- 새로운 배열을 만듬
const num = [10,12,23,5]
// 3. reduce 숫자 합산하기!
const totalnum= num.reduce((acc,cur)=>{
console.log(acc,cur)
// 10 ,12
// 22, 23
// 45, 5
return acc+cur
})
console.log(totalnum); // 50
// 4. reduce 만약 오브젝트라면...? 오브젝트 나이 합산하기!
const totalpeople= people.reduce((acc,cur)=>{
return acc+cur.age
})
console.log(totalpeople);
// [object object] 101225
//=> acc에는 배열의 요소 자체가 담기기 때문! ({ name="kim", age="10"} 가 담긴다)
// 그래서 오브젝트로 이루어진 숫자를 구하로 싶을때는 초기값을 설정해야 한다!!
const totalpeople= people.reduce((acc,cur)=>{
return acc+cur.age
},0) //<- 초기값 0
console.log(totalpeople); // 45