자바스크립트[1] - Object

Thomas·2022년 4월 29일

모던자바스크립트

목록 보기

1/3

프론트엔드 개발자로 근무하면서 자바스크립트에 대한 지식을 업그레이드 하고자 동기분과 함께 스터디를 시작했습니다.

스터디 방식은 모던자바스크립트 Deep Dive 책 을 일주일에 한 파트에 대해서 공부하고 그에 대한 포스팅을 한 후, 월요일 점심시간에 각자 포스팅한 글을 읽어보고 토론을 하는 식으로 진행하기로 했습니다.

자바스크립트의 Object 로부터 시작하여 몇 번째 시리즈가 마지막이 될지는 모르지만 꾸준히 함께 성장하는 시간이 되었으면 합니다.

Object

Javascript 에서 Object 는 어떤 존재일까

자바스크립트에서는 원시값을 제외하면 모든 값은 Object, 즉 객체입니다. 즉 우리가 매일 사용하는 배열, 정규식, 심지어는 함수 까지도 객체로 여겨집니다.

그렇다면 원시 값과 객체는 어떤 차이가 있을까요?

원시값은 한번 생성된다면 변경이 불가능하다는 특징이 있습니다. 반대로 객체는 선언이 되어도 수정이 가능한 변경 가능한 값입니다.

변경 불가능한 원시값의 특징을 활용한다면 const 키워드를 활용하여 상수를 구현할 수 있습니다.
const CONSTANT = "CONSTANT";
위에 선언된 CONSTANT 값은 변경 불가능한 값입니다. 변경 불가능한 원시값의 특징과, const 키워드의 특징을 살려서 상수를 구현했습니다.
const obj = {
  name: "DH",
  age: 29,
};
obj.name = "KDH";
객체는 변경 가능한 값으로 선언 이후 객체 내부의 프로퍼티를 수정할 수 있습니다.

Object 의 생김새

Object 는 프로퍼티와 메서드로 구성됩니다. 물론 내부가 비어있는 객체도 구현 가능합니다.

Object를 생성하는 방법

자바스크립트에서 객체를 생성하는 방법은 다양합니다. 흔히 객체 리터럴을 활용해서 생성하지만, 기타 다른 방법도 있습니다.

객체 리터럴 활용 : { }
Object 생성자 함수
생성자 함수
Ojbect.create 메서드
클래스 문법 (ES6)

객체 리터럴

객체 리터럴을 활용하면 객체를 쉽게 생성할 수 있습니다. 객체 리터럴은 자바스크립트에서 표현식으로 여겨지기 때문에 반드시 선언 후 세미콜론을 붙여줘야 합니다.

const obj = {
  name: "DONG",
  addr: "Seoul",
};

프로퍼티

위에서 객체는 프로퍼티와 메서드로 구성된다고 하였습니다. 그렇다면 프로퍼티에 대해서 알아봅시다. 프로퍼티란 객체 내부에서 key 와 value 로 이루어진 객체의 상태를 나타내는 값 입니다.
프로퍼티의 key 는 string 값으로 선언됩니다. 자바스크립트의 네이밍 규칙을 준수하는 값을 key 로 사용한다면 따옴표를 붙이지 않아도 됩니다.
하지만 네이밍 규칙을 준수하지 않는다면 반드시 따옴표를 붙여서 string 값으로 만들어 주어야 오류가 발생하지 않습니다.

const obj = {
  name: "DH",
  first-name: "Kang", // 네이밍 규칙을 준수하지 않았기 때문에 오류 발생
};

const obj = {
  name: "DH",
  first_name: "Kang", // 네이밍 규칙을 준수했기에 정상적으로 동작
};

ES6 이후부터는 객체의 프로퍼티를 축약해서 사용할 수 있습니다. 프로퍼티의 값으로 이용하려는 변수의 식별자명과 프로퍼티의 이름이 동일하다면 아래와 같이 간단하게 축약하여 코딩할 수 있습니다.

const name = "DH";
const obj = {
  name,
  first_name: "KANG",
};

프로퍼티에 접근

보편적으로 프로퍼티에 접근하기 위해서는 마침표를 사용합니다. 예를 들자면

const obj = {
  name: "DH",
};

console.log(obj.name);

위와 같은 방식으로 접근합니다. 또한 대괄호 표기법을 활용하여 객체의 프로퍼티에 접근하는 방법도 있습니다.

console.log(obj["name"]);

위의 코드를 살펴보면 대괄호 표기법을 활용해 객체에 접근하였습니다. 주의해야 할 점은 대괄호 표기법을 활용해 프로퍼티에 접근한다면 반드시 프로퍼티의 key 값을 string 값으로 제공해야 한다는 점입니다.
즉, 따옴표를 활용해 값을 전달해야지 객체의 프로퍼티로 인식을 하고 정상적으로 동작할 수 있다는 것입니다.

만약 존재하지 않는 property 에 접근한다면 어떤 값이 결과로 나올까요?

const obj = {
  name: "DH",
  first_name: "Kang",
};
console.log(obj.last_name); //undefined

위 코드를 살펴보면 last_name 이라는 프로퍼티에 접근하려 하였지만, 객체 내부에는 그런 프로퍼티가 존재하지 않습니다. 그렇기 때문에 콘솔창에는 undefined 가 찍히는걸 확인할 수 있답니다.

프로퍼티 값 변경하기

프로퍼티의 값을 변경하는건 간단합니다. 이미 존재하는 프로퍼티에 새로운 값을 넣어주면 쉽게 변경할 수 있습니다.

const obj = {
  name: "DH"
};
obj.name = "KDH";

프로퍼티 값 삭제하기

프로퍼티의 값은 delete 연산자를 사용한다면 간단하게 삭제할 수 있습니다.

const obj = {
  name: "DH",
};
delete obj.name;
console.log(obj); // {}

메서드

객체의 내부에 선언된 함수는 메서드라고 부릅니다.

Java 를 배우고 Javascript 를 배웠는데 함수, 메서드 라는 용어의 쓰임이 처음엔 헷갈렸답니다.
일반적으로 자바스크립트에서는 함수를 객체로 여깁니다. 단독적으로 쓰일수 있으며 객체이기에 함수의 매개변수 및 리턴 값으로도 사용될 수 있습니다.

만약 객체 내부의 프로퍼티의 값이 함수일 경우에 메서드라고 부릅니다.

const obj = {
  name: "DH",
  work: function() {
    console.log(`${this.name} 님이 출근하였습니다.`);
};
obj.work();

위 코드를 살펴본다면 obj 객체에서 선언된 메서드를 호출하는 모습을 볼 수 있습니다.
ES6 이후 부터는 메서드 또한 간단하게 축약하여 표현할 수 있습니다.

const name = "DH";
const obj = {
  name,
  work() {
    console.log(`${this.name} 님이 출근하였습니다.`);
  },
};
obj.work(); // DH 님이 출근하였습니다.

마무리하며 ..

모던자바스크립트 Deep Dive 10장 Object 를 살펴보고 포스팅을 하였습니다.
매일 선언하며 사용하는 객체가 정확히 어떤 구조인지, 어떻게 사용할 수 있는지 정확히 짚고 넘어가는 시간이였습니다.
다음 시리즈에서는 자바스크립트의 스코프에 대해서 탐구해보도록 하겠습니다.

Thomas

안녕하세요! 주니어 웹 개발자입니다 😆

다음 포스트