JS_6. 객체

객체의 특징과 배열과의 차이점

객체는 기본 타입 이외의 모든 값으로 배열, 함수, 정규표현식 모두 객체의 일부로 볼 수 있다. 이러한 객체를 '참조 타입'이라고 부르는데, 그 이유는 값을 직접 가지지 않고 값이 보관된 주소만을 '참조'하기 때문이다.

객체는 '이름(key): 값(value)' 형태의 프로퍼티들을 저장하는 컨테이너로 볼 수 있으며 컴퓨터 과학의 해시(Hash) 구조와 유사하다. 이러한 객체 내부에 포함된 함수를 메소드라고 부른다.

배열은 사실 객체의 특별한 형태이다. 배열에서의 key는 바로 value가 위치한 인덱스 숫자이다. 따라서 우리는 각 요소의 값만 표기해도 숨겨진 key를 통해서 값을 찾을 수 있다. 이러한 배열의 특성을 담은 형태가 바로 Array 객체이며 slice()등의 기능이 바로 Array 객체의 메소드이다.

속성의 조회

객체의 속성(property)를 조회하는 방법은 크게 dot notation과 bracket notaion으로 나눌 수 있다.

let user = {
name: "lee",
age: 30
};

alert( user.name ); // "lee"
alert( user["name"] ); // "lee"
alert( user[name] ); // undefined

위 예시의 user.name과 같은 방식이 바로 dot notation으로 name이 가리키는 value인 "lee"에 쉽게 접근할 수 있다. 두 번째 방법은 bracket notation으로 첫 번째와 동일한 결과를 출력하는 것을 볼 수 있다. 마지막 방법은 name이라는 변수에 접근할 때 사용하는 방식으로 현재는 아무 값도 반환하지 않는다. 만약 아래와 같이 name1이라는 이름의 변수가 설정되면 사용이 가능해진다.

let name1 = "name"

alert( user[name1] ); // "lee"

속성의 추가, 변경 및 삭제

객체의 내용을 추가하기 위해선 요소 접근과 같은 방법을 사용한다.

let user = {
name: "lee",
age: 30
};

user.city = "seoul"

console.log( user ); // {name: "lee", age: 30, city: "seoul"}

위와 비슷하게 이미 할당된 내용을 수정할 수 있다.

user.city = "busan";

console.log( user ); // {name: "lee", age: 30, city: "busan"}

delete를 사용하면 다음과 같이 속성을 제거할 수 있다.

delete user.city;

console.log( user ); // {name: "lee", age: 30}

console.log(delete user.age); // true

delete의 경우 그 자체를 출력하면 성공적으로 삭제되었는지 여부가 반환된다. 주의할 점은 delete는 객체 자체가 아닌 속성(property)만을 제거한다는 사실이다.

const와 객체의 수정

뒤에서 다루게 될 const로 선언된 변수는 재할당이 불가능하다고 알려져 있다. 그러나 객체 속성(property)의 내용(value)을 수정하는 것은 재할당에 해당하지 않으며 수정이 가능하다.

const user = {
  name: "lee"
};

user.name = "js"; // 에러가 발생하지 않는다

alert( user.name ); // "js"

참고
인사이드 자바스크립트
모던 JavaScript 튜토리얼