프론트엔드 스터디 6주차: 객체, 함수, 그리고 스코프

// 클래스 정의 없이 바로 생성
const person = {
  name: "김철수",
  age: 25,
  greet: function () {
    console.log(`안녕하세요, ${this.name}입니다.`);
  },
};

// 만든 후에도 프로퍼티 추가/삭제 가능
person.email = "kim@example.com"; // 추가
delete person.age; // 삭제

const obj = { name: "철수", "first name": "철" };

// 점 표기법: 식별자 규칙을 따르는 키에만 사용 가능
console.log(obj.name); // "철수"

// 대괄호 표기법: 문자열이나 변수로 접근할 때
console.log(obj["first name"]); // "철" — 공백 있는 키는 대괄호만 가능
const key = "name";
console.log(obj[key]); // "철수" — 변수를 키로 사용할 때

// 원시값: 값 복사
let a = 1;
let b = a;
b = 2;
console.log(a); // 1 — a는 영향 없음

// 객체: 참조 복사
const obj1 = { x: 1 };
const obj2 = obj1; // 같은 객체를 가리킴
obj2.x = 99;
console.log(obj1.x); // 99 — obj1도 바뀜!

// 얕은 복사 (1단계 깊이만 복사)
const copy = { ...obj1 };
copy.x = 999;
console.log(obj1.x); // 99 — 이제 영향 없음

// 변수에 할당
const add = function (a, b) {
  return a + b;
};

// 다른 함수의 인자로 전달
function execute(fn, a, b) {
  return fn(a, b);
}
console.log(execute(add, 3, 4)); // 7

// 함수의 반환값으로 사용
function makeMultiplier(factor) {
  return function (num 

// 함수 선언식: 선언 전에도 호출 가능 (전체 호이스팅)
sayHello(); // "Hello!" — 에러 없음
function sayHello() {
  console.log("Hello!");
}

// 함수 표현식: 선언 전 호출 불가 (변수만 호이스팅)
sayBye(); // TypeError: sayBye is not a function
const sayBye = function () {
  console.log("Bye!");
};

// 일반 함수
const add1 = function (a, b) {
  return a + b;
};

// 화살표 함수
const add2 = (a, b) => a + b; // 한 줄이면 return 생략 가능

// 파라미터가 하나면 괄호 생략 가능
const double = (n) => n * 2;

// 본문이 여러 줄이면 {} 와 return 명시
const greet = (name) => {
  const msg = `안녕하세요, ${name

const numbers = [1, 2, 3, 4, 5];

// 배열 고차 함수에 콜백 전달
const doubled = numbers.map((n) => n * 2); // [2, 4, 6, 8, 10]
const evens = numbers.filter((n) => n % 2 === 0); // [2, 4]
const sum = numbers.reduce((acc, n) => acc + n, 0); // 15

// Java나 Python이라면 블록 밖에서 x에 접근할 수 없음
// JS var는 다릅니다
function example() {
  if (true) {
    var x = 10; // var는 함수 스코프
    let y = 20; // let은 블록 스코프
  }
  console.log(x); // 10 — 블록 밖에서 접근 가능
  console.log(y); // ReferenceError — 블록 밖에서 접근 불가
}

const globalVar = "전역";

function outer() {
  const outerVar = "외부";

  function inner() {
    const innerVar = "내부";
    // 자신의 스코프 → outer 스코프 → 전역 스코프 순으로 탐색
    console.log(innerVar); // "내부" (자신의 스코프)
    console.log(outerVar); // "외부" (outer 스코프)
    console.log(globalVar); // "전역" (전역 스코프)
  }

  inner();
  console.log(innerVar 

const x = "전역";

function foo() {
  console.log(x); // 어느 x를 참조할까?
}

function bar() {
  const x = "bar 내부";
  foo(); // foo를 bar 안에서 호출
}

bar(); // "전역" 출력

// foo는 전역에서 선언됐으므로, 상위 스코프는 전역 스코프
// bar 안에서 호출해도 bar의 x를 참조하지 않음