[2022.08.16](JavaScript) 객체 리터럴

 

자바스크립트에서 객체란?

자바스크립트는 객체 기반의 프로그래밍 언어이며,

자바스크립트를 구성하는 거의 '모든 것'이 객체이다.

 

원시  값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체이다.

원시 타입은 단 하나의 값만 나타내지만 객체 타입은 다양한 타입의 값(원시 값 또는 다른 객체)을

하나의 단위로 구성한 복합적인 자료구조이다.

또한 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이지만 객체 타입의 값, 즉 객체는 변경이 가능한 값이다.

 

이렇듯 자바스크립트를 잘 알기 위해서는 객체에 대해서 잘 알고 있어야 한다.

 

 

객체란?

객체는 0개 의상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키(key)와 값(value)으로 구성된다.

 

출처 : https://velog.io/@seeh_h/%EA%B0%9D%EC%B2%B4-%EB%A6%AC%ED%84%B0%EB%9F%B4

 

 

객체 생성 방법

자바스크립트는 '프로토타입 기반 객체지향 언어'로서 

'클래스 기반 객체지향 언어' 와는 달리 다양한 객체 생성 방법을 지원한다.

• 객체 리터럴
• Object 생성자 함수
• 생성자 함수
• Object.create 메서드
• 클래스(ES6)

 

객체 리터럴

객체 리터럴은 객체 생성 방식 중 가장 일반적이고 간단한 방법이다.

콘텐츠를 그대로 대입하는 방법을 말한다.

let myObject = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value
};

위의 형식과 같이 key : value 형식의 data를 직접 입력하는 방법이다.

 

 

함수와 메서드의 차이점

먼저 객체 리터럴 방식으로 Person이란 객체를 만들어보자.

var person = {
  name: "Lee",
  age: 20,
  hello: function () {
    console.log("hello :" + this.name);
  },
};

console.log(person);
>>>
{ name: 'Lee', age: 20, hello: [Function: hello] }

위 객체에서 hello는 함수이다. 객체는 프로퍼티로 일반 변수뿐만 아니라 함수 또한 가질 수 있다.

 

프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드(method)라 부른다.

객체 내부에서 객체의 프로퍼티(상태)를 참조하고 조작할 수 있는 동작을 메서드라 부른다.

 

즉, 메서드는 객체에 묶여 있는 함수를 의미한다.

 

 

전역 객체란?

• 전역 객체는 코드가 실행되기(런타임) 이전 단계에 자바스크립트 엔진에 의해 생성되는 특수한 객체다.
  
  
• 클라이언트 사이드 환경(브라우저)에서는 window, 서버 사이드 환경(Node.js)에서는 global 객체를 의미한다.
  
  
• 전역 객체는 표준 빌트인 객체(Object, String, Number, Function, Array...) 들과 환경에 따른 호스트 객체,
  그리고 var 키워드로 선언한 전역 변수와 전역 함수를 프로퍼티로 갖늗다.

 

---

오늘은 객체 리터럴에 대해서 알아봤다.

개발하면서 사용했던 것들이지만 개념들을 잘 몰랐던 거 같았다.

차근차근 기초 공부를 계속해야겠다.

 

 

 

참고자료:

GitHub - khakaa/prepare_frontend_interview: 📚 프론트엔드 기술 면접을 위한 핸드북 만들기

📖 객체 리터럴