자바스크립트의 객체

2024. 5. 15. 10:24·웹개발/JavaScript
728x90

객체란?

숫자형이나 문자형과 같은 원시 자료형과 달리 다양한 값을 담는 자료형입니다.


객체 생성

자바스크립트에서 객체 생성은 2가지 방법이 있습니다.

let objA = {}; ① // '객체 리터럴' 문법
let objB = new Object(); // '객체 생성자' 문법

1) dbjA에 리터럴(고정된 값) 문법을 사용한다. { } 를 사용하여 객체를 선언한다.

let person = {
  name: "이정환", ①
  age: 25 ②
}

key(name, age)와 value(이정환, 25) 값으로 이루어진 property(캡슐화 된 객체)를 작성하면 된다.

let person = {
  name: "이정환",
  age: 25,
  age: 30 // 알아두세요 key가 중복되면 가장 마지막 프로퍼티만 남게 됩니다.
};

property에서 key는 반드시 문자형만 사용합니다. 그리고 key는 중복해도 오류가 발생하지 않지만, 마지막에 작성한 key값만 남습니다.

2) 두번째 let objB = new Object(); // '객체 생성자' 문법은 객체를 할당하고, 밑에서 재정의 하는 방법입니다.


객체 property 다루기

1) 접근 방법

접근 방법에는 2가지가 있습니다.

let person = {
  name: "이정환",
  age: 25,
  "like cat": true
};

const personName = person.name; // ① 점 표기법 
const personAge = person["age"]; // ② 괄호 표기법 

console.log(personName); // "이정환"
console.log(personAge); // 25

1)) 객체 뒤에 .을 찍고 접근하는 것입니다. 이를 '점 표기법'이라고 합니다. person.name => person객체에 들어가서 선택.

2)) 객체 뒤에 대괄호[ ]를 열고 그 안에 원하는 key값을 문자열로 명시하여 불러온다. 이를 '괄호 표기법'이라고 합니다.

728x90

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

자바스크립트에서 Truthy와 Falsy 이해하기  (0) 2024.05.20
flag변수가 뭐에요? 깃발..?  (0) 2024.05.15
자바스크립트와 스코프  (0) 2024.05.15
자바스크립트 함수  (0) 2024.05.13
자바스크립트에서 반복문 사용방법  (0) 2024.05.13
'웹개발/JavaScript' 카테고리의 다른 글
  • 자바스크립트에서 Truthy와 Falsy 이해하기
  • flag변수가 뭐에요? 깃발..?
  • 자바스크립트와 스코프
  • 자바스크립트 함수
튼튼발자
튼튼발자
프론트엔드 개발자입니다. 헬스를 가끔해서인지 몸이 튼튼한거 같습니다. 그래서 튼튼한 개발자 => 튼튼발자입니다. 프론트엔드 및 관련 개발 내용 블로그 글로 정리해서 올려둡니다.
    250x250
  • 튼튼발자
    튼튼발자
    튼튼발자
  • 전체
    오늘
    어제
    • 분류 전체보기 (192)
      • 튼튼발자의 끄적끄적 (10)
      • 웹개발 (94)
        • HTML (5)
        • CSS (2)
        • JavaScript (40)
        • TypeScript (5)
        • REACT (22)
        • Next.js (13)
        • GIt (7)
      • 기타 (3)
        • 일상 (3)
      • 프로젝트 (27)
        • Componique: UI 컴포넌트 라이브러리 (18)
        • GitHub Profile Viewer (8)
        • 잇핏 (1)
      • 프론트엔드 개발자로 취업준비 (1)
        • 기술 면접 (7)
        • 코딩 테스트 준비하기 (0)
        • 자기소개서&지원서&이력서 (0)
      • 컴퓨터과학 (12)
        • 운영체제 (6)
        • 알고리즘 (6)
      • 전공 공부 (37)
        • AI(인공지능) (2)
        • 컴퓨터네트워크 (19)
        • 네트워크프로그래밍 (3)
        • SW소프트웨어응용설계 (7)
        • 클라우드컴퓨팅 (3)
        • 웹서비스프로그래밍 (3)
      • PT (0)
      • 취준일기 (0)
  • 블로그 메뉴

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

  • 공지사항

  • 인기 글

  • 태그

    JavaScript
    프론트엔드개발
    프로그래밍
    네트워크
    상태관리
    tailwind
    github
    TCP
    코딩
    자바스크립트
    NextJs
    ui컴포넌트
    프론트엔드
    트랜스포트계층
    react
    데이터전송
    componique
    리액트
    JS
    웹개발
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
튼튼발자
자바스크립트의 객체
상단으로

티스토리툴바