질문 리스트

아래의 질문하기 버튼을 활용하세용

• 질문 작성자 : 김무호

• 질문 내용 : 브라우저에서의 비동기 처리 방식 ( 태스크 큐, 이벤트 루프 ) 공부하다가 동기 처리와 비동기 처리에 대해서 이해하기 위해서 다음 아래와 같이 코드 예시문으로 작성해보았습니다. 다음과 같은 코드가 실행됬을때, 결과가 어떻게 나올것 같은지 문제 풀어봐보세용~

function sleep(func, delay) {
  const delayUntil = Date.now() + delay;

  setTimeout(() => console.log('hello!'),2000)

  while (Date.now() < delayUntil);

  func();
}

function foo() {
  console.log('finish!');
}

sleep(foo, 3000)

• 질문 작성자 : 윤승록

• 질문 내용 : 22장 호출되는 위치에 따라 동적으로 바인딩 되는 this 의 참조값

//문제 1 

const son = 'Seungrok2'
const food = 'melon'

function seungrok() {
	const son = 'Roggu'
	const food = 'Cake'
	console.log(this) //?
	console.log("Seungrok's son's name is ", this.son)//?
	function eat() {
		console.log(this) //?
		console.log("Seungrok is eating", this.food)//?
	}	
}

const obj = {seungrok}
obj.seungrok() //? ? ? ? -> 이렇게 수정하면 되는건가요?


/*-----------------------------------------------------------------------*/

//문제 2

const name = 'Gidong'

const newObjectLiteral = {
	name: 'Seungrok',
	location: 'Gang-nam street',
	walk() {
		console.log("this of newObjectLiteral is ", this) //?
		console.log("this.name of newObjectLiteral is ", this.name)// ?
		setTimeout(function () {
			console.log(this) //?
			console.log(this.name)//?
		}, 1000)
	}
}

newObjectLiteral.walk() // ? 

Hint: 어떠한 함수라도 일반 함수로 호출되면 this에 전역 객체가 바인딩된다! → 으으으....

• 질문 작성자 : 김다슬

• 질문 내용 : 11장 원시 값과 객체의 비교

const user1 = { name: { test: 'daseul' } };
const user2 = user1; // 참조에 의한 전달
// 객체를 새로 만들면 무조건 새롭게!!!
// 객체 리터럴도 그 중에 하나 
// console.log({} === {}); false
const user3 = { ...user1 }; // 얕은 복사

// 이 아이들의 정답을 맞춰주세요..
console.log(user1.name === user2.name); // ?
console.log(user1.name === user3.name); // ?
console.log(user1 === user2); // ?
console.log(user1 === user3); // ? 

 

• 질문 작성자 : 김다슬

• 질문 내용 : 클로저에서 실행 컨텍스트 렉시컬 환경 생성 관련하여 의문이 있습니다!

// 24장 클로저 p402 예제 코드 
const increase = (function () {
    let num = 0;
    return function () {
        return ++num
    }
}())

console.log(increase()) // 1
console.log(increase()) // 2
console.log(increase()) // 3

위의 코드에서 내부 함수인 function의 렉시컬 환경이 생성되고 외부 렉시컬 환경 참조로 외부 함수를 참조하고 있어서 외부 함수의 실행이 종료되더라도 num 변수를 변경할 수 있다는 것까지 이해했습니다.
따라서 첫번째 increase 호출 시, 내부 함수 function이 참조하고 있는 외부 함수의 num이 1로 변경되었을 것입니다.
여기서부터 궁금한 점은,
두번째 increase가 호출 될 경우 기존에 존재하던 외부 함수 function의 렉시컬 환경이 다시 새롭게 생성되는 것인지 궁금합니다
만약 새롭게 생성이 된다면 외부 함수 function의 식별자 num의 값은 0으로 생성되는 걸까요? 아니면 1로 생성되는 걸까요?
저는 렉시컬 환경이 새롭게 생성되지 않고 첫번째 increse 호출 이후에 외부 함수 렉시컬 환경의 식별자 num이 1로 업데이트된 상태를 유지하고 있다가
두번째 increase 호출 시, 외부 함수는 실행되지않고 내부 함수만 새롭게 렉시컬 환경을 생성하여 다시 외부 함수를 참조하게 되는 것이라 생각했습니다..
무엇이 맞을까요? 그리고 후자가 맞다면 왜 그런걸까요....
 

• 질문 작성자 : 김무호

• 질문 내용 : Function 생성자 함수의 프로토타입 메소드인 call과 apply의 존재 이유가 궁금합니다. 화살표함수가 생긴 ES6이후로, this 바인딩을 관리하는데에는 큰 문제가 없을것 같아서요. 그나마 책에 나온 활용 가능한점으로는 유사배열에서 배열의 메소드를 활용할만한 부분인것 같습니다( 아래 코드 1번 참고). 다만 arguments가 유사배열일지라도, Iterable이기 때문에 2번 방식과 같이 Spread Operator를 사용하여 충분히 유사배열의 경우도 처리가 가능할것같은데, 두 방식에 성능적 차이가 존재할까요? ( ... 연산을 할때 O(n)의 처리시간이 필요할테니 나쁘지 않을지도..? join 까지 처리하면 O(n^2)..?)

arguments = { [Iterator] 0: 1, 1: 2, 2: 3, ..};

Array.prototype.join.call(arguments); //1번 1,2,3

[...arguments].join(); //2번 1,2,3

• 실험 내용: 실로 어마어마한 차이였다고 한다....

• 질문 작성자 : 김무호

• 질문 내용 : 오늘 프로토타입 교체에 대해서 몇가지 시도를 하다가 의문이 든 부분이 있었습니다. 몇가지 고민끝에 나름대로 깨우친 부분이 있어 관심있는분께 공유하려고 합니다. 관심있는분은 댓글 달아주세요.

• 아래의 문제입니다.

// DeepDive p291 ex19.40 변형된 코드
function Person(name) {
	this.name = name;
	
	Person.prototype = {
		sayHello() { 
			console.log('hi');
		}
	}
}

const person = new Person('alang');

person.sayHello() // Error! person.sayHello is not a function

// 왜 에러가 날까?

• 질문 작성자 : 김현석

• 질문 내용 : 자바에서 class를 사용하지 않고 객체생성이 가능한가요??