호이스팅, 컨텍스트, 객체

this

this -> 자신을 호출한 객체를 가리키는 특수한 키워드
키와 값으로 이루어진 속성(property)들의 집합
this는 화살표도 가능하지만 function 일반 함수 일때만 의도한 대로 동작한다

const membership = {
  name: "손흥민",
  // 메서드(메소드)
  //   joined : function = joined 단축해서 표현할 수 있다
  joined() {
    return `${this.name}님이 가입했습니다.`;
  },
  //   .bind({name: "손흥민"}) this가 가리키는 객체를 묶을수있다.
};
membership.joined();

// 내가 원하는 객체를 명확하게 가르키고 싶을때 bind사용
function member() {
  console.log(this);
}
member.bind({ nanme: "조영래" });

컨텍스트

코드의 실행환경에 대한 여러가지 정보를 담고 있는 개념으로, 간단히 말하자면 자바스크립트 엔진에 의해 만들어지고 사용되는 코드 정보를 담은 객체의 집합이라고 할 수 있다.

// 가장 맨 밑에 깔리는 컨텍스를 전역실행 컨텍스트
// Record, outer
// Record 객체 코드 생성, 실행

실행 컨텍스트가 생성되면 흔히 콜 스택(Call Stack)이라고도 불리는 실행 컨텍스트 스택에 쌓이게 된다. GEC는 코드를 실행하기 전에 쌓이고 모든 코드를 실행하면 제거된다. FEC는 호출할 때 쌓이고 호출이 끝나면 제거된다. 예시 코드를 통해 살펴보자.

function func() {
  console.log('함수 실행 컨텍스트');
}
console.log('글로벌 실행 컨텍스트');
func();

호이스팅

선언부가 최상단을 올라가는 형상
선언과 할당

// var
var name;
console.log(name);
var name = "철수";
// undefined 나옴
printTxt();
function printTxt() {
  console.log("hello");
}
const num = 10;
function floor2() {
  const num = 20;
  function floor3() {
    const num = 30;
    console.log(num);
  }
  floor3();
}
floor2();
console.log(num);

호이스팅이란 "끌어올린다" 라는 뜻으로 변수 및 함수 선언문이 스코프 내의 최상단으로 끌어올려지는 현상 을 말한다. 여기서 주의할 점은 "선언문" 이라는 것이며 "대입문"은 끌어올려지지 않는다.

console.log(a);
var a = 2;

컴파일러는 자바스크립트 엔진이 인터프리팅(Interpreting)을 하기 전에 컴파일을 하는데 이 때, var a = 2; 를 2개의 구문으로 본다.

• var a
• a = 2
var a 는 변수 선언문으로 컴파일을 할 때 처리하고, a = 2 는 실행할 때까지 내버려둔다. 따라서, 변수 a는 호이스팅 되고 콘솔에는 다음과 같은 결과가 나온다.

undefined

함수 선언문의 경우도 호이스팅 된다.

func();
function func() { console.log('함수 호이스팅'); }

함수 호이스팅

함수 호이스팅에서 주의할 점

함수 호이스팅에서 주의할 점이 더 있다.

• 함수 표현식(Function Expression)은 호이스팅 되지 않는다.

func();
var func = function() {}

여기서는 변수 func의 호이스팅이 발생해서 참조할 수는 있기 때문에 ReferenceError가 발생하지 않지만 그 값이 undefined 이기 때문에 TypeError가 발생한다.

• 함수와 변수 선언문 중에는 함수 선언문이 먼저다.

func();
var func = function(){ console.log('변수 호이스팅') }
function func() {
  console.log('함수 호이스팅');
}

동일한 이름으로 함수 선언문과 변수 선언문(= 함수표현식)이 있지만 함수 선언문의 호이스팅이 먼저이기 때문에 결과는 다음과 같다.

클로저

// 클로저는 실행컨텍스트가 정상적으로 종료되지 못하는 현상
ex)
function outerFunc() {
  let count = 0;
  return function innerFunciton() {
    count++;
    console.log(cout);
  };
}
const counter = outerFunc();
counter(); // 1
counter(); // 2
counter = null; // 끊어줘야지만 메모리 제거 해준다 클로저를 사용한다면 null 값으로 초기화 해줘야한다

클로저란 함수가 속한 렉시컬 스코프를 기억하여 함수가 렉시컬 스코프 밖에서 실행될 때도 그 스코프에 접근할 수 있게 하는 기능 을 말한다.

function outer() {
  var a = 2;
  function inner() {
    console.log(a);
  }
  return inner;
}
var func = outer();
func(); // 2

객체

동적으로 속성할 수 있다.
동적으로 속성을 제거 할 수 있다.
객체의 속성을 순회할 수 있다.
const obj = {
  a: 1,
  b: 2,
  c: 3,
};

for (let key in obj) {
  console.log(key, obj[key]);
}

const obj = {}; // 빈 객체 생성
obj.color = "yellow"; // color 프로퍼티 생성
delete obj.color; // color 프로퍼티 삭제
console.log(obj);
const obj = {
  name: "철수",
  address: {
    zipcode: "131809",
    addr1: "서울시 강남구",
    addr2: "한경빌딩 4층 개발팀",
  },
  likeFoods: ["banana", "apple", "oragne"],
};
console.log(obj.address.zipcode);
console.log(obj.likeFoods[0]);

// 객체의 속성이 같고, 값이 다른 경우에 객체를 생성할 수 있는 생성자 함수를 제공합니다.
// 생성자함수
function User(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
  this.introduce = function () {
    console.log("이름:" + this.name + ", 나이:" + this.age + "");
  };
}
User.prototype.introduce = function () {
  console.log("이름:" + this.name + ", 나이:" + this.age + "");
};
const user1 = new User("John", 30, "male");
user1.introduce();
const user2 = new User("Anna", 20, "female");
const user3 = new User("Alex", 25, "male");
console.log(user1, user2, user3);

일반 객체
const user1 = {
  name: "John",
  age: 30,
  gender: "male",
};
const user2 = {
  name: "Anna",
  age: 20,
  gender: "female",
};
const user3 = {
  name: "Alex",
  age: 25,
  gender: "male",
};

프로토타입
console.time();
const userList = [];
for (let i = 0; i < 9000000; i++) {
  userList.push(new User("John", 30, "male"));
}
console.timeEnd();

객체안에 포함된 함수를 다른 용어로 '메서드(method)'라고 부릅니다.
let obj = {
  name : "철수", 
  address : {
    zipcode : "131809", 
    addr1 : "서울시 강남구",
    addr2 : "한경빌딩 4층 개발팀"
  },
  likeFoods:['banana','apple','oragne'],
  getAge : function(){
    return 20;
  }
}
console.log(obj.getAge());