230405 TIL JavaScript 문법 종합반 3주차 정리

230405 TIL JavaScript 문법 종합반 3주차 정리 

내용:

데이터 타입의 종류 및 메모리, 데이터할당, 불변객체, 호이스팅, 콜백함수 etc.  //실행컨텍스트

회고:

솔직히 처음 듣는 용어들에 정신 못차리겠다 싶었지만 두 눈 똑바로 뜨고 들은 결과 아래와 같은 것을 깨달았다. 

 

실행컨텍스트

//실행 컨텍스트- 실행할 코드에 제공할 환경정보들을 모아놓은 '객체'이다.

//그 객체 안에는 VE, LE, This Binding 3가지가 존재한다.

//VE, LE는 실.컨 생성시점에 내용이 완전히 같고, 이후 스냅샷 유지 여부가 다르다.

//LE는 RECORD(=EnvironmentRecord)와 OUTER(=outerEnvironmentReference) 2가지 정보를 가지고 있는데, 'RECORD'의 수집 과정이 바로 'hoisting'이다.<<잊으면 안됌.

**VE, LE는 뭘 의미하는가? 이게 핵심!

//-----VE랑 LE는 똑같지만 변경사항을 실시간으로 반영 하느냐 아니냐 차이

//1. Variable Environment (VE) --스냅샷을 유지

//   현재 컨텍스트 내의 식별자 정보(=record)를 가진다.

//   a. var a = 3 의 경우 var a를 의미

//   b. 외부환경정보(=outer)를 가진다.

//   c. 선언 시점 LexicalEnvironment 의 snapshot

//2. LexicalEnvironment: VE와 동일하지만, 변경사항을 실시간으로 반영하면서 UPDATE --스냅샷을 유지하지x

//3. This Binding: this가 function안에서 어떤 역할을 해야하는지 알려줌; 식별자가 바라봐야할 객체

 

예제1 **비교적 쉬웠으나 혼자서 만들기 실패

1.getAged라는 함수로 새로운 user정보를 만들어내는 것이 핵심

여기서 name: user.name을 통해 원래 user의 name '값(말그대로 문자)' 만 가져오는게 신기했다. 

예를 들면 똑같은 상품인 삼다수가 두개 있으면 그건 두개지 한개가 아니잖아!

//이 코드는 "user"라는 객체를 만들고, "getAged"라는 함수를 정의하며, 이 함수는 "user" 객체와 "passedTime"이라는 매개변수를 가집니다. "getAged" 함수는 "user" 객체의 "age" 속성을 "passedTime"만큼 더한 값을 새로운 객체로 반환합니다.

//그리고 "getAged" 함수를 이용해 "user" 객체의 "age" 값을 6 더한 새로운 객체 "agedUser"를 만들고, "agedUserMustBeDifferentFromUser" 함수를 호출합니다. 이 함수는 "user" 객체와 "agedUser" 객체가 다른 객체임을 확인하며, 이를 통해 "getAged" 함수가 잘 작동하는지 테스트합니다.

//1. getAged 함수가 원하는게 뭔지?

//2. passedTime의 의미? (+나이를 더한다?)

//3. 관건-전역에 있는 user 라는 놈 말고, 새로운 agedUser를 반환해야함.

var user = {

  //user 라는 객체, 전역에 있는놈

  name: "john",

  age: 20,

};

var getAged = function (user, passedTime) {

  // 선언!!

  return {

    name: user.name, //john

    age: user.age + passedTime, //6이 들어감

  };

};

var agedUser = getAged(user, 6);

console.log(agedUser); //6-->passedTime // 호출!!

//agedUser는 getAged함수를 통해 받아온 user+나이더한것

//getAged 함수 내부를 구현하지 않았기 때문에,

//agedUser의 값은 undefined.

var agedUserMustBeDifferentFromUser = function (user1, user2) {

  //여기서 첫번째 인수 user는 전역변수로 정의된 user 객체를 참조,

  //두번째 인수 agedUser는 getAged함수에서 반환된 값으로, agedUser=getAged(user, 6)코드에서 초기화됌. 뭔뜻?

  if (!user2) {

    //user1, user2는 자동 생성?

    console.log("Failed! user2 doesn't exist!");

  } else if (user1 !== user2) {

    console.log(

      "Passed! If you become older, you will be different from you in the past!"

    );

  } else {

    console.log("Failed! User same with past one");

  }

};

agedUserMustBeDifferentFromUser(user, agedUser);

 

 

예제2 **비교적 쉬웠으나 THIS가 무엇인지에 대한 개념파악은 부족함.

1. 함수가 어떤 '객체'에 속하는지 알아볼 수 있다.

2. 화살표 함수 내에선 this는 전역객체를 가리킴. 

3. 즉시실행함수 내에서 this는 전역객체를 가리킴. 

var fullname = "Ciryl Gane";

var fighter = {

  fullname: "John Jones",

  opponent: {

    //opponent는 fighter 객체의 프로퍼티 중 하나.

    fullname: "Francis Ngannou",

    getFullname: function () {

      //getFullname함수는 opponent 객체의 메서드.

      return this.fullname; //this는 opponent객체를 가리킴. -> this.fullname=opponent full name. 즉 Francis Ngannou.

    },

  },

  getName: function () {

    return this.fullname;

  }, //getName 함수는 fighter객체에 속함. fighter 객체의 fullname은 John Jones

  getFirstName: () => {

    //화살표 함수 내에서 this는 전역객체, 전역객체는 fullname. 문자의 [0]번째는 Ciryl!

    return this.fullname.split(" ")[0];

  }, //Ciryl

  getLastName: (function () {

    return this.fullname.split(" ")[1];

  })(), //getLastName은 Ciryl Gane의 [1]값을 내는 function. 즉 Gane. -->즉시실행함수에서 this는전역 객체를 가리키게됌.

};

console.log("Not", fighter.opponent.getFullname(), "VS", fighter.getName()); //John Jones

console.log(

  "It is",

  fighter.getName(),

  "VS",

  fighter.getFirstName(),

  fighter.getLastName

);

//출력 결과; Not Francis Ngannou VS John Jones,  It is John Jones VS Ciryl Gane