javascript 썸네일형 리스트형 setTimeout의 this와 / window.setTimeout을 하지 않는 이유 안녕하세요. 꼬동입니답. 오늘은 setTimeout 메소드에 관련해서 얘기를 해보려 합니다. setTimeout 메서드는 지정한 시간 후에 함수나 지정한 코드를 실행하는 타이머를 설정하는 메서드입니다. 그리고 clearTimeout으로 이를 취소할 수 있죠. 비슷한 함수로는 setInterval이 존재합니다. setTimout에서 this의 경우 여러분 예상과는 다르게 동작할 수 있습니다. 그 이유는 setTimeout이 실행하는 코드는 setTimeout을 호출했던 함수와는 다른 실행 맥락에서 호출되기 때문인데요. 호출 함수의 this 키워드 값을 설정하는 일반적인 규칙이 여기서도 적용되며, this를 호출 시 지정하지도 않았고 bind를 바인딩을 하지 않는 경우 window를 가리키게 됩니다. 이를 .. 더보기 Iterator / Generator 안녕하세요. 꼬동입니다. 현재 저는 다양한 준비를 하고 있는데, 그 준비과정에서 만난 JS의 Iterator / Generator에 대해서 자세히 알아보려고 합니다. 갑시다 ! 이터레이터는 '지금 어디 있는지' 파악할 수 있도록 돕는 책갈피와 비슷한 개념입니다. 배열은 이터러블 객체의 좋은 예인데, 배열에 values 메서드를 써서 이터레이터를 만들 수 있습니다. 이 상태에서 next 메서드를 호출하면 value 프로퍼티와 done 프로퍼티를 반환합니다. const it = [1,2,3].values(); it.next() // {value: 1, done: false} it.next() // {value: 2, done: false} it.next() // {value: 3, done: false} i.. 더보기 실행 컨텍스트와 클로저 안녕하세요 ! 다들 새해 복 많이 받으시고 있나요 !! 안 받으시고 있으시다면, 어서 챙겨가세요 !! 이번 글에선 실행 컨텍스트와 클로저를 배워 보려고 합니다. 저는 항상 클로저라는 개념이 어렵게 다가왔었는데, 그 이유가 실행 컨텍스트라는 개념을 몰라서 어렵게 느껴졌던거 같아요. 그러니 이번엔 '실행 컨텍스트와 클로저'를 같이 배워보려합니다. 정확히는 아래를 배울 거에요 ! 실행 컨텍스트의 개념 활성 객체와 변수 객체 스코프 체인 클로저 시작합니다 ! 실행 컨텍스트 개념 기존에 언어를 공부해보셨다면 Call Stack의 개념을 들어보셨을 거에요. C언어로 예를 들면 함수의 호출 정보, 지역 변수, 인자값 등이 차곡차곡 쌓이는 스택을 의미해요. 그래서 콜 스택의 호출 정보 등으로 코드의 실행 과정을 추적하.. 더보기 JavaScript 함수와 프로토타입 체이닝 (3) 함수의 다양한 형태 1. 콜백 함수 자바스크립트 함수 표현식에서의 함수 이름은 선택 사항입니다. 이러한 익명 함수의 대표적 용도가 콜백 함수입니다. 콜백 함수는 코드를 통해 명시적으로 호출하는 함수가 아니라 이벤트가 발생하거나 특정 시점에 도달했을 때 시스템에서 호출되는 함수를 말합니다. 대표적인 콜백 함수의 사용 예가 이벤트 핸들러 처리가 되겠죠. window.onload = function() { alert('This is the callback function.'); }; 2. 즉시 실행 함수 함수를 정의함과 동시에 바로 실행하는 함수를 즉시 실행 함수라고 합니다. 이 역시 익명 함수를 응용한 형태입니다. (function (name) { console.log('This is the immediat.. 더보기 JavaScript 함수와 프로토타입 체이닝 (2) 시간이 없어요 !! 바로 시작합시다. 함수 객체 : 함수도 객체다 자바스크립트에서는 함수도 객체다 자바스크립트에서는 함수도 객체입니다. 즉, 함수의 기본 기능인 코드 실행 뿐만 아니라, 함수 자체가 일반 객체처럼 프로퍼티들을 가질 수 있다는 것입니다. function add(x, y) { return x + y; } add.result = add(3, 2); add.status = 'OK'; console.log(add.result); // '5' console.log(add.status); // 'OK' 앞서 설명한 것처럼 자바스크립트는 일반 객체처럼 취급될 수 있단 점을 알고가야합니다. 리터럴에 의해 생성 변수나 배열의 요소, 객체의 프로퍼티 등에 할당 가능 함수의 인자로 전달 가능 함수의 리턴값으로.. 더보기 JavaScript 함수와 프로토타입 체이닝 (1) 안녕하세요 되게 오랜만이네요 ! 오늘 12월 13일, 제 생일에 맞춰서 글을 써보려 합니다. 글 주제는 JavaScript 함수와 프로토타입 체이닝인데, 저번 글에서 JavaScript 함수에 관해 글을 썼는데, 너무 성의 없었나해서 블로그에 다시 글을 남겨보려 합니다 ! 본 글은 아마 프론트엔드 개발자라면 분명히 알고 있어야하는 개념인거 같고, 면접에서도 자주 나올 법한 이야기가 아닐까 싶네요 ! 시작해볼게요 ! 자바스크립트에서 가장 중요한 개념 1순위는 뭘까요? 당연히 함수입니다. 제가 처음 자바스크립트를 공부하면서 이 함수 부분에서는 굉장히 헷갈리는 부분이 많았습니다. 기존에 알고있던 Python, C 언어와는 뭔가 다른 느낌이었거든요. 자바스크립트에서는 이 함수를 얼마나 제대로 이해하고 활용하느냐.. 더보기 JAVASCRIPT - 함수 (ES6 함수 선언 포함) 제가 요새 JAVASCRIPT 책을 읽고 있는데, 함수 설명이 너무 잘 되어 있더라고요. 항상 애로우 function, 익명 함수에 대해서 헷갈리고, call / apply / bind 개념이 헷갈렸는데, 이 책을 읽으니 너무 이해가 잘 됐습니다. 그래서 공유하려고 왔어요 !! github.com/rrkkee015/Learning-JAVASCRIPT/tree/master/6%EA%B0%95 rrkkee015/Learning-JAVASCRIPT 러닝 자바스크립트 : ES6로 제대로 입문하는 모던 자바스크립트 웹 개발. Contribute to rrkkee015/Learning-JAVASCRIPT development by creating an account on GitHub. github.com 제 깃허브.. 더보기 React Form과 bind 개념 본 글은 아래 링크를 참고하여 만들었습니다. https://ko.reactjs.org/docs/forms.html 폼 – React A JavaScript library for building user interfaces ko.reactjs.org 현재 React를 통해서 개인 프로젝트를 진행 중입니다. 아마 이번 달까지는 여러분들에게 보여줄 수 있을거라고 생각이 드네요 !! 대신 수면 시간을 줄겠지만 ㅠ 사실 이 Form이라는 개념은 간단합니다. 한 번 살펴보죠. First name: Last name: 보통 html에 존재하는 form을 들고 왔습니다. 저기서 마지막 줄 input을 통해 버튼이 생기죠. (input이지만 Submit 버튼이 생성됩니다. 아마 type이 Submit이라서 그렇습니다) .. 더보기 이전 1 2 다음
