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

[JavaScript] 객체 리터럴

🔸 자바스크립트 객체(Object) 완전 정리

✅ 객체란?

  • 자바스크립트를 구성하는 거의 모든 것은 객체이다.
  • 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체이다.

✔ 원시 타입 vs 객체 타입

구분 설명
원시 타입 단 하나의 값만 나타냄
변경 불가능한 값(immutable)
객체 타입 다양한 값을 하나의 단위로 구성한 복합 구조
변경 가능한 값(mutable)

✅ 객체의 구성 요소

  • 객체(Object): 0개 이상의 프로퍼티로 구성된 집합
  • 프로퍼티(Property): **키(key)**와 **값(value)**의 쌍으로 구성
  • 메서드(Method): 프로퍼티의 값이 함수일 경우, 이를 특별히 메서드라 부름
const stroller = {
  brand: 'SmartSafe',
  stop: function() {
    console.log('Stroller stopped.');
  }
};

✅ 객체 리터럴에 의한 객체 생성

✔ 객체 생성 방식

  • 객체 리터럴 { }
  • Object 생성자 함수
  • 사용자 정의 생성자 함수
  • Object.create() 메서드
  • 클래스(class) 문법

➡️ 객체 리터럴이 가장 간단하고 직관적인 방식

✔ 객체 리터럴 문법

const obj = {
  key1: 'value1',
  key2: 123,
  key3: true
};

  • 중괄호 {}로 감싸고, 내부에 프로퍼티를 나열

  • key: value 형식 사용

  • 마지막 프로퍼티 뒤에는 쉼표를 생략하는 것이 일반적

✅ 프로퍼티 상세 정리

✔ 프로퍼티 키

  • 빈 문자열 포함 모든 문자열 또는 심벌(Symbol) 사용 가능

  • 식별자 네이밍 규칙을 따르지 않아도 OK → 단, 반드시 따옴표로 감싸야 함(따옴표 사용)

const obj = {
  "123": "valid",
  "has space": true
};
  • 키 + 값 → 프로퍼티
  • 프로퍼티의 집합 → 객체

특징

  • 프로퍼티 나열시 쉼표( , )로 구분 , 일반적으로 마지막 프로퍼티 뒤에는 쉼표 사용 X
  • 프로퍼티 키로 사용할 수 있는 값: 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
  • 프로퍼티 값으로 사용할 수 있는 값: 자바스크립트에서 사용할 수 있는 모든 값임

✔ 프로퍼티 값

  • 자바스크립트에서 사용할 수 있는 모든 값 가능 (숫자, 문자열, 객체, 배열, 함수 등)

✅ 메서드란?

  • 객체에 묶여 있는 함수

  • 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라고 부름

const stroller = {
  move: function(speed) {
    console.log(`Moving at ${speed}km/h`);
  }
};

✅ 프로퍼티 접근 방법

방법 문법 설명
마침표 표기법 obj.key 일반적인 사용 방식 < 마침표 프로퍼티 접근 연산자( . ) 사용 >
대괄호 표기법 obj["key"] 공백/숫자/변수 등 유연한 키 접근 가능 < 대괄호 프로퍼티 접근 연산자([ … ]) 사용 > 
const key = 'brand';
console.log(stroller["brand"]);  // "SmartSafe"
console.log(stroller[key]);      // "SmartSafe"

| 🔹 대괄호 표기법의 키는 반드시 문자열 또는 변수여야 함

✅ 프로퍼티 조작

✔ 값 갱신

obj.key1 = 'newValue';

➡️ 이미 존재하는 프로퍼티에 값을 할당 → 프로퍼티 값 갱신

✔ 동적 생성

obj.newKey = 'added';

➡️ 존재하지 않는 프로퍼티에 값을 할당하면, 자동으로 새 프로퍼티가 추가됨

✔ 삭제

delete obj.key1;

➡️ delete 연산자는 객체에서 특정 프로퍼티를 제거

  • delete 연산자 : 객체의 프로퍼티 삭제됨
  • delete 연산자의 피연산자: 프로퍼티 값에 접근할 수 있는 표현식이여야 함

✅ 요약

항목 설명
객체 키-값 쌍의 집합. 함수도 값이 될 수 있음
프로퍼티 키와 값으로 구성된 객체의 구성 요소
메서드 프로퍼티 값이 함수인 경우
객체 리터럴 가장 간단한 객체 생성 방식
접근 방법 마침표(.), 대괄호([ ]) 방식
동적 조작 프로퍼티 추가, 수정, 삭제 모두 가능

[JavaScript] 원시 값과 객체의 비교

원시 타입과 객체 타입의 차이, 그리고 값이 변수에 어떻게 전달되는가를 정확히 이해해하는 것이 중요

자바스크립트에서 **원시값(Primitive)**과 **객체(Object)**는 저장 방식, 복사 방식, 변경 가능 여부 등에서 본질적으로 다릅니다. 이 부분에서는 이 두 가지 타입을 명확히 비교하고, 메모리와 전달 방식에서 어떤 차이가 발생하는지를 정리하였습니다.

✅ 원시 타입 vs 객체(참조) 타입

구분 원시 타입 객체(참조) 타입
값의 특징 변경 불가능한 값 (immutable) 변경 가능한 값 (mutable)
메모리 저장 방식 변수에 실제 값이 직접 저장 변수에는 객체의 참조값(메모리 주소) 저장
재할당 필요 여부 값을 바꾸려면 재할당 필요 객체 내부 변경은 재할당 없이 가능
메모리 공간 고정 크기 확보 가능 구조가 유동적이라 공간 크기 사전 지정 불가
예시 string, number, boolean, undefined, null, symbol, bigint 객체, 배열, 함수 등

✅ 원시 값의 특징

✔ 원시값이란??

  • 변경 불가능한 값 (Immutable)
  • 자바스크립트의 기본 데이터 타입

✔ 종류

  • string
  • number
  • boolean
  • undefined
  • null
  • symbol
  • bigint
let score = 80;
let copy = score;

copy = 100;

console.log(score); // 80
console.log(copy);  // 100
  • copy는 score의 값을 복사받은 것
  • 두 변수는 서로 다른 메모리 공간에 저장됨 → 완전히 독립적인 | 📌 이를 값에 의한 전달 (pass by value) 이라고 한다.

✅ 객체(참조 타입)의 특징

  • 프로퍼티 개수 제한 없음

  • 프로퍼티 추가/삭제 가능

  • 프로퍼티 값의 타입도 자유로움

➡️ 메모리 공간 크기를 사전에 지정할 수 없다.

✔ 객체란?

  • 원시 타입이 아닌 모든 값

  • 프로퍼티(key-value) 집합으로 이루어진 동적 구조

  • 변경 가능한 값 (mutable)

const person = { name: "Lee" };
const copy = person;

copy.name = "Kim";

console.log(person.name); // "Kim"
console.log(copy.name);   // "Kim"

  • copy는 person이 참조하는 같은 객체를 가리킴

  • 하나를 바꾸면 서로 영향

const person = { name: "Lee" };
person.age = 30;
delete person.name;

console.log(person); // { age: 30 }
  • 참조값을 통해 객체에 접근하여 재할당 없이도 직접 수정 가능

⚠️ 자바스크립트는 엄밀히 말하면 "참조에 의한 전달(pass by reference)"는 없다. 모든 것은 값에 의한 전달(pass by value) 이며, 객체의 경우 그 **값이 참조값(주소)**인 것뿐이다.

✅ 문자열도 불변

문자열은 원시 타입이기 때문에 생성 이후 내용을 바꿀 수 없다. 단, 배열처럼 문자 하나하나에 접근은 가능하다.

const text = "hello";
console.log(text[1]); // "e"

text[0] = "H";
console.log(text);    // "hello" (변경되지 않음)

✅ 값에 의한 전달 vs 참조에 의한 전달

구분 설명
값에 의한 전달 원시값의 실제 값이 복사되어 전달
참조에 의한 전달 X 자바스크립트는 참조 자체도 값으로 전달됨 (주소 복사)
실제로는 모든 전달은 값에 의한 전달이며, 객체의 경우 그 값이 참조일 뿐

✅ 정리 요약

항목 설명
원시 타입 값 변경 불가능한 값. 새로운 값을 할당하면 새 메모리 공간에 저장됨
객체 타입 값 변경 가능한 값. 변수에는 참조값(주소) 저장
값에 의한 전달 원시값 전달 방식. 복사된 값이 전달됨
참조에 의한 전달 객체 전달 방식처럼 보임. 실제로는 참조값이 복사되어 전달됨
주요 차이점 원시값은 복사 독립, 객체는 공유 참조로 서로 영향

+ 나만의 요약

  • 원시값은 안전하고 독립적인 값

  • 객체는 효율적이지만 공유로 인해 의도치 않은 변경 가능성 있음

  • 객체를 복사할 때는 얕은 복사 / 깊은 복사 구분 필요

✅ 주의할 점

  • 객체를 복사하고 싶다면 얕은/깊은 복사(Shallow/Deep Copy)를 명확히 이해하고 사용해야 합니다.

  • Object.assign() 또는 전개 연산자({ ...obj })를 이용한 복사는 얕은 복사만 됩니다.

[JavaScript] 함수

✅ 함수란?

일련의 작업을 수행하도록 정의된 코드 블록

  • 입력(인수)을 받아 처리하고, 출력(반환값)을 반환
  • 하나의 독립된 실행 단위로 사용
용어 의미
함수 실행 가능한 코드 블록
매개변수 함수 내부에서 입력 값을 전달받는 변수 [내부로 입력을 전달 받는 함수]
인수 함수를 호출할 때 전달하는 실제 값 [입력]
반환값 함수 실행 후 외부로 전달하는 출력 값 [출력]

✅ 함수를 사용하는 이유

  • 중복 제거 (코드 재사용)

  • 유지보수가 용이함

  • 가독성 향상

  • 모듈화 및 추상화

✅ 함수 리터럴

함수 리터럴은 function 키워드, 함수 이름, 매개 변수 목록, 함수 몸체로 구성됨

🔹 함수 리터럴의 구성요소

구성 요소 요약 설명
함수 이름 - 식별자 사용 (네이밍 규칙 준수)
- 함수 몸체 내에서만 참조 가능
- 이름 생략 가능 (무명 함수)
매개변수 목록 - 0개 이상, 쉼표로 구분
- 호출 시 인수 순서 중요
- 변수와 동일한 네이밍 규칙 준수
함수 몸체 - 실행 코드 블록
- 함수 호출 시 실행됨
  • 엔진은 생성된 함수를 호출하기 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성 → 거기에 객체 할당
  • 함수 객체를 가리키는 식별자로 호출

✅ 함수 정의 방식

🔹 함수 선언문

function add(a, b) {
  return a + b;
}
  • 호이스팅 O: 선언 전에 호출 가능

🔹 함수 표현식

const add = function(a, b) {
  return a + b;
};
  • 호이스팅 X
  • 값처럼 변수에 할당됨
  • 함수를 호출할 때 함수 이름이 아닌 함수 객체를 가리키는 식별자 사용

🔹 화살표 함수

const add = (a, b) => a + b;
  • 항상 익명 함수
  • this, arguments 바인딩 없음 (내부 간결화에 적합)

✅ 함수 생성 방식 요약

방식 예시 특징
함수 선언문 function foo() {} 선언 이전에도 호출 가능
함수 표현식 const foo = function() {} 변수 호이스팅만 가능
화살표 함수 const foo = () => {} 간결, this 미바인딩
Function 생성자 new Function('a', 'b', 'return a + b') 거의 사용하지 않음

✅ 함수 호출

greet('Kim'); // → 인수 "Kim"이 매개변수 name에 전달됨
  • 매개변수는 함수 정의 시 선언
  • 인수는 함수 호출 시 전달

✅ 반환문 (return)

function getAge() {
  return 30;
}
  • return 키워드로 결과를 반환 -> 함수 몸체 내부에서만 사용 가능
  • return이 없으면 기본적으로 undefined 반환
  1. 함수의 실행을 중단하고 함수 몸체 빠져나감
  2. return 키워드 뒤에 오는 표현식 평가해 반환

✅ 다양한 함수 형태

🔹 즉시 실행 함수 (IIFE)

(function () {
  console.log("즉시 실행");
})();

  • 정의와 동시에 실행

  • 전역 오염 방지, 단 1회 실행

🔹 재귀 함수

function countDown(n) {
  if (n <= 0) return;
  console.log(n);
  countDown(n - 1);
}

  • 자기 자신을 호출

  • 재귀 호출: 자기 자신을 호출하는 것

  • 재귀 함수: 재귀 호출을 수행하는 함수 (반복 처리를 위해 사용)

★ ** 반드시 탈출 조건 필요 **

🔹 중첩 함수

function outer() {
  function inner() {
    console.log("내부 함수");
  }
  inner();
}

  • 외부 함수 내부에서만 호출 가능

  • 클로저 형성 가능

  • 중첩 함수(= 내부 함수): 함수 내부에 정의된 함수

  • 외부 함수: 중첩 함수를 포함하는 함수

🔹 콜백 함수 & 고차 함수

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

repeat(3, console.log);
  • 콜백 함수 : 다른 함수의 인수로 전달되는 함수, 함수의 매개변수를 통해 다른 함수의 내부로 전달됨
  • 고차 함수 : 콜백 함수를 매개변수로 받는 함수, 매개 변수를 통해 함수의 외부에서 콜백 함수를 전달받음

✅ 순수 함수 vs 비순수 함수

구분 설명
순수 함수 외부 상태에 의존하거나 변경하지 않음 → 예측 가능 <부수 효과 없음>
비순수 함수 외부 상태에 의존하거나 변경함 → 부작용 있음 <부수 효과 있음> 
// 순수 함수
const add = (a, b) => a + b;

// 비순수 함수
let count = 0;
function increase() {
  count++;
}

✅ 함수 호이스팅 정리

구분 호출 가능 시점 설명
함수 선언문 선언 이전 호출 가능 전체 코드 스캔 중 생성됨
함수 표현식 선언 이후에만 호출 가능 실행 중 평가됨 (런타임)

✅ 정리 요약

+ 용어 정리

익명 함수 : 함수 리터럴의 함수 이름을 생략한 것 인수 : 값으로 평가될 수 있는 표현식, 함수 호출시 지정, 개수와 타입 제한이 없음 매개변수: 함수 정의시 선언, 함수 몸체 내부에서 변수와 동일 취급, 몸체 내부에서만 참조 가능

  • 이성적인 매개변수 개수는 0개, 적을수록 좋으며, 이상적인 함수는 한 가지 일만 해야 하며 가급적 작게 만들어야 한다.
항목 설명
함수 정의 방식 선언문, 표현식, 화살표 함수, 생성자 함수
함수 호출 방식 식별자를 통해 실행
반환 처리 return 키워드 사용, 생략 시 undefined 반환
콜백/고차 함수 함수가 다른 함수를 인자로 받거나 반환
즉시 실행/재귀 함수 일회성 실행 또는 자기 자신 호출
순수 함수 외부 상태에 의존하지 않는 함수 (권장)
함수 호이스팅 선언문은 호이스팅 O, 표현식은 호이스팅 X

[ 느낀점 ] 함수 부분과 원시 값과 객체의 비교 부분이 많이 어려운 편이었는데 설명을 들으면서 이해에 도움이 되어서 좋았습니다. 확실히 스터디 하면서 물어볼 사람과 내가 공부한 내용을 바탕으로 작성하고 수업을 듣는 느낌이어서 너무 좋은 것 같아요. 점점 뒤로 갈수록 난이도가 올라가고 있지만 앞으로도 계속 열심히 공부하겠습니당

⚠️ **GitHub.com Fallback** ⚠️