자바스크립트 강의 EP_20 | 객체(Object)1 | ES6+ 최신 문법 | DOM API | BOM API

📚 객체란 무엇인가?

객체는 데이터를 묶어서 관리하기 위한 구조입니다. 자바스크립트에서 객체는 키와 값의 쌍으로 이루어진 데이터 구조로, 다양한 데이터를 하나의 논리적 단위로 묶을 수 있습니다. 예를 들어, person이라는 객체는 이름, 나이, 취미와 같은 관련 데이터를 하나의 그릇에 담을 수 있습니다. 이러한 객체의 프로퍼티들은 각각의 키를 통해 접근할 수 있으며, 그 값은 문자열, 숫자, 함수 등 다양한 형태일 수 있습니다. 객체는 이러한 특성 덕분에 복잡한 데이터를 구조화하고, 보다 직관적으로 관리할 수 있게 해줍니다.

💡 객체 생성 방법

객체를 생성하는 방법에는 여러 가지가 있습니다. 가장 일반적인 방법은 객체 리터럴을 사용하는 것으로, 중괄호 {}를 이용해 키와 값을 지정하는 방식입니다. 예를 들어, const person = { name: "Alice", age: 25 };와 같이 작성합니다. 또 다른 방법은 new Object() 생성자를 사용하는 것입니다. 이 방식은 보다 명시적이지만, 객체 리터럴 방식이 더 간결하고 직관적이어서 일반적으로 선호됩니다. 생성된 객체는 프로퍼티와 메서드를 통해 다양한 기능을 수행할 수 있습니다.

🛠️ 프로퍼티 접근 및 수정

객체의 프로퍼티에 접근하는 방법은 두 가지가 있습니다. 첫 번째는 점 표기법(.)을 사용하는 것이며, 두 번째는 대괄호 표기법([])을 사용하는 것입니다. 점 표기법은 일반적인 경우에 사용되며, 대괄호 표기법은 프로퍼티 이름이 동적으로 결정될 때 주로 사용됩니다. 예를 들어, person.name 또는 person["name"]을 사용하여 name 프로퍼티에 접근할 수 있습니다. 또한, 이러한 방법으로 프로퍼티의 값을 수정할 수도 있습니다. 예를 들어, person.age = 30;처럼 프로퍼티 값을 변경할 수 있습니다.

🔍 객체 활용하기

객체는 다양한 방식으로 활용될 수 있습니다. 예를 들어, 함수의 파라미터로 객체를 전달하여 여러 데이터를 한 번에 넘길 수 있습니다. 이는 코드의 가독성과 유지보수성을 크게 향상시킵니다. 또한, 객체의 프로퍼티를 동적으로 추가하거나 제거할 수 있어 매우 유연한 데이터 구조를 만들 수 있습니다. delete 연산자를 사용하여 프로퍼티를 제거할 수 있으며, 새로운 프로퍼티를 추가하여 객체의 구조를 변경할 수 있습니다. 이러한 객체의 유연성은 다양한 프로그래밍 상황에서 매우 유용합니다.

🏭 팩토리 함수 및 클래스

팩토리 함수는 객체를 생성하여 반환하는 함수를 말합니다. 이는 동일한 구조의 객체를 여러 개 생성해야 할 때 매우 유용합니다. 예를 들어, function createPerson(name, age) { return { name, age }; }와 같이 정의하여 여러 사람 객체를 쉽게 생성할 수 있습니다. ES6에서는 클래스 문법이 도입되어 객체 지향 프로그래밍을 더욱 직관적으로 구현할 수 있게 되었습니다. 클래스는 객체를 생성하기 위한 템플릿을 제공하며, constructor 메서드를 통해 객체의 초기 상태를 설정할 수 있습니다. 이러한 클래스와 팩토리 함수는 객체 지향 프로그래밍의 기본 개념을 이해하는 데 중요한 역할을 합니다.

🌐 공식사이트

자바스크립트 공식 문서: MDN Web Docs - JavaScript