객체 리터럴 사용 시, 값이 undifined라고 뜬다면..

2020. 4. 22. 02:22·개발/Javascript
728x90

우선, 객체 리터럴 방식은 다음과 같이 쓸 수 있습니다.

let human = { 
  name: "kim",
  age: 20,
  call: "010-1111-1234",
  weight: "60kg"
}

 

그리고 객체 리터럴의 속성에 접근하기 위해 다음과 같이 작성할 수 있습니다.

console.log(human.name); // 점 표기법
console.log(human["name"]); // 각괄호 표기법

 

그런데 만약 객체 리터럴 값이 undifined가 떳다면, 다음과 같은 패턴으로 코드를 작성했을 가능성이 있습니다.

let food = {
  ramen: "ramen!",
  kimbab: "kimbab!",
  kimchi: "kimchi!"
}

let foodname = "remen";

console.log(food.foodname); // undifined

혹시, 변수명에다가 Key값을 저장해두고 점 표기법을 사용하지 않았는지 확인해 보세요.

점 표기법은 객체 내부에 있는 Key값 외에 다른 값으로는 속성에 접근할 수 없습니다.

 

하지만 다음과 같은 패턴으로 작성하고 싶다면 각괄호 표기법을  사용해 보세요.

let food = {
  ramen: "ramen!",
  kimbab: "kimbab!",
  kimchi: "kimchi!"
}

let foodname = "remen";

console.log(food.[foodname]); // "ramen!"

각괄호 표기법은 변수명을 사용해서 속성에 접근하는 것이 가능합니다.

 

저작자표시 (새창열림)

'개발 > Javascript' 카테고리의 다른 글

ES6 Class  (1) 2020.04.23
한 줄짜리 if 문, for 문 그리고 함수  (0) 2020.04.22
ES6 Set과 Destructuring 을 이용한 로또 번호 생성기  (0) 2020.04.11
ES6 Map과 WeakMap  (0) 2020.04.11
ES6 Set과 WeakSet  (0) 2020.04.10
'개발/Javascript' 카테고리의 다른 글
  • ES6 Class
  • 한 줄짜리 if 문, for 문 그리고 함수
  • ES6 Set과 Destructuring 을 이용한 로또 번호 생성기
  • ES6 Map과 WeakMap
기짜낭
기짜낭
생각이 많지만, 지금 내가 해야할 것을 하자.
  • 기짜낭
    So tired
    기짜낭
    • 분류 전체보기 (199)
      • 개발 (11)
        • Javascript (19)
        • Typescript (5)
        • Canvas (8)
        • React (13)
        • C (3)
      • 활동 (63)
        • 개인 프로젝트 (33)
        • 나눔 서포터즈 3기 (9)
        • 멋쟁이 사자처럼 (7)
        • 0&1 C++ 자료구조 스터디 (0)
        • 제 9회 창업 아이디어톤 (3)
        • Poom (ZeroWasteShop) (3)
        • 해커톤 (2)
        • 우테코 프리코스 7기 (6)
      • 알고리즘 (27)
        • 알고리즘 정리 (5)
        • 백준 (18)
        • 프로그래머스 (4)
      • 강연 (7)
      • 독서 (18)
      • 회고 & 생각 (16)
        • 연간회고 (4)
      • 기타 (5)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

    • ※ 예전 블로그
  • 인기 글

  • 태그

    TypeScript
    react
    군대
    독서
    독후감
    디자인
    에리카
    HTML5
    HTML
    1주 1권
    프론트엔드
    Erica
    대학
    프로그래밍
    개념
    1주에 1권씩
    프로젝트
    CSS
    Javascript
    알고리즘
    canvas
    타입스크립트
    ES6
    tutorial
    개발자
    3기
    우테코
    개발
    한양대학교
    백준
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
기짜낭
객체 리터럴 사용 시, 값이 undifined라고 뜬다면..
상단으로

티스토리툴바