[JavaScript] (혼공자_33강) 객체 기본

배열은 요소 (element) 

const array = [100, 20, '문자열', true, function ( ) { } , => { } ]

console.log(array[0]) //  출력 100

array[0] = 200  // 0 번째 배열의 값을 200으로 변경

console.log(array[0]) // 출력 200

로 찍게 되면 값이 변화 선언된 0 번째 배열의 값이 변화한것을 알 수 있다.

 

 

객체는 속성 (property)

const object = {

    키: 값,

    키: 값, 

    키: 값,

}

 

키는 식별자로 사용을 하며 

1. 숫자로 시작하지 않는다.

2. 기호는 $와 _만 포함한다.

 

const hero = {
    name: '토도로키',
    age: 16 
}

 

배열도 [] 객체도 [] 둘 다 대괄호로 접근한다.

// object['name'] 보다 object.name 으로 접근 한다. 

 

console.log(object.name)  // 출력 토도로키
console.log(object.age) // 출력 16

object.name = '바쿠고' // 객체 내부의 값을 변경
object.age = 17  // 객체 내부의 값을 변경

console.log(object.name)  // 출력 바쿠고
console.log(object.age) // 출력 17

 

 

hero 객체의 name 속성 , age 속성이라고 표현 한다.

 

자바 스크립트의 메소드 (method)

const hero = {
    name: '바쿠고',
    age: 17 ,
    skill: function ( ) {
    console.log(`${hero.name}이/가 스킬을 사용했습니다.`)
    },
    rest: ( ) => {
    console.log(`${hero.name}이/가 휴식을 취합니다.`)
    }
}

다른 프로그래밍 언어는 속성과 메소드가 확실히 구분 되지만

자바 스크립트 에서는 메소드라는 것이 속성의 일종이다.

 

* 자바 스크립트는 메소드도 속성의 일종에 포함된다. *

 

▶ skill: function ( ) { }  익명함수 

hero.skill( ) 

// 출력 바쿠고 이/가 스킬을 사용했습니다. 

함수에 console.log가 정의 되었기 때문에 메소드가 호출 되기만 해도 출력이 된다.

 

▶ rest: ( ) => { }  화살표 함수

hero.rest( )

// 출력 바쿠고 이/가 휴식을 취합니다.

뒤에 function을 붙이지 않는다. (이거 땜에 계속 오류 났었음)

 

익명 함수와 화살표 함수의 차이 .this 

 

 

익명 함수는 자기 자신 객체를 나타내지만 

화살표 함수는 윈도우 객체를 나타내게 된다. 

 

▶ this 바인딩 : this 를 현재 객체와 연결하는 행위

익명 함수: this 바인딩을 한다.

화살표 함수: this 바인딩을 안 한다.

 

객체를 만들고 내부에서  this를 활용 할때에는 화살표 함수는 사용하지 않고 익명 함수만 사용한다.

 

▶ 객체 자기 자신을 나타낼때 this.을 생략하면 안된다.

다른 프로그래밍 언어에서는 이렇게 객체 내부의 메소드에서 this.를 생략해도 문제없이 값을 출력 하는데

자바 스크립트에서는 디스점을 붙이지 않으면 객체 내부의 속성이라 생각하지 않아서 무조건 this.을 붙여준다.