민ズl으l 개발일ブl

리액트를 하다가 너무 기본적인 문법이 헷갈렸다...예시로, onClick={handleClick} vs onClick={handleClick()} 함수 참조onClick={handleClick}버튼을 클릭할 때 실행할 함수를 넘기는 것쉽게하면, 이 함수는 나중에 필요할 때 사용할 거야~소괄호 없이 써야 버튼을 누를 때만 실행되도록 할 수 있음!함수 호출onClick={handleClick()}버튼을 클릭하기도 전에 실행하라는 것쉽게하면, 이 함수를 지금 바로 실행하라! function handleClick() { console.log("Button clicked!");}// 올바른 사용Click Me// 잘못된 사용Click Me // 즉시 실행돼버림

실행 컨텍스트 🛠️실행할 코드에 제공할 환경 정보들을 모아놓은 객체=>  쉬운말로, 자바스크립트가 코드를 잘 이해하고 실행할 수 있도록 도와주는 중요한 도구 실행 컨텍스트 구성요소1. Variable Environment현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보초기값을 유지구성 : environmentRecord + outer-EnvironmentReference2. Lexical Environment처음엔 Variable Environment와 같지만 변경 사항이 실시간으로 반영됨구성 : environmentRecord + outer-EnvironmentReference3. ThisBinding식별자가 바라봐야 할 대상 객체this로 지정된 객체가 저장(지정되지 않은 경우 : 전역 ..

정규 표현식이란🤔 정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴  자바스크립트에서는 정규 표현식도 객체로서 밑에 메서드 가능RegExp의 exec() , test()String의 match(), matchAll(), replace(), replaceAll(), search(), split()정규 표현식 만들기💫정규 표현식 리터럴 (주로 사용)정규 표현식이 코드가 실행될 때 바로 컴파일됨👉즉, 정규 표현식이 고정된 경우 성능이 더 좋음bbb가독성 굿특수 문자를 그 자체로 사용가능ex : \dconst regex = /pattern/;RegExp객체 생성자패턴을 동적으로 생성해야 할 때 유용👉예를 들어, 변수에 따라 정규 표현식을 생성해야 하는 경우에 사용문자열로 입력받기 ..

일반 함수에서의 this : 함수를 호출한 객체arrow함수에서의 this : 함수를 감싸는 상위 스코프//전역 thisconsole.log(this) // window{...}//엄격모드에서의 thisfunction f1() { "use strict"; return console.log(this);}f1(); // undefined//일반 함수에서의 thisfunction f2() { return console.log(this);}f2(); // window{...}//객체 메서드에서의 thisconst f3 = { name : "test", main : function(){ console.log(this) }}f3.main(); // {name: 'test', main: ƒ} , 함..

클로저란🤔MDN에서는 다음과 같이 정의했다A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).(클로저는 주변상태(렉시컬 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합이다.) 사실 말이 어려워서, 코어 자바스크립트에서 정의한 말이 더 쉽게 와닿는다.어떤 함수에서 선언한 변수를 참조하는 내부함수를 외부로 전달할 경우,함수의 실행 컨텍스트가 종료된 후에도 해당 변수가 사라지지 않는 현상 function outerFunc() { var x = 10; var innerFunc = function () { co..

변수란🤔 값이 저장된 메모리 공간의 주소를 가리키는 식별자변수선언(키워드)✏️var (💩)letconstconst a = 1; // a라는 변수에 1이라는 정수의 값을 할당*var은 예전에 쓰던 키워드로 const나 let을 적극 권장!!!  하지만 옛날 프로젝트 코드에선 자주 보임...ㅠㅠ varletconst재할당⭕⭕❌재선언⭕❌❌스코프함수 스코프블록 스코프블록 스코프호이스팅⭕(초기값 undefined)⭕(초기화 전 사용 불가)⭕(초기화 전 사용 불가) *스코프 : 변수나 함수가 유효하게 접근할 수 있는 범위 [참고] [JS]스코프(Scope)스코프란🤔식별자가 유효한 범위*식별자 : 변수, 함수, 클래스 이름 [참고] [JS]기본 문법(변수)변수란🤔 값이 저장된 메모리 공간의 주소를 가리키는 식..