4/29 TIL

오늘의 학습 내용(TIL: Today I Learned)

1. 데이터 타입의 심화, 메모리와 데이터에 관한 배경지식

• 모든 데이터는 컴퓨터 메모리에 저장되며, 데이터 타입에 따라 저장 방식이 다릅니다. 데이터 타입은 크게 기본형(Primitive type)과 참조형(Reference type)으로 나뉩니다.
• 기본형 데이터는 값 자체가 메모리에 직접 저장되는 반면, 참조형 데이터는 값이 저장된 주소값을 메모리에 저장합니다.

2. 변수 선언과 데이터 할당

• 변수를 선언할 때는 var, let, const 키워드를 사용합니다. let과 const는 ES6부터 도입된 키워드로, 블록 스코프(block scope)를 지원합니다.
• 변수에 데이터를 할당할 때는 할당 연산자 =를 사용합니다. 기본형 데이터는 값이 복사되어 할당되고, 참조형 데이터는 메모리 주소가 복사되어 할당됩니다.

3. 기본형 데이터와 참조형 데이터

• 기본형 데이터: Number, String, Boolean, null, undefined, Symbol(ES6), BigInt(ES2020) 등이 있습니다.
• 참조형 데이터: Object, Array, Function, Date, RegExp 등이 있습니다. 참조형 데이터는 객체의 형태를 가지며, 여러 속성이나 메소드를 포함할 수 있습니다.

4. 실행 컨텍스트(스코프, 변수, 객체, 호이스팅)

• 실행 컨텍스트는 코드가 실행되기 위한 환경을 의미합니다. 스코프, 호이스팅, this 바인딩, 외부 환경 정보 등을 관리합니다.
• 스코프는 변수에 접근할 수 있는 범위를 의미합니다. 자바스크립트는 렉시컬 스코프를 따릅니다.
• 호이스팅은 변수나 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 특성을 의미합니다.

5. this(정의, 활용방법, 바인딩, call, apply, bind)

• this는 실행 컨텍스트의 한 부분으로, 현재 실행되고 있는 컨텍스트를 가리키는 식별자입니다.

• 활용 방법에는 객체의 메소드에서 객체 자신을 가리킬 때, 생성자 함수에서 새로 생성된 객체를 가리킬 때 등이 있습니다.

• this의 바인딩은 실행 컨텍스트가 생성될 때 결정됩니다. 하지만 call, apply, bind 메소드를 사용하여 this의 바인딩을 명시적으로 변경할 수 있습니다.

  • call 메소드는 모든 함수에서 사용할 수 있으며, 첫 번째 인자로 this로 사용할 객체를 받고, 이후 인자들은 호출할 함수의 인자로 사용됩니다.
  • apply 메소드는 call 메소드와 유사하지만, 함수의 인자들을 배열로 받습니다.
  • bind 메소드는 함수의 this 값을 영구히 바꿀 수 있는 새로운 함수를 생성합니다.

• 나이든 객체 문제

var user = {
    name: "john",
    age: 20,
}

var getAged = function (user, passedTime) {
    var newUser = {...user}; // 새로운 객체를 생성하고, 기존 사용자 정보를 복사
    newUser.age += passedTime; // passedTime을 현재 나이+
    return newUser;
}

var agedUser = getAged(user, 6);

var agedUserMustBeDifferentFromUser = function (user1, user2) {
    if (!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);

• 어떤 매치가 성사될까? 출력 결과 해석은 내일 해 볼 예정!

var fullname = 'Ciryl Gane'

var fighter = {
    fullname: 'John Jones',
    opponent: {
        fullname: 'Francis Ngannou',
        getFullname: function () {
            return this.fullname;
        }
    },

    getName: function() {
        return this.fullname;
    },

    getFirstName: () => {
        return this.fullname.split(' ')[0];
    },

    getLastName: (function() {
        return this.fullname.split(' ')[1];
    })()

}

console.log('Not', fighter.opponent.getFullname(), 'VS', fighter.getName());
console.log('It is', fighter.getName(), 'VS', fighter.getFirstName(), fighter.getLastName);

51-62e70ec8d0cf47c2.js:1 Not Francis Ngannou VS John Jones
51-62e70ec8d0cf47c2.js:1 It is John Jones VS Ciryl Gane