질문

prototype 에 대해 깔끔한 설명과 개념 정리.

상세내용

책을 읽고 정리하면서 보니 다른 언어의 클래스의 상속과 비교했을때

보통 비유를 하기를 클래스는 형틀이나 설계도
그로부터 파생된 객체(인스턴스)를 실물이 있는 자동차나 물건 같은 것으로 비유를 합니다.

근데 이번에 본 것은 생성자 함수에 프로퍼티(변수, 함수) 등을 직접적으로 할당하면 스태틱 변수나 함수처럼 동작한다고 보았습니다.

또 일반적으로 메모리 효율 측면을 위해서 객체가 사용할 함수는 '프로토타입 객체' 라는 객체에 할당을 해야 인스턴스가 사용이 가능하다고 보았습니다.

그래서 다른 언어는 단순한 클래스와 인스턴스 관계로 상속을 좀 이해했는데

자바스크립트는 생성자 함수, 생성자 함수의 프로토타입객체, 객체(인스턴스) 관계가 좀 정리가 안되는 느낌입니다.

또 proto 접근자 라는 녀석도 많이 헷갈리게 하구요.

이 부분에 대해서 뭔가 빗대어 설명이 가능하거나, 깔끔하게 정리가 가능할까요?

참고

질문

Array.prototype.push 와 Array.proptotype.concat 의 용도 차이는 과연 무엇일까요?

상세내용

Array.prototype.push 와 Array.proptotype.concat 은 미묘한 차이가 있지만 기능은 비슷합니다. 그렇다면, 어떤 상황에서 전자의 함수인 push 를 쓰는게 적절하고, 어떨때 후자인 concat 함수를 쓰는 것이 적절할까요? 불변성과 연관지어서 생각을 해보면 좋을 것 같습니다.

참고

27장

질문

1 에서 시작하여 10 까지의 자연수 10개가 배열로 되어있다고 했을때, 배열 전체의 합을 구하는 방법!

일반적으로 반복문(for)를 사용할텐데, 반복문을 포함해서(혹은 사용하지 않고) 구할 수 있는 방법을 생각해봅시다.

관련 챕터

27장 배열 / 8장 제어문

참고

질문

1. 호이스팅이 무엇인가?

2. 왜 알아야 하는가?

3. 호이스팅으로 인한 장점 혹은 단점이 있는가? [이 부분에 대해서 생각해봅시다]

상세내용

변수 선언문이 위치와 상관없이 유효 스코프의 최상단으로 올려진 것처럼 동작하는 자바스크립트의 특성.

var 변수 선언과 함수 선언문에서만 호이스팅이 발생.

동작 순서

1. 자바스크립트 엔진이 런타임 이전에 소스코드를 평가. 호이스팅이 발생하는 변수 선언문을 유효 스코프 최상단으로 끌어올림.
2. 그 후에 소스코드를 한라인씩 위에서 아래로 순서대로 실행.

예제.

// Test.js
// node로 실행
console.log(score) // undefined 

score = 80  // 값의 할당
var score; // 변수 선언

console.log(score) // 80

호이스팅으로 인하여 변경

// Test.js
// node로 실행
var score; // 변수 선언, 호이스팅으로 인하여 변수 선언문이 위로 옮겨짐

console.log(score) // undefined 
score = 80  // 값의 할당

console.log(score) // 80

출력 결과물

undefined.            /// 에상대로라면 reference error 라던지 별도의 에러 출력이 되어야..?
80

ES6 이후부터는 변수 선언시 const 와 let 키워드가 추가되어 사용되어 호이스팅이 발생하지 않았지만, 그 이전의 소스들은 var를 이용하여 사용하였기에 사용자의 의도와 다르게 소스가 동작할 수 있음. 이를 인지하고 있어야 함.

호이스팅의 장단점?

예전에 호이스팅의 장점? 이라고 설명을 한 글을 본거 같은데 기억 나질 않아 의문이 드네요. 일단은 자바스크립트의 예전 문법의 부가효과이기 때문에 인지를 해야된다고 책에서는 언급하고 있습니다.
단점으로는 예상 밖의 결과를 초래할 수 있다는 점과 이런식의 호이스팅을 일으키는 선언문이 많을 경우, 소스를 실행하기 전에 처리해야 할 부분이 많아져 느려지는 부분이 있다고 알고 있습니다.
혹 다른 분들이 알고 있는 부분이 있으면 알려주세요.

참고

모던 자바스크립트 Deep Dive 책 4장 변수, 43p

eval 함수의 용도와 문제점.

eval 함수는 문자열을 코드로 바꿔주는 함수입니다. 이러한 함수가 어떨때 유용하고,

어떤 문제점이 있을 수 있을까요? 제 개인적인 생각으로는 예를 들어 a, b , 계산기호 를 입력받고

21단원 329~ 331

질문

객체의 참조값을 복사해 이용하는 경우가 있나요?

상세내용

객체를 할당할 경우, 그 객체의 주소값을 참조한다.
그렇기에, 원본 또는 사본 중 어느 한쪽에서 객체를 변경하면 서로 영향을 주고 받는다.

참고

let person = { 
   name: 'live-small', 
   age : '24', 
} 

let newPerson = person; 
newPerson.name = "minji"; 
console.log(person.name); // minji 

연관챕터

11장 (p151)

추가공부

객체의 참조값을 복사하게 되면 구조적 부작용이 많다. 그렇다면 객체를 어떻게 복사할 수 있을까?

객체의 복사

• 얕은 복사는 한 단계 깊이까지만 복사하는 경우를 의미.
  • 구현 : array.slice(obj), { ...obj }, Object.assign({ }, obj)
• 깊은 복사는 객체에 중첩되어 있는 객체까지 모두 복사함.
  • 구현 : 재귀, JSON.parse & JSON.stringify

JSON.parse & JSON.stringify 동작방식

1. JSON.stringify : 원시값 혹은 객체를 모두 문자열(원시값)으로 변환
2. JSON.parse : 문자열을 다시 js 데이터 타입에 맞춰 변환
   핵심 문자열은 원시타입이기에 변경될 수 없다 -> 새로 할당됨

let origin = [ 1, 2, [ 'string', 'json' ]; 
let deepCopy  = JSON.parse(JSON.stringify(origin)); 

ref

1. 깊은복사
   https://medium.com/watcha/%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%AC%EC%99%80-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%AC%EC%97%90-%EB%8C%80%ED%95%9C-%EC%8B%AC%EB%8F%84%EC%9E%88%EB%8A%94-%EC%9D%B4%EC%95%BC%EA%B8%B0-2f7d797e008a

2. Object.assign
   https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

질문

자바스크립트의 배열은 인덱스를 키로 갖는 객체입니다.
그렇기에 갖는 특징은 뭐가 있을까요?

상세내용

(제가 생각한 것)

1. 다른 언어와 달리, 한 배열에 다양한 타입의 원소를 할당할 수 있습니다.
   -> 이렇게 유연한 게 이점으로 작용하는 상황이 있을까요?

2. 정수형 문자열로 해당 위치의 원소에 접근이 가능합니다.
   -> 이게 과연 좋은걸까요? 저는 아니라고 생각하는데요, 그 이유는 참고에 적어놓을게요.

참고

const arr = [1, 2, 3, 4, 5];

for (let elem in arr) {
    console.log(elem);
    // 0,1,2,3,4 - for in을 이용하면, 배열의 인덱스를 반환합니다. 
    // string 타입으로 반환합니다. 객체의 키는 string만 가능하니까요. 
}

arr.map((value, index) => index);
// 고차함수의 index인자는 number타입입니다. 

정리하자면,
배열에 접근할 때 인덱스를 number, string 둘 다 쓸 수 있습니다.
인덱스를 받는 경우엔, 호출방법에 따라 다른 타입을 줍니다.

• for in문 : string
• 콜백함수 : number

질문

dom api 중에 getElementbyId 와 getElementbyClassNames 는 각각 어떨때 사용하는게 좋을까요?

관련 챕터

39단원

참고

질문

iterable 객체의 용도에 대하여

상세내용

iterable 객체는 destruct, for ... of 문, 스프레드 문 등의 문법 등을 사용할 수 있는 객체 입니다. 이러한 특성은 일반 객체에서는 볼 수 없습니다. 그래서 일반 객체를 iterable 한 객체처럼 사용하고 싶을 때에는
변수이름Symbol.iterator 가 반환한 객체를 iterable 객체로 사용할 수가 있습니다.
제 개인적인 생각으로는 iterable 객체의 기능들을 상속 형태로 받으면, 각 객체가 iterable 에 너무 종속되는 경향이 있어
Symbol.Iterator 함수를 사용해 iterable 객체의 특성이 담긴 코드들을 붙였다 뗐다 하는 식으로 사용을 하면
더 자유롭지 않나 싶어서 이 함수가 필요한 것 같습니다.

참고

34 단원

질문: 원시 타입의 값을 변수에 할당했을때 객체 타입을 변수에 할당 했을 때의 차이점을 구체적으로 설명하시오.

챕터: 11

참고

질문

실행컨텍스트 컴포넌트인 VariableEnvironment LexicalEnviroment의 차이가 궁금합니다.

상세내용

[23장 p367]
생성초기에 두 컴포넌트는 하나의 동일한 렉시컬 환경을 참조한다. 이후 몇 가지 상황을 만나면
VariableEnvironment컴포넌트를 위한 새로운 렉시컬 환경을 생성하여, 이때부터 두 컴포넌트의 내용이 달라지는 경우도 있다.

해당 책은 두 컴포넌트를 구분하지 않고 렉시컬 환경으로 통일해 간략히 설명했는데요,
두 컴포넌트의 차이점이 궁금합니다.

관련 챕터

23장 p367

참고

질문

지연 평가의 이점은 해당 코드를 실행할때 데이터를 평가해서 계산하기 때문에 빠른 실행이 가능하다고 합니다.
그럼 지연 평가를 하게끔 만드는 코드는 iterable 인 코드를 사용할 때만 지연 평가가 이뤄지는 걸까요?

상세내용

지연 평가가 성능상 빠르다는 것이 인터넷 검색을 통해서 알게 된 사실입니다.
다만 이러한 지연평가가 이뤄지는 코드들은 무엇이 있을까요?
제 생각엔 iterable을 사용하는 코드만 해당하는 상황인 것 같은데, 그 외에 다른 것도 있는지 알고 싶네요.

참고

질문

switch문 if문으로 바꿔보기
주로 조건문을 사용할 때 if문을 많이 사용하지만 조건을 많이 설정해야 하는 경우 switch문이 효과적일 수 있습니다.

var data_type = '불리언'

if (data_type === '문자') {
  console.log('문자')
} else if (data_type === '불리언') {
  console.log('참(true)/거짓(false)')
} else if (data_type === '숫자') {
  console.log('숫자, 정수와 실수 구분 없이 하나의 숫자 타입만 존재')
} else if (data_type === 'undefined') {
  console.log('var 키워드로 선언된 변수에 암묵적으로 할당되는 값')
} else if (data_type === 'null') {
  console.log('값이 없다는 것을 의도적으로 명시할 때 사용하는 값')
} else if (
  data_type === '함수' ||
  data_type === '객체' ||
  data_type === '배열'
) {
  console.log('원시 데이터가 아닙니다.')
} else {
  console.log('원시 데이터를 입력하신게 맞는지 다시 한 번 확인하시기 바랍니다.')
}

var data_type = '불리언'

switch (data_type) {
  case '문자':
    console.log('문자')
    break
  case '불리언':
    console.log('참(true)/거짓(false)')
    break
  case '숫자':
    console.log('숫자, 정수와 실수 구분 없이 하나의 숫자 타입만 존재')
    break
  case 'undefined':
    console.log('var 키워드로 선언된 변수에 암묵적으로 할당되는 값')
    break
  case 'null':
    console.log('값이 없다는 것을 의도적으로 명시할 때 사용하는 값')
    break
  case '함수':
  case '객체':
  case '배열':
    console.log('원시 데이터가 아닙니다.')
    break
  default:
    console.log(
      '원시 데이터를 입력하신게 맞는지 다시 한 번 확인하시기 바랍니다.'
    )
}

관련 챕터

8-2 : 조건문

참고

• [MDN]switch

질문

프로미스를 이용할 때, 주의해야할 점은 뭐가 있을까요?

상세내용

JS엔진은 콜스택을 1개 가지기에 이를 구동하는 브라우저, node.js에서 동시성이 가능하게 지원해줍니다.

Web API중 하나인 setTimeout : 콜스택 push & pop -> task queue에 push
Promise : 콜스택 push & pop -> micro task queue에 push
콜스택이 비었을 때, 이벤트루프의 우선순위에 따라 제일 오래된 작업부터 콜스택에 옮겨 수행됩니다.
*이벤트루프 우선순위: micro task queue > task queue

이벤트루프 우선순위로 인해 태스크큐에 있는 작업이 밀리는 경우
예를들어, UI와 직결된 클릭, 텍스트 입력, 렌더링과 같은 이벤트가 가로 막힐 수 있습니다.

관련 챕터

45장 프로미스

참고

프로미스 활용 시, 고려해야할 부분- LINE 기술블로그
이벤트루프 동작방식 시각화

읽어볼만한 것

node.js - 이벤트 루프

질문

async await 은 비동기 처리를 할 때 많이 쓰이는 구문입니다. 하지만, 비동기 처리를 할때, 꼭 async await 을 써야만 할까요? 비동기 처리를 하는 상황도 여러가지가 있을 수 있는데, 정확히 어떤 상황에 async await 을 쓰는게 좋은지 특히 await 을 언제 써야 하는지 써주세요. 또한 책에서는 프로미스의 후속 처리 메서드 대신 async await 을 쓰는게 좋다고 했는데 그 이유는뭘까요?

관련 챕터

45단원

참고

중첩 함수와 콜백 함수는 둘다 고차 함수와 깊은 관계가 있다. 고차 함수를 구현 할 때 중첩 함수를 사용 하는 것과 콜백 함수를 사용하는 것에 어떤 차이가 있는가

12

참고

Array.prototype.push 와 Array.proptotype.concat 은 미묘한 차이가 있지만 기능은 비슷합니다. 그렇다면, 어떤 상황에서 전자의 함수인 push 를 쓰는게 적절하고, 어떨때 후자인 concat 함수를 쓰는 것이 적절할까요? 불변성과 연관지어서 생각을 해보면 좋을 것 같습니다.

27장

참고

질문

함수 내부에 정의한 중첩함수의 필요성에 대해 논의해보고 싶습니다.

상세내용

중첩함수는 함수 내부에 정의되어, 외부 함수를 도와주는 헬퍼 함수의 역할을 수행합니다.
하나의 함수가 다양한 일을 하기보다, 한 가지의 일만 수행하도록 작게 쪼개는 게 좋다고 생각해서,
중첩함수의 필요성에 의문이 들었습니다.

1. 중첩함수의 필요성(혹은 이점)은 뭘까요?
2. 하나의 함수가 한 가지의 일을 수행하도록 작게 쪼개는 게 좋은 이유는 무엇이라고 생각하나요?

참고

12장 p182

질문

비동기 프로그래밍이 가능한 fetch API와 XMLHttpRequest 객체의 차이점은 무엇일까요?

MDN에 따르면 XMLHttpRequest에서 fetch로 변화했다고 하는데, 어떤 점이 달라졌는지, 둘의 동작방식의 차이 등에 대해서
공부해보면 좋을 거 같습니다.

여러분은 주로 어떤 것을 써왔나요? 그 이유 혹은 장점은 어떤 게 있나요?

저는 fetch만 써봤고, XMLHttpRequest에 대해서는 책에서 간략히 언급한 내용밖에 모르는 상태지만, XMLHttpRequest보다 추상화 되어있어 직관적으로 이해하고 쓰기 편한거 같습니다.

관련 챕터

43장

참고

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

질문

스프레드 문법을 통해 객체의 불변성을 지킬 수 있습니다.
이 외에 객체의 불변성을 지킬 수 있는 다른 방법은 뭐가 있을까요?
또, 불변성을 신경쓰는 것에 대한 생각을 공유해주세요 : )

관련 챕터

35장

참고

const order = {id: 1, order: 'Americano', addMilk: true};
const change = {addMilk: false}; 
const newOrder = {...order, ...change }; // output: {id: 1, order: "Americano", addMilk: false}

질문

타이머 관련 함수들로 호출을 대한 스케쥴링을 하는데.

책에서 예시가 있는데 실제 현업이나 소스에 반영된 코드는 어떻게 사용하는 걸까요?

상세내용

간단하게 SetTimeOut 같은 함수들을 소개하고 있는데, 책에서는 디바운스와 스로틀에 관한 개념적인 설명과 함께 특정 라이브러리를 통해서 기능적인 부분을 해결하라고 되어있는데, 실제 사용하는 코드에서는 어떻게 사용하는 걸까요?

이 부분은 아직 제가 공부가 부족하여 단순한 호기심으로만 남아있습니다.

디바운스, 스로틀 기법에 대해서 라이브러리를 쓴 방법과 순수 자바스크립트 문법으로 구현한 방법이 궁금해지네요.

참고

41장 타이머.