2월 2일 (1월 31일 복습) 프로그래머스

// 객체 newYear를 정의함
const newYear = {
  name: "을사년",  // key: "name", value: "을사년"
  number: 2025,    // key: "number", value: 2025
  wish: ["건강", "다이어트하기", "잘익은 감자가 되기", "취업"],  // key: "wish", 배열 형태로 여러 가지 희망사항을 저장
  1: "숫자도 들어갈 수 있지요", // 숫자도 key로 사용할 수 있음, 권장되지는 않음
  true: "가능?", // key로 'true'라는 문자열을 사용할 수 있음, 여기서 true는 boolean이 아니라 문자 'true'임
  hello: function () {  // key: "hello", value: 함수 (function) 
    console.log("안녕하세요!");  // 함수 안에서 "안녕하세요!" 출력
  },
};

// newYear 객체의 "name" 프로퍼티 출력
console.log(newYear.name);  // 출력: "을사년"

// newYear 객체의 "number" 프로퍼티 출력
console.log(newYear.number);  // 출력: 2025

// 객체에서 대괄호로 접근할 때
console.log(newYear["number"]);  // 출력: 2025

// 배열 형식으로 선언된 "wish" 배열 출력
console.log(newYear.wish);  // 출력: ["건강", "다이어트하기", "잘익은 감자가 되기", "취업"]

// 대괄호로 접근한 "wish" 배열 출력 (위와 동일한 결과)
console.log(newYear["wish"]);  // 출력: ["건강", "다이어트하기", "잘익은 감자가 되기", "취업"]

// 숫자로 된 프로퍼티는 접근이 불가능하고 오류가 나기 때문에 주석 처리됨
// console.log(newYear.1); // SyntaxError 발생!

// "1"이라는 key로 접근 (문자열 형태로 사용)
console.log(newYear["1"]);  // 출력: "숫자도 들어갈 수 있지요"

// "true"라는 key로 접근
console.log(newYear.true);  // 출력: "가능?"

// "hello" 함수 출력 (함수 자체 출력, 호출하지 않음)
console.log(newYear.hello);  // 출력: function() { console.log("안녕하세요!"); }

// "hello" 함수 호출 (출력: "안녕하세요!")
console.log(newYear.hello());  // 출력: "안녕하세요!"
newYear.hello();  // 출력: "안녕하세요!"

// ------------------

// Object.keys()는 객체의 모든 프로퍼티(키)들을 배열로 반환
console.log(Object.keys(newYear));  // 출력: ["name", "number", "wish", "1", "true", "hello"]

// 자바스크립트에서 문자열을 결합하는 방식: "b" + "a" + +"a" + "a" => "banana"
console.log(("b" + "a" + +"a" + "a").toLowerCase());  // 출력: "banana"

// Object.values()는 객체의 모든 값들을 배열로 반환
console.log(Object.values(newYear));  // 출력: ["을사년", 2025, ["건강", "다이어트하기", "잘익은 감자가 되기", "취업"], "숫자도 들어갈 수 있지요", "가능?", function() { console.log("안녕하세요!"); }]

// Object.entries()는 객체의 모든 키와 값을 배열로 반환
console.log(Object.entries(newYear));  // 출력: [["name", "을사년"], ["number", 2025], ["wish", ["건강", "다이어트하기", "잘익은 감자가 되기", "취업"]], ["1", "숫자도 들어갈 수 있지요"], ["true", "가능?"], ["hello", function() { console.log("안녕하세요!"); }]

// -------------------

// 배열 정의
const language = ["python", "js", "c++", 0, true, {}, []];

// 배열에서 특정 범위의 요소를 추출 (1번 인덱스부터 3번 인덱스까지, 끝 인덱스는 제외)
console.log(language.slice(1, 3));  // 출력: ["js", "c++"]  (0번 인덱스는 제외, 3번 인덱스는 포함되지 않음)

// 배열의 길이 출력
console.log(language.length);  // 출력: 6 (배열의 원소 개수)

// 배열을 연결하여 새로운 배열을 생성
console.log(language.concat(language));  // 출력: ["python", "js", "c++", 0, true, {}, [], "python", "js", "c++", 0, true, {}, []]

// language 배열을 3번 연결한 새로운 배열
const l2 = language.concat(language, language);  // 원본 배열을 변경하지 않고 새로운 배열을 생성
console.log(language);  // 출력: ["python", "js", "c++", 0, true, {}, []]
console.log(l2);  // 출력: ["python", "js", "c++", 0, true, {}, [], "python", "js", "c++", 0, true, {}, [], "python", "js", "c++", 0, true, {}, []]

// 배열의 마지막 요소를 제거
l2.pop();  // 맨 마지막 요소 제거
console.log(language);  // 출력: ["python", "js", "c++", 0, true, {}, []] (변경 없음)
console.log(l2);  // 출력: ["python", "js", "c++", 0, true, {}, [], "python", "js", "c++", 0, true, {}, []]

// 배열을 순차적으로 접근 (for문 사용)
for (let i = 0; i <= language.length; i++) {
  console.log(i, language[i]);  // 배열의 인덱스와 해당 값 출력
  // 언급: 만약 배열 범위를 벗어난 인덱스를 호출하면 "undefined"가 출력됨
}

// 배열을 for...of로 순차적으로 접근 (인덱스 사용하지 않음)
for (const v of language) {
  console.log(v);  // 배열의 각 값(v)을 순차적으로 출력
}

// 객체의 프로퍼티(key)를 순차적으로 접근
for (const key in newYear) {
  console.log(key, newYear[key]);  // 객체의 key와 해당 값(key에 해당하는 value)을 출력
}

 

---

📌 1번 slice() 문제 답변 ❌ (오류 있음!)

js

복사편집

const languages = ["Python", "JavaScript", "C++", "Ruby"]; const result = languages.slice(0, 2); // ❌ 오류 있음! console.log(result); // ["JavaScript", "C++"] (❌ 잘못됨)

❌ 문제점

• slice(0, 2)을 하면 "Python", "JavaScript"가 나옴!
• "JavaScript"와 "C++"만 가져오려면?
  👉 slice(1, 3)이 정답! ✅
  js

  복사편집

  const result = languages.slice(1, 3); console.log(result); // ["JavaScript", "C++"]

---

📌 2번 length 문제 답변 ❌ (오류 있음!)

js

복사편집

const fruits = ["🍎", "🍌", "🍇", "🍉", "🥭"]; console.log(fruits.length); // ❓ 몇이 나올까? -> 4? ❌

💡 오답!
✅ fruits.length는 5가 나와!
왜냐하면 배열의 길이는 0부터 시작하는 게 아니라, 요소의 개수를 세는 거야!

js

복사편집

const fruits = ["🍎", "🍌", "🍇", "🍉", "🥭"]; console.log(fruits.length); // 5 ✅

• "🍎", "🍌", "🍇", "🍉", "🥭" → 총 5개니까 5가 나옴!

---

📌 3번 concat() 문제 답변 ❌ (오류 있음!)

js

복사편집

const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const result = concat(arr1, arr2); // ❌ 오류! console.log(result); // [1, 2, 3, 4, 5, 6]

❌ 문제점
👉 concat()은 배열에서 사용하는 메서드야!
👉 concat(arr1, arr2); ❌ 이렇게 쓰면 안 되고, **arr1.concat(arr2);**라고 써야 해!

✅ 정답

js

복사편집

const result = arr1.concat(arr2); console.log(result); // [1, 2, 3, 4, 5, 6]

💡 concat()은 기존 배열을 변경하지 않고, 새로운 배열을 만들어 준다!

js

복사편집

console.log(arr1); // [1, 2, 3] (원본 유지!) console.log(arr2); // [4, 5, 6] (원본 유지!)

---

📌 4번 pop() 문제 답변 ❌ (오류 있음!)

js

복사편집

const numbers = [10, 20, 30, 40]; console.log(numbers.pop()); // ❓ 무엇이 출력될까? -> 40 ✅ 정답! console.log(numbers); // ❓ numbers 배열은 어떻게 변할까? -> [10, 20, 30, 40] ❌ (오류 있음!)

✅ 첫 번째 출력

js

복사편집

console.log(numbers.pop()); // 40 ✅ (마지막 요소가 제거됨!)

❌ 두 번째 출력 (오류 있음!)

• pop()은 마지막 요소를 제거하면서 반환하는 함수야!
• 즉, numbers 배열에서 40이 사라짐!

✅ 정답

js

복사편집

console.log(numbers); // [10, 20, 30] ✅

📌 pop()은 원본 배열을 바꾼다! (40이 사라짐!)

---

📌 5번 for 반복문 문제 ✅ 정답!

js

복사편집

const pets = ["🐶", "🐱", "🐹"]; for (let i = 0; i < pets.length; i++) { console.log(pets[i]); }

✅ 정답: 3번 출력됨!
✔ pets.length가 3이니까 i = 0, 1, 2까지만 실행됨!
✔ i = 3이 되면 i < pets.length 조건이 거짓이라 멈춤!

출력

복사편집

🐶 🐱 🐹

---

📌 6번 for...of 설명과 답 ✅

js

복사편집

const colors = ["🔴", "🟢", "🔵"]; for (const color of colors) { console.log(color); }

💡 for...of란?
👉 배열의 요소(값)만 가져오는 반복문!
👉 for (const 변수 of 배열) {}
👉 color에 배열의 값 하나씩 들어감!

📌 출력 결과

복사편집

🔴 🟢 🔵

✅ 정리

• for...of는 배열의 값만 가져올 때 사용!
• for문보다 코드가 짧고 가독성이 좋음!

---

📌 7번 for...in 설명과 답 ✅

js

const student = { name: "Alice", age: 14, hobby: "축구" }; for (const key in student) { console.log(key, student[key]); }​

복사편집

const student = { name: "Alice", age: 14, hobby: "축구" }; for (const key in student) { console.log(key, student[key]); }

💡 for...in이란?
👉 객체(Object)의 키(key)를 가져오는 반복문!
👉 for (const 변수 in 객체) {}
👉 key에는 객체의 속성 이름(키)이 들어감!

📌 출력 결과

nginx

복사편집

name Alice age 14 hobby 축구

✅ 정리

• for...in은 객체 안의 모든 키-값을 가져올 때 사용!
• 배열에는 잘 사용하지 않음! (for...of가 더 적합)

---

🎯 최종 정리

개념설명예제

slice(1, 3)	배열을 잘라서 새로운 배열 생성 (끝점은 포함X)	arr.slice(1, 3)
length	배열 길이 확인	arr.length
concat()	배열을 합쳐서 새로운 배열 생성 (원본 유지)	arr.concat(arr2)
pop()	마지막 요소 제거 (원본 변경됨)	arr.pop()
for	인덱스를 사용해 반복	for (let i = 0; i < arr.length; i++)
for...of	배열 요소(값)만 가져오기	for (const v of arr)
for...in	객체의 키(key) 가져오기	for (const key in obj)

---

📌 마무리

✅ 배열을 자르거나 길이를 구할 때 slice(), length
✅ 배열을 합칠 때 concat()을 사용 (원본 변경❌)
✅ 배열에서 마지막 요소를 제거할 때 pop() 사용 (원본 변경⭕)
✅ 반복문 for, for...of, for...in의 차이점 이해하기

---

문제. 및 프롬프트 설명

나는 자바스크립트 nextjs로 풀스택을 지망하는 곧 졸업을 앞둔 졸업작품에서 실제 배포를 겪고 여러 해커톤도 진행해본 수준의 개발자야.
나를 위한 자바스크립트 알고리즘 코딩테스트 대비를 위한 현재 1월 31일부터 3월 1일까지의 커리큘럼을 짜줘.
프로그래머스 사이트를 이용하여 Lv1, Lv2, Lv3 문제와 고득점 키트, 카카오 기출 문제를 중심으로 활용해서 작성해주고 편의상 링크를 꼭 포함해줘.

/*
힌트: 
- 최종 메시지를 만들기 위해서는 각 사용자의 최종 닉네임을 알아야 합니다
- 객체를 사용하여 userId를 key로, 최신 닉네임을 value로 저장하면 편리합니다
- 입장/퇴장 기록은 별도로 저장해두었다가, 마지막에 최종 닉네임과 합쳐서 결과를 만들면 됩니다
*/

function solution(record) {
    // 1. userId를 key로 하고 닉네임을 value로 하는 객체를 선언하세요
    const obj = {};

    // 2. 입장/퇴장 기록을 담을 배열을 선언하세요
    const rec = [];

    // 3. record 배열을 순회하면서 각 행동(Enter/Leave/Change)에 따라 처리하세요
    for (const v of record) {
        // 3-1. 공백을 기준으로 문자열을 분리하세요 (안 배운 건 검색이나 추가 공부)
        const result = v.split(" "); // 결과가 뭐야? -> array -> 인덱스 0, 1, 2...

        // 3-2. 첫 번째 단어(action)에 따라 다르게 처리하세요
        if (result[0] == "Enter") {
            // Enter인 경우: 
            // - userId(두번째, 1)와 닉네임(세번째, 2)을 객체에 저장
            obj[result[1]] = result[2]; // 각각을 변수로 선언해서 뺀다음에 대입해도 괜찮다.
            // 주석과 콘솔로 출력하면서 표시하면서 가면 더 좋다...
            // - 입장 기록 추가 (기록 -> 배열 추가 -> 끝 추가 -> ... push)
            rec.push(`${result[1]}님이 들어왔습니다.`); // 나중에 닉네임이 최종 확정되면
            // replace라는 걸로 바꿀 수 있어요.

        } else if (result[0] == "Leave") {
            // Leave인 경우:
            // - 퇴장 기록 추가
            rec.push(`${result[1]}님이 나갔습니다.`); // 나중에 닉네임이 최종 확정되면
        } else if (result[0] == "Change") {
            // Change인 경우:
            // - userId의 닉네임만 갱신
            obj[result[1]] = result[2];
        }
    }

    // 4. 모든 기록을 순회하면서 최종 메시지 배열을 생성하세요
    return rec;
}

// -------------------------------------------------------

/*
힌트: 
- 최종 메시지를 만들기 위해서는 각 사용자의 최종 닉네임을 알아야 합니다
- 객체를 사용하여 userId를 key로, 최신 닉네임을 value로 저장하면 편리합니다
- 입장/퇴장 기록은 별도로 저장해두었다가, 마지막에 최종 닉네임과 합쳐서 결과를 만들면 됩니다
*/

function solution(record) {
    // 1. userId를 key로 하고 닉네임을 value로 하는 객체를 선언하세요
    const userInfo = {};

    // 2. 입장/퇴장 기록을 담을 배열을 선언하세요
    const messages = [];

    // 3. record 배열을 순회하면서 각 행동(Enter/Leave/Change)에 따라 처리하세요
    for (const log of record) {
        // 3-1. 공백을 기준으로 문자열을 분리하세요
        const [action, userId, nickname] = log.split(" ");

        // 3-2. 첫 번째 단어(action)에 따라 다르게 처리하세요
        if (action === "Enter") {
            // Enter인 경우: 
            // - userId와 닉네임을 객체에 저장
            userInfo[userId] = nickname;
            // - 입장 기록 추가
            messages.push([userId, "님이 들어왔습니다."]);

        } else if (action === "Leave") {
            // Leave인 경우:
            // - 퇴장 기록 추가
            messages.push([userId, "님이 나갔습니다."]);

        } else if (action === "Change") {
            // Change인 경우:
            // - userId의 닉네임만 갱신
            userInfo[userId] = nickname;
        }
    }

    // 4. 모든 기록을 순회하면서 최종 메시지 배열을 생성하세요
    return messages.map(([userId, message]) => userInfo[userId] + message);
}

---

 

JavaScript 핵심 5 (함수 1)

// "😍 여기서"를 출력
console.log("😍 여기서");

// 함수 선언은 호이스팅(hoisting)으로 인해, 함수가 선언되기 전에 호출이 가능함
myFun(); // 실행된다. (호이스팅 덕분에, 아래에서 선언된 함수가 호출된다)

// 함수 선언 (function declaration)
function myFun() {
  console.log("안녕하세요!");  // 함수 내에서 "안녕하세요!" 출력
}

// "😊 저기서"를 출력
console.log("😊 저기서");

// 함수 이름만 출력 (함수 자체는 실행되지 않음)
console.log(myFun); // 출력: [Function: myFun]

// 함수 호출 (함수를 실행하여 출력값을 확인)
myFun();  // "안녕하세요!" 출력

// myFun()의 호출 결과를 출력
console.log(myFun());  // "안녕하세요!" 출력 후, return 값은 undefined

// 아래 코드는 선언되지 않아서 오류가 발생함
// ReferenceError: Cannot access 'yourFun' before initialization
const yourFun = function () {
  console.log("여러분 눈 오는 곳에 계시나요?");  // 함수 실행 시 메시지 출력
};
yourFun();  // 함수 호출, "여러분 눈 오는 곳에 계시나요?" 출력

// 화살표 함수 (arrow function) 사용 예시
// 화살표 함수는 간결한 문법을 제공한다.
merge("파이썬", "SQL");

// 일반 함수 선언 (function declaration)
function merge(a, b) {
  console.log(`${a}와 ${b}는 머지되었다!`);  // 매개변수 a와 b를 사용하여 출력
}

// merge 함수 호출
merge("파이썬", "SQL"); //파이썬SQL 붙음

// 같은 이름의 함수가 또 등장. 아래 코드는 함수 표현식으로 정의된 merge2
const merge2 = function (a, b) {
  console.log(`${a}와 ${b}는 머지되었다!!!`);  // 표현식으로 작성된 함수
}; 
merge2("자바", "도커");  // "자바와 도커는 머지되었다!!!" 출력

// 화살표 함수로 작성된 merge3
const merge3 = (a, b) => {
  console.log(`${a}와 ${b}는 머지되었다!!!`);  // 화살표 함수로 작성된 함수
};
merge3("HTML", "GitHub");  // "HTML와 GitHub는 머지되었다!!!" 출력

// return이 있는 화살표 함수 merge4
const merge4 = (a, b) => {
  console.log(`${a}와 ${b}는 머지되었다!!!`);  // 출력문
  return "결과";  // 함수가 실행되면 "결과"를 반환
};
console.log(merge4("두", "둥"));  // "두와 둥은 머지되었다!!!" 출력 후, "결과" 출력

// return 값이 있는 간단한 화살표 함수 merge5
const merge5 = (a, b) => a + b;  // return문 생략 가능
console.log(merge5(1, 2));  // 출력: 3

// 객체를 반환해야 할 경우 return을 명시적으로 써야 함
// 그렇지 않으면 객체 형태로 반환되지 않음.

// 기본값 매개변수 예시
function eat(menu = "밥") {
  console.log(`${menu}을(를) 먹는다`);  // 기본값으로 "밥"을 설정하고 출력
}

eat();  // 출력: "밥을(를) 먹는다" (기본값 사용)

// 기본값을 사용하는 여러 함수들
function test1(a = 1, b = 2) {
  console.log(a, b);  // a와 b를 출력
}

function test2(a, b = 2) {
  console.log(a, b);  // b는 기본값 2로 설정
}

function test3(a = 2, b) {
  console.log(a, b);  // a는 기본값 2, b는 전달받은 값
}

test1();      // 출력: 1 2 (기본값 사용)
test1(1);     // 출력: 1 2 (기본값 사용)
test1(1, 2);  // 출력: 1 2 (기본값 사용 안함)
test2();      // 출력: undefined 2 (a는 전달되지 않아 undefined, b는 기본값 2)
test2(1);     // 출력: 1 2
test2(1, 2);  // 출력: 1 2
test3();      // 출력: 2 undefined (a는 기본값 2, b는 전달되지 않아서 undefined)
test3(1);     // 출력: 1 undefined
test3(1, 2);  // 출력: 1 2

// 나머지 매개변수 (rest parameter) 예시
function sum(...numbers) {
  console.log(numbers);  // 배열 형태로 모든 인수 출력
}

sum(1, 2, 3);  // 출력: [1, 2, 3]

// 나머지 매개변수를 사용하여 다양한 개수의 인수를 처리
function ourFun(a, b, ...c) {
  console.log(a, b, c);  // 첫 두 매개변수는 개별적으로, 나머지는 배열로 처리
}

ourFun();  // 출력: undefined undefined [] (매개변수가 전달되지 않음)

// 클로저 예시
function createCounter() {
  let count = 0;  // 내부 변수 count 선언
  return function () {
    return ++count;  // count를 증가시키고 반환
  };
}

const counter = createCounter();  // createCounter 호출로 counter 함수 생성
console.log(counter());  // 출력: 1
console.log(counter());  // 출력: 2
console.log(counter());  // 출력: 3

// 반환값이 없는 함수 예시 (return이 없는 경우)
function funfun1() {
  // 자동으로 끝에 return이 있는 셈
}

console.log(funfun1);  // 함수 자체 출력: [Function: funfun1]
console.log(funfun1());  // 실행 후 반환값은 undefined (return이 없으므로)

function funfun2() {
  return;  // 함수 종료, 이 후 코드는 실행되지 않음
  console.log("뭐가 있어도 도달 못함");  // 이 코드는 실행되지 않음
}

console.log(funfun2);  // 함수 자체 출력: [Function: funfun2]
console.log(funfun2());  // 실행 후 반환값은 undefined (return으로 함수 종료)

function funfun3() {
  return 1;  // 1을 반환하고 함수 종료
  console.log("뭐가 있어도 도달 못함");  // 이 코드는 실행되지 않음
}

console.log(funfun3);  // 함수 자체 출력: [Function: funfun3]
console.log(funfun3());  // 출력: 1 (return 값이 1)

함수

• JavaScript에서 함수는 특정 작업을 수행하기 위한 독립된 코드 블록
• 프로그램의 재사용성과 가독성을 높임

함수 선언과 함수 표현식

함수 선언

• 함수 선언은 function 키워드로 독립적으로 정의
• 함수 선언은 **호이스팅(hoisting)**되므로, 함수 정의 이전에 호출이 가능

function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet("Alice")); // 출력: Hello, Alice!

function은 "내가 먼저 선언해도 어디서든 쓸 수 있어!"

const 는 "내가 선언되기 전에 나를 부르면 에러가 나!"

라서
📌 function()은 마법의 주문(함수)과 같아!
📌 주문을 그냥 적어두면 한 번만 실행되고 다시 못 써!

     예). function () 이라고만 해야지 다시 실행 가능
📌 function()을 쓰면 필요할 때마다 여러 번 사용할 수 있어!

📌 화살표 함수(() => {})를 쓰면 더 간단하게 표현할 수 있어!

결국 화살표 함수는 
const magicBook = {

  spell: function () {

  console.log("불꽃 마법을 시전합니다");

 }

};

를

const magicBook = {

  spell: () => {

  console.log

  }

};

 

이렇게 된다. 결국  => 이것은 

방식코드 예제특징

function	const hi = function() { return "안녕!"; }	기본적인 함수 선언
화살표 함수	const hi = () => { return "안녕!"; }	function을 간단하게 표현
더 짧게	const hi = () => "안녕!";	중괄호 {}와 return 생략 가능

 

 

1. 객체 (Object)

먼저, newYear는 객체(Object)입니다. 객체는 키-값 쌍으로 데이터를 저장할 수 있는 자료형이에요. 각 키는 문자열이어야 하지만, 숫자나 true 같은 것도 키로 쓸 수 있습니다.

 

const newYear = {
  name: "을사년",            // 문자열 값
  number: 2025,              // 숫자 값
  wish: ["건강", "다이어트하기", "잘익은 감자가 되기", "취업"], // 배열 값
  1: "숫자도 들어갈 수 있지요",  // 숫자 키 (권장되지 않음)
  true: "가능?",            // boolean true를 키로 사용 (권장되지 않음)
  hello: function () {      // 메서드(함수)
    console.log("안녕하세요!");
  },
};​

 

 

객체의 특징

• newYear.name처럼 점 표기법을 사용해서 객체의 속성에 접근할 수 있습니다.
• newYear["number"]처럼 대괄호 표기법을 사용해서도 객체의 속성에 접근할 수 있어요.

결론 = newYear.name 이든 newYear["name"] 이든 같음

문자열 키와 숫자 키

• "1"과 true와 같은 특수한 값을 키로 사용할 수 있지만, 권장되지 않음! 이유는 코드 가독성 문제와 예기치 못한 오류를 방지하기 위해서입니다. 예를 들어, newYear.true는 true라는 속성을 찾는 것이 아니라, **문자열 "true"**를 찾는 것입니다.

결론 -> 1 이라는 글자 true라는 글자! 를 이름으로 쓰는 것이다. 

함수 표현식

• 함수 표현식은 변수에 익명 함수(이름이 없는 함수)를 할당하여 정의
• 함수 표현식은 호이스팅되지 않으므로, 함수 정의 이후에만 호출할 수 있음

const greetExpression = function(name) {
    return `Hello, ${name}!`;
};

console.log(greetExpression("Bob")); // 출력: Hello, Bob!

화살표 함수

• 화살표 함수는 ES6에서 도입된 간결한 함수 표현 방식
• 기존 함수 표현식보다 짧게 작성할 수 있으며, this 바인딩이 고정되는 특성이 있음

const add = (a, b) => a + b;

const multiply = (a, b) => {
    let result = a * b;
    return result;
};

console.log(add(2, 3)); // 출력: 5
console.log(multiply(4, 5)); // 출력: 2

기본 매개변수와 나머지 매개변수

기본 매개변수

매개변수는 함수를 정의할 때, 그 함수가 외부로부터 받아야 할 입력 값을 지정하는 부분이에요.
매개변수는 함수 옆 괄호 () 안에 들어갑니다.

• 기본 매개변수를 사용하면, 함수 호출 시 인수가 전달되지 않았을 경우 사용할 기본값을 정의할 수 있음

function greet(name = "Guest") {
    return `Hello, ${name}!`;
}

console.log(greet()); // 출력: Hello, Guest!
console.log(greet("Alice")); // 출력: Hello, Alice!

console.log(greet("alice")); 라고 하면 이제 hello 앨리스가 된다는 거지?

나머지 매개변수

• 나머지 매개변수는 함수가 전달받은 인수들을 배열로 처리할 수 있게 함

function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // 출력: 15

---

콜백 함수

• 콜백 함수는 다른 함수에 인자로 전달되어, 그 함수의 내부에서 실행되는 함수
• 콜백은 비동기 작업이나 고차 함수 구현에 유용

function processArray(arr, callback) {
    const result = [];
    for (let i = 0; i < arr.length; i++) {
        result.push(callback(arr[i]));
    }
    return result;
}

const numbers = [1, 2, 3, 4, 5];
const doubled = processArray(numbers, function(num) {
    return num * 2;
});

console.log(doubled); // 출력: [2, 4, 6, 8, 10]

result는  빈 배열로 시작했어.  그래서 result.push(값)은 값을 배열에 추가하는 것이다.

arr[i]은 순서에 해당하는 숫자가 들어간다는 거야. 그럼 []에 1,2,3,4,5 

---

클로저와 렉시컬 환경

클로저

• 클로저는 함수와 함수가 선언된 렉시컬 환경(lexical environment)의 조합
• 클로저를 통해 내부 함수는 외부 함수의 변수에 접근할 수 있음

function createCounter() {
    let count = 0;
    return function() {
        return ++count;
    };
}

const counter = createCounter();
console.log(counter()); // 출력: 1
console.log(counter()); // 출력: 2
console.log(counter()); // 출력: 3

렉시컬 환경

• 렉시컬 환경은 코드가 작성된 위치에 따라 변수와 스코프가 결정되는 방식
• JavaScript는 함수가 선언된 위치를 기준으로 변수와 상위 스코프를 기억
• 쉽게 말해, 함수가 어디에서 호출되었는지가 아니라, 어디에서 정의되었는지가 중요

function outer() {
    let outerVar = "I am outer";

    function inner() {
        console.log(outerVar); // 외부 함수의 변수에 접근 가능
    }

    return inner;
}

const myInner = outer(); // outer가 실행되고 inner 함수가 반환됨
myInner(); // 출력: I am outer

• 위 코드에서 inner 함수는 outer 함수의 스코프에 있는 outerVar에 접근할 수 있음 → inner 함수가 outer 함수 내부에서 정의되었기 때문

스코프

JavaScript에서 스코프는 변수에 접근할 수 있는 유효 범위를 정의

• 전역 스코프: 함수 외부에서 선언된 변수는 모든 코드에서 접근 가능
• 지역 스코프: 함수 내부에서 선언된 변수는 해당 함수 내부에서만 접근 가능

let globalVar = "I am global";

function testScope() {
    let localVar = "I am local";
    console.log(globalVar); // 출력: I am global
    console.log(localVar);  // 출력: I am local
}

console.log(globalVar); // 출력: I am global
// console.log(localVar); // 오류: localVar is not defined

함수의 반환값

• 함수는 return 키워드를 사용하여 결과를 반환할 수 있음
• 환값이 없으면 함수는 undefined를 반환:

---

// 기본 함수 선언
const add = function (a, b) {
  return a + b;  // 두 값을 더해서 반환
};

// 화살표 함수 (Arrow Function) 방식으로 선언
const add2 = (a, b) => {
  return a + b;  // 두 값을 더해서 반환
};

// 더 간결한 화살표 함수
const add3 = (a, b) => a + b;  // 중괄호와 return 생략 가능

// 제곱을 계산하는 함수 (a를 제곱)
const power = (a) => a ** 2;  // a의 제곱값 반환
const power2 = (a) => a ** 2; // 동일하게 a의 제곱값 반환

// 콘솔에 "YEEEEE" 출력
const shout = () => console.log("YEEEEE");

// 잘못된 화살표 함수 문법 (함수 이름이 없어서 에러 발생)
const shout = => console.log("YEEEEE");  // 오류: 함수 이름이 필요

// 객체 반환을 위한 함수 (잘못된 반환 문법)
const obj = () => {
  a: 10;  // 이건 동작하지 않아요. 객체를 반환하려면 `return`이 필요해요.
};

// 객체 반환을 위한 올바른 방법
const obj2 = () => ({
  a: 10,  // 객체 리터럴로 바로 반환
});

console.log(obj());  // undefined 반환 (잘못된 객체 반환)
console.log(obj2()); // { a: 10 } 반환

// 고차 함수 예시

// map: 배열의 각 요소에 대해 지정된 작업을 수행 후 새로운 배열 반환

const n1 = [1, 2, 3];
const n2 = n1; // n2는 n1을 참조하는 변수 (얕은 복사)
console.log(n1); // [1, 2, 3]
console.log(n2); // [1, 2, 3]
const n3 = n1.map(function (num) {
  return num * 3;  // n1의 각 값에 3을 곱한 새로운 배열 생성
});
console.log(n3);  // [3, 6, 9] 출력

// n1은 n2와 같은 배열을 참조하므로 변경됨
for (let index = 0; index < n2.length; index++) {
  n2[index] *= 3;  // n2의 각 값에 3을 곱해 변경
}
// map을 안 쓰면 for 를 써야 한다. 간결하게 하려고 n1의 map을 해서 function (num) 이라는 임의 애한테 넣는다.


console.log(n1);  // n2와 n1은 같은 배열이라 [3, 6, 9]로 변경됨
console.log(n2);  // [3, 6, 9] (n1과 동일)
console.log(n3);  // [3, 6, 9] (새로운 배열)

console.log(Object.is(n1, n2)); // true (n1과 n2는 같은 배열)
console.log(Object.is(n1, n3)); // false (n1과 n3는 다른 배열)

// filter: 조건에 맞는 값만 남기는 함수
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const odd = numbers.filter((v) => v % 2 == 1);  // 홀수만 걸러내기
console.log(odd);  // [1, 3, 5, 7, 9]

const even = numbers.filter((v) => v % 2 == 0);  // 짝수만 걸러내기
console.log(even);  // [2, 4, 6, 8, 10]

// reduce: 배열을 하나의 값으로 축소하는 함수 (누적 합산)
console.log(numbers.reduce((acc, cur) => acc + cur));  // 합: 55

console.log(
  numbers.reduce((acc, cur) => {
    console.log(acc, cur);  // acc: 누적된 값, cur: 현재 값
    return acc + cur;  // 각 값을 더해가며 누적
  }, 0)
);

console.log(
  numbers.reduce((acc, cur) => {
    console.log(acc, cur);  // acc: 누적된 값, cur: 현재 값
    return acc * cur;  // 각 값을 곱해가며 누적
  }, 1)
);

// forEach: 배열의 각 요소에 대해 지정된 작업을 실행 (값 반환 X)
numbers.forEach((el) => console.log(el));  // 각 값을 콘솔에 출력

// 구조 분해 할당: 배열 및 객체에서 값을 변수에 추출

// 배열 구조 분해 할당
const arr = ["a", "b", "c", "d"];
const [a, b, c, d] = arr;  // 배열의 값을 각각 변수에 할당
console.log(a, b, c, d);  // a b c d

const [e, f, g] = arr;  // 배열에서 처음 3개 값만 가져옴
console.log(e, f, g);  // a b c

const [aa, bb, cc, dd, ee] = arr;  // 배열에 값이 없으면 undefined로 할당
console.log(aa, bb, cc, dd, ee);  // "a b c d undefined"

const [ff, ...gg] = arr;  // 첫 값은 ff에, 나머지는 gg에 배열로 할당
console.log(ff, gg);  // "a" ["b", "c", "d"]

// 객체 구조 분해 할당
const ob = { a: "a", b: "bb", c: "ccc" };
const { a1, b1, c1 = "기본값" } = ob;  // 기본값을 설정할 수도 있음
console.log(a1, b1, c1);  // undefined undefined "기본값"

const { a: a2, b: b2, c: c2 } = ob;  // 키 값을 새 변수명으로 할당
console.log(a2, b2, c2);  // "a" "bb" "ccc"

// 스프레드 연산자: 배열이나 객체를 쉽게 복사하거나 결합할 때 사용

// 배열 스프레드
const x = [1, 2, 3];
const y = [x];  // y는 x를 포함하는 배열 (얕은 복사)
console.log(x, y);  // [1, 2, 3] [[1, 2, 3]]

x[0] = 100;  // x의 첫 번째 값을 변경
console.log(x, y);  // x: [100, 2, 3], y: [[100, 2, 3]]

const z = [...x];  // x 배열을 새로운 배열로 복사
console.log(x, z);  // x: [100, 2, 3], z: [100, 2, 3]

console.log(Object.is(x, z));  // false (x와 z는 다른 객체)

x[1] = 1000;  // x의 두 번째 값을 변경
console.log(x, z);  // x: [100, 1000, 3], z: [100, 2, 3]

const y2 = [[...x]];  // x의 값을 복사한 배열을 포함한 배열 생성
x[0] = 222;  // x의 첫 번째 값 변경
console.log(x, y, y2);  // x: [222, 1000, 3], y: [[222, 1000, 3]], y2: [[222, 1000, 3]]

// 객체 복사
const man = { name: "john", age: 30 };
const man2 = man;  // man2는 man과 같은 객체를 참조
man2.name = "james";  // man2의 name을 "james"로 변경
console.log(man, man2);  // { name: "james", age: 30 } { name: "james", age: 30 }

const man3 = { ...man };  // man 객체를 복사한 새로운 객체
console.log(man, man2, man3);  // { name: "james", age: 30 }, { name: "james", age: 30 }, { name: "james", age: 30 }

console.log(Object.is(man, man3));  // false (man과 man3는 다른 객체)

man3.name = "dave";  // man3의 name을 "dave"로 변경
console.log(man, man2, man3);  // { name: "james", age: 30 }, { name: "james", age: 30 }, { name: "dave", age: 30 }

---

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 홀수만 골라내기
const odd = numbers.filter((v) => v % 2 == 1);
console.log(odd);  // [1, 3, 5, 7, 9]

// 짝수만 골라내기
const even = numbers.filter((v) => v % 2 == 0);
console.log(even);  // [2, 4, 6, 8, 10]

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// filter를 사용하여 홀수만 뽑아내기
const odd = numbers.filter(function(v) {
  return v % 2 === 1;  // v가 홀수인 경우만 true로 반환
});

console.log(odd);  // [1, 3, 5, 7, 9]

얘를 줄이면 위랑 같아짐.

 

1. filter라고 하는 고차함수는 이제 함수라는 걸 값으로 받아서 처리를 할수 있게 해줘요

2. 받아온 함수는 특정한 처리를 하는데 쓰이는데 filter의 경우는 그 함수를 가지고 각각의 원소를 그 함수에 넣어봐서 true가 나오는지를 검토합니다

 

 

그러니가 내가 

1. filter 함수

먼저, filter 함수는 배열을 하나씩 순회하면서 주어진 조건을 만족하는 값들만 골라내는 함수입니다.

이 예시에서 numbers 배열은 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]이고, 우리가 원하는 것은 홀수만 골라내는 것이에요.

2. (v) =>

(v) =>는 화살표 함수(arrow function)라고 부르는데, JavaScript에서 함수를 간단하게 표현하는 방법이에요.

• **(v)**는 매개변수를 나타냅니다. 즉, v는 배열의 각 요소를 하나씩 받아오는 변수입니다.
  • 예를 들어, numbers 배열의 첫 번째 값은 1, 두 번째 값은 2, 세 번째 값은 3 이렇게 됩니다.
  • 그래서 (v)는 첫 번째, 두 번째, 세 번째 값을 하나씩 받을 준비를 하고 있는 거예요.
• **=>**는 화살표 함수에서 **"함수"**가 시작된다는 의미입니다.
  • 이 화살표 뒤에는 함수의 내용이 들어갑니다.

3. (v) => v % 2 == 1

이 함수의 역할은 각각의 v 값이 홀수인지를 확인하는 것입니다.

• v % 2 == 1은 나머지가 1이면 홀수라는 뜻이에요.
  • 예를 들어, v = 1일 때 1 % 2 == 1이 성립하죠. 왜냐하면 1을 2로 나누면 나머지가 1이기 때문입니다.
  • 반면에, v = 2일 때 2 % 2 == 0이기 때문에 false가 되겠죠.

4. 최종 설명

numbers.filter((v) => v % 2 == 1)의 동작은 이렇게 됩니다:

1. numbers 배열에서 하나씩 값을 꺼내와서 v에 넣습니다.
2. 각 v 값에 대해 (v) => v % 2 == 1 함수를 실행하여 홀수인지 확인합니다.
3. 홀수인 값들만 odd 배열에 모은 후, 그 배열을 반환합니다.

---

간단하게 정리

• 얕은 복사 (Shallow Copy): 참조를 복사 (주소를 복사). 내부 데이터까지 공유하므로 원본을 수정하면 복사본에도 영향을 줍니다.
• 깊은 복사 (Deep Copy): 데이터를 완전히 복사. 원본과 복사본은 독립적이어서 원본을 수정해도 복사본에 영향이 없습니다.

얕은 복사

const x = [1, 2, 3];
const y = [x];  // y는 x를 포함하는 배열 (얕은 복사)
console.log(x, y);  // [1, 2, 3] [[1, 2, 3]]

x[0] = 100;  // x의 첫 번째 값을 변경
console.log(x, y);  // x: [100, 2, 3], y: [[100, 2, 3]]

 

• 얕은 복사 (Shallow Copy): y = [x]와 같은 방식은 x 배열을 참조하는 방식이기 때문에, x 배열이 변경되면 y도 함께 변경됩니다.
• 깊은 복사 (Deep Copy): z = [...x]와 같은 방식은 x 배열의 값만 새로 복사하는 방식입니다. 그래서 x와 z는 독립적으로 존재하게 됩니다.

깊은 복사

const z = [...x];  // x 배열을 새로운 배열로 복사
console.log(x, z);  // x: [100, 2, 3], z: [100, 2, 3]

console.log(Object.is(x, z));  // false (x와 z는 다른 객체)

x[1] = 1000;  // x의 두 번째 값을 변경
console.log(x, z);  // x: [100, 1000, 3], z: [100, 2, 3]

 

 x[1] = 1000으로 x 배열의 값을 바꾸면, z 배열은 영향을 받지 않습니다. x와 z는 독립적인 배열이기 때문이에요.

 

 

 

 

 

1. filter: 조건에 맞는 값만 뽑아내기

• 배열에서 조건에 맞는 값만 남기는 함수예요.
• 예: 홀수만 뽑기, 짝수만 뽑기

javascript

복사편집

const odd = numbers.filter((v) => v % 2 == 1); // 홀수만 const even = numbers.filter((v) => v % 2 == 0); // 짝수만

2. reduce: 배열을 하나의 값으로 축소하기 (누적)

• 배열을 하나로 합치는 함수예요. (합산, 곱셈 등)
• 예: 모든 숫자 더하기

javascript

복사편집

const sum = numbers.reduce((acc, cur) => acc + cur); // 합산

3. forEach: 배열의 모든 요소를 반복 처리하기

• 배열의 각 요소에 대해 작업을 실행하는 함수예요.
• 값은 반환하지 않아요.

javascript

복사편집

numbers.forEach((el) => console.log(el)); // 값 출력

4. 구조 분해 할당

• 배열이나 객체에서 값을 쉽게 꺼내는 방법이에요.
• 예: 배열에서 값 추출, 객체에서 값 추출

javascript

복사편집

const [a, b] = ["a", "b"]; const { name, age } = { name: "John", age: 30 };

5. 스프레드 연산자 (...)

• 배열이나 객체를 쉽게 복사하거나 합치는 데 사용해요.
• 예: 배열 복사, 객체 복사

javascript

복사편집

const newArr = [...oldArr]; // 배열 복사 const newObj = {...oldObj}; // 객체 복사

 

 

---

1. filter: 조건에 맞는 값만 뽑아내기

• filter는 배열에서 조건을 만족하는 값들만 골라내는 함수예요.
• 예를 들어, 배열에서 홀수만 뽑고 싶으면 이런 식으로 사용해요.

javascript

복사편집

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const odd = numbers.filter((v) => v % 2 == 1); // 홀수만 뽑기 console.log(odd); // [1, 3, 5, 7, 9]

• filter의 조건을 만족하는 값들만 newArray에 저장돼요.
• 이 예제에서는 홀수만 남게 돼요.

2. reduce: 배열을 하나의 값으로 축소하기 (누적)

• reduce는 배열을 하나의 값으로 합치거나 축소하는 함수예요. 예를 들어, 배열의 모든 값을 더하거나 곱하는 식으로 사용할 수 있어요.

예: 배열의 합 구하기

javascript

복사편집

const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((acc, cur) => acc + cur); 
// 누적합 구하기 console.log(sum); // 15

const snacks = [1, 2, 3, 4, 5];  // 각 강아지에게 주는 간식의 양
const totalSnacks = snacks.reduce(function(acc, snack) {  // 익명 함수로 변경
  return acc + snack;  // 누적된 값(acc)과 현재 값(snack)을 더해준다.
}, 0);  // 초기값은 0
console.log(totalSnacks);  // 15

• acc는 누적된 값(초기값: 0), cur는 현재 값이예요.
• 처음엔 0부터 시작해서, 배열을 왼쪽에서 오른쪽으로 한 번씩 돌며 값들을 더하는 방식이에요.

예: 배열의 값 모두 곱하기

javascript

복사편집

const product = numbers.reduce((acc, cur) => acc * cur, 1); // 배열 값 곱하기 console.log(product); // 120

• reduce에서 두 번째 인자 1은 초기값이에요. 곱셈을 시작할 때 1로 시작해야 곱셈이 제대로 되죠.

3. forEach: 배열의 모든 요소에 대해 작업 실행

• forEach는 배열의 각 요소에 대해 뭔가를 실행할 때 사용하는 함수예요.
• 반환값은 없어요. 단지 각 요소를 하나씩 처리하는 거예요.

javascript

복사편집

numbers.forEach((el) => console.log(el)); // 배열의 모든 값을 출력

• 위 코드처럼, 배열의 각 값을 하나씩 출력할 수 있어요.

4. 구조 분해 할당 (Destructuring Assignment)

• 배열이나 객체에서 값들을 쉽게 추출하는 방법이에요.

예: 배열에서 값 꺼내기

javascript

복사편집

const arr = ["a", "b", "c", "d"]; const [a, b, c, d] = arr; // 배열에서 값을 하나씩 꺼내기 console.log(a, b, c, d); // "a b c d"

• a, b, c, d는 배열의 첫 번째, 두 번째, 세 번째, 네 번째 값을 각각 받게 돼요.

예: 객체에서 값 꺼내기

const obj = { name: "John", age: 30 }; const { name, age } = obj; 
// 객체에서 값을 꺼내기 console.log(name, age); // "John 30"

• 객체의 키를 기준으로 값을 변수에 바로 할당해요.

예: 기본값 설정

• 값이 없으면 기본값을 넣는 방법도 있어요.

 

const { a = "기본값" } = {}; // a가 없으면 "기본값" 사용 console.log(a); // "기본값"

5. 스프레드 연산자 (...)

• 스프레드 연산자는 배열이나 객체를 복사하거나 결합할 때 사용해요.

예: 배열 복사

const arr1 = [1, 2, 3]; const arr2 = [...arr1]; 
// arr1을 복사해서 arr2에 넣기 arr1[0] = 100; console.log(arr1, arr2); 
// arr1: [100, 2, 3], arr2: [1, 2, 3]

• ...는 배열의 값을 하나씩 뽑아서 새로운 배열을 만드는 거예요. 복사한 배열을 수정해도 원본 배열은 영향을 안 받아요.

예: 객체 복사

const person = { name: "John", age: 30 }; const copyPerson = { ...person }; 
// person 객체를 복사 console.log(copyPerson); // { name: "John", age: 30 }

 

• 객체도 같은 방법으로 복사할 수 있어요.