Front-End: Web/JavaScript (97) 썸네일형 리스트형 외부 함수가 사라져도 변수가 살아있는 이유: <클로저(Closure)> 클로저(Closure)closure[사전적 의미] 중단하다, 폐쇄하다 앞서 스코프에서 배웠듯,자바스크립트에는 함수 스코프가 있고,함수 내부에서 정의된 변수라면함수의 어느 부분에서든 접근할 수 있습니다.이 말은 즉, 내부 함수에서 자신을 포함하는 외부 함수의 스코프에 접근할 수 있다는 얘기입니다. 코드 예시var outer = function() { var a = 1; var inner = function() { var b = 5; var c = 6; a = a + b + c; console.log(a); } inner();}outer(); // 12이처럼 inner function은 자신의 outer functi.. JS 스코프(Scope) 제대로 이해하기: 변수는 어디까지 살아있을까? Scope(유효범위)변수의 접근성과 생존 기간을 정의합니다. 예시 코드var func1 = function() { var a = 1; var b = 2; console.log(a + b); return a + b;}var a = 20;func1(); // 3함수 스코프 안에 있는 a가 연산에 반영이 됩니다.만약 함수 스코프 밖에서 b의 값을 알고 싶은 코드를 다음과 같이 작성하게 된다면, 에러가 발생합니다.console.log(b); // ReferenceError: b is not definedb 역시 함수 스코프 안에 있기 때문에, 전역에서는 함수 스코프 안에 있는 변수에 접근할 수가 없습니다. 스코프의 장점예시로 알 수 있듯이,스코프는 이름이 충돌하는 문제를 덜어주고,자.. 자바스크립트 this는 누굴 가리킬까?: call, apply, bind, 화살표 함수까지 살펴보기 this함수를 호출하는 객체를 의미합니다. this가 존재하는 이유❌ 함수 재사용 불가let myDiner = { name: "김치찌개", menu: function() { console.log("오늘 저녁은 " + myDiner.name); }}myDiner.menu(); // "오늘 저녁은 김치찌개"위와 같은 객체가 있을 때, menu 함수는myDiner 변수 이름이 수정되거나,menu 함수 자체를 다른 객체에서 사용하고 싶은 경우에 사용이 불편하게 됩니다.이는 this를 통해 함수를 재사용할 수 있습니다. ✅ 함수 재사용 가능function menuGlobal() { console.log("오늘 저녁은 " + this.name);}let myDiner = { nam.. String인데 객체처럼? 자바스크립트의 마법: <원시 래퍼 타입> 원시타입있는 그대로 저장되는 데이터를 표현합니다. 원시타입의 종류booleannumberstringnullundefined 원시타입의 특징원시값을 변수에 할당하면, 값이 복사되어 들어갑니다. 즉, 원시값이 할당된 변수들은 모두 자기 자신만의 고유한 값을 가지게 됩니다. 코드 예시let one = 1;let two = 2;one = two;one = 3;console.log(two); // 2 typeof원시값의 종류를 알 수 있게 해주는 메서드입니다. null의 타입은 object임을 주의합시다! → 자바스크립트 내에서의 실수console.log(typeof 1); // "number"console.log(typeof "hi"); // "string"console.log(typeof true); //.. crypto로 비밀번호 암호화하기 crypto? js 내장 모듈. 여러 해시 함수를 통한 암호화 기능 제공함 전에 스마게 강의에서 사이드 플젝 정도면 SHA-256 사용하면 적당하다고 해서 이거 사용할 것임 utils/createHashedPassword.ts import crypto from "crypto"; const createHashedPassword = (password: string) => { return crypto.createHash("sha256").update(password).digest("base64"); }; export default createHashedPassword; auth.ts import mysql from "mysql"; import dbconfig from "../config/database"; i.. [js] Map이란? Map Map 은 객체 형태다. key-value 쌍과, 키의 삽입 순서를 기억한다. 모든 값을 키로 사용할 수 있다. (그냥 객체는 String, Symbol만 가능) 키는 unique한 값이다. for...of 루프를 돌면 [key, value] 로 이뤄진 배열을 반환한다. 삽입된 순서대로 반복한다. (set을 한 순서대로) 키 동일성은 SameValueZero를 기반으로 한다. 0 ≠ -0 Nan === Nan 객체 vs 맵 둘이 유사하다. 맵은 아이템 수를 size 로 쉽게 가져올 수 있지만, 객체는 일일히 봐야함 맵은 순회가능(iterator)하므로 for…of문 사용 가능하지만, 객체는 아니다. 맵이 객체보다 성능이 더 좋다. (키-값 쌍이 빈번하게 추가/제거되는 상황에 최적화되어 있음) 메서.. [js]tilde(~)와 double tilde(~~) tilde(~) 연산자 비트 연산자. NOT의 기능을 한다. 2진수의 0 1 로 바꾼다. const a = 5; // 0000000000000101 console.log(~a); // 1111111111111010 // expected output: -6 const b = -3; // 1111111111111101 console.log(~b); // 0000000000000010 // expected output: 2 하지만 저것을 콘솔에 실행시켜 보면 expected output과 같이 -6,2 가 나온다. 이를 이진수로 직접 눈으로 확인 하는 법은 없을까? toString() 메서드를 이용하여 이진수로 변환하기 toString() 메서드를 이용하면 10진수를 이진수로 바꿀 수 있다. const a =.. [js] 변수를 사용하기 전에 꼭 알아야할 "TDZ(Temporal Dead Zone)" TDZ란? 직역하면 일시적 사각지대 let, const, class 구문의 유효성을 관리함 즉, 변수를 선언 및 초기화하기 전 사이의 사각지대를 말함 (선언 및 초기화 전에 변수를 사용하게 되면 ReferenceError 에러가 발생함) 따라서 변수를 선언하기 전에 변수를 절대 사용하지 말자! TDZ의 영향을 받는 구문 const let class constructor() 내부의 super() 기본 함수 매개변수(Default Function Parameter) const 변수 😃 상단에서 본 사진과 동일하다. 꼭 const 변수를 선언한 후 사용하도록 하자. const pi = 3.14; pi; // 3.14 let 변수 😭 let도 선언 전 줄까지 TDZ의 영향을 받는다. count; // throw.. 이전 1 2 3 4 5 ··· 13 다음
