Search

7장 객체

대분류
언어
서적
소분류
JS DeepDive
주요 레퍼런스
https://velog.io/@hustle-dev/%EB%AA%A8%EB%8D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Deep-Dive-1012%EC%9E%A5
태그
프로퍼티
메서드
객체리터럴
인스턴스
최종 편집 일시
2024/10/27 15:41
생성 일시
2024/01/25 05:57
13 more properties

객체(인스턴스)

다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조
원시타입은 수동적인 , 객체는 능동적인
객체는 0개 이상의 프로퍼티(property)로 구성된 집합
JS 함수는 일급 객체로 값으로 취급

프로퍼티 & 메서드

var count = { num: 0, // 프로퍼티 increase: function() { // 메서드 this.num++; } };
Plain Text
복사
num:0 : num은 프로퍼티 키, 0은 프로퍼티 값이다.
increase : 객체안에 있는 함수

객체 리터럴에 의한 객체 생성

JS 객체 생성방법

객체 리터럴
사람이 이해할 수 있는 문자 또는 약속된 기호를 사용하여 객체 값을 생성하기 위한 표기법
Object 생성자 함수
생성자 함수
Object.create 메서드
클래스(ES6)

프로퍼티

객체의 상태를 나타내는 값(data)
객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성
구조
프로퍼티 키: 빈 문자열을 포함하는 모든 문자열 또는 심벌 값(식별자 네이밍 규칙을 따르지 않는 프로퍼티 키는 따옴표로 묶어서 사용)
프로퍼티 값: 자바스크립트에서 사용할 수 있는 모든 값
특이사항
빈 문자열을 프로퍼티 키로 사용할 수 있지만 키로서 의미X --> 사용 권장 X
예약어 또한 프로퍼티 키로 가능하지만 예기치않은 에러가 발생할 수 있으므로 권장 X
문자열이나 심볼 값 이외의 값은 문자열로 암묵적 타입변환 (숫자 리터럴 -> 따옴표는 안 붙는데 내부적으로 문자열로 변환)
프로퍼티 중복 선언시 나중 선언한 프로퍼티가 덮어씀

프로퍼티 접근법

마침표 프로퍼티 접근 연산자를 사용하는 마침표 표기법(person.name)
대괄호 프로퍼티 접근 연산자를 사용하는 대괄호 표기법(person['name'])

프로퍼티 값 갱신

기존에 객체 안의 프로퍼티에 새로운 프로퍼티 값을 할당하면 새롭게 갱신 가능

프로퍼티 동적 생성 & 삭제

기존 객체에 없는 프로퍼티라도 새로 객체에 프로퍼티를 할당해주면 동적으로 생성되고 값이 할당됨.
delete 연산자를 사용하여 객체의 프로퍼티를 삭제
존재하지 않는 프로퍼티를 삭제하면 아무런 에러 없이 무시
var coins = { coin1 : 'Bitcoin', }; // coins 객체는 coin2객체가 존재하지 않음 // 따라서 coins객체에 coin2 프로퍼티가 동적으로 생성되고 값이 할당된다. coins.coin2 = 'Ethereum'; console.log(coins); // {coin1: 'Bitcoin', coin2: 'Ethereum'} delete coins.coin2; // coin2 프로퍼티 키 삭제 delete coins.coin4; // 에러가 발생X console.log(coins) // {coin1: "Bitcoin"}
JavaScript
복사

프로퍼티 축약 표현

변수 이름과 프로퍼티키가 동일한 이름일 때 프로퍼티키 생략 가능
let x = 1, y = 2; const obj = { x, y }; console.log(obj); // { x: 1, y: 2}
JavaScript
복사

계산된 프로퍼티 이름

프로퍼티 키를 동적으로 생성하는 것
var prefix = 'prop'; var i = 0; var obj = {[`${prefix}-${++i}`]: i}; // 객체 리터럴 obj[prefix + '-' + ++i] = i; console.log(obj); // {prop-1: 1}
JavaScript
복사

메서드

프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior)
객체에 묶여 있는 함수.
프로퍼티 값이 함수인 것(일반 함수와 구분하기 위해 메서드라는 이름을 가짐)

메서드 축약 표현

// es5 var obj = { sayHi: function() { console.log('Hi '); } } // es6 var obj = { sayHi() { console.log('Hi '); }
JavaScript
복사