TIL 15 | JavaScript Array loop, addition, delete

Array??

• 배열은 순서가 있는 요소값들을 가진 객체와 같다.

• 객체의 일종이지만 순서가 있는 자료를 저장하고 관리하는 용도에 최적화된 자료구조를 뜻한다.

---

How to use it??

const arr1 = new Array('가', '나', '다', '라', '마');
const arr2 = ['가', '나', '다', '라', '마']; // 흔히 쓰이는 방법
console.log(arr1); // ["가", "나", "다", "라", "마"]
console.log(arr2); // ["가", "나", "다", "라", "마"]

• 두가지 문법을 통해 배열을 생성 및 선언할 수 있다.

• 배열 안에는 같은 타입의 데이터를 넣는 것이 좋다.

---

Index position

const arr = ['가', '나', '다', '라'];
arr.indexOf('가'); // 0
arr.indexOf('나'); // 1
arr.indexOf('다'); // 2
arr.indexOf('라'); // 3
arr.indexOf('카'); // -1 (없는 요소일 경우 `-1`로 출력된다.)

arr[0] // "가"
arr[1] // "나"
arr[2] // "다"
arr[3] // "라"
arr[arr.length - 1] // "라" ( 제일 마지막 Index는 '배열의 전체길이-1'이다. )
arr[6] // undefined (해당 index의 요소가 없을 경우 undefined라고 뜬다.)

• 배열의 요소에는 각각 index라는 순번 값이 있다. (객체에서의 key값과 같다.)

• index값은 0부터 시작한다.

• 배열의 내부 메소드인 indexOf를 통해 index 값을 확인하거나 arr[index]를 통해 해당하는 요소 값을 출력할 수 있다.

• arr.length는 배열 요소의 개수(길이)를 나타낸다. (index와 기준이 다름을 꼭 기억하자)

---

Looping over an array

• 배열을 순회하면서 값을 출력하는 방법은 다음과 같다.

1. For loop 사용

const hangeul = ['가', '나', '다', '라'];
function printText(arr) {
  for (let i = 0; i < arr.length; i++) {
    console.log(`index is ${i}, element is ${arr[i]}`);
  }
}
printText(hangeul); // index is 0, element is 가
                    // index is 1, element is 나
                    // index is 2, element is 다
                    // index is 3, element is 라

• for loop operator 사용을 통해 위와 같이 index 및 value 값들을 출력할 수 있다.

---

2. For...of 사용

const hangeul = ['가', '나', '다', '라'];
function printText(arr) {
  for (const element of arr) {
    console.log(`index is ${arr.indexOf(element)}, element is ${element} `);
  }
}
printText(hangeul); // index is 0, element is 가
                    // index is 1, element is 나
                    // index is 2, element is 다
                    // index is 3, element is 라

• for..of문을 사용하면 우선적으로 index값이 아닌, 요소 값을 얻을 수 있다.
• 배열은 객체의 일종이기 때문에 for..in 또한 사용이 가능하지만 , 되도록 사용하지 않는다. (모던자바스크립트 객체 반복문 참고)

---

3. ForEach() 사용

const hangeul = ['가', '나', '다', '라'];
hangeul.forEach(function (value) {
  console.log(value);
}); // 가
    // 나
    // 다
    // 라

• 배열 내부 메소드인 forEach()를 통해 배열 안의 요소들을 모두 출력할 수 있다.
• 필요에 따라 index, array 까지 인자로 전달 후 출력할 수 있다.

---

Addition, delete

1. Addition - arr.push()

const hangeul = ['가', '나', '다', '라'];
hangeul.push('마', '바', '사')
console.log(hangeul); // ["가", "나", "다", "라", "마", "바", "사"]

• push() 메소드를 사용하여 기존에 존재하는 배열의 끝에 요소들을 추가할 수 있다.

---

2. Delete - arr.pop()

const hangeul = ['가', '나', '다', '라'];
hangeul.pop();
console.log(hangeul); //["가", "나", "다"]

• pop() 메소드를 사용하여 배열의 마지막 요소 1개를 삭제한다.

---

3. Addition - arr.unshift()

const hangeul = ['가', '나', '다', '라'];
hangeul.unshift();
console.log(hangeul); //["마", "바", "사", "가", "나", "다", "라"]

• unshift() 메소드를 사용하여 배열의 맨 앞에 요소들을 추가한다.

---

4. Delete - arr.shift()

const hangeul = ['가', '나', '다', '라'];
hangeul.shift();
console.log(hangeul); // ["나", "다", "라"]

• shift() 메소드를 사용하여 배열의 맨 앞에 요소 1개를 삭제한다.

---

추가...

• copy 까지 내용을 더 써보려고 했지만.. 너무 길어질거 같아서 다음에 작성해보도록 하겠다... (오늘은 자기소개서 JS파일 작성 마무리를....)