공부혜옹

자바스크립트는 싱글 스레드 자바스크립트는 함수를 실행할때마다 callStack이라는 곳에 함수를 push 한다. 그리고 실행할때마다 pop을 하여 함수를 하나씩 꺼내는데 이러한 방식때문에 stack에 함수가 남아있으면 어떠한 추가 작업도 할 수 없고, 브라우저 리렌더링도 불가능하다 프론트엔드의 관점에서 한가지를 실행할때마다 브라우저가 리렌더링 되지않고 멈춰있는것은 상당히 상상하고싶지않은 상황이다. 비동기 콜백함수 브라우저나 노드의 함수들은 거의 비동기 함수라고 한다. 보통의 함수들은 stack에서 가장 위부터 순차적으로 실행된다고 앞서 이야기 했지만 비동기 함수들은 어떻게 처리되는걸까? 다음은 내가 참고한 자료인 JSConfEu에서 소개된 예시 코드이다. 해당 코드를 기반으로 그림으로 비동기 함수 처리 ..

Rest Parameter란? Rest 파라미터(Rest Parameter, 나머지 매개변수)는 매개변수 이름 앞에 세개의 점 ... 을 붙여서 정의한 매개변수를 의미한다. Rest 파라미터는 함수에 전달된 인자(argument)들의 목록을 배열로 전달받는다. function example(a,b,...rest) { console.log(Array.isArray(rest)); // true console.log(rest); // [ 3, 4, 5 ], } example(1, 2, 3, 4, 5); 함수의 마지막 파라미터의 앞에 ... 를 붙여 (사용자가 제공한) 모든 나머지 인수를 자바스크립트 배열로 대체한다. 마지막 파라미터만 Rest Parameter가 될 수 있다. function example (..

Java, C++과 같은 클래스기반 언어들은 객체 생성 이전에 클래스를 정의하고 이를 통해 객체(인스턴스)를 생성한다. 이와달리 자바스크립트는 프로토타입 기반 객체지향 프로그래밍 언어이다. 따라서 프로토타입을 잘 이해하는 것이 중요하다. (ES6 에서 Class문법이 추가 되었지만 우리가 흔히 아는 class가 아닌 prototype을 기반으로 만들어졌다) 객체생성원리 객체는 생성자를 통해 생성된다. 생성자는 새로 생성된 객체를 초기화 하는 역할을 한다. 정해진틀을(생성자 함수) 기계에 넣어(new 연산자) 여러개 찍어낸다고 이해하면 편리하다. function Example() {}; //생성자 함수 var obj1 = new Example(); //생성자 함수를 이용해 생성한 객체1 var obj2 =..

나는 Java를 먼저 배워서 JS에서의 this또한 당연히 Java와 같겠거니 생각했었다. 때문에 이부분의 개념은 넘어가도 되겠거니 했으나...크나큰 착각이었다. Java에서의 this Java에서의 this는 객체 자신(self)을 가리키는 참조변수로, this가 객체 자신에 대한 참조 값을 가지고 있다는 뜻이다. 주로 매개변수와 객체 자신이 가지고 있는 멤버변수명이 같을 경우 이를 구분하기 위해서 사용된다. public Class Car { private String name; // a public Person(String name) { //b this.name = name; //this.a = b; } } JavaScript에서의 this 자바스크립트의 경우 함수 호출 방식에 의해 this에 바인딩..

ES6의 화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략하게 함수를 선언할 수 있다 화살표함수 작성 방법 매개변수 지정 매개변수가 없을 경우 () => { ... } 매개변수가 한개인경우 소괄호를 생략할 수 있다. x => { ... } 매개변수가 여러 개인 경우 소괄호를 생략할 수 없다. (x, y) => { ... } 함수 몸체 지정 single line인 경우 함수가 한줄이라면 중괄호 생략가능 암묵적으로 return x => { return 2 + x } x => 2 + x multi line인 경우 () => { const x = 5; return 2 + x; }; ES6 코드 사용 사례 & 효과 일반적인 함수 표현식보다 표현이 간결하다...

ES6는 템플릿 리터럴(Template literal)이라고 불리는 새로운 문자열 표기법을 도입하였다.일반적으로 문자작성시 ''(작은 따옴표) 혹은 ""(큰 따옴표)를 사용하였으나 ES6에선 `` (백틱 문자)를 사용한다. 템플릿 리터럴 (Template literal) 문자열내의 공백을 있는 그대로 제공한다 작은 따옴표와 큰따옴표를 혼용할 수 있다 문자열 인터폴레이션을 제공한다 const tip = `템플릿 리터럴은 '작은 따옴표'과 "큰 따옴표"를 혼용할 수 있다.`; 문자열 인터폴레이션(String Interpolation) 템플릿 리터럴은 + 연산자를 사용하지 않아도 간단한 방법으로 새로운 문자열을 삽입할 수 있는 기능을 제공한다 ${표현식} const name = 'hyewon'; // ES5 ..

let & const 대부분의 프로그래밍 언어는 블록 레벨 스코프(Block-level scope)를 따르지만 자바스크립트는 함수 레벨 스코프(Function-level scope)를 따른다. 함수 레벨 스코프(Function-level scope) 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다. 블록 레벨 스코프(Block-level scope) 모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다. let과 const 키워드 도입배경 사용이 편리하다는 장점이 있지만 전역 변수는 유..