크롬이이 루프에서 내 변수를 선언하게 만드는 이유는 무엇입니까?

Question

이 동작은 이상합니다.

myObjects = [ 
    { 
    name: 'List 1', 
    invitations: [ 
     { email: 'ralph@ralph.com', stamp: '1234' }, 
     { email: 'mike@mike.com', stamp: '4576' } 
    ] 
    }, 
    { 
    name: 'List 2', 
    invitations: [ 
     { email: 'steve@steve.com', stamp: '5678' }, 
     { email: 'bob@bob.com', stamp: '6789' } 
    ] 
    }, 
] 

내가 초대 배열이 특정 이메일 주소를 포함하는 개체를 필터링해야하는, 그래서 잘 작동하는이를하고있어 내가 숭고한에서 테스트 할 때 : I는 다음과 같습니다 객체의 배열을 가지고 텍스트 :

filteredObjects = myObjects.filter(obj => { 
    for (var invitation of obj.invitations) { 
    if (invitation.email == 'bob@bob.com') return true; 
    } 
}); 

: 나는 크롬에서 이것을 실행하려고하면

filteredObjects = myObjects.filter(obj => { 
    for (invitation of obj.invitations) { 
    if (invitation.email == 'bob@bob.com') return true; 
    } 
}); 

// [ { name: 'List 2', invitations: [ [Object], [Object] ] } ] 

그러나, 나에게 (for 루프에 추가 된 "VAR"를 참고) 어떤 이유로 for 루프에서 변수를 선언 만들고있다

Uncaught (in promise) ReferenceError: invitation is not defined 

내가 왜 이런 일을 이해하려면, 그리고 경우에 아마 쓸 수있는 더 좋은 방법이 : 나는 ("VAR"와) 변수를 선언하지 않으면 (10), 내 크롬 콘솔에서 오류가 발생 내 필터.

Answer 1

크롬에서 변수 invitation을 선언해야하는 경우 암시 적이거나 우발적 인 전역 변수를 방지하기 때문입니다. 이는 코드가 Chrome이 strict 모드로 간주하는 섹션에 있기 때문입니다. strict 모드로 코드를 처리하는 이유를 정확하게 구분하려면 더 큰 코드 컨텍스트를 표시해야합니다.

화살표 기능 본문을 strict 모드에서 자동으로 만든 브라우저 (예 : Firefox의 화살표 기능 초기 버전)가 있지만 표준에 포함되어 있지는 않습니다. 또는 필터 문이있는이 큰 코드 컨텍스트는 다른 이유로 인해 엄격 모드 일 수 있습니다.

아주 좋은 점입니다. 모든 변수는 의도 된 범위 내에서 명시 적으로 선언되어야합니다. 의도하지 않은 암시 적 또는 자동 전역 변수를 사용하여 코드를 작성하게되면 충돌하는 전역 변수를 실수로 생성하고 사용하는 방법이됩니다. 동작에서 간헐적 인 버그 (특히 비동기 작업과 관련된 경우)를 추적하기가 어렵습니다.

엄격한 모드가 자동으로 적용됩니다 :

1. 은 외부에서 코드 수동 기능 범위의 상단에 'use strict';와 strict 모드로 선언된다.

2. ES6 Class 구문으로 선언 된 메서드는 자동으로 strict 모드에 있습니다.

당신은 this article on MDN 및 this article on using Class에 엄격 모드의 효과의 전체 목록을 볼 수 있습니다.