20250828 자바스크립트 기본을 배웠다.

자바스크립트 기초적인 것을 배우고 실습했다.

당장의 문법이 아닌 작성된 자바스크립트 코드가 어떻게 실행되는지 그 원리 자체를 이해해야 한다고 하셨다.

 

📕 주어진 자바스크립트 자료 예습하기

객체 생성 방법

객체 생성 방법에는 크게 3가지가 있다.

 

1. 객체 리터럴

var p1 = { name: "류종현" };

 

2. Object 생성자

var p2 = new Object();
p2.name = "류종현";

 

3. 사용자 정의 생성자 함수

function Person(name) {
  this.name = name;
}
var p3 = new Person("류종현");

 

실행 콘텍스트

var로 선언한 변수는 실행 컨텍스트 안에서 만들어진다.

var 없이 쓰면 자동으로 전역 객체(window)의 프로퍼티가 된다.

var v1; 
console.log(window.v1); // undefined

v2 = 10; 
console.log(window.v2); // 10

 

var는 호이스팅 때문에 선언이 맨 위로 끌어올려져서 동작한다.

console.log(v1); // undefined
var v1 = 10;

 

이런 일이 생기는 이유는 실행 컨텍스트가 두 단계에 나눠서 처리되기 때문이다.

첫 번째는 메모리 생성 단계이다.

변수, 함수 선언이 메모리에 먼저 등록되고 변수는 undefined로 초기화되고 함수 선언은 실제 함수 객체로 등록된다.

두 번째는 실행 단계이다.

코드가 순차적으로 실행되면서 값이 할당된다.

 

그래서 위의 undefined 결과가 발생된다.

 

프로토타입

예습한 내용이라 틀린 부분이 있을 수도 있다. 이해한 대로 적어 보면 다음과 같다.

 

자바스크립트는 프로토타입 체인 시스템으로 이루어져 있다. 프로토타입 체인으로 객체 간 상속과 메서드 공유를 구현한다.

var v1 = new Object();
 console.log (window.v1); //[object Object]
 console.log(v1.__proto__===Object.prototype);//true

 

 

new Object()로 만든 객체는 Object.prototype을 프로토타입으로 가지게 된다. __proto__는 접근자 프로퍼티로 해당 객체가 참조하는 프로토타입을 보여준다.

 

여기서 Object.prototype은 객체의 최상위 프로토타입이다. Object.prototype.__proto__는 null이다.

 

var p1 = {
 eyes: 3,
 nose: 4
}
 console.log(p1.__proto__ === Object.prototype); // true
 console.log(Object === p1.constructor); // true

 

객체 리터럴 방식으로 객체를 생성해도 Object 생성자로 생성한 경우와 동일한 것을 볼 수 있다.

 

 

사용자 정의 생성자 함수로 객체를 생성하는 경우

function Person(name) {
  this.name = name;
}
var p3 = new Person("류종현");

 

Person은 함수 객체로 Person -> __proto__ -> Function.prototype -> __proto__ -> Object.prototype으로 프로토타입 체인이 연결된다.

p3의 경우 p3 -> __proto__ -> Person.prototype -> __proto__ -> Object.prototype으로 연결된다.

만약 p3에서 name 아닌 프로퍼티를 참조하게 되면 p3에서 찾고 한 단계씩 올라가면서 프로퍼티를 찾게 되고 Object.prototype까지 없으면 undefined를 반환하게 된다.