객체 (Object)

wldls·2022년 11월 5일
0

javascript

목록 보기
11/33

객체(object)란 무엇일까요?

객체(object)는 자바스크립트 데이터 타입 중의 하나이다
객체의 데이터는 프로퍼티 라고 한다
그리고 프로퍼티 안에는 key값과 value값을 쌍으로 이루어져 있고 원시값을 제외한 함수, 배열, 정규표현식 등은 모두 객체이다

객체 타입은 값이 변경 불가능한 원시 타입과 달리 변경 가능한 값이다

👉 배열과의 차이점
배열과는 다르게 순서가 중요하지 않다.
( 자바스크립트 내부적으로 프로퍼티의 순서까지 같이 저장되지 않아서 개발자가 넣은 순서대로 출력 되는것은 아님. 배열과 다르게 인덱스 몇번째 인 표현은 사용 할 수 없다 )
또 배열과 다른점은 프로퍼티 value에 더 자세한 설명을 담을 수 있다는 점이다

객체의 데이터에 접근할때 인덱스 번호가 아닌 key값으로
다음과 같은 두가지 방법으로 접근한다

  1. Dot Notation( 점 . )
  2. Bracket Notation ( 괄호 [ ] )

함수도 객체의 프로퍼티 값으로 사용할수 있다 이것을 메서드 라고 한다

객체 선언

const 객체명 = {
  property이름1: property1값,
  property이름2: property2값
}

객체는 { } 중괄호로 감싸져 있다
{ } 으로 직접 객체를 생성하는 방식을 객체 리터럴 이라고 한다
property 이름과 property 값 사이에 :(콜론)으로 구분
key값이 여러개일 때는 쉼표(,)로 구분해준다
key는 특정 값을 갖고 있는 변수와 같은 역할을 한다

객체 속성 접근(Dot notation)

점표기법(Dot notation) : 읽기 쉽고 더 자주 사용 됨

mySelf.name;

객체에서 .(dot)을 찍고 원하는 key값을 입력하면 그 의 value 값을 얻을 수 있다
key값에 '' 따옴표를 붙이지 않는다

객체 속성 접근(Bracket Notation)

괄호표기법(Bracket Notation)

mySelf['name'];

객체에서 대괄호 안에 원하는 key값을 넣으면 그 의 value 값을 얻을 수 있다
[ ] 안에 key값에 '' 따옴표로 감싸준다

점표 기법이 더 쉽게 사용 할 수 있지만 [ ] 괄호 안에 변수를 넣어 접근하는 방식은 괄호표기법만이 접근 할수 있다

let mySelf = {
  name: '라라',
  age: 30,
  gender: '여자',
  hobby: '운동하기',
  job: '개발자',
}

let mySelf = {
  name: '라라',
  age: 30,
  gender: '여자',
  hobby: '운동하기',
  job: '개발자',
}
console.log (mySelf["age"]); // 30

const myAge = 'age';
console.log(mySelf[myAge]); // 30

mySelf 객체의 age : value 값을 알고 싶을때
[ ]안에 "age"인 key를 넣어 value 값을 구할 수도 있고

string 그 자체인 "age"를 변수에 담아 접근해 구할 수 있다

Dot Notation에 접근 할때는 변수를 사용 할 수 없다
Dot Notation에서는 변수라고 생각하지 않고
객체 안에 있는 key값이라고 생각한다 만약 존재 하지 않는
key값이 찾으면 undefinded를 출력한다

객체 수정

function myObject() {
  const myFriend = {
    "name": "hans",
    "eyes": 2,
    "nose": 1,
    "lip" : 1,
    "legs" : 4
  };

  myFriend.name = "Hello Hans!";
/*   myFriend["name"] = "cute Hans!" */ // 괄호 표기법 수정

  return myFriend.name;
/* 	return myFriend["name"]; */ // 괄호 표기법 리턴
}
console.log(myObject())

const(상수)로 선언시 수정이 불가능 한데..? 🤨

const의 변수 값이 수정 가능하기에 의문을 가졌었는데
여기서 수정은 object를 수정하는게 아니라 object 안의 무언가를 수정하는 것이다
object는 여전한 것 즉 객체는 참조형 데이터 이기 때문이다
프로퍼티에 접근하여 수정하거나 추가하는 것은 에러발생 하지 않는다

에러는 const 전체를 하나의 값으로 업데이트 할 때 에러가 발생 되는 것이다

myFriend = false; // TypeError : Assignment to constant variable. at updateObject

복잡한 객체값 접근하기

배열 안의 '2021' 만 출력하시오

 let object = {
  address: { 
    home: "서울특별시 강남구",
    email: "kimcode@naver.com",
  },
  books: {
    year: [2019, 2020, 2021],
  }
};

console.log(object.books.year[2]) //2021
profile
다양한 변화와 도전하는 자세로

0개의 댓글