• 카테고리

    질문 & 답변
  • 세부 분야

    프로그래밍 언어

  • 해결 여부

    미해결

[코딩 시간] JS {name: value} 이해

23.05.29 23:05 작성 조회수 167

0

안녕하세요 김영보 선생님.

약 1년 전에, 취준생 시절에 선생님의 자바스크립트 비기너 과정을 정말 열심히 들었고, 또 감사하게도 칭찬도 많이 해주셨는데요

 

취업후에 회사에서 사용하는 기술 스텍이 Java여서 Javascript와 멀어졌다가 이번에 진행하는 프로젝트에서 자바스크립트를 사용하게 되어 다시 선생님을 찾게 되었습니다.

 

1년 전에는 모든게 어렵게만 느껴졌는데 실무에서 1년 성실하게 구르다(?) 보니 그땐 이해가 안갔던 것들이 이해가 되네요. 정말 신기합니다! ㅎㅎ

 

1. 함수 선언문, 함수 호출, 함수 선언문

결과: 책 2

이유: 자바 스크립트 엔진이 book을 읽은 후, 두 getBook 선언문을 읽었다.

그러나 자바스크립트 동일한 메소드 명을 썻을 경우 아래의 메소드만 인식(사용)한다.

메소드 오버로딩도 마찬가지다. 허용하지 않고 아래의 함수를 읽는다.

  function book() {
      function getBook() {
          return "책1";
      }

      console.log(getBook());

      function getBook() {
          return "책2";
      }
  }

  book();

 

2. 함수 표현식, 함수 호출(), 함수 표현식

함수 호출이 변수를 통한 함수 호출인지 혹은 표현식 내의 함수 호출인지 명확하지 않아 두 경우로 나눔

2.1. 변수를 통한 함수 호출

결과: 3

이유: 초기화 단계에서 값이 있으면 반영하지 않으므로

 

temp = function plus(a, b) {
    return a + b;
}

console.log(temp(1,2));

temp = function plus(a, b) {
    return a - b;
}

 

2.2. 함수 표현식의 함수 호출

결과: 에러

이유: 표현식 내에서 사용된 함수는 변수 내의 스코프에 존재하므로 변수 내에서만 접근 가능함.

 

temp = function plus(a, b) {
      return a + b;
  }
  
  console.log(plus(1, 2));

  temp = function plus(a, b) {
      return a - b;
  }

 

3. 함수 선언문, 함수 호출(), 함수 표현식

결과: undefiend문, 함수 호출(), 함수 표현식

이유: 자바스크립트 엔진이

1. 함수를 읽고 (스코프에 등록하고)

2. 변수를 읽어 undefiend로 초기화 하고

3. 변수를 만나면 값을 할당하는데, 아직 변수를 만나지 않아 2번 과정에 그쳤기 때문

  function threeFunction() {
      return "세번째 경우의 수";
  }

  console.log(threeVariable);

  var threeVariable = threeFunction();

 

4. 함수 표현식, 함수 호출, 함수 선언문

결과: 김영보 선생님 최고

이유: 자바스크립트 엔진이

1. 함수를 읽고

2. 변수를 읽어 undefiend로 초기화 하고

3. 변수를 만나면 값을 할당하는데, 함수는 이미 호이스팅 되어 있으므로 word에 정상적으로 값이 할당됨

4. console.log가 찍히는 시점에는 이미 값이 제대로 들어가있기 때문에 값이 제대로 찍힘

  var word = lastFunction();

  console.log(word);

  function lastFunction() {
      return "김영보 선생님 최고";
  }

 

 

답변 1

답변을 작성해보세요.

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2023.05.30

안녕하세요, 인프런 AI 인턴이에요. 자바스크립트에 대한 질문을 해주셔서 감사합니다. 질문 내용에 대한 답변을 드리겠습니다.

  1. 함수 선언문, 함수 호출, 함수 선언문
  • 결과: 책2
  • 이유: 자바스크립트 엔진이 book() 함수를 읽은 후, 두 개의 getBook() 함수 선언문을 읽게 됩니다. 그러나 자바스크립트에서는 동일한 이름을 가진 메소드나 함수를 작성할 경우, 마지막에 작성된 것만 인식합니다. 따라서 책2가 반환됩니다.
  1. 함수 표현식, 함수 호출(), 함수 표현식함수 호출
  • 결과: 2.1 변수를 통한 함수 호출 - 3 / 2.2 함수 표현식의 함수 호출 - 에러
  • 이유: 변수를 통한 함수 호출 경우 temp 변수에 함수를 할당한 후, temp()를 호출하면 됩니다. 그러나 함수 표현식 내에서 사용된 함수는 변수 내의 스코프에 존재하므로 변수 내에서만 접근 가능합니다. 따라서 temp = function plus(a, b) { return a - b; }와 같은 식으로 수정해야 합니다.
  1. 함수 선언문, 함수 호출(), 함수 표현식
  • 결과: undefined
  • 이유: 자바스크립트 엔진은 함수를 읽고 (스코프에 등록하고) 변수를 읽어 undefined로 초기화한 후, 변수를 만나면 값을 할당합니다. 하지만 변수를 만나기 전에 console.log를 실행했기 때문에 값이 할당되기 전에 출력되어 undefined 가 출력됩니다.
  1. 함수 표현식, 함수 호출, 함수 선언문
  • 결과: 김영보 선생님 최고
  • 이유: 자바스크립트 엔진이 함수를 읽고 변수를 읽어 undefined로 초기화한 후, 변수를 만나면 값을 할당합니다. 함수는 이미 호이스팅 되어있기 때문에 word 변수에 정상적으로 값을 할당하게 되고, console.log 시점에 이미 값이 제대로 들어가있기 때문에 김영보 선생님 최고가 출력됩니다.

더 궁금하신 점이 있다면 언제든지 문의해주세요. 감사합니다.