자바스크립트 | 배열을 자세히 알아보자

배열

여러개의 데이터를 한번에 담고 쉼표로 각 데이터를 구분

배열 내부의 든 값을 요소라고 한다(element)

<aside> 💡 배열에 있는 각 데이터의 위치 = index
index는 0부터, length는 1부터 카운트

</aside>

let apple=["고냉","코딩","코코"];

-빈배열
let array = [];

-숫자배열
let numArr = [1,2,3,4];

-문자열 배열
let strArr = ["문자열","배열"];

-배열안의 배열
const arrayOfArray = [[1,2,3], [4,5]];

arrayOfArray[0]; //[1,2,3]

-변수를 배열에 
const a = 10;
const b = 20;
const variableArray = [a,b,30];
variableArray[1]; //20 (b의 값)

- 배열의 마지막 요소 찾기
console.log (arrayOfArray[arrayOfArray.length -1]);

• 배열기초

// 배열 만들기
const blanks = []                            // 비어있는 배열
const numbers = [2, 10, 7, 3.3]              // 숫자들로 이루어진 배열
const classmates = ["철수", "영희", "훈이"]     // 문자들로 이루어진 배열

// 배열의 길이 구하기 _ length
classmates.length          // 3

// 배열의 값 꺼내기
classmates[0]              // "철수"
classmates[1]              // "영희"

// 배열의 맨 뒤에 추가하기 _ push
classmates.push("민지")     // ["철수", "영희", "훈이", "민지"]
or
classmates[classmates.length] = '민지';

// 배열의 맨 마지막 삭제하기 _ pop
classmates.pop()          // ["철수", "영희", "훈이"]
안적으면 마지막 값, 지정하면 지정한 값 삭제

// 배열의 맨 앞에 추가하기 _ unshift 
classmates.unshift('민지');

// 배열의 첫번째 요소 삭제 _ shift
classmates.shift();

// splice
// 배열의 중간요소 제거 
const target = ['가', '나', '다', '라', '마'];
target.splice(2,2);  // index 2번 '다'부터 2개의 값을 제거 '다','라'
target.splice(1); // index 1번부터~ 다 제거  *값은 '가'

 // + 중간요소에 값 지우면서 추가 
target.splice(1,3,'타','파'); // index 1부터 3개 객체 제거 후 타, 파 삽입
['가', '타', '파', '마'];

// + 중간요소에 값만 추가 
target.splice (2, 0, '바');  // index 2번 앞에 '바'를 추가 
['가', '나', '바', '다', '라', '마'];

// 배열의 요소 정렬하기, 거꾸로 뒤집기 _ sort
classmates.sort()               // ["영희", "철수", "훈이"]
작은것 or 글자순으로 정렬

// 배열이 가지고있는 데이터 확인하기 _ includes
classmates.includes("철수")     // true
classmates.includes("영구")     // false

// 배열이 몇번째에 위치하는지 
const target = ['라','나','다','라','다'];
const result = target.indexOf('다');  //2  
const result = target.lastIndexOf('라');  //3 뒤에서부터 찾음
const result = target.indexOf('가');  //-1 없으면 -1로 표시됨

<aside> 💡 없으면 -1로 표시된다.

</aside>

• -1 예제
• const arr = [1,2,3,4,5] arr.indexof(1) //0 if (arr.indexOf(1)) { console.log("1찾았다"); }else{ console.log("1못찾았다"); } //1못찾았다 > index가 0, if 문에서 0은 false이기 때문에! if (arr.indexOf(1) > -1) { console.log("1찾았다"); }else{ console.log("1못찾았다"); } //1찾았다
• 배열중급

const classmates1 = ["철수", "영희", "훈이"]
const classmates2 = ["민지", "민수"]

// 배열 연결하기 _ concat
classmates1.concat(classmates2)     // ["철수", "영희", "훈이", "민지", "민수"]

// 배열을 문자로 만들기 _ join
classmates.join(', ')     // 철수, 영희, 훈이
classmates.join("와 ")    // 철수와 영희와 훈이

// 배열에서 원하는 요소만 뽑아내기 _ filter
classmates.filter((data) => (data === "영희"))     // ["영희"]
classmates.filter((data) => (data !== "영희"))     // ["철수", "훈이"]

// 배열에서 모든 요소 변경하기 _ map
classmates.map((data) => (data + "어린이"))         // ["철수어린이", "영희어린이", "훈이어린이"]

<aside> 💡 let result = developer.concat(dream) 배열을 연결하고 한개의 배열로 합치기. developer+dream=result

</aside>

• 배열예제

// class/03-javascript/

const classmate = ["은정","혜원","재훈","예봄","정훈"]

classmate[0]
// 결과 은정
classmate[1]
// 결과 혜원
classmate[2]
// 결과 재훈
classmate[3]
// 결과 예봄
classmate[4]
// 결과 정훈

// 없는 데이터 위치를 끄집어내보겠습니다.
classmate[5]
// 결과 undefined

// "다슬" 이라는 데이터를 포함하고 있는지 확인해보겠습니다.
classmate.includes("다슬")
// 결과 false

//"다슬"이라는 데이터를 추가해보겠습니다.
classmate.push("다슬")
// 결과 ["은정","혜원","재훈","예봄","정훈","다슬"]

//"다슬"이라는 데이터를 빼보겠습니다.
classmate.pop()
// 결과 ["은정","혜원","재훈","예봄","정훈"]

//classmate의 길이를 구해보겠습니다.
classmate.length
//결과 5

// 퀴즈 풀이
let developer = ["워라벨","연봉","신분상승","성공","꿈"]
developer[1]
let dream = ["커리어","점프","할수있다"]
developer.concat(dream)

// 퀴즈 풀이 
const arr = ['가','라','다','라','마','라'];
arr.indexOf('라') //1
arr.splice(1,1) 
arr.indexOf('라') //2
arr.splice(2,1)
arr.indexOf('라') //3
arr.splice(3,1)  //하나씩 찾아서 지움.
>>반복문으로
while (arr.indexOf('라') > -1) {
	arr.splice(arr.indexOf('라'), 1) 
}
//or let선언할때
let index =arr.indexOf('라');
while (index > -1) {
	arr.splice(index, 1);
	index = arr.indexOf('라');
}

문자열

• 문자열도 배열처럼 다룰 수 있다.

// 문자열(배열)
const classmates1 = "철수"
classmates1[0]     // "철"
classmates1[1]     // "수"

// 문자열 쪼개기
const classmates2 = "철수&영희"
classmates2.split("&")     // ["철수", "영희"]

// 문자열 양쪽 공백 제거하기
const classmates3 = " 철수 & Milk "
classmates3.trim()     // "철수 & Milk"

// 문자열 대소문자 변환하기
classmates3.toUpperCase()     // "철수 & MILK"
classmates3.toLowerCase()     // "철수 & milk"

// 문자열에 빈칸 채우기
const chulsooNumber = "1234"
chulsooNumber.padStart(10, "0")     // "0000001234"
chulsooNumber.padEnd(10, "0")       // "1234000000"

• 문자열예제 - 조회한 메일 **표시

let email = "codecamp@gmail.com"
email.includes("@")
//데이터확인
email.split("@")
// 결과 ["codecamp" , "gmail.com"]

let userMail = email.slit("@")[0]   // "codecamp"
let company = email.slit("@")[1]    // "gmail.com"

// userMail을 한글자씩 넣어주기 위한 빈배열
let maskingMail = []
maskingMail.push(userMail[0])
maskingMail.push(userMail[1])
maskingMail.push(userMail[2])
maskingMail.push(userMail[3])
maskingMail.push(*)
maskingMail.push(*)
maskingMail.push(*)
maskingMail.push(*)

// maskingMail = ["c","o","d","e","*","*","*","*"]
let emailMasking = maskingMain.join("")+"@"+company
//("-") 인 경우는 c-o-d-e-*-*-*-* 결과값

<aside> 💡 toUpperCase-대문자, toLowerCase - 소문자

</aside>

• 객체

데이터를 키와 값으로 연결

const profile={
	name:"고냉"
	age: 20
}

객체에 담긴 값을 가져오는 방법 
1)변수명.key    -> profile.name -> "고냉"
2)변수명["key"] -> profile["age"] -> 20

객체들을 배열에 담아서 선언
const classmates = [
    {name: "철수", age: 13, school: "다람쥐"},
    {name: "영희", age: 8, school: "공룡"},
    {name: "훈이", age: 11, school: "거북이"}
    ]

배열안의 객체에서 뽑아내기
classmates
// (3) [{…}, {…}, {…}]0: {name: '철수', age: 13, school: '다람쥐'}1: {name: '영희', age: 8, school: '공룡'}2: {name: '훈이', age: 11, school: '거북이'}length: 3[[Prototype]]: Array(0)
classmates[0].school
// '다람쥐'
classmates[2].age
// 11

배열안의 객체에서 원하는 객체만 (8살이상) 뽑아내기 
classmates.filter((data) => (data.age >= 8))