TIL 05 JavaScript 객체 기본

1.  객체의 기본

객체는 데이터와 함수의 집합이다. 데이터의 집합이라는 표현에서 배열과 비슷한 타입이지만 명확한 차이점이 존재한다.

배열은 기본적으로 데이터들이 순서대로 나열되어있는 타입이다. 하지만 객체의 데이터들은 순서가 존재하지 않는다.

객체는 프로퍼티의 키와 값들로 이루어져 있다

 

let object = {};   // 빈 객체
let person = {name:'Jeon', age: 25};

 

객체의 선언은 중괄호( { } )로 한다. 앞서말한 프로퍼티는 name: 'Jeon'으로 키와 값으로 쌍으로 이루어져있는 데이터이다.

객체는 고로 프로퍼티의 집합이다.

2.  객체의 프로퍼티

let person = {name: 'Kim', age: 20, area: 'Seoul', 'second-name': 'YoungMin'};

 

객체내에서 프로퍼티를 나열할때는 쉼표( , )로 구분한다. 프로퍼티의 쌍에서 앞에 있는것이 키(Key)다. 프로퍼티의 키는 프로퍼티의 값에 접근할 수 있는 식별자 역할을 하고 일반적으로 문자열을 사용한다. 자바스크립트에서 유요한 식별자인 경우에는 따옴표를 생략이 가능하고 식별자 규칙을 따르지 않는 경우에는 반드시 따옴표를 사용해야된다. 위 객체에서 'second-name'같은 경우 네이밍 규칙을 따르지 않기때문에 따옴표를 넣어준것을 볼 수 있다. 프로퍼티 값(Value)은 자바스크립내에서 사용할 수 있는 모든 값이 가능하다. 문자열 숫자 배열 객체 등등 모든 데이터타입이 들어 갈 수 있다.

3.  객체 프로퍼티의 접근 및 갱신

 

3.1  대괄호 표기법

let person = {name: 'Park', age: 25, area: 'Busan'};

console.log(person['name'])  // 'Park'
console.log(person['age'])  //  25
console.log(person[area])  // area is not defined

접근할객체['프로퍼티 키']로 접근한다. 대괄호 내부키는 기본적으로 문자열로 취급하기때문에 반드시 따옴표를 붙여서 접근해야한다.

 

3.2  점표기법

let person = {name: 'Jeon', age: 30, area: 'Seoul', 1: 'one'};

console.log(person.name)   // 'Jeon'
console.log(person.age)   // 30
console.log(person.1)   // Syntax Error

접근할객체.프로퍼티키 로 접근한다. 점표기법으로 접근할때 키의 조건이 있는데 공백이 있으면 접근이 불가, 숫자로 시작하면 접근이 안된다. 또한 키에 달러표시( $ ), 밑줄( _ )을 제외하고 특수문자가 들어가 있으면 안된다.

 

3.3  프로퍼티 값 갱신

let apple = {color: 'red', cost: 3000};

apple.color = 'green';
console.log(apple.color);   // 'green'

apple['cost'] = 5000;
console.log(apple['cost']);   // 5000

 

프로퍼티 값에 접근하는 방법으로 객체내의 값을 갱신할 수 있다.

 

4.  프로퍼티 삭제

delete연산자를 이용해서 객체내의 프로퍼티를 삭제할 수 있다.

let apple = {color: 'red', cost: 4000};

delete apple.cost;
console.log(apple)   //  {color: 'red'}