1e8e3504e2913909dd7b60f66118be77.jpg

[javascript] : 객체 (object)

  • 객체는 키(key)-값(value) 쌍으로된 데이터의 모음이고 순서가 뒤바껴도 아무 상관이 없. 배열처럼 순서대로 index로 접근하는게 아니라 key로 접근하기 때문

    key === property name
    value === property value

1554825376045_2a280e2abfdc8cec2b3b9244788f8350.png

  • 키는 마치 변수같은 역할을 하는 데 해당 key로 프로퍼티에 어떤 값이 저장되었는지 알 수 있다. key 값에는 텍스트, 숫자 뿐만 아니라 함수, 객체도 넣을 수 있습니다.
    <example>
    let difficult = {
    'my name': 'boong',
    //객체의 키에는 스페이스도 가능
    color: 'silver',
    // 키에 특수 문자가 없으면 따옴표 없이도 사용 가능 
    키: '한글인 키는 따옴표가 없어도 되는군!!',
    '!키': '느낌표 있는 키는 따옴표가 필요하군',
    $special: '$는 없어도 되는군'
    };
  • 객체에서 dot(.)으로 접근하는 것이 제일 편하고 따옴표 없이 키를 바로 써줘야 함.
    dot(.)으로 접근한다는 뜻은 실제 키이름을 쓸 때이고 변수로 담아주려면 다른 방식을 써야하고 혹시 그것이 대괄호...?
    let name = '키';
    console.log(difficult.name); 
    :undefined
    //name이라는 key값이 있었다면 그에 해당되는 프로퍼티에 접근할 수 있지만 존재하지 않아 undefined가 나오게 되고 변수로 접근할 때는 항상 대괄호로 접근해야함
    -> console.log(difficult[name]); 
    <example 1>
    //대괄호 안에 따옴표로 감싸주어야함.
    console.log(difficult['color']); 
    <example 2>
    //스페이스가 포함된 키는 대괄호로 접근
    console.log(difficult['my name']);
    <example 3>
    //숫자로 된 키는 대괄호로 접근!
    console.log(difficult['33']);
  • 객체에 이미 키가 존재하는데, 다시 한 번 할당하면 값이 교체(수정)됨.
    그리고 이전에 없던 키로 접근하면 새로운 프로퍼티가 추가되는 데,
    만약 이전에 없던 키에 값이 없다면 undefined가 나옴.
    console.log(difficult.newProperty);
    : undefined
    //아직 difficult 라는 객체에 newProperty 프로퍼티가 없어서.
    -> difficult.realNewProperty = '추가 됐다';
    //이렇게 값을 넣어주면 생김
  • 하기 참고
    스크린샷 2019-10-12 오후 4.59.16.png
  • const로 선언된 변수에 객체를 다시 할당하면 오류가 생기지만 그 객체에 프로퍼티를 추가하거나 수정하는 것은 가능
    const mutableObj = {
    name: '객체'
    };
    mutableObj = {
    name: '수정'
    }
  • 변수 mutableObj 자체에 객체를 재 할당하는 것은 불가능.
    그런데 프로퍼티에 접근해서 내용을 수정하거나, 프로퍼티를 추가하는 것은 가능.
    mutableObj.name = '수정';
    mutableObj.type = 'Object 타입';

    메소드(method)

    메소드는 객체가 가지고 있는 동작
    객체에 저장된 값이 함수일 때, 메서드라고 부른다
    console.log();
    //자바스크립트 어디에나 접근이 가능했으니 global 객체
    console도 객체이고 console다음에 dot('.')으로 프로퍼티를 접근했고,
    log라는 키의 값이 함수
//객체에 메서드를 정의방법
let methodObj = {
  do: function() {
    console.log('메서드 정의는 이렇게');
  }
}

methodObj.do();
//호출방법

Nested Object

실무에서 사용되는 객체는 거의 중첩.
프로퍼티 값이 객체일 수도 있고,프로퍼티 값인 배열의 요소가 객체일 수도 있다.

let nestedObj = {
  type: {
    year: '2019',
    'comment-type': [{
      name: 'simple'
    }]
  }}
console.log(nestedObje.type['comment-type'][0].name);
//simple 출력하기!
:nestedObje.type는 year, comment-type이 있는 객체
nestedObje.type['comment-type']는 요소 1개(객체)인 배열
nestedObje.type['comment-type'][0] 인덱스 첫 번째인 객체를 가져옴
nestedObje.type['comment-type'][0].name 드디어 'simple'


:: 광복절 전날,
믿기지 않.... 아니 시간이 왜이렇게 빨리 흐르죠..?
wecode와서 하는 건 밥먹고 코딩하고 밥먹고 코딩하고 밥먹... ㅋ...ㄷ...ㅣㅇ...(???)

초반에는 너무 부담스럽고 예상치 못한 공부강도에 휩쓸려서 많이 당황했는 데..
역시 사람은 적응의 동물이네요. 함께 휩쓸려갑니다.