[🥸JavaScript]📝콜백함수, 배열함수, 메서드 정리➰(foreach, map)

📍 개요

◾ 함수의 구조를 분석할 수 있고 콜백 함수의 개념과 정의방식에 대해 학습해보았습니다.
◾ 배열함수 및 메소드 종류에 대해 배우고 콘솔창에 출력해보는 실습해보는 시간을 가졌습니다.

---

📌 함수의 구조

함수는 명령어를 묶어놓은 블록으로 이해하면 쉽습니다.
function 키워드를 사용하거나 화살표 함수 등으로 표현합니다.

function 함수명(param1, param2) { // parameter
  return 반환값; // statements
}

❗return이 없거나 리턴값이 존재하지 않으면 undefined를 반환하게 됩니다.

 

💭 parameter => { statements } 의 이해

✔️`parameter` : 함수의 매개변수(여러 개 정의 가능)
✔️`statements` : 함수가 수행할 작업을 정의하는 코드 블록(실행 가능한 코드의 기본 단위)
 

/* 함수 구조 파악 예제 */
const sum = 0;

// 화살표 함수 정의
const add = (x, y) => { // 매개변수(parameter)
  let result = x + y; // 지역변수
  return result; // statement
};

// 함수호출
const result = add(5, 3); // 인수(Argument)

 

❗파선아실
파라미터는 선언, 아규먼트는 실제값

---

🤔함수는 어떤 상황에서 쓰일까요?

반복적인 작업을 함수로 추상화 시키는 작업을 한답니다.
추상화는 말 그대로 사물이나 어떠한 것에 대한 구체적인 형상이 아니라
핵심적으로 떠오르는 내용을 간추리는 것을 말하죠.
 
이처럼 반복적이고 복잡한 로직을 함수나 모듈로 단순화하고
핵심적인 인터페이스로 제공하는 것이 바로 추상화라고 합니다!
 
👉🏻 이를 통해 복잡한 구조나 세부 사항에 신경 쓰지 않고도
작업을 진행하거나 시스템을 이해할 수 있도록 도와줍니다.

✔️ 재사용성을 높이고 코드의 유지 보수를 용이하게 만듭니다.
✔️  이렇게 하면 코드의 복잡성을 줄일 수 있습니다.
 

---

📌 CallBack 함수 개념과 정의 방식

`Callback` 함수는 매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것 의미합니다.
콜백 함수는 자바스크립트에서 사용할 수 있는 다양한 함수 정의 방식 중 어떤 것이든 사용할 수 있는데요!
 
✏️ 각 함수 정의 방식에 대해서도 한 번 짚고 넘어가보겠습니다.
 

📁 함수 선언문

✔️ 호이스팅 가능
✔️ 함수명 필수
✔️ 함수 본문과 정의 포함
 

function Rectangular(width, height) {
        return width * height;
}

 
❗호이스팅이란? 선언문으로 정의된 함수는 코드의 상단으로 끌어올려져, 선언 이전에도 호출할 수 있습니다.
 

📁 함수 표현식

✔️ 호이스팅 불가
✔️ 함수명 있을 수도 있고 없을 수도 있음 👉🏻 익명함수
✔️ 변수 할당 가능 👉🏻 변수명으로 함수 접근 가능
 

const rectangularEx = function (width, height) {
        return width * height;
};

 
 

📁 화살표 함수

✔️ 짧고 간결한 문법
✔️ this 바인딩
✔️ 인라인 함수
 

/* 화살표 함수 정의 방법1 : 단일 표현식 */
const rectangularArrow = (width, height) => width * height;

/* 화살표 함수 정의 방법2 : 중괄호 & 리턴값 사용 */
const rectangularArrow = (width, height) => {
  return width * height;
};

자바에서 this는 인스턴스 자신을 가리키는 참조 변수를 뜻하는데요.
주로 매개변수와 객체 자신이 가지고 있는 멤버변수명이 같을 경우 구분하기 위해 사용됩니다.
❗그러나 자바스크립트에서 this는 객체 자신이 아니라 함수 호출 방식에 따라 다르게 바인딩됩니다.
예를 들어 메소드 호출, 생성자 호출 등에 따라 참조하는 객체가 달라집니다.

인라인 함수는 호출되는 위치에 모든 코드를 직접 작성하는 방식입니다.
함수 정의를 호출 위치에 직접 삽입하여 코드의 가독성을 높이는 데 사용됩니다.

---

📌 배열의 개념(index, elements)

배열은 여러 데이터가 입력될 때 순서대로 저장되는 객체입니다.
하나의 구조에서 데이터를 추가하거나 제거, 정렬, 검색 등 다양한 작업을 수행할 수 있습니다.
 
✔️ `index` : 배열의 순서값(= 원소의 위치)
✔️ `elements` : 배열의 인덱스에 위치하는 값(= 실제 데이터)
 

/* 배열 정의 * /
let arr1 = []; // 초기화X, 빈 배열 생성
let arr2 = [10, 20, 30]; // 배열을 정의하면서 초기화
let arr3 = new Array(40, 50, 60); // 새로운 배열을 생성하고 초기화
let arr4 = new Array(5); //길이가 5인 배열을 생성(초기화X, 빈 배열 생성)

/* 인덱스를 사용하여 배열의 원소에 접근 */
console.log(arr[0]);  // 출력: 10
console.log(arr[1]);  // 출력: 20

📌 배열 기본 메서드 push(), pop(), shift(), unshift()

✅ `push` : 배열 끝 부분의 인덱스 삽입 👉🏻 `스택, 데크, 큐`
✅ `pop` : 배열 끝 부분의 인덱스 제거 후 반환 👉🏻  `스택, 데크`
✅ `shift` : 배열 시작 부분의 인덱스 제거 후 반환 👉🏻 `큐, 데크`
✅ `unshift` : 배열 시작 부분에 새로운 인덱스 삽입 👉🏻 `데크`

---

⭐ 자주 쓰이는 배열 메서드 sort(), foreach(), map()

1️⃣ sort()

◾ 배열의 요소를 원래 배열에서 정렬하여 반환합니다.
◾숫자나 다른 타입의 값을 정렬할 때는 비교함수를 사용하여 정렬 순서를 정의할 수 있습니다.
 

/* 기본 문자 정렬 예제 */
let fruits = ['banana', 'apple', 'cherry'];
fruits.sort();
console.log(fruits); // ["apple", "banana", "cherry"]

/* 비교 함수와 sort() 함수를 이용한 예제 */
const numbers = [5, 3, 8, 1, 2];
numbers.sort((a, b) => b - a); // 내림차순, 오름차순 (a, b) => a - b
console.log(numbers); // [8, 5, 3, 2, 1]

---

2️⃣ foreach()

◾ 배열의 모든 요소를 순회하며 작업을 수행합니다.
◾  반환값이 없으며, 원본 배열을 변경하지 않습니다.
◾  배열을 순회하면서 요소에 대해 특정 작업을 수행하고자 할 때 유용합니다.

// forEach를 통해 해당 값에 제곱값을 출력하는 코드
const arr = [1, 2, 3, 4, 5];
arr.forEach(num => {
	console.log(num ** num);
})

 

✏️ foreach의 역할과 구조 파악하기

/* 배열의 평균을 구하는 예제 */
const arr = [10, 20, 30, 40, 50];
let sum = 0;  // sum을 0으로 초기화

arr.forEach(function (num) { // Parameter(함수의 매개변수)
	sum += num;  // Statements
});

console.log(sum/arr.length);  // 결과 출력

---

3️⃣ map()

◾  배열의 각 요소를 변형하여 새로운 배열을 생성합니다.
◾  원본 배열은 변경되지 않습니다.
◾  변형된 결과를 기반으로 새로운 배열을 반환합니다.

const studentName = student.map(value => value['name']);

 

✏️ 맵 반복자 활용하기

`keys()` : Map 객체의 키들을 반복하는 iterator 객체를 반환합니다.
`values()` : Map 객체의 값들을 반복하는 iterator 객체를 반환합니다.
`entries()` : Map 객체의 각 키와 값을 쌍으로 반복하는 iterator 맵 객체를 반환합니다.
 

/* keys() 활용 예제 */
const map = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);

const keyIterator = map.keys();
const valueIterator = map.values();
const entryIterator = map.entries();

for (const key of keyIterator) {
  console.log(key);
} // 출력: 'a', 'b', 'c'

for (const value of valueIterator) {
  console.log(value);
} // 출력: 1, 2, 3

for (const [key, value] of entryIterator) {
  console.log(key, value);
} // 출력: 'a' 1, 'b' 2, 'c' 3

 
🧷 배열과 Map을 이용한 예제

<script>
    const student = [
        { "studentID" : "202400001",
            "name" : "민지",
            "major" : "컴퓨터과",
        },
        { "studentID" : "202400002",
            "name" : "하니",
            "major" : "경영과",
        },
        { "studentID" : "202400003",
            "name" : "다니엘",
            "major" : "행정과",
        },
        { "studentID" : "202400004",
            "name" : "해린",
            "major" : "교육과",
        }
    ];
    // student 배열에서 학생 이름만 추출하여 새 배열 생성
    const studentName = student.map(value => value['name']);
    console.log("학생 이름 목록:", studentName);

    // 1. 항목 추가
    student.push({
        "studentID" : "202400005",
        "name" : "혜인",
        "major" : "실용음악과"
    });

    // 2. map을 이용한 항목 변경
    const updatedStudent = student.map(student => {
        // 전공을 '과'-> '학과'로 변경
        let newMajor = student.major.replace(/과$/, '학과');

        // 이름에 '님'을 추가
        let newName = `{student.name}$ 님`;

        return {
            ...student,  // 기존 학생 데이터 유지
            major: newMajor, // 업데이트된 전공
            name: newName    // 업데이트된 이름
        };
    });

    console.log("변경된 학생 데이터:", updatedStudent);
</script>

 
🧷 출력화면

---

⭐ 그 외 메서드 slice(), join(), includes()

`slice()` : 배열의 일부를 새로운 배열로 반환

const arr = [1, 2, 3, 4, 5];
const newArr = arr.slice(1, 4); // [2, 3, 4]

`join()` : 배열의 모든 요소를 문자열로 결합

const arr = ['Apple', 'Banana', 'Cherry'];
const str = arr.join(', '); // "Apple, Banana, Cherry"

`includes()` : 배열이 특정 요소를 포함하고 있는지 확인(포함하면 true, 포함하지 않으면 false 반환)

const arr = [1, 2, 3, 4, 5];
const hasThree = arr.includes(3); // true
const hasTen = arr.includes(10); // false

 
 

📁 배열 전개구문( ... )

주로 배열이나 객체의 요소를 쉽게 분리하거나 결합할 때 사용합니다.
 
✅ 객체
{ ... object }

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };

// 객체 결합
const combinedObj = { ...obj1, ...obj2 };
console.log(combinedObj); // { a: 1, b: 2, c: 3, d: 4 }

// 객체 복사
const copyObj = { ...obj1 };
console.log(copyObj); // { a: 1, b: 2 }
console.log(obj1 === copyObj); // false

 
❗obj1과 copyObj 동일한 배열로 보이지만 두 객체를 비교하면
false로 출력되어 서로 다른 주소값을 갖는 객체라는 것을 알 수 있습니다.
 
✅ 배열
[ ... array ] 혹은 { ... array }

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// 배열 결합
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]

// 배열 복사
const copy = [...arr1];
console.log(copy); // [1, 2, 3]

 

---

📝 7일차 부트캠프 회고

1️⃣ 잘했던 점
오늘 배웠던 내용이 엄청나게 산더미였는데 점심시간 이후로 거의 패닉에 빠졌었다. 그래도 놓치지 않고 수업에 참여하려고 일단 이해가 안 가도 메모했다. 자바스크립트는 교안으로 보는 방법보다는 직접 예제 코드를 보면서 공부하는 게 더 빠르게 습득할 수 있었다. 

2️⃣ 부족했던 점
자바와 자바스크립트가 무언가 비슷하기도 하면서 확연히 다른 점이 있어서 헷갈린다.

1. 변수 타입이 자바는 int, double, String 등 명시적으로 지정해줘야 되는데 자바스크립트는 동적 타입이라 let, const으로 타입을 지정해줘도 숫자, 문자열 등을 쓸 수 있다는 점이다.

2. 이 외에도 this 키워드가 가장 충격적이었다. 자바에서는 this가 자기 자신을 의미하는데 자바스크립트에서는 함수 호출 방식에 따라 this의 의미가 달라지고 윈도우창이 열리기도 하고 그런다.

3. 오버로딩이 없기 때문에 같은 이름의 함수와 메서드를 여러 개 정의하지 못한다. 자바에서는 메서드 이름이 같아도 매개변수로 구분이 가능했었는데 말이다!

완죠니 이거 충격이로구만

내일 자바스크립트 마지막 시간인데 이런 차이점들을 잘 정리해서 혼동하지 않게 공부하겠다.

3️⃣ 향후 개선 방향
그래도 자바스크립트는 자바의 기본적인 베이스 정도는 비슷하다!
향후 예정된 수업도 열심히 참여해서 잘 마무리해보자.