🚩 javascript

Array

📝 설명

• 이름과 인덱스로 참조되는 정렬된 값의 집합.
• 배열을 구성하는 값을 요소(element)라고 하며, 위치를 가리키는 숫자를 인덱스(index)라고 한다.

✒️ 사용법

입력

js

/*
  자료구조(Data Structure)
    - 순서(index)를 가지고 있음. 다양한 타입이 공존 -> 보완하기 위해 타입 배열이 있음
    - 연속적으로 이어져 있지 않음 (일반적으로는 연속으로 이어져 있음)
    - 오브젝트와 거의 동일
*/

// 배열 생성 방법
let array1 = new Array(3); // Array 객체(클래스). 3개짜리 배열을 만듦
console.log(array1);

let array2 = new Array(1, 2, 3); // Array 객체(클래스)이용. 실제 아이템 전달
console.log(array2);

let array3 = Array(1, 2, 3, 4); // 스태틱 함수 이용
console.log(array3);

let array4 = [1, 2, 3, 4, 5]; // 배열 리터럴(구체적인 값을 가지고 배열을 생성)
console.log(array4);
// 오브젝트에서는 {}, 배열에서는 []

let array5 = Array.from(array4); // 기존 배열로부터 새로운 배열을 만듦
console.log("array5", array5);

let array6 = Array.from("Monday");
console.log("array6", array6);
// 문자(char) 하나하나를 배열의 아이템으로
// iterable (순회, 반복이 가능)

let array7 = Array.from({
  0: "안",
  1: "녕",
  2: "하",
  3: "세",
  4: "요",
  length: 5 // 필수. 배열에는 길이 정보가 있음
});
console.log(array7);

출력

• 이미지로 대체
  

🔗 참고 링크 & 도움이 되는 링크

• javascript Array

---

배열 추가/삭제

📝 설명

• 배열에 요소를 추가하거나 삭제할 수 있다.

✒️ 사용법

입력

js

const food = ["🧀", "🥐", "🍖", "🥞"]; // 배열 리터럴로 배열 생성
console.log(food);

// 배열 아이템을 참조(선택)하는 방법
console.log(food[0]); // 치즈
console.log(food[3]); // 팬케이크
console.log(food.length); // 4 // .찍어보면 사용할 수 있는 함수, 속성이 쭉 나옴
console.log("마지막 아이템", food[food.length - 1]);

for (let i = 0; i < food.length; i++) {
  console.log(food[i]);
}

// const food = ["🧀", "🥐", "🍖", "🥞"];
// 인덱스로 추가 - 좋지 않은 방법
food[6] = "🍎"; // 차례대로 들어가는 것이 아니라 중간에 빈 아이템이 있는 상태로 추가
console.log(food);

// 확실하게 제일 마지막에 추가하고 싶을 때 사용
food[food.length] = "🥝";
console.log("키위 추가", food);

// 기존 아이템 업데이트
food[2] = "🍋";
console.log("레몬 추가", food);

// 인덱스로 삭제
delete food[1]
console.log("2번째 아이템 삭제", food);

출력

• 이미지로 대체
  

🔗 참고 링크 & 도움이 되는 링크

• javascript Array

---

배열 관련 메소드

📝 설명

• 배열에서 사용할 수 있는 메소드 연습

✒️ 사용법

입력

예제1

js

const fruits = ["🍇", "🍎", "🍋", "🍒"]; //배열 리터럴로 배열 생성
console.log(fruits);

// 특정한 오브젝트가 배열인지 아닌지 체크
console.log(Array.isArray(fruits));
console.log(Array.isArray({})); // 빈 오브젝트 - false ([]는 true)
console.log("");

// 배열 안에 특정한 아이템의 위치(인덱스)를 찾을 때
// 배열명.indexOf(item)
console.log("🍋의 인덱스는?", fruits.indexOf("🍋"));
console.log("");

// 배열 안에 특정한 아이템이 있는지 체크
console.log("🍎 존재 여부 ? : ", fruits.includes("🍎")); // true
console.log("🍤 존재 여부 ? : ", fruits.includes("🍤")); // false
console.log("");

// 아이템 추가 - 맨 뒤쪽
fruits.push("🥝", "🥝"); // 여러 개 추가도 가능. 배열 자체를 수정 (업데이트)
console.log("🥝 추가", fruits);
console.log("아이템 갯수는?", fruits.length);
console.log("");

// 아이템 추가 - 맨 앞쪽
fruits.unshift("🦪", "🦪"); // 여러 개 추가도 가능. 배열 자체를 수정 (업데이트)
console.log("🦪 추가", fruits);
console.log("아이템 갯수는?", fruits.length);
console.log("");

// 아이템 제거 - 맨 뒤쪽
let lastItem = fruits.pop();
console.log("맨 뒤 index 제거", fruits); // 배열 자체를 수정 (업데이트)
console.log("제거된 아이템은?", lastItem);
console.log("");

// 아이템 제거 - 맨 앞쪽
lastItem = fruits.shift();
console.log("맨 앞 index 제거", fruits); // 배열 자체를 수정 (업데이트)
console.log("제거된 아이템은?", lastItem);
console.log("");

// 중간 아이템을 추가 또는 삭제
// 삭제할 갯수가 생략되면 해당 인덱스 뒤의 인덱스 전부 삭제
// 배열.splice(시작 인덱스, 삭제될 갯수)
let deleted = fruits.splice(1, 2); // 1번 인덱스(2번째)부터 2개 삭제
console.log("중간 제거", fruits);
console.log("제거된 아이템은?", deleted);
console.log();
// 중간 제거 [ '🦪' , '🍎', '🍋', '🍒', '🥝' ]

fruits.splice(1, 1, "🍭", "🍳");
console.log("splice()로 중간을 지워준 뒤 그 자리에 추가 : ", fruits); // [ '🦪' , '🍭', '🍳', '🍋', '🍒', '🥝' ]
// splice(시작인덱스, 삭제될갯수, 추가될 아이템1, 2, ...)

예제2

js

const fruits = ["🍇", "🍎", "🍋", "🍒"]; //배열 리터럴로 배열 생성

// 기존 배열에서 잘라온 후 새로운 배열을 만듦
let newFruit = fruits.slice(1, 3);
console.log("새로운 배열 : ", newFruit); // 새로운 배열 :  [ '🍎', '🍋' ]
// Array.slice(시작지점(index), 마지막지점(몇 번째인지));
// Array.slice(); - 아무것도 적지 않으면 배열 전체를 반환
// Array.slice(1); - 2번째부터 끝까지 반환

newFruit = fruits.slice(-2); // 뒤에서부터 2개 아이템 반환
console.log("- 값 이용 : ", newFruit); // - 값 이용 :  [ '🍋', '🍒' ]

// 여러개의 배열을 이어줌(합쳐줌)
const arr1 = [1, 2, 3];
const arr2 = [100, 200, 300];
const arr3 = arr1.concat(arr2);
console.log("arr1 : ", arr1);
console.log("arr2 : ", arr2);
console.log("arr3 : ", arr3);
console.log();

// 순서를 거꾸로
const arr4 = arr3.reverse();
console.log("arr4 : ", arr4);
console.log();

// 특정 값으로 배열 아이템 채우기
arr4.fill("🥚");
console.log("fill로 아이템 채우기 : ", arr4);

arr4.fill("🧁", 1, 3);
console.log("fill로 아이템 채우기 : ", arr4);
console.log();
// Array.fill(채울 아이템, 시작지점(인덱스넘버), 끝나는지점(몇 번째인지))

arr4.fill("🍿", 3);
console.log("fill(🍿, 3) : ", arr4);
console.log();
// Array.fill(채울아이템, 시작지점(인덱스넘버)) - 끝까지 채워짐

// 배열을 문자열로 만들기 join
arr5 = ["하늘", "🌸", "sky", "💙", "바다", "1004"];
console.log("arr5 : ", arr5);

let text = arr5.join(); // 자동으로 ,(콤마)를 이용해서 문자로 변환
console.log("text : ", text); // text :  하늘,🌸,sky,💙,바다,1004

text = arr5.join("/"); // '/'(슬래시)를 이용해서 문자로 변환
console.log("text : ", text); // text :  하늘/🌸/sky/💙/바다/1004

// 중첩된 배열
const arr6 = [
  ["🥰", "🙄", "😪"],
  [1, 2, 3, 4, [100, 200]],
];
console.log("중첩된 배열", arr6);
const arr7 = arr6.flat(2);
console.log("중첩된 배열 arr6 flat() 적용", arr7);
// Array.flat() - 한 단계까지 중첩된 배열을 풀어줌.
// Array.flat(숫자) - 배열 안에 배열이 또 있는 경우는 숫자(단계)를 넣어준다.

출력

• 이미지로 대체
  

🔗 참고 링크 & 도움이 되는 링크

• javascript Array

---