본문 바로가기

하늘기술

 (106)
Lexical scoping Lexical scoping(어휘적 범위 지정)뜻Scope가 함수 실행시점이 아닌 함수 정의 시점에 정해진다는 의미특징변수가 어디에서 사용 가능한지 알기 위해 그 변수가 소스코드 내 어디에서 정의(선언)되었는지 고려중첩된 함수는 외부 범위(scope)에서 선언한 변수에도 접근가능C/C++, Java, 그리고 JavaScript 같이 우리가 접하는 대부분의 언어들은 Lexical Scope를 사용한다. Lexical Scope는 Static Scope라고도 불린다. 반대의 방식으로는 Dynamic Scope가 있으며 Perl, Bash Shell, APL 같은 몇몇 오래된 언어들이 사용하는 방식이다. 두 방식의 정의는 다음과 같다.Lexical scope: use environment where funct..
symbol 1.심볼통신 수학 쪽에서 심볼의 의미를 살펴보면 의미있는 하나의 정보단위 라고 한다. ES6(ECMAScript 2015)에서 새롭게 나온 symbol은 프로그램에서 유일무이한 유니크한 하나 밖에 없는 값이라고 보면 된다. 심볼은 루비와 같은 다른 프로그래밍언어에서도 사용하는 개념인 것 같다. (참조)이런 유니크한 값은 주로 객체의 키로 사용된다. 오브젝트 안의 키라고 하면 유일무이한 값인데, 키를 중복해서 선언하면 덮어씌워진다.const obj = { a: 1, b: 2, a: 3 }; console.log(obj.a); // 3 위의 코드에서 a라는 키가 두 번 정의되어 뒤에있는 a의 값이 출력되었다. 키가 중복되었다. 유일한 값이 아니게 되어버렸다. 이것 대신에 심볼을 키로 사용한다면 키가 중복되는..
this This자바스크립트의 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에, arguments 객체와 this를 암묵적으로 전달 받는다.function square(number) { console.log(arguments); console.log(this); return number \* number; } square(2);자바스크립트의 this keyword는 Java와 같은 익숙한 언어의 개념과 달라 개발자에게 혼란을 준다.Java에서의 this는 인스턴스 자신(self)을 가리키는 참조변수이다. this가 객체 자신에 대한 참조 값을 가지고 있다는 뜻이다. 주로 매개변수와 객체 자신이 가지고 있는 멤버변수명이 같을 경우 이를 구분하기 위해서 사용된다. 아래 Java 코드의 생성자 함수 내의 this..
reduce 함수 Reduce intro 도무지 갈피를 잡을 수 없는 Reduce라는 이름.. 분명 예제를 보고 따라한 적도 많은데 왜 이리 익숙하지가 않을까? ㅜㅜ 연습이 부족한 탓도 있겠지만 이름이주는 이미지와 실제 활용이 매칭이 안되었기 때문일 것이다. 코드를 보면 이해가 가는데 왜 이러한 코드를 Reduce라고 이름 지었을까? Reduce란 줄이다라는 의미이다. 뭘 줄이냐 하면 배열 안의 여러 요소들을 initialValue로 지정한 하나의 값으로 줄인다는 의미이다. Reduce는 배열이 돌면서 정의한 callback함수(보통 reducer라고 부른다)를 호출한다. 여기까지는 ForEach랑 똑같은데 이놈은 함수를 실행할 때 initialValue(초깃값)을 넣어줄 수가 있고 이 초깃값에다가 누적해서 뭔가 더 작업..
프로토타입 기초 prototype 자바스크립트는 prototype 기반 언어이다. 이 prototype에 대해서 잘 이해하고 있어야 우리는 자바스크립트의 깊숙하고 우아한 부분을 활용할 수 있다. 먼저 class 기반과 뭐가 다른지 살펴보자. Class기반 언어 class 기반의 언어에서는 Class에 필요한 정보를 넣어둔다. 그리고 new Class명() 로 생성된 객체들은 Class안의 정보를 보고 객체를 생성한다. prototype 기반 언어 prototype 기반언어는 조금 다르고 복잡하다. prototype이라는 별도의 공간에다가 새로 생성될 객체들이 공유할 정보를 넣어둔다. new 함수명()으로 생성된 객체들은 Person함수의 prototype이라는 공간의 정보와 연결되어 있다. 왜 prototype에 정보를..
프로토타입 prototype 끝판왕 어려운 단어 prototype을 사전에서 찾아보면 '원래의 형태 또는 전형적인 예' 라고 나와있다. 자바스크립트의 모든 객체는 자신의 부모의 모습인 [[Prototype]] 을 기억한다. 자바의 상속처럼 자바스크립트에서도 이 Prototype을 이용해 부모가 가지고 있는 정보(프로퍼티나 메서드)를 사용 가능하다. 부모의 [[Prototype]]에 접근하기 위해서는 __proto__ 라는 access proprty를 사용한다. '객체.__proto__' 이렇게 호출하면 객체(나)의 부모의 정보를 알려줘! 라고 요청하는 것이다. 1. 프로토타입 객체 Java, C++과 같은 클래스 기반 객체지향 프로그래밍 언어와 달리 자바스크립트는 프로토타입 기반 객체지..
모듈 1. 모듈 ES6의 모듈은 기능에 따라 js코드들을 파일 별로 넣어놓고 필요할 때 로드하여 사용하는 것을 의미한다. 모듈 기능 지원하기 전의 자바스크립트는 js파일 여러개를 한 번에 로드 하였을 경우 하나의 전역을 공유하게 되어 전역변수가 중복되는 등의 문제가 발생할 수 있다. // foo.js var x = "foo"; // 변수 x는 전역 변수이다. console.log(window.x); // foo // bar.js // foo.js에서 선언한 전역 변수 x와 중복된 선언이다. var x = "bar"; // 변수 x는 전역 변수이다. // foo.js에서 선언한 전역 변수 x의 값이 재할당되었다. console.log(window.x); // bar 두 개의 js파일을 로드하였을 경우 같은 이름..
프로미스 Promise 1. 자바스크립트 비동기 동작방식 브라우저의 JS엔진을 들여다 보자 브라우저의 자바스크립트 엔진은 콜스택에 올라와 있는 함수 중 비동기 함수처럼 바로 처리할 수 없는 함수를 만나면 바로 실행하지 않고 Web API 에게 보낸다. 대신, 바로 처리할 수 있는 일반 함수들은 바로 처리한다. (예를들어 console.log) 이 WEB API에서는 해당 함수를 처리할 이벤트가 발생하면 비동기 함수의 콜백 함수들을 태스크 큐로 보내고 콜스택에 있는 함수가 모두 비워지면 태스큐 큐에서 대기 중인 함수를 차례대로 콜스택에 다시 올리고 실행한다. 자세한 설명은 아래의 노마드코너님 강의를 추천 노마드코더 - 논블로킹 언어가 뭐야? 2. 프로미스란 니멋대로 실행하지말고 나에게 이대로 .. 순서대로 실행 하..

티스토리툴바