Javascript : 객체와 배열

kimsnmyng·2024년 12월 1일

Vanilla Javascript

목록 보기
9/23
// 객체
// 원시 타입이 아닌 객체 타입의 자료형
// 여러 값을 동시에 저장할 수 있는 자료형을 의미
// 객체를 이용하면 현실세계에 존재하는 어떤 사물이나 개념을 표현하기 용이함

// 1. 객체 생성

let obj1 = new Object(); // 객체 생성자
let obj2 = {}; // 객체 리터럴 (대부분 사용)


// 2. 객체 프로퍼티(객체 속성) 자료형, 수 제한 없음.
// 키 값으로는 문자열과 숫자열만 가능하다.
// 키 값에 띄어쓰기를 하고 싶으면 " "로 감싸주어야 한다.
let person = {
  name:"김선명",
  nickname: "등신",
  hobby: "잠자기",
}

// 3. 객체 프로퍼티를 다루는 방법
// 3.1 특정 프로퍼티에 접근하는 방법 (점 표기법, 괄호 표기법)

let name = person.name;
console.log(name); // 김선명, 선이 생기는 이유는 타입스크립트와 관련된 경고사항

let name1 = person2.name; // undefined

let nickname = person["nickname"]; // 괄호로 접근할 떄는 반드시 쌍따옴표로 감싸야한다. 안 그러면 변수로 인식해서 오류 뱉어냄
let nickname2 = person["nickname2"] // undefined

let property = "hobby";
let hobby = person[property]

// 동적으로 값을 참조해야한다면 [], 그게 아니라면 점 표기법.

// 3.2 새로운 프로퍼티를 추가하는 방법
person.job = "백수";
person["favoriteFood"] = "할머니가 해주신 음식";

// 3.3 프로퍼티를 수정하는 방법
person.job = "카이도우 (백수의 왕)";

// 3.4 프로퍼티를 삭제하는 방법
delete person.name;
delete person["nickname"];

// 3.5 프로퍼티의 존재 유무를 확인하는 방법 (in 연산자)
let result1 = "name" in person; // 불리언으로 결과 출력 됨

-- 객체 심화 --

// 4. 상수(const) 객체

const animal = {
  type: "고양이",
  name: "나비",
  color: "black"
};

animal.age = 2; // 추가
animal.name = "호랑이" // 수정
delete animal.color // 삭제

// 상수로 저장되어 있는 객체의 프로퍼티를 수정하는건 아무런 문제 X

// 5. 메서드
// 값이 함수인 프로퍼티를 말함

const person = {
  name: "김선명",
  // 메서드 선언
  sayHi: () => {
    console.log('안녕')
  }
}

person.sayHi();
person["sayHi"];
// 함수 프로퍼티는 메서드로서 객체의 동작을 정의한다.


---
  
  // 배열
// 여러개의 값을 순차적으로 담을 수 있는 자료 형

// 1. 배열 생성

let arrA = new Array() // 배열 생성자
let arrB = []; // 배열 리터럴

let arrC = [1, 2, 3]; // 어떠한 타입의 값이라도 저장할 수 있음. 길이의 한계도 없음
console.log(arrC); // 1, 2, 3

// 2. 배열 요소 접근
let item1 = arrC[0];
let item2 = arrC[1];

console.log(item1) // 1;
console.log(item2) // 2;

arrC[0] = "hello";
console.log(arrC); // hello
profile
안녕하세요 김선명입니다.

0개의 댓글