자바스크립트 - 참조형

안녕하세요, 초보 프로그래머 여러분! 오늘 우리는 자바스크립트 참조형의 fascineting 세계로一头潜入합니다. 프로그래밍에 새로운 사람이라면 걱정하지 마세요; 저는 이 개념을 단계별로 안내해 드릴 것입니다. 수 년 동안 수많은 학생들을 가르친 경험을 바탕으로 말이죠. 그럼, 당신의 좋아하는 음료를 손에 쥐고 편안하게 앉아, 이 흥미로운 여정을 함께 시작해 보세요!

JavaScript - Reference Type

참조형이란?

복잡한 것으로 뛰어들기 전에 간단한 비유로 시작해 보겠습니다. 당신이 도서관 카드를 가지고 있다고 상상해 보세요. 카드 자체는 책이 아니지만, 도서관에서 책을 찾을 수 있는 위치를 참조합니다. 자바스크립트에서 참조형은 비슷하게 작동합니다 - 그들은 컴퓨터 메모리에 저장된 데이터의 위치를 가리키는 도서관 카드처럼입니다.

참조형은 자바스크립트의 기본 개념 중 하나입니다. 원시형(수학 또는 문자열과 같은)과 달리, 원시형은 실제 값을 저장하지만, 참조형은 메모리 내에서 값을 가리키는 참조를 저장합니다.

자바스크립트에서 가장 일반적인 참조형은 다음과 같습니다:

참조형	설명
Object	키-값 쌍의 컬렉션
Array	값의 순서 있는 목록
Function	재사용 가능한 코드 블록
Date	특정 시간을 나타냅니다
RegExp	패턴 매칭을 위한 정규 표현식 객체

이제 이들 각각을 몇 가지 예제를 통해 탐구해 보겠습니다!

참조형의 예제

1. 객체

객체는 자바스크립트에서 가장 다재다능한 참조형입니다. 관련 데이터와 기능을 함께 그룹화할 수 있습니다.

let person = {
name: "Alice",
age: 30,
greet: function() {
console.log("Hello, I'm " + this.name);
}
};

console.log(person.name); // 출력: Alice
person.greet(); // 출력: Hello, I'm Alice

이 예제에서 person은 (name과 age) 속성과 (greet) 메서드를 가진 객체입니다. 속성에 접근하려면 점 표기법을 사용하고, 메서드는 속성과 마찬가지로 호출할 수 있습니다.

2. 배열

배열은 항목의 목록을 저장하는 데 사용됩니다. 데이터 컬렉션을 다루는 데 매우 유용합니다.

let fruits = ["apple", "banana", "cherry"];

console.log(fruits[0]); // 출력: apple
fruits.push("date");
console.log(fruits.length); // 출력: 4

여기서 우리는 과일의 배열을 만듭니다. 각 요소는 인덱스를 사용하여 접근할 수 있으며 (0에서 시작됩니다!), 새로운 요소를 추가할 수 있고 배열의 길이를 확인할 수 있습니다.

3. 함수

함수는 재사용 가능한 코드 블록입니다. 그들은 또한 자바스크립트에서 참조형으로 작동하며, 변수에 할당하거나 인자로 전달하거나 다른 함수에서 반환할 수 있습니다.

function sayHello(name) {
console.log("Hello, " + name + "!");
}

sayHello("Bob"); // 출력: Hello, Bob!

let greet = sayHello;
greet("Charlie"); // 출력: Hello, Charlie!

이 예제에서 우리는 sayHello 함수를 정의하고 그것을 greet 변수에 할당합니다. sayHello와 greet는 이제 같은 함수를 참조합니다.

4. 날짜

Date 객체는 날짜와 시간을 다루는 데 사용됩니다.

let now = new Date();
console.log(now); // 출력: 현재 날짜와 시간

let specificDate = new Date("2023-06-15");
console.log(specificDate); // 출력: 2023-06-15T00:00:00.000Z

Date 객체는 날짜를 생성, 조작 및 형식화하는 데 매우 유용합니다.

5. 정규 표현식

정규 표현식(RegExp)은 패턴 매칭과 텍스트 조작에 강력한 도구입니다.

let pattern = /hello/i;
let text = "Hello, World!";

console.log(pattern.test(text)); // 출력: true

이 예제에서 우리는 "hello"라는 단어를(대소문자 구분 없이) 매칭하는 정규 표현식을 만들고, 그것을 문자열에 대해 테스트합니다.

참조형의 힘

이제 각 참조형의 예제를 보았으므로, 그들이 왜 강력한지 이야기해 보겠습니다:

가변성: 원시형과 달리, 참조형은 가변적입니다. 새로운 객체를 만들지 않고 내용을 변경할 수 있습니다.
복잡한 구조: 그들은 실제 세계의 엔티티나 개념을 나타낼 수 있는 복잡한 데이터 구조를 만들 수 있습니다.
데이터 공유: 여러 변수가 동일한 객체를 참조할 수 있어 데이터 공유가 효율적입니다.

이를 보여주는 예제를 보겠습니다:

let car1 = { make: "Toyota", model: "Corolla" };
let car2 = car1;

car2.model = "Camry";

console.log(car1.model); // 출력: Camry
console.log(car2.model); // 출력: Camry

이 예제에서 car1과 car2는 동일한 객체를 참조합니다. car2를 통해 model을 변경하면, 두 변수가 참조하는 객체 모두에 영향을 미칩니다.

결론

축하합니다! 자바스크립트 참조형의 세계로 첫 걸음을 뗐습니다. 우리는 객체, 배열, 함수, 날짜, 정규 표현식을 다루었고, 이러한 블록을 통해 강력하고 복잡한 프로그램을 만들 수 있습니다.

기억하시라, 새로운 기술을 배우는 것은 연습이 필요합니다. 바로 이해되지 않으면 낙담하지 마세요. 계속 실험하고 코딩을 하다 보면, 곧 이러한 유형을 마스터하실 것입니다!

저의 교육 경험에서 수많은 학생들이 이 개념에서 혼란스러웠던 시기에서 자신감을 가지게 되었음을 목격했습니다. 당신도 그 여정에 있으며, 당신이 어디로 갈지 기대해 봅니다. 즐거운 코딩을 하시고, 여정을 즐기세요!

Credits: Image by storyset

이전 튜토리얼:

JavaScript - 호출 스택

다음 튜토리얼:

JavaScript - IndexedDB