-
이제 자바스크립트를 공부하고 있다. 스크립트 언어답게 익히기 쉬운 것 같다. C/C++처럼 변수 타입과 값의 타입을 신경 쓰지 않아도 되고, 세미콜론은 안 붙여도 실행은 되는 것 같은데 관습적으로 붙이는 걸 권장하는 것 같다. 기초적인 타입과 반복문들은 휙휙 넘기고 오브젝트를 공부하고 있다. 클래스처럼 변수와 함수를 담을 수 있고, 파이썬의 사전처럼 키, 값으로 정의하도록 되어있다.
오브젝트를 공부하는 중에 좀 중요한 개념들은 정리를 해야 할 것 같아서 링크 몇 개를 달아 놓으려고 한다.
https://developer.mozilla.org/en-US/docs/Glossary/Global_object
오브젝트 내부 { }로 덮은 영역 안의 변수들은 기본적으로 지역변수들이기 때문에 오브젝트 멤버 함수 또는 변수들이 멤버 변수를 전역 변수처럼 사용할 수 없다. 그래서 this를 이용해서 멤버 변수를 접근해야 한다. 근데 멤버 함수를 애로우 함수로 정의하였을 경우 이 방법이 통하지 않게 된다.
const goat = { dietType: 'herbivore', makeSound() { console.log('baaa'); }, diet: () => { console.log(this.dietType); } }; goat.diet();
코드카데미에서는 위와 같은 코드를 이용하여 설명을 해준다. diet가 애로우 함수로 정의되어있는데 함수 내부에 dietType이라는 속성 값을 불러오는데 this를 사용하고 있다. 그러나 애로우 함수의 this는 가장 가까운 영역에 있는 this로 정의된다. 위 코드는 this에 관하여 아무런 정의가 없으니 this는 global 객체와 바인딩되게 된다. 그리고 global 객체는 dietType이 없으므로 위 코드는 undefined를 화면에 출력하게 된다.
코드카데미는 설명을 간단하게 해주는 편이어서 무슨말인지 언뜻 이해가 잘 안 되었는데 이 문서의 바인딩되지 않는 this라는 항목을 읽어보니 무슨 말인지 이해가 되었다.
'웹개발공부' 카테고리의 다른 글
자바스크립트 비동기 처리 (0) 2020.05.08 자바스크립트 정적 메서드 (0) 2020.05.07 웹 부스트코스 프로젝트 (0) 2020.05.05 html과 css (0) 2020.05.04 코드카데미를 이용한 웹프로그래밍 공부 (0) 2020.05.03