자바스크립트) 객체

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

자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 '모든 것'이 객체다. 원시 값(숫자,문자열,불리언 등)을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체이다. 원시 타입은 단 하나의 값만 나타내지만 객체 타입은 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조이다. 또한 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이지만 객체 타입의 값, 즉 객체는 변경 가능한 값이다.

 

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

var person = {
  name: "Lee",
  age: 20,
};

객체는 프로퍼티(속성)와 메서드(동작)을 가지며, 객체간의 상호작용을 통해 프로그래밍이 이루어진다. 

// 객체 생성
var person = {
  name: "John",
  age: 30,
  greeting: function() {
    console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
  }
};

// 객체의 속성에 접근
console.log(person.name); // 출력: John
console.log(person.age); // 출력: 30

// 객체의 동작(메서드) 호출
person.greeting(); // 출력: Hello, my name is John and I am 30 years old.

---

1. 함수와 메서드의 차이점은?

자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다. 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드(method)라 부른다. 객체 내부에서 객체의 프로퍼티(상태)를 참조하고 조작할 수 있는 동작을 메서드라 부른다.

 

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

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

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

---

2. 자바스크립트에서 객체를 생성하는 방법은?

1) 객체 리터럴 : {} 중괄호를 사용하여 객체를 생성함

var person = {
  name: "John",
  age: 30,
  greet: function() {
    console.log("Hello!");
  }
};

2) 생성자 함수 (Constructor Function)

- 객체 리터럴을 사용하면 객체를 쉽게 만들 수 있다. 런데 개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생긴다. 이때 new 연산자와 생성자 함수를 사용하면 유사한 객체를 여러 개 쉽게 만들 수 있다.

생성자 함수와 일반 함수에 기술적인 차이는 없다. 다만 생성자 함수는 다음과 같은 관례가 있다.
 1) 함수 이름의 첫 글자는 대문자로 시작해야 한다.
 2) 반드시 new 연산자를 붙여 실행한다.

3) Object 생성자함수

- 생성자 함수에 속성과 메서드를 동적으로 추가할 수 있다.

var person = new Object();
person.name = "John";
person.age = 30;
person.greet = function() {
  console.log("Hello!");
};

4) Object.create() 메서드

- 아래 예시 코드에서 personPrototype 객체를 프로토타입으로 사용하여 person 객체를 생성한다. person 객체는 personPrototype 객체의 속성과 메서드를 상속받고, 추가로 name과 age 속성을 가진다. person.greet()를 호출하여 Hello!를 출력할 수 있다.

var personPrototype = {
  greet: function() {
    console.log("Hello!");
  }
};

var person = Object.create(personPrototype);
person.name = "John";
person.age = 30;

person.greet(); // 출력: Hello!

5) Class 

객체지향형 문법을 쓰는 이유는 object 를 여러개 만들어서 쓰기 위함.
class 에는 constructor 라고 하는 키워드를 반드시 넣어야함

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log("Hello!");
  }
}

var person = new Person("John", 30);
person.greet(); // 출력: Hello!

---

3. 전역 객체란?

- 자바스크립트 환경에서 가장 최상위에 있는 객체(브라우저 환경에서는 전역 객체를 window 객체로 표현하며, Node.js 환경에서는 global 객체로 표현)

- 전역 스코프에 정의된 변수와 함수는 전역 객체의 프로퍼티로 접근할 수 있다.

- 전역 객체는 코드가 실행되기(런타임) 이전 단계에 자바스크립트 엔진에 의해 생성되는 특수한 객체다.

이 객체는 코드 실행 이전 단계에 자동으로 생성되므로, 전역스코프(Global Scope) 에서 정의된 모든 변수,함수,전역 객체 자체의 프로퍼티 들을 포함한다. 브라우저 환경에서 전역객체를 'window'라고 부른다. 

이는 자바스크립트 엔진이 코드를 실행하기 전에 전역 스코프를 스캔하고 해당 요소들을 전역 객체에 추가하여 실행환경을 구성하는 것이다. 

(ex: 예를 들어, 브라우저 환경에서 전역 스코프에서 선언한 변수 varName와 함수 myFunction은 전역 객체의 프로퍼티로 저장된다. 이러한 전역 객체의 프로퍼티는 코드 어디에서나 접근이 가능하므로, 전역 스코프에서 정의된 변수와 함수는 다른 스코프에서도 사용할 수 있다.

예를 들어, window.console.log()은 전역 객체인 window의 console 객체의 log 메소드를 호출하는 것)

- 전역 객체는 표준 빌트인 객체(자바스크립트 언어 자체에 내장되어있는 객체 Object, String, Number, Function, Array...) 들과 환경에 따른 호스트 환경에서 제공하는 특정 객체(브라우저에서는 window 객체는 웹 페이지의 창과 관련된 다양한 기능을 제공하고, document 객체는 웹 페이지의 요소에 접근하고 조작하는 메서드와 속성을 제공), 그리고 var 키워드로 선언한 전역 변수와 전역 함수를 프로퍼티로 갖는다.

 

 

🔸전역 실행컨텍스트와 전역 스코프의 관계 (전역 객체에서 전역 스코프가 나와서 참고자료로 언급함)

- 전역 실행컨텍스트는 JS 코드의 최상위 수준에서 실행되는 컨텍스트이다. 코드가 실행되기 전에 전역 실행 컨텍스트가 생성되며, 전역객체와 전역 스코프를 설정한다. 전역 실행 컨텍스트는 코드 실행 중에 하나의 실행 컨텍스트로 존재하며, 전역 변수와 전역함수 등을 포함하는 컨테이너 역할을 한다. 

- 전역 스코프는 전역 실행 컨텍스트에서 정의된 변수와 함수가 존재하는 스코프이다. 전역 스코프는 전역 실행 컨텍스트에 의해 생성되며, 전역 실행 컨텍스트에 있는 변수와 함수는 전역 스코프에 속합니다. 이러한 변수와 함수는 프로그램 어디에서나 접근이 가능하며, 전역 스코프에 있는 다른 스코프에서도 사용할 수 있습니다.

---

참고자료

https://github.com/junh0328/prepare_frontend_interview/blob/main/js.md#%EB%B0%B0%EC%97%B4