목록프로젝트/자바스크립트 (13)
minzzl
Scope 우선 아래의 코드부터 보겠습니다. x와 y는 자신이 선언된 위치에 따라 본인의 유효범위가 결정되었습니다. 즉 변수 x, y에 대해 다른 코드가 참조할 수 있는 어떠한 범위가 결정 될 것 인데요, 이러한 유효범위를 scope라고 합니다. scope 정의 변수 이름, 함수 이름, 클래스 이름과 같은 식별자가 본인이 선언된 위치에 따라 다른 코드에서 자신이 참조 될 수 있을지 없을지 결정되는 것 그렇다면 만약 변수가 전역에 선언되어있지만 지역에는 없고, 지역에도 선언되어있고 전역에도 선언되어 있다면 어떻게 실행이될까요? scope 체인 위의 그림과 같이 함수는 중첩이 될 수 있습니다. 각 함수들의 중첩이 일어난다면 scope도 중첩이 일어납니다. 이는 scope가 함수의 중첩에 의해 계층적인 구조를..
웹 사이트에서 버튼을 클릭했다고 가정해봅시다. 만약 해당 버튼이 다음과 같다고 했을 때 이벤트의 시발점은 어디일까요? 버튼 네 맞습니다. div를 이벤트의 시발점이라고 하는데요, 즉 div를 눌렀을 때 클릭 이벤트가 있으면 실행이 됩니다. 그런데, 우리는 div를 눌렀지만 div 하나 만을 눌렀다고 하기는 굉장히 애매합니다. 왜냐하면, div를 감싸는 body도 있고 그를 감싸는 html도 있기 때문입니다. 우리는 div를 클릭한것이라고 해야할까요? 아님 body를 클릭했다고 해야할까요? 그래서 브라우저는 우리가 div를 눌렀지만, div가 단독으로 있는 것이 아닌 여러개의 부모가 있다면, 만약 부모들에게도 click event가 있다면 다 같이 실행을 시켜버립니다. 도미노 처럼 말이죠. 즉 이벤트의 원..
this 함수 내에서 함수 호출 맥락(context) 맥락이라는 것은 상황에 따라서 달라진다는 의미인데, 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라집니다. this 라는 키워드는 함수 안에서 사용되는 키워드이며, 함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 합니다. this는 함수 안에서만 사용될 수 있으며 변수 안에 담겨있는 값의 의미는 그 함수를 어떻게 호출했느냐에 따라 달라집니다. 함수의 호출 기본적으로 this는 전역 객체에 바인딩 된다. 전역 함수는 물론 내부 함수의 경우도 this는 전역 객체에 바인딩 됩니다. function foo() { console.log("foo's this: ", this); // win..
Javascript는 기본적으로 hosting을 제외하면 동기적인 언어입니다. 여기서 동기적이라는 것은 위에서 아래로 순차적으로 실행되는 것을 의미합니다. console.log('1'); console.log('2'); console.log('3'); // 1 // 2 // 3 만약 코드를 실행하는데 동기 적으로 처리해야한다면 어떤일이 발생할까요? 짜장면을 배달하고 손님이 다 먹은 후 그릇을 가져오는 로직이 있다고 가정해봅시다. 해당 로직의 경우 손님이 다 먹을 때 까지 기다려야하므로 효율성이 아주 떨어집니다. 이렇게 행동해야한다면 너무 비효율적이겠죠? 그래서 이 때 나온 개념이 비동기입니다. 앞선 예시를 비동기적으로 처리한다면 짜장면 배달 후 손님이 다 먹을 때까지 기다리는 것이아니라, 뒤에 해야할 일..
이 글에서는 Server와의 통신 시 이루어지는 JSON에 대해서 알아보겠습니다. JSON Javascript Object Notation ECMAScript 3rd 1999에 발표된 Javascript객체에 큰 영감을 받아서 만들어진 데이터 포멧 key와 value로 이루어진 모습을 참고 모바일이나 파일 object를 파일 시스템에 저장할 때도 JSON을 이용 데이터를 서버와 주고 받을 때 serialization을 쓴다. 프로그래밍 언어나 platform에 상관없이 사용 가능하다. Stringify() - JSON.stringify() 메소드는 인수로 전달받은 자바스크립트 객체를 문자열로 변환하여 반환합니다. premitype을 JSON으로 만들경우 let json = JSON.stringify(tr..
이 글에서는 Javascript에서의 array에 대해서 알아보도록하겠습니다. 배열(array)이란? - 이름과 인덱스로 참조되는 값들의 집합 배열을 구성하는 값을 배열의 element라고 하며, 배열의 위치를 가리키는 숫자를 index라고 합니다. 자바스크립트에서 배열의 특징은 아래와 같습니다. 배열 요소의 타입이 고정되어 있지 않으므로, 같은 배열에 있는 배열 요소끼리의 타입이 서로 다를 수도 있습니다. 배열 요소의 인덱스가 연속적이지 않아도 되며, 따라서 특정 배열 요소가 비어 있을 수도 있습니다. 자바스크립트에서 배열은 Array 객체로 다뤄집니다. 배열 생성 배열을 생성하는 방법은 다음과 같습니다. var arr = [배열요소1, 배열요소2,...]; // 배열 리터럴을 이용하는 방법 var a..