자바스크립트 - 객체: 초보자 가이드
안녕하세요, 야심 찬 프로그래머 여러분! 자바스크립트 객체의 세계로 여러분을 안내하게 되어 기쁩니다. 프로그래밍을 가르쳐온 지 오래된 저로서는, 객체를 이해하는 것은 자바스크립트에서 비밀 슈퍼파워를 풀어주는 것과 같다고 말씀드릴 수 있습니다. 그麼, 시작해보겠습니다!
자바스크립트 객체는 무엇인가요?
당신의 애완견을 설명하는 상상해 봅시다. 이름, 나이, 품종, 좋아하는 장난감 등이 있을 것입니다. 자바스크립트에서는 이 개를 객체로 표현할 수 있으며, 모든 특징을 그의 속성으로 간주할 수 있습니다. 우리의 첫 번째 객체를 만들어보겠습니다:
let myDog = {
name: "Buddy",
age: 3,
breed: "Golden Retriever",
favoriteToy: "squeaky ball"
};이것을 우리는 객체 리터럴이라고 부릅니다. 관련된 정보를 담고 있는 컨테이너와 같습니다. 각 정보는 속성으로, 이름(예: "name" 또는 "age")과 값("Buddy" 또는 3)을 가집니다.
객체 속성
이제 myDog 객체가 있으니, 그 속성을 어떻게 접근할까요? 두 가지 방법이 있습니다:
-
점 표기법:
console.log(myDog.name); // 출력: Buddy -
브래켓 표기법:
console.log(myDog["age"]); // 출력: 3
두 가지 모두 같은 작업을 수행하지만, 브래켓 표기법은 속성 이름이 변수에 저장되거나 공백이 포함된 경우에 유용합니다.
우리는 또한 객체에 새로운 속성을 추가할 수 있습니다:
myDog.isGoodBoy = true;
console.log(myDog.isGoodBoy); // 출력: true또는 기존의 속성을 수정할 수 있습니다:
myDog.age = 4;
console.log(myDog.age); // 출력: 4객체 메서드
메서드는 객체에 속하는 함수입니다. 객체가 수행할 수 있는 행동과 같습니다. 우리의 myDog 객체에 메서드를 추가해보겠습니다:
myDog.bark = function() {
console.log("Woof woof!");
};
myDog.bark(); // 출력: Woof woof!이제 우리의 개가吠えることができます! 멋지지 않나요?
새로운 객체 생성
객체 리터럴을 사용하여 객체를 생성하는 방법을 보았지만, Object() 생성자를 사용하는 다른 방법도 있습니다:
let myCat = new Object();
myCat.name = "Whiskers";
myCat.age = 5;
myCat.meow = function() {
console.log("Meow!");
};
myCat.meow(); // 출력: Meow!이 방법은 덜 일반적이지만, 알아두는 것이 좋습니다.
객체에 메서드 정의
객체를 생성할 때 메서드를 정의할 수도 있습니다. 속성과 마찬가지로:
let myParrot = {
name: "Polly",
age: 2,
speak: function() {
console.log("Polly wants a cracker!");
}
};
myParrot.speak(); // 출력: Polly wants a cracker!메서드를 정의하는 간단한 방법도 있습니다:
let myHamster = {
name: "Fuzzy",
age: 1,
run() {
console.log("Running on the wheel!");
}
};
myHamster.run(); // 출력: Running on the wheel!'with' 키워드
같은 객체의 속성을 여러 번 사용할 때 with 키워드를 사용하면 코드를 짧게 만들 수 있습니다:
with(myDog) {
console.log(name);
console.log(age);
bark();
}그러나 with 키워드는 코드를 덜 명확하게 만들 수 있으며, 엄격 모드에서는 권장되지 않습니다.
자바스크립트 내장 객체
자바스크립트는 유용한 기능을 제공하는 여러 가지 내장 객체를 가지고 있습니다. 가장 흔한 몇 가지를 소개하겠습니다:
| 객체 | 설명 |
|---|---|
| String | 텍스트를 표현하고 조작합니다 |
| Number | 숫자를 표현합니다 |
| Boolean | 참/거짓 값을 표현합니다 |
| Array | 값의 목록를 표현합니다 |
| Math | 수학 연산을 제공합니다 |
| Date | 날짜와 시간을 표현합니다 |
예제를 보겠습니다:
let greeting = "Hello, World!";
console.log(greeting.length); // 출력: 13
let pi = Math.PI;
console.log(pi); // 출력: 3.141592653589793
let today = new Date();
console.log(today); // 출력: 현재 날짜와 시간자바스크립트 객체 메서드
자바스크립트 객체는 몇 가지 내장 메서드를 가지고 있습니다. 중요한 몇 가지를 소개하겠습니다:
| 메서드 | 설명 |
|---|---|
| Object.keys() | 객체의 속성 이름 배열을 반환합니다 |
| Object.values() | 객체의 속성 값 배열을 반환합니다 |
| Object.entries() | 객체의 [키, 값] 쌍 배열을 반환합니다 |
| Object.assign() | 하나의 객체에서 다른 객체로 속성을 복사합니다 |
이제 이 메서드들을 사용해보겠습니다:
let keys = Object.keys(myDog);
console.log(keys); // 출력: ["name", "age", "breed", "favoriteToy", "isGoodBoy", "bark"]
let values = Object.values(myDog);
console.log(values); // 출력: ["Buddy", 4, "Golden Retriever", "squeaky ball", true, ƒ]
let entries = Object.entries(myDog);
console.log(entries); // 출력: [["name", "Buddy"], ["age", 4], ...]
let newDog = Object.assign({}, myDog);
console.log(newDog); // 출력: myDog의 사본이제 여러분은 자바스크립트 객체의 세계로 첫 걸음을 냈습니다. 연습이 완벽을 만든다는 것을 기억하고, 자신의 객체와 메서드를 실험해보지 마세요. 얼마 지나지 않아 프로 프로그래머처럼 객체를 다루게 될 것입니다!
행복하게 코딩하시고, 여러분의 객체가 항상 버그가 없기를 바랍니다!
Credits: Image by storyset