JavaScript에서 함수에 값을 전달할 때, 기본 타입(primitive type)과 객체 타입(object type)은 서로 다른 방식으로 처리됩니다.
- 기본 타입(숫자, 문자열, 불리언 등): 값 자체가 복사되어 전달됩니다. 따라서 함수 내부에서 값을 변경해도 원본 변수에는 영향을 주지 않습니다.
- 객체 타입: 객체의 참조(reference)가 전달됩니다. 함수 내부에서 객체의 속성을 수정하면 원본 객체에도 그 변경이 그대로 반영됩니다.
다음은 기본 타입과 객체 타입을 함수에 전달하고 호출하는 예제 코드입니다 −
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>기본 타입/객체 타입을 함수에 전달하기</h1>
<div class="result"></div>
<div class="result"></div>
<button class="Btn">여기를 클릭하세요</button>
<h3>위 버튼을 클릭하면 기본 타입과 객체를 함수에 전달하여 호출합니다</h3>
<script>
let BtnEle = document.querySelector(".Btn");
let resEle = document.querySelector(".result");
let person = { name: "Rohan", age: 12, city: "Delhi" };
function printObj(obj) {
resEle.innerHTML = "Name = " + obj.name + "<br>";
resEle.innerHTML += "age = " + obj.age + "<br>";
resEle.innerHTML += "city = " + obj.city + "<br>";
}
function printPrimitive(prim) {
resEle.innerHTML += prim;
}
BtnEle.addEventListener("click", () => {
printObj(person);
printPrimitive(22);
});
</script>
</body>
</html>
실행 결과
'여기를 클릭하세요' 버튼을 클릭하면 다음과 같이 객체의 속성 값(name, age, city)과 기본 타입 값(22)이 함수에 전달되어 화면에 출력됩니다 −
위 예제에서 person 객체는 참조로 전달되어 함수 내부에서 속성에 접근할 수 있으며, 숫자 22는 값으로 복사되어 전달됩니다. 이처럼 두 타입의 전달 방식 차이를 이해하면 함수 내부에서 데이터를 다룰 때 발생할 수 있는 의도치 않은 변경을 예방할 수 있습니다.