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

1. 객체 (Object)

1-1. 객체란?

자바스크립트에서 객체는 원시 값을 제외한 거의 모든 것을 의미한다. 객체는 0개 이상의 프로퍼티로 구성되며, 각 프로퍼티는 키와 값으로 이루어진다.

  • 원시 타입: 하나의 값만을 가지며 변경할 수 없다.
  • 객체 타입: 다양한 값을 하나의 단위로 구성할 수 있고, 값의 변경이 가능하다.

const user = { name: "minju", age: 25 };

함수나 배열, 정규표현식도 객체이며, 객체의 프로퍼티로 함수가 들어갈 경우 메서드라고 부른다.

1-2. 객체 리터럴

객체를 생성하는 가장 일반적이고 간단한 방법은 객체 리터럴을 사용하는 것이다.

const person = { name: "John", sayHi: function () { console.log("Hi!"); } };

  • 중괄호 {} 안에 키:값 형태로 프로퍼티를 정의
  • 빈 객체 생성도 가능: {}
  • 객체 생성과 동시에 프로퍼티 정의 가능
  • 생성 이후에도 동적으로 프로퍼티 추가 가능

1-3. 프로퍼티

  • 키: 문자열 또는 심벌 (빈 문자열도 허용)
  • 값: 자바스크립트에서 사용 가능한 모든 값
  • 마지막 프로퍼티 뒤에 쉼표는 생략하는 것이 일반적

접근 방법

  • 마침표 표기법: obj.key
  • 대괄호 표기법: obj["key"] (문자열로 지정해야 함)

갱신 / 추가 / 삭제

  • 존재하는 키에 값 할당 → 값 갱신
  • 존재하지 않는 키에 값 할당 → 프로퍼티 동적 생성
  • delete obj.key → 프로퍼티 삭제

2. 원시 값과 객체의 비교

2-1. 메모리 구조 차이

  • 원시 값은 변수에 실제 값 저장 → 값에 의한 전달
  • 객체는 변수에 참조 값 저장 → 참조에 의한 전달

let a = 10; let b = a; // b = 10 (값 복사) let obj1 = { name: "Kim" }; let obj2 = obj1; // 같은 객체 참조 obj2.name = "Lee"; // obj1.name도 "Lee"

2-2. 불변성과 변경 가능성

  • 원시 값: 변경 불가. 값 변경 시 새로운 메모리 공간 할당.
  • 객체: 변경 가능. 프로퍼티 추가, 수정, 삭제 가능.

문자열도 원시 타입이기 때문에 변경 불가능하지만 유사 배열 객체이므로 인덱스를 통해 접근할 수 있다.

2-3. 객체 공유 문제

객체를 여러 식별자가 참조하면, 하나의 변경이 다른 식별자에도 영향을 미칠 수 있다. 자바스크립트는 모든 값을 값에 의한 전달 방식으로 처리하지만, 객체의 경우 참조 값을 전달받기 때문에 참조처럼 동작한다.

함수 (Function)

3-1. 함수란?

함수는 일련의 과정을 코드 블록으로 구현한 실행 단위이다. 함수는 입력값(매개변수)을 받아 처리하고, 결과값(반환값)을 내보낸다.

function add(x, y) { return x + y; }

  • 매개변수(parameter): 함수 내부에서 사용하는 변수
  • 인수(argument): 함수 호출 시 실제 전달하는 값
  • 반환값(return): 함수 실행 결과

3-2. 함수 정의 방법

함수 선언문: 호이스팅이 발생하여 정의 이전에도 호출 가능하다. 함수 표현식: 런타임에 평가되어 호출 이전 사용 불가능하다. 화살표 함수: 간결한 문법, 항상 익명이며 this를 가지지 않는다. Function 생성자 함수: 비추천 방식

// 선언문 function greet() { console.log("Hello"); }

// 표현식 const greet = function () { console.log("Hi"); };

// 화살표 함수 const greet = () => console.log("Yo");

3-3. 반환문

  • return 키워드를 사용
  • 반환문이 없을 경우 암묵적으로 undefined 반환

3-4. 다양한 함수 형태

즉시 실행 함수: 함수 정의와 동시에 실행되며, 일반적으로 익명 함수로 작성한다.

(function () { console.log("한 번만 실행됩니다."); })();

재귀 함수: 자기 자신을 호출하는 함수로, 반복 작업에 사용된다. 반드시 탈출 조건이 필요하다.

function factorial(n) { if (n <= 1) return 1; return n * factorial(n - 1); }

중첩 함수: 함수 내부에 정의된 함수로, 외부 함수 내부에서만 호출 가능하다.

function outer() { function inner() { console.log("안쪽 함수"); } inner(); }

콜백 함수: 다른 함수의 매개변수로 전달되는 함수이며, 고차 함수에 의해 호출된다. 고차 함수는 콜백 함수를 인수로 받고, 필요 시 호출하여 동작을 구성한다.

function repeat(n, callback) { for (let i = 0; i < n; i++) { callback(i); } }

3-5. 순수 함수와 비순수 함수

순수 함수: 외부 상태에 의존하거나 변경하지 않는 함수 (부수효과 없음) 비순수 함수: 외부 상태에 의존하거나 변경하는 함수 (부수효과 있음)