[모던 자바스크립트 Deep Dive] 11장 ~ 15장

11장 원시 값과 객체의 비교

데이터 타입

• 원시 타입: 숫자, 문자열, 불리언, null, undefined, 심벌
• 객체 타입: 객체

원시 타입과 객체 타입의 차이

구분	원시 타입	객체 타입
변경 가능성	불변	변경 가능
변수에 저장되는 값	원시 값 저장	참조 값 저장
전달 방식	값에 의한 전달	참조에 의한 전달

원시 값의 특징

• 원시 값은 생성 후 변경 불가능
• 변수의 값 변경 시, 값 자체가 변경되는 것이 아니라 새로운 값이 생성되고 변수의 참조 주소가 바뀜
• 상수(const)는 재할당 불가능한 변수, 원시 값의 불변성과는 다른 개념

문자열의 특징과 불변성

• 문자열: 유사 배열 객체, 한 번 생성되면 변경할 수 없는 읽기 전용 값
• 문자열을 수정하려면 새 문자열이 생성되고 메모리 주소가 변경됨

값에 의한 전달 (원시 값)

• 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 값이 복사되어 별개의 메모리 공간에 저장됨

• 예제

  var score = 80;
  var copy = score;
  
  score = 100;
  console.log(score); // 100
  console.log(copy);  // 80

객체 타입

• 객체는 변경 가능한 값
• 객체를 할당한 변수는 객체 자체가 아니라 객체가 저장된 메모리 주소(참조 값)를 가짐
• 객체는 동적으로 프로퍼티 추가, 수정 삭제 가능

얕은 복사와 깊은 복사

• 얕은 복사(Shallow Copy): 객체의 첫 번째 수준만 복사 (중첩된 객체는 복사되지 않고 참조)
• 깊은 복사(Deep Copy): 객체의 중첩된 모든 요소 복사

12장 함수

함수란?

• 함수: 특정 입력을 받아 처리한 후 출력을 반환하는 코드 블록
• 입력(매개변수)을 받아 처리 후 출력(반환값)을 내보냄
• 자바스크립트에서 함수는 객체 타입이며, 일급 객체로 취급

함수의 구성 요소

• 함수 이름: 함수의 역할을 설명하는 식별자
• 매개변수: 입력을 전달받는 변수
• 인수: 실제 함수 호출 시 전달되는 값
• 반환값: 함수가 호출된 후 반환하는 값

함수를 사용하는 이유

• 코드의 재사용과 중복 제거
• 유지보수 편의성 및 코드 신뢰성 향상
• 코드의 가독성 향상

함수 정의 방식

• 함수 선언문

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

• 함수 표현식

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

• Function 생성자 함수

  var add = new Function('x', 'y', 'return x + y');

• 화살표 함수 (ES6)

  const add = (x, y) => x + y;

함수 선언문 vs 함수 표현식

• 함수 선언문: 런타임 이전에 생성, 호이스팅 발생
• 함수 표현식: 런타임에 평가되어 함수 객체 생성, 호이스팅 되지 않음

즉시 실행 함수(IIFE)

• 정의하자마자 즉시 호출되는 함수
• 익명으로 정의하는 것이 일반적, 한 번만 실행됨

  (function() {
    var a = 3;
    var b = 5;
    console.log(a * b);
  })();

재귀 함수

• 함수가 자기 자신을 호출하는 방식으로 반복문 대체 가능

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

중첩 함수

• 함수 내부에 정의된 함수, 외부 함수의 내부에서만 호출 가능
• 주로 외부 함수의 헬퍼 역할로 사용

콜백 함수와 고차 함수

• 콜백 함수: 함수의 인수로 전달되어 호출되는 함수
• 고차 함수: 함수를 인수로 받거나 반환값으로 함수를 변환하는 함수

  function repeat(n, callback) {
    for (var i = 0; i < n; i++) {
      callback(i);
    }
  }
  repeat(5, function(i) { console.log(i); });

순수 함수와 비순수 함수

• 순수 함수
  • 같은 입력에 항상 같은 출력을 반환
  • 외부 상태에 의존하지 않고 변경하지 않음

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

• 비순수 함수
  • 외부 상태에 의존하거나 변경하여 부수 효과를 발생시킴

    let count = 0;
    function increment() { return ++count; }

13장 스코프

스코프란?

• 스코프: 식별자(변수,함수, 클래스 등)가 유효한 범위
• 변수의 접근 가능 여부는 선언된 위치에 따라 결정
• 네임스페이스 역할을 하며, 동일한 이름의 식별자가 충돌하지 않게 함

스코프의 종류

• 전역 스코프
  • 코드 가장 바깥쪽에서 선언된 변수의 스코프
  • 어디서든 접근 가능
• 지역 스코프
  • 함수 내부 또는 블록 내부에서 선언된 변수의 스코프
  • 해당 지역 내부와 그 하위 지역에서만 접근 가능

스코프 체인

• 스코프 체인: 계층 구조를 가지는 스코프
• 내부 스코프에서 변수 검색 -> 없으면 외부 스코프로 이동해서 찾음
• 상위 스코프는 하위 스코프에서 참조 가능
• 하위 스코프는 상위 스코프에서 참조 불가

14장 전역 변수의 문제점

변수의 생명 주기

• 지역 변수
  • 생성 시점: 함수가 호출될 때 생성
  • 소멸 시점: 함수가 종료되면 사라짐
  • 함수의 생명 주기 = 지역 변수의 생명 주기
• 전역 변수
  • 전역 객체의 생명 주기 = 전역 변수의 생명 주기
  • 프로그램이 끝날 때까지 메모리를 계속 차지, 값 변경 위험이 큼

전역 변수의 문제점

• 암묵적 결합: 가독성 저하, 의도치 않게 상태가 변경될 수 있음
• 긴 생명 주기: 메모리 리소스 소비, 상태 변경에 의한 오류 발생 가능
• 스코프 체인 상에서 중점에 존재: 검색 속도가 가장 느림
• 네임스페이스 오염: 동일한 이름의 변수가 존재할 확률이 높아짐

전역 변수의 사용을 억제하는 방법

• 즉시 실행 함수(IIFE)
  • 즉시 실행 함수 표현식 사용
  • 모든 변수는 함수 내부에 캡슐화
• 네임스페이스 객체
  • 하나의 전역 객체 안에 변수를 추가해서 관리
  • 전역 객체 자체는 전역 공간에 존재
• 모듈 패턴
  • 클로저를 활요애서 정보 은닉 가능
  • 관련 기능을 하나의 모듈로 관리

15장 let, const 키워드와 블록 레벨 스코프

var 키워드로 선언한 변수의 문제점

문제점	설명
변수 중복 선언	같은 스코프 내에서 중복 선언 가능 → 값이 덮어씌워지는 부작용 발생
함수 레벨 스코프	함수만을 지역 스코프로 인식 → 코드 블록 내에서 선언해도 전역 변수로 취급됨
변수 호이스팅	선언이 스코프 최상단으로 끌어올려짐 → 초기화 이전에도 접근 가능 (값은 undefined)

let 키워드

특징	설명
변수 중복 선언 금지	같은 스코프 내에서 중복 선언 불가 → SyntaxError
블록 레벨 스코프	모든 코드 블록을 지역 스코프로 인정 → 블록 외부에서는 접근 불가
변수 호이스팅	선언은 호이스팅되지만, "일시적 사각지대(TDZ)"로 보호되어 선언 이전 접근 시 ReferenceError 발생
전역 객체 등록 여부	전역 변수로 선언해도 window 객체의 프로퍼티가 되지 않음

const 키워드

특징	설명
선언과 동시에 초기화	선언과 동시에 값을 반드시 초기화해야 함
재할당 금지	선언 이후 값을 재할당할 수 없음 → TypeError
상수로 사용	원시 값은 값을 바꿀 수 없음 -> 상수로 사용 가능
참조 값 변경 가능	객체나 배열과 같은 참조 타입은 프로퍼티나 요소 변경은 가능하지만, 변수 자체를 재할당 불가

var vs. let vs. const

구분	var	let	const
스코프	함수 레벨 스코프	블록 레벨 스코프	블록 레벨 스코프
중복 선언	허용	불가	불가
호이스팅	O (초기값: undefined)	O (TDZ → 참조 시 에러)	O (TDZ → 참조 시 에러)
재할당	O	O	불가
전역 객체 등록	O (window에 등록됨)	X	X