본문 바로가기

장원익 기술블로그

📺 Front End/-- JS & ES6+13

[Javascript-Core] 메서드 내부에서의 this 그리고 함수와 메서드의 차이점 (부제) :: JS에서 말하는 This에 정확한 의미와 다양한 상황에서의 this(2) 오늘 알아볼 것은 this이다. 나는 객체 지향 언어인 java를 먼저 배웠기 때문에 js에서 말하는 this를 단지 class 내부의 프로퍼티에 대한 포인터역할로써 이해를 했었지만, js에서 말하는 this는 훨씬 다양하고 심오한 기능을 수행하고 있었다. 오늘 그 심오한 기능들에 대해서 짚어보자. 해당 글은 4부작으로 나뉘어져 있습니다. this에 대한 모든 것을 완벽히 파악하고싶다면 한 번 봐보는 것을 권장합니다. 전역 공간에서의 this 메서드 내부에서의 this 함수 내부에서의 this 콜백 함수에서의 this What is this 최대의 docs를 제공한다는 w3c에는 다음과 같이 this의 기능을 분류한다. 메서드에서 this는 그의 주인 객체(Owner Obj)를 뜻한다. this가 단독으.. 2020. 7. 28.

[Javascript-Core] 전역 공간에서의 this (부제) ::JS에서 말하는 This에 정확한 의미와 다양한 상황에서의 this(1) 오늘 알아볼 것은 this이다. 나는 객체 지향 언어인 java를 먼저 배웠기 때문에 js에서 말하는 this를 단지 class 내부의 프로퍼티에 대한 포인터역할로써 이해를 했었지만, js에서 말하는 this는 훨씬 다양하고 심오한 기능을 수행하고 있었다. 오늘 그 심오한 기능들에 대해서 짚어보자. 해당 글은 4부작으로 나뉘어져 있습니다. this에 대한 모든 것을 완벽히 파악하고싶다면 한 번 봐보는 것을 권장합니다. 전역 공간에서의 this 메서드 내부에서의 this 함수 내부에서의 this 콜백 함수에서의 this What is this 최대의 docs를 제공한다는 w3c에는 다음과 같이 this의 기능을 분류한다. 메서드에서 this는 그의 주인 객체(Owner Obj)를 뜻한다. this가 단독으.. 2020. 7. 28.

[Javascript-Core] Execution Context와 Hoisting의 상관 관계와 오해, 그리고 이해 부제 :: EnvironmentRecord가 Hoisting을 하는 방법 호이스팅(Hoisting) 호이스팅은 지난 시간에 이야기 했던 실행 컨텍스트의 Creation Phase에서 어떤 방식으로 작동하는지에 대한 방식인데, MDN에서는 다음과 같이 경고하고 있다. 보통 사람들이 호이스팅이 일어나면 변수나 함수가 코드 상단으로 끌어올려진다라고 하는데, 이는 잘못된 정보이다. 변수나 함수 코드는 실제 위치 그대로 존재하고 개념적으로 상단으로 끌어올려진다라고 표현하는게 정확하다. Hoisting을 이해했는지 확인해보자. MDN에서는 위와 같은 방식을 호이스팅이라고 예시를 제시하고 있다. 그럼 다음과 같은 상황에서 각각의 x는 어떤 방식으로 출력될지 스스로에게 대답해보자. 결과가 무엇일지 체크해보자. 1 undefined 2 1 1 2 EnvironmentRecord에 의한 Hoi.. 2020. 7. 28.

[Javascript-Core] Execution Context, 실행 문맥에 관하여 알아보자. Execution Context 실행 컨텍스트는 실행할 코드에 필요한 환경 정보를 모은 객체를 뜻한다. 이는, OS를 학습하다가 마주하게 되는 실행 문맥, 실행 컨텍스트, 익스큐션 컨텍스트와 다들 동일한 개념이다. 조금 쉽게 이야기 한다면 예를 들어서 우리가 var a = 10; function hello() { var b = "hello"; return b; } 와 같은 코드가 있다면 여기서 실행에 필요한 환경 정보는 var a = 10과 hello()함수와 var b = 'hello'가 있을 것이다. 식별자와 변수등과 같은 정보를 가리키고 있는 객체를 실행 컨텍스트라고 한다. 이런 실행 컨텍스트는 콜 스택에 의해 실행 환경에 대한 순서를 보장하는데, 순차적으로 코드를 Interpreting 하면서 콜.. 2020. 7. 27.

[Javascript-Core] 자바스크립트의 null과 undefined 내 주 언어는 자바이다. 자바에서 보통 값이 없음을 표현하는 방법은 대표적으로 null이 있다. Spring 개발을 하다가 자주 마주하게 되는 nullPointException. 하지만 자바스크립트에서 없음을 표현하는 방법은 2 가지가 있다. null undefined 오늘 알아볼 것은 이 두 가지 없음을 표현하는 방법이다. null null은 대표적으로 값이 없음을 의미한다. null은 변수 할당 과정에서 참조하고 있지 않음을 나타낸다. 하지만 우리가 null을 만나기 위해서는 임의적으로 null이라는 것을 할당해줘야 하므로 데이터 타입으로 분류한다. 이러한 null을 고의적인 비할당이라고 표현하기도 한다. undefined undefined는 변수를 생성하고 아직 할당되지 않았음을 의미한다. 이런 상.. 2019. 11. 29.

[Javascript-Core] 변수의 선언 var과 let 그리고const의 차이 :: Difference among var and let and const 자바스크립트를 학습하기 위해서 책을 봤을 때, 대부분의 책에서 var으로 변수를 선언하라고 가르친다. 하지만 내가 예전에 소마를 준비할 때 소마 시험을 위해 잠깐 자바스크립트를 공부했던 적이 있는데, 그 때 var대신 let으로 변수를 선언하라고 했던 글을 본 적이 있었다. 오늘은 그 두 차이점을 확실히 비교해보고 넘어가보자. 결론 var let const 재선언 O X X 재할당 O O X 생존 범위 Funtion Scope(함수) Block Scope(중괄호) Block Scope(중괄호) 변수 자바스크립트에서도 다른 언어와 같이 변수에 값을 담을 수 있다. 변수는 variable으로 변할 수 있는 데이터를 담는 그릇의 역할을 수행한다. 우리가 변수를 사용하는 이유는 각각 다른 알고리즘을 통해서 특정.. 2019. 11. 29.

이전 1 2 3 다음

티스토리툴바