[📆 2025.04.11] reference types, scope, let const, array methods - [멋쟁이사자처럼부트캠프 프론트엔드13기]

📚 오늘 공부한 내용

• 참조 타입의 특징
• 변수 스코프
• ES6 - 변수 선언문
• 오늘 배운 배열 메소드

---

🧠 배운 점 & 정리

오늘 공부하면서 인사이트, 개념 요약 등

• 참조 타입의 특징

  • 기본 데이터 타입은 실제 데이터를 저장하고 다룸

    • 함수 호출 방식: 값에 의한 호출 (Call by Value) ⇒ 원시타입

  • 참조형 데이터 타입은 실제 데이터가 있는 위치의 주소를 저장하고 다룸

    • 함수 호출 방식: 참조에 의한 호출 (Call by Reference) ⇒ 참조타입

    • 예제코드
      
      js 메모리 구조

      function add10(data1, data2) {
        data1 += 10;
        data2[0] += 10;
        console.log("함수 내부에서 호출", data1, data2[0]);
      }
      
      let d1 = 80; // => 원시타입, Number
      let d2 = [80]; // => 참조타입, array(object)
      
      console.log("함수 호출 이전", d1, d2[0]);
      
      add10(d1, d2);
      
      console.log("함수 호출 이후", d1, d2[0]);

    • call stack

      • 모든 변수는 여기에 적용됨

      • 밑에서 부터 데이터가 하나씩 쌓이는 곳

      • 함수가 끝나면 stack frame이 역순으로 사라짐 (제일 마지막에 쌓였던 것부터 사라짐)

      • ex01-37-02 - call stack

        console.log("1. 프로그램 시작.");
        
        function a(n1) {
          console.log("2. a 시작.", n1);
          const n2 = b(n1);
          console.log("7. a 종료.", n2);
        }
        
        function b(n3) {
          console.log("3. b 시작.", n3);
          const n4 = c(n3); // 3.5번
          console.log("6. b 종료.", n4);
          return n4;
        }
        
        function c(n5) {
          console.log("4. c 시작.", n5);
          const n6 = n5 + 10;
          console.log("5. c 종료.", n6);
          return n6;
        }
        
        a(10);
        
        console.log("8. 프로그램 종료.");

      🧠 Call Stack 흐름 요약 (색깔 따라가기)
      

      1. 빨간색 (함수 진입)
         • 프로그램 시작 (console.log 1)
         • a(10) 호출 → a 시작 (console.log 2)
         • b(n1) 호출 → b 시작 (console.log 3)
         • c(n3) 호출 → c 시작 (console.log 4)
      2. 파란색 (함수 내부 로직)
         • c() 내부에서 n6 = n5 + 10
         • console.log("5. c 종료.") → 값 반환 (n6)
      3. 초록색 (함수 반환과 종료)
         • b()로 돌아와서 console.log("6. b 종료.") → 값 반환 (n4)
         • a()로 돌아와서 console.log("7. a 종료.") → 종료
      4. 보라색 (최종 종료)
         • console.log("8. 프로그램 종료.")

      🎯 요약 비유

      • 함수를 빨간 화살표로 호출하면 스택에 차곡차곡 쌓이고 (push)
      • 반환되면 초록 화살표로 스택에서 제거됨 (pop)
      • 결국 마지막에 스택이 비워지면 프로그램도 끝남!

    • heap

      • 모든 객체가 적용됨
      • 순서가 없는 무작위로 데이터를 담음

• 🧠 메모리 구조 이해

  1. d1은 원시타입(Number)
  • 값이 그대로 data1에 복사(pass-by-value)돼.
  • 즉, data1 = 80이 되고, data1 += 10을 해도 d1에는 영향이 없어.
  • data1은 함수 안에서만 90이 되고, 바깥의 d1은 여전히 80이야.
  2. d2는 참조타입(Array/Object)

  • d2의 참조값(주소)이 data2로 공유(pass-by-reference)돼.

  • 즉, data2[0] += 10은 실제 배열의 값인 d2[0]을 바꿔.

  • 그래서 바깥의 d2[0]도 같이 90으로 바뀜.

  • 비유
    🍱 도시락 비유
    
    🧍‍♂️ d1은 "직접 가져간 도시락"
    

    • 너가 친구한테 "내 도시락이 이거야!" 하고 도시락 사진만 줬어.
    • 친구는 그걸 보고 도시락 그림에 햄버거를 하나 더 그려.
    • 근데 네 진짜 도시락은 그대로야. 친구는 복사된 그림만 바꾼 거니까!
      🟰 이게 바로 원시타입, 즉 pass-by-value (값 복사)!

    ---

    🧍‍♂️ d2는 "도시락 통째로 빌려준 거"
    

    • 이번엔 도시락을 직접 친구한테 건넸어.
    • 친구가 뚜껑 열고 안에 반찬 하나 더 넣어줬어.
    • 그래서 네가 다시 도시락 받아봤을 땐, 진짜로 반찬이 바뀌어 있었던 거야.
      이게 참조타입, 즉 pass-by-reference (참조 전달)

---

• 변수 스코프

  • 전역 변수
    
    공식 문서

    var age = 20; // 전역 변수
    (window.)year = 10; // 전역 변수
    function getAge(year){ // 지역 변수
      var age = 30; // 지역 변수
      (window.)myAge = age + year; // 전역 변수
      (window.)alert(myAge);
      (window.)console.log(myAge);
    }

    • 함수 외부에서 선언한 변수
    • 스크립트 내 어디에서나 접근 가능
    • 페이지가 로딩될 때 한번 생성하여 값이 유지됨
    • 모든 전역변수는 window 객체의 속성으로 지정됨
    • 변수를 재할당할 경우 앞에 window가 생략되어서 사용함
    • 변수선언을 안하고 써도 전역변수로 인식해서 윈도우 객체 아래에 넣어버리는것은 자바스크립트만의 특별한 동작 방식이다!
    • (window.)myAge = age + year;
      
      되도록이면 사용하지 않는 것을 추천한다. 나 혼자 보는 코드가 아니기 때문에 다른 사람들이 봤을 때 혼란스러울 수 있음 만약, 정말정말 쓰고 싶다면 앞에 window.을 붙여서 윈도우 객체의 아래에 있다고 명시해주자
      
  • 지역 변수
    • 함수 내부에서 선언한 변수
    • 해당 함수 안에서만 접근 가능
    • 함수가 호출될 때마다 새로 생성하여 값이 초기화
    • 함수 내부에서 선언하지 않고 바로 사용하는 변수는 전역 변수로 동작
  • 변수 우선순위
    • 변수는 가까운 곳부터 찾는다.
    • 즉 지역변수 영역에서 먼저 찾고 없을 경우 전역변수에서 찾는다.
  • ❗지역변수의 유효 범위
    대부분의 언어에서는 선언한 변수가 블록 단위의 유효범위를 갖지만 자바스크립트에서는 var로 선언한 변수가 함수 단위의 유효범위를 갖는다.

• ES6 - 변수 선언문

  • var선언문
    • 함수 단위의 유효범위를 갖는 변수 선언문
    • 대부분의 언어에서는 선언한 변수가 블록 단위의 유효범위를 갖지만 자바스크립트에서는 var로 선언한 변수가 함수 단위의 유효 범위를 갖는다.
  • let 선언문
    • 블록 단위의 유효범위를 갖는 변수 선언문
  • const선언문
    • 블록 단위의 유효범위를 갖는 상수 선언문

---

• 오늘 배운 배열 메소드

  • fill()
    배열의 모든 요소를 지정한 값으로 채운다.

    // 문법: array.fill(value, start, end)
    // value: 배열을 채울 값
    // start(선택): 시작 인덱스 (기본값 0)
    // end(선택): 끝 인덱스 (기본값 array.length)
    
    const arr = new Array(5);
    arr.fill(7);
    console.log(arr); // [7, 7, 7, 7, 7]
    
    // 특정 구간만 채우기
    const nums = [1, 2, 3, 4, 5];
    nums.fill(0, 2, 4);
    console.log(nums); // [1, 2, 0, 0, 5]

  • join()
    배열의 모든 요소를 연결해 하나의 문자열로 만든다.

    // 문법: array.join(separator)
    // separator(선택): 요소 사이에 들어갈 구분자 (기본값은 쉼표)
    
    const fruits = ['사과', '바나나', '딸기'];
    console.log(fruits.join()); // '사과,바나나,딸기'
    console.log(fruits.join(' ')); // '사과 바나나 딸기'
    console.log(fruits.join(' - ')); // '사과 - 바나나 - 딸기'

  • split()
    문자열을 지정된 구분자를 기준으로 나누어 배열로 변환한다.

    // 문법: string.split(separator, limit)
    // separator: 분할 기준 (문자열 또는 정규식)
    // limit(선택): 반환할 분할 항목 수의 제한
    
    const sentence = '안녕하세요, 자바스크립트 공부 중입니다';
    const words = sentence.split(' ');
    console.log(words); // ['안녕하세요,', '자바스크립트', '공부', '중입니다']
    
    const csv = '김철수,30,개발자';
    const person = csv.split(',');
    console.log(person); // ['김철수', '30', '개발자']
    
    // 모든 문자를 개별 요소로
    const chars = '안녕하세요'.split('');
    console.log(chars); // ['안', '녕', '하', '세', '요']

  • includes()
    배열에 특정 요소가 포함되어 있는지 확인하고 true또는 false를 반환한다.

    // 문법: array.includes(searchElement, fromIndex)
    // searchElement: 찾을 요소
    // fromIndex(선택): 검색을 시작할 위치 (기본값 0)
    
    const numbers = [1, 2, 3, 4, 5];
    console.log(numbers.includes(3)); // true
    console.log(numbers.includes(6)); // false
    
    // 특정 위치부터 검색
    console.log(numbers.includes(1, 2)); // false (인덱스 2부터 검색)
    
    // 문자열 배열에서도 사용 가능
    const fruits = ['사과', '바나나', '딸기'];
    console.log(fruits.includes('바나나')); // true
    console.log(fruits.includes('수박')); // false

🔗 배웠던 파일

• 29-02 2차원 배열
• 37-01 Call by Value와 Call by Reference 차이
• 37-02 Call by Value와 Call by Reference 차이
• 38 전역 변수와 지역 변수

---

❓ 생긴 질문 / 더 알아볼 것

• 오늘은 개인적으로 몸이 안 좋은 날이어서 수업을 잘 못 들은 하루였다. 제일 중요한 call stack랑 heap를 대충 들은거 같아서 내일부터 딥다이브를 보면서 머리속에 넣어야 할것 같다

🔗 참고 자료

• JS 메모리 구조 | velog 불꽃남자
• 전역 객체 | mdn
• 노션 정리 링크