[ES6] 19. 배열(Array) 객체에서 객체에 불리언(`{}`)이나 함수(`function() {}`), 실습

[ES6] 19. 배열(Array) 객체에서 [ 초기화, 접근,삽입 ,삭제, 배열 길이]

 

배열(Array)은 동일한 타입의 데이터를 순차적으로 저장하는 선형 자료구조입니다. 배열은 인덱스(Index)를 사용하여 각각의 원소에 접근할 수 있으며, 배열 내의 원소는 추가, 삭제가 가능합니다.

배열의 예시 JavaScript 코드:

```js
// 배열 생성과 초기화
const numbers = [1, 2, 3, 4, 5];
const fruits = ['apple', 'banana', 'orange', 'grape'];

// 배열 요소 접근
console.log(numbers[0]); // 1
console.log(fruits[2]); // orange

// 배열 요소 삽입
numbers.push(6); // [1, 2, 3, 4, 5, 6]
fruits.unshift('strawberry'); // ['strawberry', 'apple', 'banana', 'orange', 'grape']

// 배열 요소 삭제
numbers.pop(); // [1, 2, 3, 4, 5]
fruits.shift(); // ['apple', 'banana', 'orange', 'grape']

// 배열 길이
console.log(numbers.length); // 5
console.log(fruits.length); // 4
```

위 코드에서 배열 생성과 초기화하는 부분에서 `[ ]` 괄호 안에 각각의 요소를 쉼표("," )로 구분하여 입력합니다. 배열 요소에 접근하기 위해서는 인덱스를 사용하여 접근하며, 0부터 시작합니다. 배열에 요소를 추가하기 위해서는 `push()` 메서드를 사용하고, 배열에 요소를 제거하기 위해서는 `pop()` 또는 `shift()` 메서드를 사용합니다. 마지막으로, `length` 프로퍼티를 사용하여 배열의 길이를 구할 수 있습니다. 

배열은 프로그래밍에서 매우 유용하게 활용되는 자료구조이며, 다양한 데이터 처리와 관련된 작업들에서 자주 쓰입니다. 예를 들어, 여러 개의 데이터를 한번에 관리하거나 처리하는 등의 상황에서 배열을 사용하여 손쉽게 구현할 수 있습니다.

---

// This is how you declare an array in JavaScript
let myArray = [1, 2, 3, 4, 5];
// You can also declare an array using the Array constructor
let myOtherArray = new Array("apple", "banana", "orange");

myArray.splice(2, 2, "new element");
document.write(myArray);

 

myArray.splice(2, 2, "new element");  =

(첫번째 요소 인덱스 위치  0 , 1,  2 를 해서 2번째 요소가 됨),        (두번째 요소  인덱스 위치가 정해진곳에서 부터 2개를 지운다는것을 뜻함.)        ,(두번째 요소를 "new element"로 변경한다는 것을 뜻함.)

 

                      2: 첫번째 요소 ,  인덱스 위치  0 , 1,  2 를 해서 2번째 요소가 됨

                      2: 두번째 요소  인덱스 위치가 정해진곳에서 부터 2개를 지운다는것을 뜻함.

"new element" : 두번째 요소를 "new element"로 변경한다는 것을 뜻함.

 

`myArray.splice(2, 2, "new element")`는 `myArray` 배열에서 인덱스 2에서부터 2개의 요소를 제거하고, 그 자리에 "new element"를 추가하는 것을 의미합니다. 

- 첫 번째 인자: 수정을 시작할 인덱스 번호
- 두 번째 인자: 제거할 요소의 개수
- 세 번째 인자: 추가할 요소 (선택적)

 

수제추?

따라서 위 코드에서 `myArray` 배열의 세 번째와 네 번째 요소를 삭제하고, 세 번째 위치에 "new element"를 삽입합니다.

아래는 예시 코드입니다.

```js
let myArray = [1, 2, 3, 4, 5];
console.log(myArray); // [1, 2, 3, 4, 5]

myArray.splice(2, 2, "new element");
console.log(myArray); // [1, 2, "new element", 5]
```

위 코드에서 `myArray` 배열의 초기 값은 `[1, 2, 3, 4, 5]`입니다. 그리고 `myArray.splice(2, 2, "new element")`를 실행하면 `myArray` 배열의 인덱스 2 위치부터 2개의 요소, 즉 `3`, `4`가 삭제됩니다. 그리고 "new element"가 해당 위치에 삽입되어 `[1, 2, "new element", 5]`가 출력됩니다.

 

---

배열(Array)에 대한 `push()` 메서드는 배열의 맨 끝에 새로운 요소를 추가하는 메서드입니다. `pop()` 메서드는 배열의 맨 마지막 요소를 추출하여 삭제하는 메서드입니다.

예시 코드를 통해 설명해보겠습니다.

#### push() 메서드

```js
const numbers = [1, 2, 3, 4, 5];
numbers.push(6);

console.log(numbers); // [1, 2, 3, 4, 5, 6]
```

위 코드에서 `numbers.push(6);`는 `numbers` 배열의 맨 끝에 숫자 `6`을 추가합니다. `push()` 함수를 실행한 후 `numbers`의 값은 `[1, 2, 3, 4, 5, 6]`이 됩니다.

#### pop() 메서드

```js
const numbers = [1, 2, 3, 4, 5];
const lastNumber = numbers.pop();

console.log(numbers); // [1, 2, 3, 4]
console.log(lastNumber); // 5
```

위 코드에서 `numbers.pop()`는 `numbers` 배열의 맨 마지막 요소를 추출하여 삭제합니다. 이때 반환된 값은 추출된 요소 값, 즉 `5`가 됩니다. `pop()` 메서드 실행 후 `numbers` 배열의 값은 `[1, 2, 3, 4]`가 됩니다.

이처럼 `push()`와 `pop()` 메서드를 이용하면 배열의 요소를 간단하게 추가하거나 삭제할 수 있습니다. `push()` 메서드는 주로 배열의 끝에 요소를 추가할 때 사용되며, `pop()` 메서드는 주로 마지막 요소를 추출하여 삭제하는 데 사용됩니다.

 

 

배열(Array) 객체에서 객체에 불리언(`{}`)이나 함수(`function() {}`), 실습

 

배열(Array) 객체에서 객체에 불리언(`{}`)이나 함수(`function() {}`)를 사용하면 해당 배열 요소로 객체가 추가됩니다. 이 객체 내부에는 불리언 값과 함수가 저장됩니다.

예시 코드를 통해 설명해보겠습니다.

const myArray = [
  {}, // 빈 객체
  function () {
    // 함수
    console.log("This is a function inside an array.");
  },
  {
    name: "John", // 객체
    age: 30,
    gender: "Male"
  }
];

document.write(myArray[0] + "<br>"); // {} (한 줄 내리기)
document.write(myArray[1] + "<br>"); // [Function] (한 줄 내리기)
document.write(myArray[2] + "<br>"); // Object {name: "John", age: 30, gender: "Male"} (한 줄 내리기)
document.write(myArray[2].name + "<br>"); // John (한 줄 내리기)

myArray[0].truthy = true; // 객체 내부에 불리언 값 추가
document.write(myArray[0].truthy + "<br>"); // true

myArray[0].someFunction = function () {
  // 객체 내부에 함수 추가
  document.write(
    "This is a function inside an object inside an array." + "<br>"
  );
};
myArray[0].someFunction(); // This is a function inside an object inside an array.

#배열 #js #자바스크립트배열 #배열함수 #jsarrys #chartjs #jschartlibrary #chartjstutorial #chartjsarrayseries #js강좌 #p5js #배열함수 #arrayvariablechartjs #js반복문