객체(Object)
하나의 주제를 가지고 관련있는 프로퍼티(property)를 가지고 있는 집합
프로퍼티(property)
이름과 값으로 구성된 정렬되지 않은 집합
프로퍼티는 함수도 지정할 수 있음 -> 프로퍼티 메서디
객체를 생성하는 방법
리터럴 표기법
const 객체명 = { 프로퍼티명1:값1, 프로퍼티명2:값2 ... 프로퍼티명n:function(){ 프로퍼티가 호출되면 실행할 문장; ... } }
✓ obj.property
const obj = { name:'kim', age:20, address:'동대문구', dis:function(){ console.log(`name: ${this.name}, age: ${this.age}, address: ${this.address}`); } } console.log(obj.name); console.log(obj.age); console.log(obj.address); obj.dis()
![[JavaScript] 객체 - 객체를 생성하는 방법 - 리터럴 표기법 [JavaScript] 객체 - 객체를 생성하는 방법 - 리터럴 표기법](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
✓ obj['property']
const obj = { name:'kim', age:20, address:'동대문구', dis:function(){ console.log(`name: ${this.name}, age: ${this.age}, address: ${this.address}`); return null; } } console.log(obj['name']); console.log(obj['age']); console.log(obj['address']); console.log(obj['dis']); console.log(obj['dis']());
![[JavaScript] 객체 - 객체를 생성하는 방법 - 리터럴 표기법 [JavaScript] 객체 - 객체를 생성하는 방법 - 리터럴 표기법](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
객체에 함수 프로퍼티를 호출하면 함수를 실행하고 반환값을 반환한다. 반환값 지정을 하지 않으면 undefined가 반환된다.
✓ for 문으로 출력하기
const obj = { name:'kim', age:20, address:'동대문구', dis:function(){ console.log(`name: ${this.name}, age: ${this.age}, address: ${this.address}`); return null; } } for(let i in obj){ console.log(`i: ${i}, obj[${i}]: ${obj[i]}`); }
![[JavaScript] 객체 - 객체를 생성하는 방법 - 리터럴 표기법 [JavaScript] 객체 - 객체를 생성하는 방법 - 리터럴 표기법](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
생성자를 이용
재사용하거나 여러 객체를 만들어야 할 때 사용
- new 연산자를 사용하여 객체를 생성하고 초기화할 수 있음
- 객체를 생성할 때 사용하는 함수를 생성자라고 함
- 새롭게 생성되는 객체를 초기화하는 역할
- 같은 형태의 객체를 여러개 생성할 때 유리
객체를 만드는 함수
function 생성자명(매개변수1, 매개변수2, ...){ this.프로퍼티명1 = 값1; this.프로퍼티명2 = 값2; ... this.프로퍼티명n = function(){ } } const 객체명1 = new 생성자명(값1, 값2, ..); const 객체명2 = new 생성자명(값1, 값2, ..);
function Dog(name, color){ this.name = name; this.color = color; this.eat = function(){ return `${this.name} 사료를 먹습니다.` } } const Kuma = new Dog('쿠마', 'brown'); console.log(Kuma.name); console.log(Kuma.color); console.log(Kuma.eat); console.log(Kuma.eat());
함수 호출 형식으로 해야 함수가 실행되고 값을 반환함.
클래스를 이용
ECMA Script6에 추가된 객체 생성 방법
내부적으로 생성자를 이용한 객체 생성 방법과 동일하게 작동
const 클래스명 = class { constructor(매개변수1, 매개변수2, ...){ this.프로퍼티명1 = 값1; this.프로퍼티명2 = 값2; ... } 메소드명(매개변수1, 매개변수2, ..){ 메소드가 호출되면 실행할 문장; .. } } const 객체명1 = new 클래스명(값1, 값2, ..); const 객체명2 = new 클래스명(값1, 값2, ..);
const Student = class { constructor(name, hp, age){ this.name = name; this.hp = hp; this.age = age; } getName() { return `이름은 ${this.name}입니다.`; } } const apple = new Student('김사과', '010-1234-1234', 20); console.log(apple.name); console.log(apple.hp); console.log(apple.age); console.log(apple.getName); console.log(apple.getName());
![[JavaScript] 객체 - 객체를 생성하는 방법 - 클래스를 이용 [JavaScript] 객체 - 객체를 생성하는 방법 - 클래스를 이용](https://blog.kakaocdn.net/dna/6JWD9/btszjFa9kXp/AAAAAAAAAAAAAAAAAAAAAJ_lY7E3ZNyYw56rd3HVBac8_rhdzHKDBEXOxvEHYnAO/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=3AR84uPIPCvE0i9Vys2CeEio9Qw%3D)
'웹 > JavaScript' 카테고리의 다른 글
[JavaScript] 프로토타입 (0) | 2023.10.30 |
---|---|
[JavaScript] 호이스팅 (0) | 2023.10.29 |
[JavaScript] 함수 (0) | 2023.10.29 |
[JavaScript] 배열 (0) | 2023.10.29 |
[JavaScript] 제어문(조건문, 반복문) (1) | 2023.10.29 |
댓글