JavaScript 입문 : 객체를 가리키는 this - 확실하게 개념 익히기 (3) : 화살표 함수 및 Strict Mode

이제 this의 개념이 어느정도 잡혀 가는 느낌입니다. 만일 this라는 개념이 헷갈리거나 하면 반드시 확실하게 개념익히기 1탄과 2탄을 꼭 읽어보시기 바랍니다. 

 

this라는 개념의 범위가 넓겠지만 1탄과 2탄이 전부이고요. 금일 정리할 사항은 중요하지만 잘 모르는 경우 잘 사용안해도 될 것 같습니다. 

 

자바스크립트 처음 공부할 때 함수사용에 있어 function(  )  {   }나 (   ) => {   }함수는 같게 사용한다고 일단 머리속에 넣오 놓았습니다만 사실 약간의 차이가 있다고 했는데 그 중 하나가 this를 활용할 때 일반함수식과 화살표 함수식에서 차이를 볼 수 있습니다. 

 

2탄에서 사용한 예제를 가지고 보겠습니다. 

 

1. 화살표 함수에서의 this

 

다음 코드를 보면 첫번째 콘솔은 fruit 객체를 나타내고 두번째 콘솔은 window를 나타냅니다. 

 

 

 

이는 setTimeout(  )의 시스템 속성상 this는 window를 나타내기 때문에 fruit객체로 접근하기 위해서는 bind(  ) 메소드를 활용 하였습니다. 

 

setTimeout(  ) 메소드 외부에 형성된 this( = fruit)를 setTimeout에 적용 시킬경우 bind(  ) 메소드 없이 화살표 함수로 바꾸면 적용이 됩니다. 

 

 

 

화살표 함수가 사용된 this를 정의하자면 

 

"화살표 함수는 자신을 포함하고 있는 외부 scope에서 this를 계승받는다."라고 이해하면 되겠습니다. 

 

 

2. 엄격 모드 (Strict Mode)

 

Strict Mode에서는 기본값이 undefined가 됩니다. 원래 호출키워드가 없는 경우 this는 window였던 것을 기억하여야 하지만 유일하게 Strct Mode에서는 window가 undefined로 바뀝니다. 

 

엄격모드란 간단히 말해 일반적인 자바스크립트에서 에러없이 허용되었던 코드들이 코드가 무거워지고 복잡해 지면 원인을 알 수 없이 버그가 생기는 경우가 있습니다. 이러한 실수들을 오류로 바꾸어 놓는 모드라고 보면 됩니다. 

 

여하튼 엄격모드를 사용하기 이해서는 <script> 맨 상위에 "use strict";를 선언합니다. 

 

그러면 this가 window인 예제에 strict 모드를 적용해 보겠습니다. 

 

 

 

상기 콘솔값을 보면 this는 undefined이며 person도 window도 아닌 것으로 나타납니다. 참고로 우선 알아두면 좋을 듯 합니다.