JS 3회차 6/4 | this, 동기와 비동기, event system, class, closure

컨택스트(context)_this

상황에 따라 this가 가리키는 것이 무엇인지 맥락 파악해야 함

 

1. this는 객체이다

2. this가 전역 공간에 있을 때는 전역 공간(window 객체)를 가리킴

--> this === window

3. 실행 맥락(excute context)으로 this를 연결한다.

4. 실행 시 소유자 확인이 안되면 this는 전역 객체에 연결된다.

 

const obj = {
  id: 1,
  getId: function () {
    return this.id;
  } // this는 obj를 가리키고 있음.
};

console.log(this.id) // window에 id가 없는 것과 같음
console.log(obj.id)
console.log(obj.getId())
// method를 호출하는 시점에 주인이 누구 ? obj.
// 실행 맥락상의 주인이 this가 됨 !

 

function caller (fn) {
  console.log('caller ==> ', fn())
}

const obj = {
  id: 1,
  getId: function () {
    return this.id;
  } // this는 obj를 가리키고 있음.
};

console.log('this.id ==> ',this.id) // window에 id가 없는 것과 같음
console.log(obj.id)
console.log(obj.getId())
// method를 호출하는 시점에 주인이 누구 ? obj.
// 실행 맥락상의 주인이 this가 됨 !

caller(obj.getId)

 

 

cf. 동기와 비동기

동기(synchronous)와 비동기(asynchronous)는 컴퓨터 프로그래밍에서 작업이 수행되는 방식을 설명하는 중요한 개념입니다. 이 두 가지 접근 방식은 작업이 완료될 때까지 기다리는지 여부에 따라 다릅니다.

 

동기 (Synchronous)

 

동기 방식에서는 작업이 순차적으로 수행됩니다. 하나의 작업이 끝나기 전까지는 다음 작업을 시작하지 않습니다. 모든 작업이 순서대로 진행되며, 각 작업이 끝날 때까지 기다립니다.

function task1() {
  console.log('Task 1 시작');
  // 긴 작업 (예: 파일 읽기)
  console.log('Task 1 완료');
}

function task2() {
  console.log('Task 2 시작');
  // 긴 작업 (예: 데이터 처리)
  console.log('Task 2 완료');
}

task1();
task2();

위 코드에서는 task1이 끝난 후에야 task2가 시작됩니다. 모든 작업이 순서대로 수행됩니다.

 

비동기 (Asynchronous)

 

비동기 방식에서는 작업이 병렬로 수행될 수 있습니다. 하나의 작업이 끝날 때까지 기다리지 않고 다음 작업을 시작합니다. 비동기 작업은 주로 콜백 함수, 프로미스(Promise), 또는 async/await를 사용하여 처리됩니다.

function task1(callback) {
  console.log('Task 1 시작');
  setTimeout(() => {
    console.log('Task 1 완료');
    callback();
  }, 1000); // 1초 후에 작업 완료
}

function task2() {
  console.log('Task 2 시작');
  // 긴 작업 (예: 데이터 처리)
  console.log('Task 2 완료');
}

task1(() => {
  task2();
});

위 코드에서는 task1이 시작된 후 1초 동안 기다리면서 task2가 실행됩니다. setTimeout 함수는 비동기적으로 실행되어 일정 시간이 지난 후에 콜백 함수를 호출합니다.

 

JavaScript에서의 동기와 비동기

 

JavaScript는 싱글 스레드 언어입니다. 즉, 한 번에 하나의 작업만 수행할 수 있지만, 비동기 처리를 통해 동시에 여러 작업을 다룰 수 있습니다. 이는 주로 이벤트 루프(event loop) 메커니즘을 통해 이루어집니다.

// Promise 사용 예제
function asyncTask1() {
  return new Promise((resolve) => {
    console.log('Async Task 1 시작');
    setTimeout(() => {
      console.log('Async Task 1 완료');
      resolve();
    }, 1000);
  });
}

function asyncTask2() {
  return new Promise((resolve) => {
    console.log('Async Task 2 시작');
    setTimeout(() => {
      console.log('Async Task 2 완료');
      resolve();
    }, 500);
  });
}

asyncTask1()
  .then(() => asyncTask2())
  .then(() => {
    console.log('모든 비동기 작업 완료');
  });

// async/await 사용 예제
async function runTasks() {
  await asyncTask1();
  await asyncTask2();
  console.log('모든 비동기 작업 완료');
}

runTasks();

위 예제에서는 Promise와 async/await를 사용하여 비동기 작업을 처리합니다. asyncTask1과 asyncTask2는 각각 비동기적으로 실행되며, 완료된 후 다음 작업이 실행됩니다.

 

event system

function app () {
  const btnSave = document.querySelector('#btn-svae')
  const message = document.querySelector('.message')
  
  btnSave.addEventListner('click', function() {
    message.innertext = '저장되었습니다';
    })
    
    console.log('this is app')
  }
  
  document.addEventListner('DOMContentLoaded', app)

 

function app () {
  const btnSave = document.querySelector('#btn-svae')
  const message = document.querySelector('.message')
  
  function clearMassage() {
    message.innerText = '';
  }

  function onSave() {
    message.innterText = '저장되었습니다';
    
    setTimeout(clearMessage, 1000)
    // 1000ms = 1s
}

 

this 고정

function caller (fn) {
  console.log('caller ==> ', fn())
}

const obj = {
  id: 1,
  getId: function () {
    return this.id;
  } // this는 obj를 가리키고 있음.
};

console.log('this.id ==> ',this.id)
console.log(obj.id)
console.log(obj.getId())

const fixedThis = obj.getId.bind(obj); (this를 obj로 고정)

caller(fixedThis) // caller ==> 1

 

화살표 함수는 this가 안 바뀐다

function caller (fn) {
  console.log('caller ==> ', fn())
}

const obj = {
  id: 1,
  getId: () => {
    return this.id;
  } // this는 obj를 가리키고 있음. 화살표 함수는 this가 obj로 고정 !!
};

console.log('this.id ==> ',this.id)
console.log(obj.id)
console.log(obj.getId())

caller(obj.getId) // caller ==> 1

 

class

1. new 호출

2. {} 비어있는 객체가 생성됨

3. 빈 객체를 this가 참조하게 변경됨

4. 함수가 종료되면 자동으로 this를 return 함

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

// Person 함수의 인스턴스
const p = new Person('김민태', 25);

console.log(p);

 

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.getName = () => {
    return this.name;
}

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

  getName () {
    return this.name;
}

  getAge () => {
    return this.age;
}

// Person 함수의 인스턴스
const p = new Person('김민태', 25);

console.log(p.getName()); // 김민태

const p1 = new Man('김민태', 25);
console.log(p1) // Man {name: '김민태', age: 25)

 

클로저(closer)

어떤 정보를 숨기고 싶을 때 사용

// 클로저(closure)
//함수가 만들어질 때(호출될 때가 아니라) 코드 안에 있는 접근하는 변수들 중에서
//자신이 가지고 있지 않은 변수를 기억함(closure라는 공간을 만들어 놓고 a를 넣어둠)
//그 공간까지 함수가 가지고 있어서 return 공간까지 함께
//실행될 때 a는 myFun의 a가 아니라 그 때 기억한 a라서 10이 출력

function myFun () {
  const a = 10;
  
  function yourFun () {
    return a;
  }
  
  return yourFun;
}

const fn = myFun();
console.log(fn()) // 10

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

클로저 - JavaScript | MDN