본문 바로가기

혼공스보면서 혼공스(JS)

CH6. 객체- 객체의 기본

06-1 객체의 기본

1. 객체

    const student1={
        이름: '홍길동',
        성별: '남자',
        나이: 20,
        직업: 의적 
    }

> student1
{이름: "홍길동", 성별: "남자", 나이: 20, 직업: "의적"}

>student1[이름]
"홍길동"

>student1.이름
"홍길동"

ㄴ student1이라는 객체는 이름, 성별, 나이, 직업을 키로 가지고 있고 키는 배열의 인덱스 역할을 한다.

     객체[키]와 객체.키로 속성에 접근할 수 있다.

 

2. 속성과 메소드

  const student1={
        이름: '홍길동',
        성별: '남자',
        나이: 20,
        직업: '의적',
        분신술: function(num){
            num*=2
            console.log(`${num}명의 ${student1['이름']}이 있다!`)
        }
    }

student1.분신술(1)

<실행결과>
2명의 홍길동이 있다!

ㄴ객체 내부에 있는 값을 속성이라고 하고 객체의 속성 중 함수 자료형인 속성을 메소드라고 한다.

 

  const student1={
        이름: '홍길동',
        성별: '남자',
        나이: 20,
        직업: '의적',
        분신술: function(num){
            num*=2
            console.log(num+'명의 '+this.이름+'이 있다!')
        }
    }

student1.분신술(1)

<실행결과>
2명의 홍길동이 있다!

ㄴ 메소드 내에서 자기 자신이 가진 속성을 출력하고 싶을 때는 this 키워드를 사용하면 된다.

 

3. 동적으로 객체 속성 추가/제거

1) 동적으로 객체 속성 추가하기

const student1={}
student1.이름='홍길동'
student1.성별='남자'
student1.나이=20

ㄴ 객체.속성이름 = 값 으로 객체 속성을 동적으로 추가할 수 있다.

 

2) 동적으로 객체 속성 제거하기

const student1={}
student1.이름='홍길동'
student1.성별='남자'
student1.나이=20

delete student1.나이

ㄴ delete 객체.속성 의 형태로 객체의 속성을 동적으로 제거할 수 있다.

4. 메소드 간단 선언 구문

  const student1={
        이름: '홍길동',
        성별: '남자',
        나이: 20,
        직업: '의적',
        분신술 (num){
            num*=2
            console.log(num+'명의 '+this.이름+'이 있다!')
        }
    }

ㄴ 이전과 비교하여 : 와 function 키워드 없이 메소드를 간단하게 선언할 수 있다.

     단 this 키워드의 의미가 달라지므로 화살표 함수를 메소드로 사용하지 않은 것이 좋다.