객체란 무엇인가

우리가 간단한 주소록을 만든다고 가정해본다. 성과 이름, email주소, 전화번호와 거주지 등을 저장하기 위해서는 이론적으로 각각 변수가 필요하다.

let firstName = Do ;
let lastName = HS ;
let email = (개인정보라 비밀로 할게요..있다고 생각해주세요;) ;
let tel = (이것도 비밀로 할게요...;) ;
let city = suwon;

그러나 이렇게 변수를 하나씩 선언해 주는 것은 비효율적이다. 많은 데이터를 하나의 변수에 할당하는 방법으로는 우선 배열이 있다. 이 배열을 사용해서 다시 정리해보면

let people = ['Do', 'HS', '이메일임...암튼그럼', '전화번호임..', 'suwon'];

그러나 배열을 사용한다면 정보를 조회할 때 어떤 정보인지 알 수 없는 문제가 발생한다.

people[0] ; // 'Do' 그러나 people[0]이 무슨 정보인지?

심지어 이 경우, 배열의 index가 무엇을 의미하는지를 미리 알고 있어야 한다.

이와 같은 경우에 객체를 선언해 할당하면 유용하다. 객체는 0개 이상의 프로퍼티(property)로 구성된 집합이며, 각각의 프로퍼티는 키(key)와 값(value)로 구성되어 있다.

let people = {
	firstName:'Do',
    lastName: 'HS',
    email: '이메일임...암튼그럼',
    telL: '전화번호임..',
    city :'suwon'
    }

키와 값 사이는 콜론(:)으로 구분한다. 객체는 중괄호로 시작하고 각 프로퍼티는 콤마(,) 를 사용해 구분한다. 프로퍼티의 키에는 모든 문자열과 심볼 값, 값(value)으로는 자바스크립트의 모든 데이터 타입이 들어갈 수 있다. 그렇기 때문에 함수 역시 값으로 들어갈 수 있는데, 프로퍼티의 값이 함수일 경우 이를 메서드라고 부른다.

프로퍼티의 키

프로퍼티의 키는 값에 접근할 수 있게 해주는 식별자 역할을 한다. 때문에 식별자 네이밍 규칙을 따라야 하나 싶지만 반드시 그럴 필요는 없다. 다만, 규칙을 따랐을 때와 따르지 않았을 때의 작은 차이는 존재한다. 프로퍼티 키는 문자열이므로 '' 혹은 "" 로 묶어야 한다. 하지만 네이밍 규칙을 따르는 이름일 경우 이를 생략할 수 있고, 규칙을 따르지 않을 경우 반드시 따옴표로 묶어줘야 한다.

let people = {
	firstName:'Do',
    'last-Name': 'HS',
    email: '이메일임...암튼그럼',
    telL: '전화번호임..',
    city :'suwon'
    }

키에 문자열 or 심볼 이외의 다른 값을 사용하면 암묵적인 타입 변환을 통해 문자열이 된다.

let people = {
	0:'Do',
    1: 'HS',
    2: '이메일임...암튼그럼',
    3: '전화번호임..',
    4:'suwon'
    }  // 숫자를 사용하면 따옴표로 묶어지진 않지만 내부적으로 문자열로 변환된다
    

또한 같은 프로퍼티 키를 다시 선언한다면 나중에 선언한 키가 먼저 선언한 키를 덮어버린다. 이때, 에러가 표시되지 않으므로 주의한다.

let people = {
	name:'Do',
    name: 'HS',
    } ;
console.log(people['name']) //  'HS'

프로퍼티의 값에 접근하는 방법

크게 두가지로 나뉜다.

• 마침표 표기법 (dot notation)
• 대괄호 표기법 (bracket notation)

키가 네이밍 규칙을 따르고 있다면 두 방법 모두 사용할 수 있다. 두 방법 모두 좌측에는 객체로 평가되는 표현식을 써준다. 마침표 표기법의 우측과 대괄호 표기법의 대괄호 내부에는 프로퍼티 키를 쓴다.

console.log(people.name) ;//
console.log(people['name']) ; //

이 때, 대괄호 표기법의 경우 대괄호 안에 키를 쓸 때 반드시 따옴표를 사용해야 함을 기억한다. 따옴표를 사용하지 않을 경우 이는 식별자로 해석된다.

console.log(people[name]) ; // name을 식별자로 인식하기 때문에 변수 name의 값을 찾음. 하지만 name은 선언되지 않았기 때문에 에러가 발생

또한 존재하지 않는 프로퍼티에 접근하면 undefined를 반환한다. 에러가 발생하지 않음에 주의한다.

console.log(people['hi']) // undefined 반환한다.

프로퍼티 갱신

people.name = 'kim' ; 
console.log (people.name) ; // 'kim'

이미 존재하는 프로퍼티에 값을 할당하면 갱신할 수 있다.

프로퍼티 동적 생성

객체에 없는 프로퍼티에 값을 할당하면 프로퍼티가 추가되고 값이 할당된다.

let test = {}
test.say = 'hi' ;
console.log(test); // {say : 'hi'}

프로퍼티의 삭제

delete 연산자를 사용해 프로퍼티를 삭제할 수 있다. 이 때, 존재하지 않는 프로퍼티를 피연산자로 넣는다면 무시된다.

let test = {
	test1 : 123,
    test2 : 456,
    };
delete test1;
console.log(test); // {test1: 123}