본문 바로가기

자바스크립트

(5)
[JavaScript] 실행 컨텍스트의 생성과정 (Creation Phase, Execution Phase) 아래 영상을 보고 정리한 내용입니다 ! : ) 먼저 전역 컨텍스트 하나 생성 후, 함수 호출 시마다 함수단위로 컨텍스트가 생긴다. Creation Phase | 생성단계 1 Activation Object 또는 Variation Object가 생성된다 - Variation Object : 일반 스코프 영역에서 생성되는 실행 컨텍스트의 변수 객체 - Activation Object : Variation Object의 종류인데, 전역 스코프 영역에서 생성되는 실행 컨텍스트의 변수 객체 var, let, const로 선언된 변수(명시적 변수)들이 지역,전역 상태에 따라 위의 각 Object에 추가된다. 호이스팅이 일어나는 상황이고, 변수명을 key가 되고, value는 일단 undefind로 할당된다. Exe..
[ JavaScript ] 숫자를 배열로 만드는 두가지 방법 숫자를 배열로 만드는 방법에는 두가지가 있다. 1. 숫자를 문자로 변환 후 배열로 만들기 ( split이용 ) 2. 숫자를 do..while문을 이용하여 배열로 만들기 1번의 방법이 편하고 간단해서 보통 저렇게 사용하지만 속도 부분에서는 2번 방법이 훨씬 빠르다고 한다. 코드의 효율을 생각한다면 2번 방법을 사용하는게 좋을듯 하므로 두가지 방법을 아래에 정리해 보겠다.🥸 1. 숫자를 문자로 변환 후 배열로 만들기 ( split이용 ) 타입이 숫자(number)인 경우 split을 사용할 수 없기 때문에 숫자에 ''을 더해 문자로 만들어주고, split('')을 사용하여 배열로 만들어 주는 방법이다. function numberToString1(n) { return (n + '').split('') } n..
[Javascript] 자바스크립트의 this this라는 의미는 그냥 당장 지금 호출된 함수라던가 그 내부 변수를 가르킬것 같지만 직접 코딩을 하다보면 this가 생각과 다른것을 가르키고 있을때가있다. 그래서 this에 대해 정확히 정리하고 넘어가기로 한다. this는 어떤 방식으로 호출하느냐에 따라 가리키는 값이 달라지는데, this는 실행 컨텍스트가 생성될때 결정된다 = 즉 ,함수가 호출(실행) 될때 결정 1 전역 공간에서의 this 전역 공간에서의 this는 전역객체 window 를 가리킨다. 2 메서드로 호출할때 그 내부에서의 this 메서드 내부에서의 this에는 호출한 주체(함수명 앞의 객체)에 대한 정보 가 담긴다. 점 표기법이든 대괄호 표기 법이든, 어떤 함수를 호출할때 그 함수이름 앞에 객체가 명시되어있는 경우는 메서드로 호출한 것..
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은 변수 (변하..
[Meterial-UI] DatePiker Api 모아놓은 곳 input type=month 을 사용해서 YYYY-MM 순으로 날짜를 선택하게 만들어야 하는 부분이 있었다. 아래 사진처럼 년도와 날짜를 선택하는 것인데, 편리하다고 신나서 코딩하다가 무심코 사파리를 켯는데 사파리는 지원이 안되어서 직접 키보드로 입력을 해야했다.. 날짜 중 하나는 빈칸으로 가야하는 점과 , 시작일, 종료일 중 종료일이 시작일보다 앞서면안되고 하는 등의 조건을 걸어주어야하는데, 이렇게 되다보니 모든 조건을 이중으로 걸어줘야해서 material ui로 변경해서 진행하기로 했다. DatePicker API Here you can find the full list and description for DatePicker props. material-ui-pickers.dev material-u..