3주차_김현중_회고록 - hyeone999/Docs-JS_deepDive_Study GitHub Wiki

3주차_김현중_회고록

✅ 학습한 내용

이번 주는 자바스크립트의 핵심 개념 중 하나인 객체(Object), 원시값과 참조값, 함수(Function) 에 대해 학습했습니다. 단순히 객체를 사용하는 법이 아니라, 객체가 어떻게 동작하는지, 원시값과 어떤 차이가 있는지, 함수가 어떤 방식으로 메모리에 저장되고 실행되는지를 깊이 있게 이해하려고 노력했습니다.


📌 1. 객체 (Object)

  • JS의 8가지 타입 중 하나로, 여러 값을 key-value 쌍으로 저장할 수 있는 비원시형
  • 객체 생성 방식: 객체 리터럴 {}, 생성자 new Object()
  • 동적 프로퍼티 추가/삭제, in 연산자 등을 통한 프로퍼티 접근
  • 객체는 메모리 상에서 참조값으로 저장되어 동일한 속성을 가진 객체라도 비교 시 false 반환
let person1 = { name: "Kim" };
let person2 = { name: "Kim" };

console.log(person1 == person2); // false
console.log(person1.name == person2.name); // true

📌 2. 원시값과 객체 비교

  • 원시값은 값 자체가 메모리에 저장되고, 복사해도 값만 복사됨 (독립적)
  • 객체는 참조값이 저장되어, 복사해도 같은 참조를 공유함 (얕은 복사)
let person = { name: "LEE" };
let copy = person;

copy.name = "KIM";
console.log(person.name); // KIM (얕은 복사로 인해 영향 받음)
  • 깊은 복사는 JSON.parse(JSON.stringify()) 또는 재귀 함수 등을 사용해야 함

📌 3. 함수

  • 함수 선언문 vs 함수 표현식 차이
  • 함수 선언문은 호이스팅 가능, 표현식은 변수에 할당되므로 호이스팅 불가
  • 함수도 결국 객체이며, 함수 내부에 선언된 변수는 지역변수 (스코프 학습과 연결)
function sayHi() {
  console.log("Hi");
}

const sayHello = function () {
  console.log("Hello");
};
  • 함수 호출 시 인자가 객체라면 내부에서 변경 가능 (참조값 전달)
  • JS는 "값에 의한 전달"만 존재하지만, 참조값을 넘기기에 마치 참조에 의한 전달처럼 보일 수 있음

🔍 인상 깊었던 포인트

  • 객체 비교의 핵심은 **주소값(참조값)**이라는 점을 명확히 인지하게 됨
  • 얕은 복사와 깊은 복사의 차이를 코드로 경험하며, 데이터 조작 시 깊은 복사의 중요성을 체감
  • 함수 선언/표현식/화살표 함수 간 차이를 정리하며 호이스팅과 스코프 개념 복습
  • 자바스크립트의 함수도 결국 객체라는 점이 신선하게 다가왔음

📖 느낀 점

이번 주는 자바스크립트의 중추를 이루는 개념들에 대해 한층 더 깊게 들어가는 시기였습니다. 단순히 문법만 익히는 것이 아니라, 값이 메모리에 어떻게 저장되고, 전달되고, 비교되는지를 이해하게 되면서 JS가 좀 더 명확하게 보이기 시작했습니다.


🧠 기억하고 싶은 포인트

  • 객체는 참조에 의해 동작하며, 얕은 복사로는 상태 변경을 막을 수 없다
  • ===, !== 사용으로 타입까지 정확히 비교하자
  • 함수 선언문은 호이스팅된다, 표현식은 그렇지 않다
  • 함수도 결국 객체다 (프로퍼티를 가질 수 있음)

🚀 스터디 활동 요약

  • 각 팀원이 개인 기술 블로그를 작성하고 내용을 발표
  • GitHub Wiki를 통해 회고 공유 및 Repository에 파트별 요약 정리 업로드
  • 회고와 발표를 통해 서로의 시각을 비교하며 더 입체적인 이해 가능
⚠️ **GitHub.com Fallback** ⚠️