[TIL] 2021.03.10_ 객체

나라리야·2021년 3월 10일

TIL koplit 객체 객체(문제)객체속성 배열 자바스크립트 자바스크립트공부 코드스테이츠 코플릿

TIL-JS

목록 보기

3/4

시간이 정말 빠르다
코플릿 문제도 그동안 생각해보니 많이 푼것같고
요즘 구글하고 만나는시간이 제일 길어진 것같다.
오늘 아침엔 정말 일어나기 힘들었는데 그래도 객체 코플릿문제를 페어와 풀면서
아주 조금 자바스크립트라는 녀석과도 가까워진 것 같다.
(나만 그런거져?) 아직도 질문쟁이이고 개념이 확실하게 잡히지 않은게 느껴져서 더더욱 TIL을 성실히 작성하기로 했다!

배운게 더 많은데 왜 적질 못하니...

객체(Object)

객체란 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입이다.

let user = {}; // 기본구조 

Key : '이름', '나이'
Value : 'Surim son', 22  //객체안에 넣을 데이터 키(이름)와 값 

let user = {
  name: "Surim Son",
  age: 22
};                       // 데이터 값이 들어간 객체의 모습

객체의 특징

객체는 변수이지만 많은 값을 포함할 수 있다.
중괄호 표기 {} 를 이요해서 만든다
객체는 각각의 key/value에 대한 정보를 나열할 수있다.
key는 문자열 또는 기호로 한다.
value는 모든 유형이 될 수 있다.
키/값뒤에 쉼표를 이용하여 그뒤에오는 키/값을 구분해주어야한다.
객체에서 명명된 값을 property라고한다.
객체 변수를 복사하면 참조(주소)가 복사되고 객체가 복사되지 않는다.

객채의 종류

원시 값을 제외한 모든 값은 객체이다.
배열,함수,객체,날짜...등등..

원시 값 : number,string,boolean,null,undefined...

프로퍼티 (property)

객체의 속성을 나타내는 접근 가능한 이름과 활용 가능한 값을 가지는 특별한 형태

key : 빈 문자열을 포함한 모든 문자열 또는 symbol 값
value : 모든 값

1. 객체 속성읽기

객체 속성 값을 읽는 방법은 점 표기법(dot notation)과 대괄호 표기법(square bracket notation) 2가지가 있다.

점 표기법(dot notation)
객체의 속성에 접근해서 값을 읽기 위해서 각 속성 사이에 '.'을 입력

ex) obj.property

대괄호 표기법(square bracket notation)
접근하려고 하는 객체의 속성명을 괄호('[]')로 감싸서 표현 할 수도 있다.
이때, 괄호 안에 들어가는 값은 작은 따옴표('') 또는 큰 따옴표("")로 감싸주어야 한다.
이러한, 대괄호 표기법을 사용했을 때 좋은 점은
속성명이 'product type'과 같이 중간에 공백이 있는 경우에 해당 값에 접근 할수 있다는 것이다.

obj.product.product type; // error 발생
위에서 소개한 점 표기법(dot notation)을 사용해서
'product type'과 같이 중간에 공백이 있는 값에 접근하면 에러가 발생합니다.

2. 객체 속성추가, 변경하기


const obj = {
  id : 123,
  product : {
    'product type': 'book',
    title: 'JS Start',
    page: 200
  }
};

// 속성 추가
obj.stock = 100;
document.write(obj.stock + '<br>');

// 속성 값 변경
obj.id = 456;
document.write(obj.id);


const obj = {
  id : 123,
  product : {
    'product type': 'book',
    title: 'JS Start',
    page: 200
  }
};

// 속성 추가
obj['stock'] = 100;
document.write(obj.stock + '<br>');

// 속성 값 변경
obj['id'] = 456;
document.write(obj.id);

3. 객체 속성 삭제하기

const obj = {
  id : 123,
  product : {
    'product type': 'book',
    title: 'JS Start',
    page: 200
  }
};

// 속성 삭제
delete obj.id;
delete obj.product['product type'];