JavaScript (19) 썸네일형 리스트형 [JavaScript] 내부함수와 외부함수, 그리고 '클로저' 클로저는 어떤 함수에서 선언한 변수를 참조하는 내부에서 발생하는 현상이다. 함수 내부에 함수를 작성할 때 마다 클로저를 생성한 것 아래에 클로저의 예시들을 소개하면서 좀 더 자세히 클로저에 대해 이해 할 수 있도록 정리해 보았다. 클로저가 발생하는 경우 어떤 함수가 호출되고 실행컨텍스트가 종료되면 그 함수와 내부 변수들은 가비지 컬렉터의 수집 대상이 된다. 가비지 컬렉터는 어떤 값을 참조하는 변수가 하나라도 있다면 그 값을 수집하지 않는다. 경우 - 1 아래의 예시는 내부함수가 외부함수 실행 종료 후에도 가비지 컬렉터에 의해 사라지지 않고 계속 호출 할 수 있게 되는 예시이다. 함수 outer에게 inner은 내부함수이고, 함수 inner에게 outer은 외부함수이다. outer와 내부 변수들은 함수가 .. [JavaScript] 콜백함수의 this와 콜백지옥 콜백함수란? 콜백함수는 파라미터로 함수를 전달받아, 함수의 내부에서 실행하는 함수이다. 함수 안에서 특정한 시점에 콜백함수가 호출될때, 호출 시점에 제어권도 같이 넘어간다. //콜백함수 예제 1 [1,2,3].forEach(el=>console.log(el)) // 1 2 3 //콜백함수 예제 2 const cbFunc = () =>{ console.log('콜백함수 호출') } const func = (text,callback) => { console.log(text); callback() } func('함수호출',cbFunc) // '함수호출' // '콜백함수 호출' 콜백함수의 this 객체의 메서드를 콜백함수로 사용하면, 메서드가 함수로서 호출되면서 객체와의 연결성이 사라져 this가 달라진다. (.. [JavaScript] 명시적으로 this를 바인딩하는 방법 앞서 정리한 내용에서 this는 실행 컨텍스트가 생성될때 결정되고, 어떻게 불리느냐에 따라서 this가 달라지며, 어떤 상황에서 전역객체를 가리키고, 렉시컬 객체를 가르키는지 정리했었다. 그 중 콜백함수 호출 시 그 내부에서의 this는 생각했던것과 다르게 this를 가리키고 있었는데, 이에 관해 this를 바인딩하는 방법에 대해 정리해보도록 한다. 바인딩 메서드와 객체를 this로 묶어놓는 것을 말한다 1 call 메서드 사용 반환값 : this(첫번째 인자) 와 매개변수(나머지 인자)로 호출된 함수의 값이 반환된다. 2 apply 메서드 사용 반환값 : this(첫번째 인자) 와 매개변수(배열)로 호출된 함수의 값이 반환된다. call과 apply메서드는 서로 같으나, 차이로는 매개변수로 사용할 인자.. [Javascript] 자바스크립트의 this this라는 의미는 그냥 당장 지금 호출된 함수라던가 그 내부 변수를 가르킬것 같지만 직접 코딩을 하다보면 this가 생각과 다른것을 가르키고 있을때가있다. 그래서 this에 대해 정확히 정리하고 넘어가기로 한다. this는 어떤 방식으로 호출하느냐에 따라 가리키는 값이 달라지는데, this는 실행 컨텍스트가 생성될때 결정된다 = 즉 ,함수가 호출(실행) 될때 결정 1 전역 공간에서의 this 전역 공간에서의 this는 전역객체 window 를 가리킨다. 2 메서드로 호출할때 그 내부에서의 this 메서드 내부에서의 this에는 호출한 주체(함수명 앞의 객체)에 대한 정보 가 담긴다. 점 표기법이든 대괄호 표기 법이든, 어떤 함수를 호출할때 그 함수이름 앞에 객체가 명시되어있는 경우는 메서드로 호출한 것.. [Javascript] 실행 컨텍스트와 호이스팅, 스코프체인 실행 컨텍스트와 환경정보 실행 컨텍스트 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아놓은 것. 수집 순서 1 . 전역 - 브라우저에서 자동으로 실행하기 때문에 JS 파일이 열리는 순간 활성화된 im-designloper.tistory.com 이전에 정리했던 내용과 이어집니다 ↑ 참고 Lexical Environment 실행 컨텍스트의 환경정보 중 하나 아래와 같이 나뉘어 지는데 , 이와 관련해서 호이스팅과 스코프 체인에 대해 정리해 보려고 한다. - Environment Record : 현재 코드와 관련된 식별자 정보들이 저장된다. ➡︎ 호이스팅과 관련 - Outer environment Reference : 현재 호출된 함수가 선언될 당시의 외부 Lexical Environment을.. [Javascript] 실행 컨텍스트와 환경정보 실행 컨텍스트 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아놓은 것. 수집 순서 1 . 전역 - 브라우저에서 자동으로 실행하기 때문에 JS 파일이 열리는 순간 활성화된다. 2 . (선언이 아닌) "호출되는 함수" 순서. 함수가 호출되면, 그 함수에 관련된 환경정보를 수집해서 실행 컨텍스트를 생성하고, 콜스택에 담는다. 그러면 기존에 실행되던 코드는 중단되고, 지금 담긴 컨텍스트가 실행된다. 그리고 제일 처음에 담겼던 전역 컨텍스트까지 종료되면 콜스택은 실행해야 할 코드가 없는 빈 상태가 된다. 기존에 실행되던 코드는 중단되고 ::의 이유 자바스크립트는 싱글스레드 언어로 콜스택이 하나이기 때문에 콜스택에 새로운 컨텍스트가 쌓이면 새로운 컨텍스트가 기존 컨텍스트보다 먼저 실행되고 , 새로.. [ Javascript 모듈화 ] AMD, CommonJs, ES6의 모듈 모듈화의 필요성 자바스크립트는 파일을 나누어 태그로 로딩할 때 type="text/javascript" 대신 type="module"을 사용한다. app.js는 모듈을 사용할 수 있다. 그러나 브라우져에 무관하게 모듈을 사용하고 싶을때 ..... 이제야 웹팩이 나올 차례다. 웹팩에 대한 내용은 다음에서 이어서 정리해야겠다! 아래 참고 블로그에 더 명확한 설명이 잘 되어있다. 참고 jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html yonghyunlee.gitlab.io/front/webpack/ d2.naver.com/helloworld/12864 [Javascript] 배열에 프로퍼티 추가 배열이란! 배열은 어떠한 타입의 값이라도 담을수 있는 번호가 매겨진 인덱스를 갖는 특별한 유형의 객체이다. 배열의 일반적인 값 할당 배열의 인덱스는 숫자인데 , 배열 자체도 하나의 객체여서 key:value 의 프로퍼티를 추가할 수 있다. const arr = [1,2] //arr에 2번째 index에 3을 할당 arr[2] = 3 console.log(arr) // [1,2,3] console.log("length",arr.length) // 3 위와 같이 값을 추가하면 length는 배열 내의 값의 수를 반환한다. 배열에 프로퍼티 할당 //배열에 프로퍼티를 할당 arr["key"] = 5; console.log(arr) // [ 1, 2, 3, dd: 5 ] 에러가 안난다고..? console.log.. ES6(ECMAScript6) 정리 ES6란? 개선된 JavaScript문법 자바스크립트는 ES5와 ES6기준으로 문법과 표현에서 많은 개선이 일어났다. 1 화살표 함수 (Arrows Function) 일반 함수 표현보다 구문이 짧고 this를 바인딩 하지 않아도 된다. 화살표 함수는 항상 익명함수이다. // 매개변수가 없는 경우 var foo = () => console.log('bar'); foo(); // bar // 매개변수가 하나인 경우 var foo = x => x; foo('bar'); // bar // 매개변수가 여려개인 경우 var foo = (a, b) => a + b; // 간단하게 한줄로 표현할 땐 "{}" 없이 값이 반환됩니다. foo(1, 2); // 3 2 변수의 선언 (let, const) let은 변수 (변하.. 이전 1 2 다음
