상세 컨텐츠

본문 제목

[자바스크립트] 객체(object), 객체 생성 방법과 많이 쓰는 객체 생성법

WEB-Front end/*JAVASCRIPT

by 주초위왕 2023. 5. 31. 17:45

본문

객체(object)
실생활에서 우리가 인식할 수 있는 사물들을 객체라고 부른다.
사람, 강아지, 고양이, 도마뱀 등등......
 


- 요것이 객체 빠밤~!!! -

내가 거미의 정보에 대해 표현하고 싶다면 메모리에 명사와 동사를 싹 묶어서 올려놓는 것 이것이 객체
 

let 머리개수 = 1

let 키 = 180

let 다리개수 = 2

...

function 달리기() {

       열심히 달립니다.

}



function 먹기() {

        맛있게 먹습니다.

}

 
 
const dragon = { }   //빈 객체
 
const dragon = {
        name: "불주먹",
        age: 40,
        color: gray,
        sleep: function() {
               consol.log('잠을 잡니다');
        }
        ...
}
name: "불주먹" = 이름과 값으로 이루어진 (property) 집합
그러니까 기본 타입은 객체이고, 객체란 이름과 값으로 구성된 프로퍼티의 정렬되지 않은 집합이다.
프로퍼티의 값으로 함수도 올 수 있는데, 이를 프로퍼티 메소드라고 부른다.


1. 리터럴 표기법
단점: 객체를 여러개 생성하기 힘들다.

1. 리터럴 표기법
자바스크립트에서 객체를 만드는 가장 쉬운 방법

const 객체를 = {
         프로퍼티명: 프로퍼티값,
         ...
         ...
}

 
2. 생성자를 이용한 객체생성

2. 생성자를 이용한 객체생성
new 연산자를 사용허여 객체를 생성하고 초기화할 수 있음. 이 때 사용되는 메소드를 생성자라고 하며, 이
메소드는 새롭게 생성되는 객체를 초기화하는 역할을 함.

function 생성자명(매개변수1, 매개변수2 ..) {

        프로퍼티명 = 값;
        ...
        ...

}
const 객체명 = new 생성자명(값1, 값2..);

 
3. 클래스를 이용한 객체생성
제일 많이 쓰는 방법 중에 하나.

3. 클래스를 이용한 객체생성

const 클래스명 = class {

        constructor(매개변수1, 매개변수2 ..){   //저장할 변수, 함수, 메소드 정의

                프로퍼티명 = 값;
                ...
                ...
        }
        메소드명(매개변수1, 매개변수2 ..){
         }
       ...
}

const 객체명 = new 클래스명(값1, 값2 ..);

- 여기서 생각해볼 점 -
배열과 객체의 차이점


예제1)

const dog = {
        name: "루시",
        age: 10,
        color: "white",
        weight: 3.5,
};
      
console.log(dog.name); //dog라는 객체를 참조변수가 가리키고 있고, 그안에 name이라는 key값 가져오기.
console.log(dog.age);  //.을 사용해서 그안에 변수 가져오기
console.log(dog.color);
console.log(dog.weight);

위에 방법 말고 배열 타입으로도 가져올 수 있다.

console.log(dog["name"])
console.log(dog["age"]);
console.log(dog["color"]);
console.log(dog["weight"]);

 
console.log(dog["name"])은 위에 콘솔과 비교 했을 때 어떤 점이 다른가에 대해서 한번 생각해 볼 수 있다.
여기서 for문은 i가 index를 가지고 dog는~까지 반복문을 돌린다는 의미인데 

for (let i in dog) {
console.log(i);
console.log(dog[i]);
}

 
여기서 log(i) (dog[i])를 출력 해보면
key값을 가져오는거와 value를 가져오는 차이를 볼 수 있다.


또 다른 예제보기,함수를 호출 해보기.
return받았으니 그 값이 memberId로 내려와서 출력되는 것.

const user = {
    userid: "apple",
    name: "김사과",
    gender: "여자",
    hp: "01011111111",
    birthday: "20001211",
    memberId: function () {
        return "korea" + this.hp;
    },
 };

console.log(user.userid);
console.log(user.name);
console.log(user.gender);
console.log(user.hp);
console.log(user.birthday);
console.log(user.memberId());

 
또, 함수를 실행하고 다시 memberId를 실행하면 함수가 저장 되어 있는걸 볼 수 있다.

console.log(user.memberId( ));
console.log(user.memberId);

 

 

반응형

관련글 더보기

댓글 영역