3.함수와 객체

// 함수 호출이 선언보다 먼저 와도 동작함 sayHello(); // "안녕하세요!" - 정상 동작 function sayHello() { console.log("안녕하세요!"); }

// 함수 선언문 function declaration() { return "선언문"; } // 함수 표현식 const expression = function() { return "표현식"; }; // 명명된 함수 표현식 const namedExpression = function myFunc() { return "명명된 표현식"; };

[사용법] let funcA = (매개변수) => 반환값;

// 기본 화살표 함수 const add = (a, b) => { return a + b; }; // 한 줄 함수 - return 생략 가능 const multiply = (a, b) => a * b; // 매개변수가 하나일 때 - 괄호 생략 가능 const square = x => x * x; // 매개변수가 없을 때는 괄호 생략 불가능 const sayHello = () => "안녕하세요!";

const add = (a, b) => a + b; // 안전 // add = 100; ❌ 에러 발생

//코드샌드박스에서 출력을 위한 기본 코드 import "./styles.css"; // HTML 먼저 생성 document.getElementById("app").innerHTML = ` <h1 id="title">🎮 게임 함수 마스터</h1> <p id="change">빈칸(???)을 채워서 게임을 완성하세요!</p> <div id="test" style="white-space: pre-line;"></div> `; let result = ""; // === 1. 게임 초기화 (함수 호이스팅) === result += "=== 1. 게임 초기화 ===\n"; // 사용자 이름 입력받기 ??? playerName = prompt("플레이어 이름을 입력하세요:") ??? "익명"; // 값이 변할 수 있는 변수 키워드, 기본값을 제공하는 연산자 // 함수 선언 전에 호출 가능! (호이스팅) let gameStart = startGame(playerName); result += gameStart + "\n"; ??? startGame(name) { // 호이스팅이 가능한 함수 선언 방식 return `${name}님의 모험이 시작됩니다!`; } result += "\n"; // === 2. 게임 플레이 (함수 표현식) === result += "=== 2. 게임 플레이 ===\n"; // 몬스터 전투 함수 (함수 표현식) ??? battleMonster = function(playerLevel, monsterLevel) { // 변하지 않는 변수에 함수를 저장 ??? damage = playerLevel * 10 - monsterLevel * 5; // 함수 내부에서 계산값을 저장할 변수 return damage > 0 ? "승리!" : "패배..."; }; // 아이템 획득 함수 (화살표 함수) ??? getItem = (itemName) ??? `${itemName} 획득!`; // 짧은 함수를 간단하게 쓰는 방법, 화살표 기호 let battle1 = battleMonster(5, 3); let battle2 = battleMonster(2, 4); let item = getItem("마법검"); result += `전투 1: ${battle1}\n`; result += `전투 2: ${battle2}\n`; result += `아이템: ${item}\n\n`; // === 3. 게임 결과 (화살표 함수 활용) === result += "=== 3. 게임 결과 ===\n"; let scores = [100, 250, 180, 320, 90]; // 고득점만 필터링 (화살표 함수) ??? highScores = scores.???(score ??? score >= 200); // 조건에 맞는 요소만 걸러내는 배열 메서드 // 점수 합계 계산 (화살표 함수) ??? total = scores.???(???sum, score) ??? sum + score, 0); // 배열을 하나의 값으로 축약하는 메서드, 누적값 매개변수 // 최종 등급 계산 (화살표 함수) ??? getGrade = (score) ??? score >= 300 ??? "S" ??? score >= 200 ??? "A" ??? "B"; // 조건에 따라 값을 선택하는 연산자 let finalGrade = getGrade(total); result += `${playerName}님의 결과:\n`; result += `고득점: ${highScores.join(", ")}\n`; result += `총점: ${total}\n`; result += `최종 등급: ${finalGrade}\n`; document.getElementById("test").textContent = result;

// 기본 객체 생성 const student = { name: "양파고", age: 17, school: "한국고등학교", isStudent: true }; // 중첩 객체 const player = { name: "철수", stats: { level: 15, hp: 100, mp: 50 }, inventory: ["검", "방패", "포션"] };

function Student(name, age) { this.name = name; this.age = age; this.study = function() { return `${this.name}이(가) 공부 중입니다.`; }; } const student1 = new Student("민수", 17);

const user = { name: "양파고", age: 17, email: "yangphago@example.com" }; console.log(user.name); // "양파고" console.log(user.age); // 17

console.log(user["name"]); // "양파고" console.log(user["age"]); // 17 // 변수를 키로 사용 가능 const key = "email"; console.log(user[key]); // "yangphago@example.com" // 공백이나 특수문자가 있는 키 const game = { "player name": "철수", "high-score": 1500 }; console.log(game["player name"]); // "철수"

const car = { brand: "현대", model: "아반떼" }; // 프로퍼티 추가 car.year = 2023; car["color"] = "흰색"; // 프로퍼티 수정 car.model = "소나타";

delete car.color; console.log(car.color); // undefined

const now = new Date(); // 기본 문자열 변환 console.log(now.toString()); // 전체 날짜 시간 console.log(now.toDateString()); // 날짜만 console.log(now.toTimeString()); // 시간만 // 로케일 형식 console.log(now.toLocaleDateString("ko-KR")); // "2025. 3. 7." console.log(now.toLocaleTimeString("ko-KR")); // "오후 2:30:45" //date함수의 사용법 function formatDate(date) { // 1. 연도(yyyy) 추출 const year = date.getFullYear(); // 2. 월(mm) 추출 → getMonth()는 0~11을 반환하므로 +1 // padStart(2, '0')로 두 자리 맞추기 (예: 3 → 03) const month = String(date.getMonth() + 1).padStart(2, '0'); // 3. 일(dd) 추출 → padStart로 두 자리 맞춤 const day = String(date.getDate()).padStart(2, '0'); // 4. yyyy-mm-dd 형식의 문자열로 반환 return `${year}-${month}-${day}`; }

//코드샌드박스에서 출력을 위한 기본 코드 import "./styles.css"; // HTML 먼저 생성 document.getElementById("app").innerHTML = ` <h1 id="title">🎵 aespa 히트곡 관리 시스템</h1> <p id="change">빈칸(???)을 채워서 aespa 정보 시스템을 완성하세요!</p> <div id="test" style="white-space: pre-line;"></div> `; let result = ""; // === 1. 객체 리터럴로 aespa 기본 정보 생성 === result += "=== 1. aespa 기본 정보 ===\n"; ??? aespa = { // 변경되지 않는 객체를 선언할 때 사용하는 키워드 groupName: "aespa", debutDate: new Date("2020-11-17"), company: "SM Entertainment", members: ["카리나", "지젤", "윈터", "닝닝"], }; result += `그룹명: ${aespa.???}\n`; // 객체의 속성에 접근하는 방법 중 하나 result += `소속사: ${aespa.???}\n\n`; // 위와 같은 방식으로 접근 // === 2. 히트곡 프로퍼티 추가 (점 표기법) === result += "=== 2. 히트곡 추가 (점 표기법) ===\n"; // 점 표기법으로 히트곡 추가 aespa.??? = "Black Mamba"; // 새로운 속성 이름을 정해보세요 aespa.??? = []; // 여러 곡을 담을 수 있는 데이터 구조 aespa.hit.???("Next Level"); // 배열에 요소를 추가하는 메서드 aespa.hit.???("Savage"); // 같은 메서드를 사용 aespa.hit.???("위 플래쉬"); // 계속 같은 메서드 result += `데뷔곡: ${aespa.debut_song}\n`; result += `히트곡 리스트: ${aespa.hit}\n`; // === 3. 추가 정보 (대괄호 표기법) === result += "\n=== 3. 추가 정보 (대괄호 표기법) ===\n"; // 대괄호 표기법으로 정보 추가 aespa["???"] = aespa.members.???; // 앨범 수와 관련된 속성명, 배열의 크기를 알 수 있는 속성 result += `발매 앨범의 갯수: ${aespa.total_albums}\n\n`; // === 4. 인기 멤버 순서에 따라 배열로 변환 === result += "=== 4. 인기멤버 배열 관리 ===\n"; // 인기순으로 멤버 재배열 ??? superstar_number = [ // 변경되지 않을 배열 선언 aespa.members[???], // 첫 번째 멤버 aespa.members[???], // 세 번째 멤버 aespa.members[???], // 네 번째 멤버 aespa.members[???], // 두 번째 멤버 ]; // 가장 인기 있는 멤버 (첫 번째) ??? mostPopular = superstar_number[???]; // 변경되지 않을 변수, 첫 번째 요소 result += `최고의 멤버: ${mostPopular}\n\n`; // === 5. Date 객체를 활용한 기념일 계산 === result += "=== 5. 데뷔 기념일 계산 ===\n"; ??? today = new Date(); // 오늘 날짜를 담을 변수 ??? debutYear = aespa.debutDate.???(); // 연도를 가져오는 메서드 ??? currentYear = today.???(); // 현재 연도를 가져오는 메서드 ??? yearsActive = currentYear - debutYear; // 활동 기간 계산 // 올해 데뷔 기념일 ??? thisYearAnniversary = new Date( // 올해 기념일 날짜 객체 currentYear, aespa.debutDate.???(), // 월을 가져오는 메서드 aespa.debutDate.???() // 일을 가져오는 메서드 ); // 기념일까지 남은 일수 ??? daysUntilAnniversary = Math.ceil( // 값이 변경될 수 있는 변수 (thisYearAnniversary - today) / (1000 * 60 * 60 * 24) ); // 기념일이 지났다면 내년 기념일 계산 if (daysUntilAnniversary < 0) { thisYearAnniversary.???(currentYear + 1); // 연도를 설정하는 메서드 daysUntilAnniversary = Math.ceil( (thisYearAnniversary - today) / (1000 * 60 * 60 * 24) ); } result += `데뷔: ${debutYear}년\n`; result += `활동 기간: ${yearsActive}년\n`; result += `다음 기념일까지: ${daysUntilAnniversary}일\n\n`; document.getElementById("test").textContent = result;

console.log("주문 접수"); setTimeout(() => { console.log("커피 준비 완료 ☕"); }, 2000); // 2초 뒤 실행 console.log("다른 손님 주문 받는 중...");

function processOrder() { console.log("주문 접수"); setTimeout(() => { console.log("재료 준비 완료"); setTimeout(() => { console.log("조리 완료"); setTimeout(() => { console.log("서빙 완료"); }, 2000); }, 3000); }, 1000); } processOrder()

// Promise 생성 function fetchUserData(userId) { return new Promise((resolve, reject) => { // 실제로는 서버 요청이지만 시뮬레이션 setTimeout(() => { if (userId > 0) { resolve({ id: userId, name: "양파고", email: "yangphago@example.com" }); } else { reject(new Error("유효하지 않은 사용자 ID")); } }, 1000); }); } // Promise 사용 fetchUserData(123) .then(userData => { console.log("사용자 정보:", userData); }) .catch(error => { console.log("오류 발생:", error.message); });

function sayHello(name, callback) { const words = '안녕하세요 내 이름은 ' + name + ' 입니다.'; callback(words); // 매개변수의 함수(콜백 함수) 호출 } sayHello("양파고", function printing(name) { console.log(name); // 안녕하세요 내 이름은 인파 입니다. });

function sayHello(callback) { let name = "phago"; callback(name); // 콜백 함수 호출 } // 익명 화살표 콜백 함수 sayHello((name) => { console.log("Hello, " + name); }); // Hello, Alice

const order = new Promise((resolve, reject) => { const stock = true; if (stock) resolve("커피 준비 완료 ☕"); else reject("재고 없음 ❌"); }); order .then(msg => { console.log("성공:", msg); return "손님께 전달 완료 ✅"; // 다음 then으로 값 전달 }) .then(nextMsg => { console.log(nextMsg); }) .catch(err => { console.log("실패:", err); }) .finally(() => { console.log("작업 종료 🚪"); });

// 각각의 독립적인 작업들을 별도의 Promise로 분리 const checkStock = new Promise((resolve, reject) => { const stock = true; if (stock) resolve("재고 확인 완료 ✅"); else reject("재고 없음 ❌"); }); const prepareCoffee = new Promise((resolve) => { setTimeout(() => resolve("커피 준비 완료 ☕"), 1000); }); const preparePackaging = new Promise((resolve) => { setTimeout(() => resolve("포장 준비 완료 📦"), 800); }); const notifyCustomer = new Promise((resolve) => { setTimeout(() => resolve("손님 호출 완료 📢"), 500); }); // Promise.all로 병렬 처리 Promise.all([checkStock, prepareCoffee, preparePackaging, notifyCustomer]) .then(results => { console.log("모든 작업 완료:"); results.forEach(result => console.log(result)); console.log("주문 처리 완료 🎉"); }) .catch(err => { console.log("실패:", err); }) .finally(() => { console.log("작업 종료 🚪"); });

// 기본 셋업 import "./styles.css"; document.getElementById("app").innerHTML = ` <h1>🍽️ 저녁식사 준비 - 비동기 실습</h1> <div id="test" style="white-space: pre-line;"></div> `; // ??? 문자열을 받아 특정 영역에 출력하고 줄바꿈("\n")을 추가하는 함수 function write(msg) { document.getElementById("test").textContent += msg + "\n"; } // 공통 타이머 작업 (ms 뒤 ??? 호출) // 힌트: 일정 시간이 지난 뒤 Promise를 성공 상태로 바꿔주는 함수 function task(taskName, ms) { return new Promise(function (????) { setTimeout(function () { ????(taskName); // 일정 시간 뒤 작업 이름 반환 }, ms); }); } // 개별 작업 실행 + 시간 측정/출력 async function doTask(taskName, ms) { const s = performance.now(); await ????(taskName, ms); // 힌트: 위에서 만든 "타이머 함수" 호출 write(`${taskName} 성공 (${((performance.now() - s) / 1000).toFixed(2)}s)`); } // 시간 상수 const T_CHICKEN = 5000; const T_SALAD = 3000; const T_TABLE = 2000; // 1) 체이닝(순차) // ??? 키워드를 사용해 작업을 순서대로 기다리며 실행 async function runChaining() { write("=== 체이닝 (순차 실행) ==="); const t0 = performance.now(); await ????("치킨", T_CHICKEN); await ????("샐러드", T_SALAD); await ????("상차리기", T_TABLE); write( `총 실제 소요 시간: ${((performance.now() - t0) / 1000).toFixed(2)}s\n` ); } // 2) 병렬(동시) // 여러 비동기 작업을 동시에 실행하려면 ??? 메서드 사용 async function runParallel() { write("=== 병렬 (동시 실행) ==="); const t0 = performance.now(); await ????.????([ doTask("치킨", T_CHICKEN), doTask("샐러드", T_SALAD), doTask("상차리기", T_TABLE), ]); write( `총 실제 소요 시간: ${((performance.now() - t0) / 1000).toFixed(2)}s\n` ); } // 실행 (순서 보장) // ??? 함수 표현식 → 비동기 실행 흐름 제어 가능 (???? () => { await runChaining(); await runParallel(); })();