#JavaScript Grammar_배열

# 배열(Aray) 생성

let fruits = ["사과", "바나나", "오렌지"];

- `fruits`는 배열이고, `[ ]`안에 "사과", "바나나", "오렌지"와 같은 요소가 쉼표 `,`로 구분 저장됨.

- 배열은 순서대로 요소를 저장하며, 각 요소에는 인덱스가 할당됨. 

 

# 배열의 크기 지정

let numbers = new Array(5);

- 크기가 5인 배열 numbers를 생성하며, new Array()를 사용하여 배열의 크기를 지정할 수 있음.

 

# 배열 요소 접근 

배열의 요소에 접근할 때는 해당 요소의 인덱스를 사용하며, 인덱스는 0부터 시작함.

let fruits = ["사과", "바나나", "오렌지"];
console.log(fruits[0]); // "사과"
console.log(fruits[1]); // "바나나"
console.log(fruits[2]); // "오렌지"

-  `fruits` 배열의 첫 요소는 인덱스 0에 저장된 "사과", 두 번째 요소는 인덱스1에 저장된 "바나나"임. 

-  위의 예시에서 배열 fruits의 첫 번째 요소부터 세 번째 요소까지 출력함.

-  배열의 요소에 접근할 때는 대괄호([]) 안에 인덱스 값을 넣습니다.

 

---

# 배열 메소드

1) `push( )` 메소드 

`push( )` 메소드는 배열의 끝에 새로운 요소를 추가함. 

let fruits = ["사과", "바나나"];
fruits.push("오렌지");
console.log(fruits); // ["사과", "바나나", "오렌지"]

- "오렌지"가 배열의 끝에 추가됨. 

 

2) `pop( )`메소드 

`pop( )`메소드는 배열의 마지막 요소를 삭제함. 

let fruits = ["사과", "바나나", "오렌지"];
fruits.pop();
console.log(fruits); // ["사과", "바나나"]

- "오렌지"가 배열에서 제거됨.

 

3) `shift()` 메소드

 `shift()` 메소드는 배열의 첫 번재 요소를 삭제함. 

let fruits = ["사과", "바나나", "오렌지"];
fruits.shift();
console.log(fruits); // ["바나나", "오렌지"]

- "사과"가 배열에서 제거됨. 

 

4) `unshift( )` 메소드 

`unshift( )` 메소드는 배열의 맨 앞에 새로운 요소를 추가합니다. 

let fruits = ["바나나", "오렌지"];
fruits.unshift("사과");
console.log(fruits); // ["사과", "바나나", "오렌지"]

- "사과"가 배열의 맨 앞에 추가됨. 

 

5) `splice( )` 메소드 

`splice( )` 메소드는 배열에서 요소를 삭제하거나 새로운 요소를 추가함. 

let fruits = ["사과", "바나나", "오렌지"];
fruits.splice(1, 1, "포도");
console.log(fruits); // ["사과", "포도", "오렌지"]

- "바나나"자리에 "포도"로 대체됨. // 첫 번째 자리 이후 하나의 단어 삭제 후 대체 

 

6) `slice` 메소드 

 `slice` 메소드는 배열의 일부분을 복사하여 새로운 배열을 생성함. 

let fruits = ["사과", "바나나", "오렌지"];
let slicedFruits = fruits.slice(1, 2);
console.log(slicedFruits); // ["바나나"]

- `slice(1, 2)`는 두 번째 요소 "바나나"를 복사한 새로운 배열을 생성함. 

 

---

##여기서부터 콜백 함수 ~~~

 

7) `forEach( )` 메소드 

 `forEach( )` 메소드는 배열의 모든 요소에 대해 지정된 함수를 실행하며, 각 요소를 반복적으로 처리하는데 사용함.  `forEach( )` 메소드는 반환값이 없으며, 주로 배열의 각 요소에 어떤 작업을 수행하고자 할 때 사용됨.

let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
  console.log(number); // 각 요소가 순차적으로 출력됨
});

-  위의 코드는  `forEach( )` 메소드를 사용하여 배열 `numbers`의 모든 요소를 출력함. 

-  `forEach( )`는 각 요소에 대해 함수를 실행하므로 1부터 5까지의 숫자가 각각 출력됨.

 

8) `map( )` 메소드 

`map( )` 메소드는 배열의 모든 요소에 대해  원래 배열을 변경하지 않고 지정된 함수를 실행하며, 각 요소에 대한 결과를 새로운 배열로 반환함. 

let numbers = [1, 2, 3, 4, 5];
let squaredNumbers = numbers.map(function(number) {
  return number * number;
});
console.log(squaredNumbers); // [1, 4, 9, 16, 25]

- `map( )` 메소드를 사용하여 배열 `numbers`의 모든 요소를 제곱하여 새로운 배열 ` squaredNumbers `를 만듬.

- 각 요소가 제곱되어 새로운 배열에 저장되며, 원래 배열은 그대로 유지함. 

 

9) `filter( )` 메소드

`filter( )` 메소드는 배열의 각 요소에 지정된 함수를 실행하고,결과가 `true`인 요소만을 가지는 새로운 배열을 반환함. 

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});
console.log(evenNumbers); // [2, 4]

- `filter( )` 메소드를 사용하여 배열 `numbers`에서 짝수만을 추출하여 새로운 배열 ` evenNumbers `을 만듬.

- 콜백 함수는 각 요소에 대해 실행되고, ` number % 2 === 0` 조건을 만족하는 요소만을 새로운 배열에 저장함.

 

10) `reduce( )` 메소드 

`reduce( )` 메소드는 배열의 모든 요소를 하나로 누산하고 그 결과를 반환하며, 초기 누산값(accumulator)과 각 요소를 조합하여 최종 결과를 반환함. 

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(sum); // 15

- `reduce( )` 메소드를 사용하여 배열 `numbers`의 모든 요소를 더해 최종 결과를 반환함. 

- 초기 누산값은 `0`이며, 각 요소가 더해져 최종 결과인 `15`가 출력됨. 

 

---

# 콜백함수란? 

- 콜백 함수(callback function)는 JavaScript에서 중요한 개념 중 하나로, 함수를 다른 함수의 인수로 전달하고, 필요한 시점에 실행되도록 하는 함수.

- 콜백 함수를 사용하면 비동기 작업, 이벤트 처리, 데이터 처리, 타이머 기능 등 다양한 상황에서 코드의 유연성을 높일 수 있음. 

 

1. 함수는 JavaScript에서 일급 객체로 취급되기 때문에, 함수를 변수에 할당하거나 함수를 다른 함수의 매개변수로 전달.

2. 콜백 함수는 다른 함수(주로 고차 함수, 즉 함수를 인수로 받는 함수)에 전달되어, 나중에 실행될 함수를 지정. 

3. 이렇게 전달된 콜백 함수는 필요한 시점에 호출되며, 해당 함수가 실행될 때 콜백 함수에 인자를 전달하여 작업을 수행

 

예를 들어, 이벤트 처리에서 콜백 함수를 사용하는 경우, 이벤트가 발생하면 콜백 함수가 호출됨. 또한 비동기 작업에서도 콜백 함수를 사용하여 작업이 완료되면 콜백 함수가 실행됨. 

function doSomethingAsync(callback) {
  setTimeout(function () {
    console.log("작업 완료");
    callback(); // 콜백 함수 호출
  }, 1000);
}

function myCallback() {
  console.log("콜백 함수가 호출되었습니다.");
}

doSomethingAsync(myCallback);

-  `doSomethingAsync` 함수는 비동기 작업을 수행하고, 작업이 완료되면 전달된 `callback` 함수를 호출함. 이러한 방식으로 콜백 함수를 사용하면 비동기 코드를 구조화하고 원하는 동작을 실행할 수 있음.