[JavaScript] Call by Value 와 Call by Reference

2025. 4. 2. 17:39·Front end/JavaScript
반응형

1. Call by Value (값에 의한 호출)

Call by Value는 기본 자료형(Primitive Type)을 함수의 매개변수로 전달할 때 발생합니다.
자바스크립트에서 기본 자료형은 다음과 같습니다.

  • Number
  • String
  • Boolean
  • Null
  • Undefined
  • Symbol
  • BigInt

이 경우, 함수 내부에서 변수의 값을 변경하더라도 원본 변수에는 영향을 주지 않습니다.

예제

function modifyValue(x) {
    x = 10;
    console.log("함수 내부의 x:", x);
}

let a = 5;
console.log("함수 호출 전 a:", a);

modifyValue(a);
console.log("함수 호출 후 a:", a);

실행 결과

함수 내부에서 x의 값을 변경했지만, a는 영향을 받지 않았습니다. 이는 a의 값이 복사되어 전달되었기 때문입니다.

함수 호출 전 a: 5
함수 내부의 x: 10
함수 호출 후 a: 5

 


 

2. Call by Reference (참조에 의한 호출)

Call by Reference는 객체(Object Type)를 함수의 매개변수로 전달할 때 발생합니다.

자바스크립트에서 객체 타입은 다음과 같습니다.

  • Object
  • Array
  • Function

객체는 참조(reference)로 전달되므로, 함수 내부에서 객체의 속성을 변경하면 원본 객체도 영향을 받습니다.

예제

function modifyObject(obj) {
    obj.value = 10;
    console.log("함수 내부의 obj.value:", obj.value);
}

let myObj = { value: 5 };
console.log("함수 호출 전 myObj.value:", myObj.value);

modifyObject(myObj);
console.log("함수 호출 후 myObj.value:", myObj.value);

실행 결과

함수 내부에서 객체의 속성을 변경하자, 원본 객체도 영향을 받았습니다. 이는 객체가 참조(reference)로 전달되었기 때문입니다.

함수 호출 전 myObj.value: 5
함수 내부의 obj.value: 10
함수 호출 후 myObj.value: 10

3. Call by Reference의 오해

자바스크립트는 객체를 참조로 전달하지만, 참조 자체는 값으로 전달됩니다. 즉, 함수 내부에서 객체의 속성을 변경하는 것은 가능하지만, 객체 자체를 새로운 객체로 재할당하면 원본 객체는 영향을 받지 않습니다.

예제

function replaceObject(obj) {
    obj = { value: 20 }; // 새로운 객체 할당
    console.log("함수 내부의 obj.value:", obj.value);
}

let anotherObj = { value: 5 };
console.log("함수 호출 전 anotherObj.value:", anotherObj.value);

replaceObject(anotherObj);
console.log("함수 호출 후 anotherObj.value:", anotherObj.value);

실행 결과

객체의 속성을 변경한 것이 아니라 새로운 객체를 할당했기 때문에, 원본 객체는 변경되지 않았습니다.

함수 호출 전 anotherObj.value: 5
함수 내부의 obj.value: 20
함수 호출 후 anotherObj.value: 5

4. 정리

구분 Call by Value Call by Reference
데이터 유형 기본 자료형 (Number, String 등) 객체 (Object, Array 등)
전달 방식 값 자체를 복사하여 전달 참조(reference)를 복사하여 전달
함수 내부 변경 시 원본 영향 없음 속성 변경 시 원본 영향 받음
객체 자체 변경 시 원본 영향 X (새 객체 할당 시 영향 없음) O (속성 변경 시 영향 있음)

 

자바스크립트에서 기본 자료형은 값으로 전달되고, 객체는 참조로 전달되지만,

참조 자체도 값으로 전달되기 때문에 재할당하면 원본에 영향을 주지 않는다는 점을 기억하면 좋습니다! 😊😊

반응형

'Front end > JavaScript' 카테고리의 다른 글

[JavaScript] JavaScript의 비동기 처리: Promise와 async/await 그리고 Java와의 차이점  (0) 2025.04.04
[JavaScript] location.replace와 location.href의 차이점  (0) 2024.07.11
[JavaScript] var / let / const (중복선언, 재할당, 스코프)  (0) 2024.02.20
'Front end/JavaScript' 카테고리의 다른 글
  • [JavaScript] JavaScript의 비동기 처리: Promise와 async/await 그리고 Java와의 차이점
  • [JavaScript] location.replace와 location.href의 차이점
  • [JavaScript] var / let / const (중복선언, 재할당, 스코프)
Kim-SooHyeon
Kim-SooHyeon
개발일기 및 알고리즘, 블로그 운영에 대한 글을 포스팅합니다. :) 목표: 뿌리 깊은 개발자 되기
    반응형
  • Kim-SooHyeon
    soo_vely의 개발로그
    Kim-SooHyeon
  • 전체
    오늘
    어제
    • 분류 전체보기 (255) N
      • 알고리즘 (108)
        • 자료구조 (3)
        • Java (104)
        • Python (1)
      • Back end (71) N
        • Spring Project (28) N
        • Java (21)
        • API (1)
        • Python (0)
        • Django (3)
        • Linux (1)
        • 서버 (2)
        • 에러로그 (11)
        • 부스트 코스 (1)
      • Front end (9)
        • HTML, CSS (4)
        • JavaScript (4)
        • JQuery (0)
      • 기타 프로그래밍 (4)
        • Android Studio (1)
        • Arduino (2)
        • Azure Fundamental(AZ-900) (1)
      • 개발도구 (24) N
        • IntelliJ (2) N
        • Git (12)
        • SVN (0)
        • Eclipse (2)
        • 기타 Tool (8)
      • Database (16)
        • Oracle (10)
        • MySQL (0)
        • H2 Database (3)
        • ORM & JPA (1)
      • 자격증 (10)
        • 컴활 1급 (7)
        • 컴활 2급 (2)
        • SQLD (1)
      • 기타 (13)
        • 블로그 운영 (6)
        • 문서 (1)
        • 기타 (6)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    BOJ
    solved.ac
    jpa
    배열
    알고리즘
    java
    백준 자바
    Git
    단계별풀기
    문자열
    백준알고리즘
    구현
    1차원 배열
    springboot
    github
    오라클
    for문
    백준
    Oracle
    spring
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
Kim-SooHyeon
[JavaScript] Call by Value 와 Call by Reference
상단으로

티스토리툴바