[24/08/15-21] 안내 및 질문 모음집

[minjeongss]

📚 분량

8장-14장

🎤 발표자

김민석

질문

8장

• JavaScript에서 반복문 중 특히 for문과 while문의 차이점에 대해 자세히 설명해주세요.(김주영)

9장

• • ‘’와 +, *, !! 등은 명시적인건지 암묵적인 건지 모르겠어요 두 파트에 공통 서술되어있습니다.(이성훈)
• 단축 평가는 어떤 상황에서 유용하게 사용될 수 있나요?(김주영)

10장

• 132 page, person.last-name을 출력할 때 자바스크립트 엔진이 평가하는 과정은 어떻게 구성되는가?(김민정)

11장

• 150 page, 얕은 복사를 진행했을 때 c1과 o의 === 비교 결과가 false인 이유가 이해되지 않는다.(김민정)
  • 원시값은 원시값만을 비교하면 되기에, 실제 값이 일치하는지를 보면 된다?
  • 객체는 참조값을 비교하면 되기에, 참조한 주소가 동일한지를 보면 된다?
    • 객체 내부 1차원 프로퍼티는 원시값이기에 원시값 비교 방식을 선택하면 된다?
  • 위의 방식으로 이해하면 되는 것인가?

12장

• 자바스크립트가 매개변수의 개수와 인수의 개수가 일치하는지 체크하지 않는 이유 (김민석)
• 화살표 함수의 장단점(조천산)

[minjeongss]

8장

• JavaScript에서 반복문 중 특히 for문과 while문의 차이점에 대해 자세히 설명해주세요.(김주영)
  • for: 반복 횟수가 정해진 경우에 사용합니다
  • while: 특정 조건을 만족할 때까지 반복하는 경우에 사용합니다

9장

• ‘’와 +, *, !! 등은 명시적인건지 암묵적인 건지 모르겠어요 두 파트에 공통 서술되어있습니다.(이성훈)
  • 암묵적 타입 변환입니다
• 단축 평가는 어떤 상황에서 유용하게 사용될 수 있나요?(김주영)
  • 값을 초기화할 때 유용하게 사용됩니다

10장

• 132 page, person.last-name을 출력할 때 자바스크립트 엔진이 평가하는 과정은 어떻게 구성되는가?(김민정)
  1. person.last와 name을 - 연산자로 이어져 있다고 해석한다
  2. person.last와 name을 찾아서 두 값을 빼는 연산을 진행한다
  3. person.last는 존재하지 않아, undefined가 된다
  4. 환경에 따른 분리
     1. Node.js
        1. name이라는 변수는 존재하지 않아 Reference Error가 발생한다
     2. 브라우저
        1. 전역(window)에 name이라는 변수가 암묵적으로 존재한다
        2. 전역에 존재하는 name은 빈 문자열이다
        3. undefined-””가 연산되어, NaN이 된다
  5. 즉, 위의 단계로 평가하는 과정이 구성됩니다

11장

• 150 page, 얕은 복사를 진행했을 때 c1과 o의 === 비교 결과가 false인 이유가 이해되지 않는다.(김민정)

  • 원시값은 원시값만을 비교하면 되기에, 실제 값이 일치하는지를 보면 된다?
  • 객체는 참조값을 비교하면 되기에, 참조한 주소가 동일한지를 보면 된다?
    • 객체 내부 1차원 프로퍼티는 원시값이기에 원시값 비교 방식을 선택하면 된다?
  • 위의 방식으로 이해하면 되는 것인가?

  ---

  • 원시값 VS 객체
    • 원시값: 값 자체를 비교합니다
    • 객체: 참조값(메모리 주소)를 비교합니다
  • 객체 내부 프로퍼티 원시값 VS 객체
    • 객체 내부 프로퍼티 원시값: 값 자체를 비교합니다
    • 객체 내부 프로퍼티 객체: 참조값(메모리 주소)를 비교합니다
  • 객체 내부 얕은 복사 VS 깊은 복사
    • 얕은 복사
      • 원시값: 새로운 객체로 복사
      • 객체: 참조값(메모리 주소) 복사
    • 깊은 복사
      • 원시값: 새로운 객체로 복사
      • 객체: 새로운 객체로 복사
  • 예시

    • 객체 얕은 복사

      let obj1={name:"Kim",details:{type:"dev"}};
      let obj2={...obj1};
      
      //객체 자체
      console.log(obj1===obj2); //false
      
      //객체 내부 프로퍼티 원시값
      console.log(obj1.name===obj2.name); //true
      
      //객체 내부 프로퍼티 객체
      console.log(obj1.details===obj2.details); //true

    • 객체 깊은 복사

      let obj1={name:"Kim",details:{type:"dev"}};
      let obj2={...obj1};
      
      //객체 자체
      console.log(obj1===obj2); //false
      
      //객체 내부 프로퍼티 원시값
      console.log(obj1.name===obj2.name); //true
      
      //객체 내부 프로퍼티 객체
      console.log(obj1.details===obj2.details); //false

12장

• 자바스크립트가 매개변수의 개수와 인수의 개수가 일치하는지 체크하지 않는 이유 (김민석)
  • 언어 자체가 지니는 유연성에 의해 체크를 하지 않는다고 분석했습니다
• 화살표 함수의 장단점(조천산)
  • 장점
    • 짧은 함수 형태
    • this
      • 일반 함수: 바인딩할 객체 동적으로 결정됩니다
      • 화살표 함수: 상위 스코프의 this입니다
      • 고로 사용되는 위치와 무관하게 내부의 this을 변화시키지 않습니다
  • 단점
    • this
      • 생성한 객체에 접근할 수 없기에, 객체 메소드로는 일반 함수 사용이 좋습니다

[shlee9999]

8장

• JavaScript에서 반복문 중 특히 for문과 while문의 차이점에 대해 자세히 설명해주세요.(김주영)
  • for문 : 반복횟수를 알고있는 경우 주로 사용합니다.
  • while문 : 반복횟수는 모르지만 특정 조건이 만족될 때까지 반복해야하는 경우 사용합니다.

9장

• ‘’와 +, *, !! 등은 명시적인건지 암묵적인 건지 모르겠어요 두 파트에 공통 서술되어있습니다.(이성훈)
• 명시적인 타입 변환: 개발자가 의도적으로 타입을 변환하는 경우를 의미합니다. 예를 들어, +, *, !! 등을 사용해 값을 다른 타입으로 변환할 때 이를 명시적 변환이라고 합니다.
• 암묵적인 타입 변환: 자바스크립트 엔진이 자동으로 타입을 변환하는 경우를 말합니다. 예를 들어, 문자열과 숫자를 더할 때 자바스크립트는 자동으로 숫자를 문자열로 변환합니다.
• 단축 평가는 어떤 상황에서 유용하게 사용될 수 있나요?(김주영)
  • 단축 평가는 조건문에서 불필요한 계산을 피할 수 있어 성능 최적화에 유용합니다. 또한, 기본값을 설정하거나, 조건에 따라 함수를 호출하는 상황에서 코드의 간결성을 높여줍니다.

10장

• 132 page, person.last-name을 출력할 때 자바스크립트 엔진이 평가하는 과정은 어떻게 구성되는가?(김민정)
  • 우선 last-name은 식별자 네이밍 규칙을 준수하지 않으므로 원하는 결과를 얻지 못합니다.
  • person 객체를 찾고, 객체에 last 프로퍼티가 있는지 탐색합니다.
  • 없으므로 undefined를 반환하므로 undefined - name이 됩니다.
  • NaN이 출력됩니다.

11장

• 150 page, 얕은 복사를 진행했을 때 c1과 o의 === 비교 결과가 false인 이유가 이해되지 않는다.(김민정)

  • 우선 모두 원시값인 경우를 생각해봅시다.

    const o = { x: 1, y: 2 };
    const copy = o;
    const shallowCopy = { ...o };
    console.log(o === copy); // true
    console.log(o === shallowCopy); // false

  • copy는 o의 주솟값 자체를 복사하기 때문에 o === copy가 true입니다.

  • shallowCopy의 spread 연산자는 o의 양 끝 중괄호를 한 번 씩 벗겨준다고 생각하시면 됩니다. 한 단계까지는 새로운 메모리 공간에 할당하는 겁니다.
    새로운 메모리 공간에 { x: 1, y: 2 } 를 저장합니다.
    주솟값이 달라졌으므로 o ≠ shallowCopy 입니다.

  • 150 페이지의 예제에서 obj만 따로 빼서 예를 들어 보겠습니다.

    const obj = { y: 1 };
    const o = { x: obj };
    const shallowCopy = { ...o };
    console.log(shallowCopy === o); // false
    console.log(shallowCopy.x === o.x); // true
    console.log(shallowCopy.x === obj); // true
    

  • 위 예제와 같은 이유로 shallowCopy는 새로운 메모리 공간에 같은 값을 할당하므로 o와 같지 않습니다

  • 하지만 shallowCopy.x는 obj의 주솟값이 그대로 복사되기 때문에
    shallowCopy.x = o.x = obj입니다.

  • 그림으로 한 번 그려봤습니당 (주솟값은 아무숫자나 쓴거에용)

  

12장

• 자바스크립트가 매개변수의 개수와 인수의 개수가 일치하는지 체크하지 않는 이유 (김민석)
  • 자바스크립트는 함수의 유연성을 높이기 위해 매개변수의 개수를 엄격하게 제한하지 않습니다. 함수 내에서 arguments 객체나 기본 매개변수(default parameters)를 사용해 인수를 관리할 수 있습니다.
• 화살표 함수의 장단점(조천산)
  • 장점:
    • 문법이 간결하여 가독성이 좋아집니다.
    • this가 정적으로 바인딩되어, 함수 내에서의 this는 선언된 위치에서의 this와 동일합니다.
  • 단점:
    • this가 정적이기 때문에, 일반 함수처럼 this를 동적으로 바인딩해야 하는 상황에서는 적합하지 않습니다.
    • arguments 객체를 사용할 수 없습니다(단, Rest parameter를 사용하여 대체 가능합니다).

[se0kcess]

8장

• JavaScript에서 반복문 중 특히 for문과 while문의 차이점에 대해 자세히 설명해주세요.(김주영)
  • for문 : 배열 순회 or 정해진 횟수만큼 반복 / 조건, 증감, 초기화를 한줄에 작성
  • while 문 : 조건만 작성 / 유연성 높음

9장

• ‘’와 +, *, !! 등은 명시적인건지 암묵적인 건지 모르겠어요 두 파트에 공통 서술되어있습니다.(이성훈)
  • 이중 부정 연산자는 명시적 변환 (boolean 타입 반환) / 나머지는 암묵적 타입 변환
• 단축 평가는 어떤 상황에서 유용하게 사용될 수 있나요?(김주영)
  • 기본 값 설정
  • 조건부 속성 접근
  • 조건부 함수 실행
  • 객체의 메소드 호출 전

10장

• 132 page, person.last-name을 출력할 때 자바스크립트 엔진이 평가하는 과정은 어떻게 구성되는가?(김민정)
  • person.last 평가 -> 해당 프로퍼티 존재 x -> undefined
  • name 식별자 추적 -> name 식별자가 없으므로 ReferenceError 발생 (Node.js 환경)
  • 암묵적으로 존재하는 전역 변수 name = 빈문자열 이므로 person = ''
  • person.last-name -> undefined - ''가 되므로 NaN

11장

• 150 page, 얕은 복사를 진행했을 때 c1과 o의 === 비교 결과가 false인 이유가 이해되지 않는다.(김민정)

  • spread 연산자를 사용해 복사 시 c1과 o는 서로 다른 객체이기 때문에 c1 === o -> false

  • 중첩 객체인 c1.x와 o.x는 얕은 복사가 되어 같은 주소를 참조하기 때문에(참조복사) c1.x === o.x -> true

  • 깊은 복사 시에는 c2와 o는 서로 다른 객체이므로 c1 === o -> false

  • c2.x와 o.x도 서로 다른 객체이므로 c1.x === o -> false

12장

• 자바스크립트가 매개변수의 개수와 인수의 개수가 일치하는지 체크하지 않는 이유 (김민석)

  • 함수가 다양한 수의 인자를 받을 수 있게 함
  • 함수 오버로딩 기능 대체
  • 선택적 매개변수 지원

• 화살표 함수의 장단점(조천산)

• 장점

  • 코드를 간결하게 만든다
  • 단일 표현식에서 중괄호와 return 생략 가능
  • 화살표 함수의 this는 외부 스코프의 this를 사용

• 단점

  • argument 객체 사용 불가
  • 생성자로 사용 불가
  • prototype 프로퍼티 x
  • this의 예상치 못한 바인딩

[joarthvr]

8장

• JavaScript에서 반복문 중 특히 for문과 while문의 차이점에 대해 자세히 설명해주세요.(김주영)
  • for문과 while문은 문은 주어진 조건식의 평가 결과가 참이면 코드 블록을 계속 반복합니다 while문은 반복횟수가 명확하지 않을 때 주로 사용되고 for문은 반복 횟수가 명확할 때 주로 사용합니다.

9장

• ‘’와 +, *, !! 등은 명시적인건지 암묵적인 건지 모르겠어요 두 파트에 공통 서술되어있습니다.(이성훈)
  빈 문자열 ('')

주로 명시적으로 사용됩니다.
예: let emptyString = '';

더하기 연산자 (+)

문자열 연결에 사용될 때 암묵적 변환이 발생할 수 있습니다.
예: "5" + 3 // 결과: "53" (숫자 3이 문자열로 암묵적 변환)

곱하기 연산자 (*)

주로 명시적으로 사용되지만, 피연산자 중 하나가 문자열인 경우 암묵적 변환이 발생합니다.
예: "5" * 3 // 결과: 15 (문자열 "5"가 숫자로 암묵적 변환)

이중 부정 연산자 (!!)

값을 불리언으로 명시적으로 변환하는 데 사용됩니다.
예: !!0 // 결과: false
!!"hello" // 결과: true

이러한 연산자들의 사용이 명시적인지 암묵적인지는 주로 context와 의도에 따라 달라집니다:

명시적 변환: 개발자가 의도적으로 타입 변환을 수행하는 경우
예: Number("5"), String(42), Boolean(1)
암묵적 변환: 자바스크립트 엔진이 자동으로 타입을 변환하는 경우
예: "5" + 3, "5" == 5

!! 연산자는 주로 명시적 변환을 위해 사용되지만, + 와 * 연산자는 상황에 따라 암묵적 변환을 일으킬 수 있습니다.
코드의 가독성과 예측 가능성을 높이기 위해서는 가능한 한 명시적 변환을 사용하는 것이 좋습니다. 암묵적 변환은 때때로 예기치 않은 결과를 초래할 수 있기 때문입니다.

• 단축 평가는 어떤 상황에서 유용하게 사용될 수 있나요?(김주영)

  1. 기본값 설정:

     const name = userInput || "Anonymous";

  2. 조건부 함수 실행:

     isLoggedIn && showUserProfile();

     로그인된 경우에만 프로필을 표시합니다.

  3. 객체 속성 안전하게 접근:

     const streetName = user && user.address && user.address.street;

     중첩된 객체 속성에 안전하게 접근할 수 있습니다.

  4. 조건부 렌더링 (React:

     {isLoading && <LoadingSpinner />}

     로딩 중일 때만 스피너를 표시합니다.

  5. 에러 방지:

     const result = arr && arr.length > 0 && arr[0].name;

     배열이 존재하고 비어있지 않을 때만 첫 요소의 name에 접근합니다.

  6. 함수 매개변수 기본값 (ES6 이전):

     function greet(name) {
       name = name || "Guest";
       console.log("Hello, " + name);
     }

  7. 조건부 메서드 호출:

     object.someMethod && object.someMethod();

     메서드가 존재할 때만 호출합니다.

  단축 평가는 코드를 간결하게 만들고 불필요한 연산을 줄이는 데 도움이 됩니다.

  그러나 과도한 사용은 가독성을 해칠 수 있으므로 적절히 사용하는 것이 중요합니다.

10장

• 132 page, person.last-name을 출력할 때 자바스크립트 엔진이 평가하는 과정은 어떻게 구성되는가?(김민정)
  1. person.last를 평가
  2. person에 last가 없음
  3. person.last ⇒ undefined
  4. name이라는 식별자를 찾는다(빼기 연산자로 연결되있다고 생각해서?)
  5. name이라는 전연 변수가 window에 존재한다 (기본값 [])
  6. undefined - [] ⇒ NaN

11장

• 150 page, 얕은 복사를 진행했을 때 c1과 o의 === 비교 결과가 false인 이유가 이해되지 않는다.(김민정)

  • 얇은 복사
    • 객체에 중첩돼 있는 객체의 경우 참조 값을 복사
  • 깊은 복사
    • 객체에 중첩돼 있는 객체까지 모두 복사 원시 값처럼 완전한 복사본

  스프레드 문법으로 다른 객체를 만들어서 할당

12장

• 자바스크립트가 매개변수의 개수와 인수의 개수가 일치하는지 체크하지 않는 이유 (김민석)

  1. 유연성: 자바스크립트는 동적 타입 언어로, 함수 호출 시 유연성을 제공합니다. 이를 통해 개발자가 다양한 상황에서 함수를 사용할 수 있습니다.
  2. 선택적 매개변수: 함수를 정의할 때 일부 매개변수를 선택적으로 만들 수 있습니다. 이는 함수의 재사용성을 높입니다.
  3. 가변 인자: 함수가 다양한 수의 인수를 받을 수 있도록 합니다. 이는 arguments 객체나 나머지 매개변수(rest parameters)를 통해 구현됩니다.
  4. 기본값 지원: ES6부터는 매개변수에 기본값을 설정할 수 있어, 인수가 전달되지 않았을 때 사용할 값을 지정할 수 있습니다.
  5. 성능: 매개변수와 인수의 개수를 매번 체크하는 것은 추가적인 연산을 필요로 하므로, 이를 생략함으로써 성능상의 이점을 얻을 수 있습니다.

• 화살표 함수의 장단점(조천산)

  장점:

  1. 간결한 문법:
     화살표 함수는 기존의 함수 표현식보다 더 간결한 문법을 제공합니다.

  2. 암시적 반환:
     단일 표현식을 반환하는 경우, return 키워드와 중괄호를 생략할 수 있습니다.

     const square = x => x * x;

  3. 렉시컬 this 바인딩:
     화살표 함수는 자신만의 this를 생성하지 않고, 외부 스코프의 this를 그대로 사용합니다. 이는 콜백 함수에서 this 문제를 해결하는 데 유용합니다.

     const obj = {
       data: [1, 2, 3],
       processData() {
         // 화살표 함수 사용
         this.data.forEach(num => {
           console.log(this.data);  // 'this'는 obj를 가리킴
         });
       }
     };

  4. 간결한 메서드 정의:
     객체 리터럴에서 메서드를 정의할 때 더 간결한 문법을 제공합니다.

     const obj = {
       method: () => {
         // ...
       }
     };

  단점:

  1. this 바인딩의 제한:
     화살표 함수의 렉시컬 this 바인딩은 때때로 단점이 될 수 있습니다. 예를 들어, 객체의 메서드로 사용될 때 예상치 못한 결과를 낳을 수 있습니다.

     const obj = {
       value: 42,
       getValue: () => {
         return this.value;  // 'this'는 obj가 아닌 외부 스코프(대개는 전역 객체)를 가리킴
       }
     };
     console.log(obj.getValue());  // undefined

  2. arguments 객체 부재:
     화살표 함수에는 arguments 객체가 없습니다. 대신 나머지 매개변수(rest parameters)를 사용해야 합니다.

     const sum = (...args) => args.reduce((a, b) => a + b, 0);

  3. 생성자로 사용 불가:
     화살표 함수는 new 키워드와 함께 생성자로 사용할 수 없습니다.

     const Person = (name) => {
       this.name = name;
     };
     const john = new Person('John');  // TypeError: Person is not a constructor

  4. yield 키워드 사용 불가:
     화살표 함수는 제너레이터 함수로 사용될 수 없습니다.

[kimjuyoung78]

질문

8장

• JavaScript에서 반복문 중 특히 for문과 while문의 차이점에 대해 자세히 설명해주세요.(김주영)
• • for문은 반복 횟수가 명확할 때 사용용되며 while 문은 반복 횟수가 불명확하고 조건에 따라 반복할 때 주로 사용한다.
• • 가독성 측면에서도 for문은 반복과 관련된 모든 요소가 한 줄에 있어 좋지만, while 문은 조건만 명시되어 있어 반복 로직을 파학하는데 전체 코드를 봐야 한다.

9장

• ‘’와 +, *, !! 등은 명시적인건지 암묵적인 건지 모르겠어요 두 파트에 공통 서술되어있습니다.(이성훈)

• • 모두 암시적 변환히지만 덧셈 연산자는 단항 연산자로 사용될 때 명시적 변환으로 볼 수 있다고도 한다.

• 단축 평가는 어떤 상황에서 유용하게 사용될 수 있나요?(김주영)

1. 조건부 실행 (예시 : condition && doSomething())
2. 기본값 설정 (예시 : const name = inputName || 'Anonymous')

10장

• 132 page, person.last-name을 출력할 때 자바스크립트 엔진이 평가하는 과정은 어떻게 구성되는가?(김민정)

1. 먼저 person.last 평가 -> undetind로 평가 됨
2. porson.last-name == undefind-name
3. name 이라는 식별자 갖게 됨 (프로퍼티 키 X)
   4-1. Node.js : "ReferenceError : name is not defind" 에러 발생 -> name 이라는 식별자 선언 없기 때문
   4-2. 브라우저 환경 : "NaN" name 이라는 전역 변수 암묵적으로 존재. == undefind - ''

11장

• 150 page, 얕은 복사를 진행했을 때 c1과 o의 === 비교 결과가 false인 이유가 이해되지 않는다.(김민정)
  • 원시값은 원시값만을 비교하면 되기에, 실제 값이 일치하는지를 보면 된다?
  • 객체는 참조값을 비교하면 되기에, 참조한 주소가 동일한지를 보면 된다?
    • 객체 내부 1차원 프로퍼티는 원시값이기에 원시값 비교 방식을 선택하면 된다?
  • 위의 방식으로 이해하면 되는 것인가?

---

1. 원시값 비교 : 값 자체를 비교한다
   const v = 1;와 const c1 = v;에서 c1 === v가 true인 이유
2. 객체 비교 : 객체는 참조로 비교된다.
   const o = { x: 1 };와 const c1 = { ...o };에서 c1 === o가 false인 이유
3. 얕은 복사와 깊은 복사

• 얖은 복사는 1차원 프로퍼티만 새로운 객체로 복사
• 깊은 복사는 모든 중첩 객체까지 새로운 객체로 복사
  ➡️ 서로 다른 객체(다른 메모리 주소)를 참조하고 있기 때문에 c1 === 0 가 false 이다.

12장

• 자바스크립트가 매개변수의 개수와 인수의 개수가 일치하는지 체크하지 않는 이유 (김민석)

• • 유연성 : 다양한 인수 개수로 함수를 호출할 수 있게 한다
• • 기본값 설정 : ES6 부터 매개변수의 기본값 설정이 가능하다.
• • arguments : 모든 인수에 접근 가능하다.

• 화살표 함수의 장단점(조천산)

• • 장점 : 간결한 문법, 암시적인 변환
• • 단점 : 생성자 함수로 사용 불가, 메서드로 사용시 주의 필요하다.