왕벼리 왕벼리

서론) 현재 JS로 진행 중인 ‘우주두잇’ 프로젝트에 여러 명의 개발자가 참여하고 있습니다. 각자의 코드 스타일이 있기 때문에 코드가 난잡해졌습니다. 그 중에서도 const, let을 구분하지 않고 사용하는 경향이 있었습니다. 사실, 저는 var의 사용을 지양하고 let과 const를 적극 사용하고 있었는데, const와 let을 구분 해야 하는 정확한 이유를 몰랐습니다. (단순히 상수 선언에만 const로 선언을 해야한다라고 생각했었음). 그래서 이번 기회에 위 세 키워드의 차이점을 공부하고, 정리하는 시간을 갖습니다. 최종적으로 const와 let 중 언제, 무엇을 사용해야 하는 지를 알 수 있을 것입니다. 본론) var var youCanChangeMe = 'flexible'; if(true) va..

https://ko.javascript.info/call-apply-decorators 내용을 요약한 것이다 코드 변경없이 캐싱 기능 추가하기 function slow(x) { // CPU 집약적인 작업이 여기에 올 수 있습니다. alert(`slow(${x})을/를 호출함`); return x; } function cachingDecorator(func) { let cache = new Map(); return function(x) { if (cache.has(x)) { // cache에 해당 키가 있으면 return cache.get(x); // 대응하는 값을 cache에서 읽어옵니다. } let result = func(x); // 그렇지 않은 경우엔 func를 호출하고, cache.set(x, r..

함수 표현식과 함수 선언문 이외에 함수를 만들 수 있는 방법이 하나 더 있다. new Function 문법을 사용하면 함수를 만들 수 있다. let func = new Function ([arg1, arg2, ...argN], functionBody); 새로 만들어지는 함수는 인수 arg1...argN 과 함수 본문 functionBody로 구성된다. let sum = new Function('a', 'b', 'return a + b'); alert( sum(1, 2) ); // 3 기존에 사용하던 방법과 new Function을 사용해 함수를 만드는 방법의 가장 큰 차이는 런타임에 받은 문자열을 사용해 함수를 만들 수 있는 점이다. 보통 함수는 특별한 프로퍼티 [[Environment]]에 저장된 정보..

https://ko.javascript.info/function-object 를 보고 공부한 내용을 정리. 1. 객체로서의 함수 함수의 자료형은 객체이다. 그래서 함수를 호출할 수 있을 뿐 아니라 객체처럼 함수에 프로퍼티를 추가, 제거할 수 있다. 1. 'name' 프로퍼티 'name' 프로퍼티를 사용하면 함수이름을 가져올 수 있다. function sayHi() { alert("Hi"); } alert(sayHi.name); // sayHi 기본값을 사용해서 이름을 할당한 경우. function f(sayHi = function() {}) { alert(sayHi.name); // sayHi (이름이 있네요!) } f();​ //(코드가 참 희한하게 생겼다) 객체 메서드 이름은 함수처럼 자동할당이 되지..

0. 객체 - 객체는 몇 가지 특수한 기능을 가진 연관배열이다 - 객체는 프로퍼티(키-값)을 저장한다 - 프로퍼티 키는 문자열이나 심볼이어야 한다. 보통은 문자열이다 - 값은 어떤 자료형도 가능하다 1. 계산된 프로퍼티 - 객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러 싸여 있는 경우, 이를 계산된 프로퍼티라고 부른다. let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple"); let bag = { [fruit]: 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아 온다 alert( bag.apple ); // fruit에 "apple"이 할당되었다면, 5가 출력된다. 2.'in' 연산자로 프로퍼티 존재 여부 확인하기 - 연산자 in을 사용하면 프로퍼..

JS에서는 피연산자 끼리 비교시 피연산자가 모두 문자열인지 아닌지에 따라 구분된다. 문자열 vs 문자열 x 예를 들어 값의 type이 string 과 number인 비교하면 피연산자 중 어느 한쪽이라도 type이 string이 아닐 경우 피연산자 모두 number 타입으로 강제 변환 후 비교한다. 따라서 결과는 위 사진과 같다. 문자열 vs 문자열 type이 문자열인 피연산자끼리의 비교는 문자 단위로 비교한다. 처음부터 "0"이 어휘상 "4"보다 작은 값이기 때문에 c>d는 true이다. 마찬가지로 비교 시 e는 "4, 2"로 ,f는 "0, 4, 3"으로 강제변환되서 문자열화 되기 때문에 위 예시도 마찬가지이다. 객체 vs 객체 객체 끼리 비교했을 경우 만약 연산자가 == 일때는 같은 래퍼런스를 참조한다..

1.문자열을 숫자로 강제 변환하는 것과 파싱하는 것은 다르다. 위의 예제처럼 숫자로 변환할 수 없는 문자열을 강제변환 시 결과값으로 NaN이 나오는 것과 달리 파싱 값은 숫자를 반환한다. 즉, 파싱은 비 숫자형 문자를 허용한다. 좌→우 방향으로 파싱하다가 숫자로 변환 할 수 없는 문자를 만나면 즉시 멈춘다. 2. parseInt()는 문자열에 쓰는 함수이다. 그렇다면 parseInt() 인자 값에 비문자열이 들어오면 어떻게 될까?? 예를 들면 다음과 같은 상황이다. 놀랍게도 결과 값은 18이다. parseInt에 비문자열이 들어오면 자바스크립트는 이 비문자열을 문자열로 바꿔준다. 위 예시에서는 1/0을 "Infinite"로 바꿔준다. 문자열의 첫번째 문자가 "I"이고 "I"는 19진법체계서 18이다. 두..

boolean 타입으로 강제변환하는 것에 생각해본다 1. boolean으로 강제변환 시 falsy한 값이 되는 것은 undefined null false +0, -0 NaN "" 총 6가지이다. 2. falsy 객체란? 위의 세가지 변수는 falsy한 값을 감싼 래퍼 객체를 참조하고 있다. 결과를 보면 알 수 있드시, falsy 객체는 falsy한 값을 감싼 래퍼 객체가 아니다. 혹자는 falsy 한 객체가 순수한 자바스크립트 객체가 아니고, 비정상적인 객체라고 하는데, 지금 나로써는 이 객체의 정체가 정확히 뭔지 모르겠다.(사실 알고싶지 않음) 3. 객체는 falsy 하지 않으면 무조건 truthy 객체이다. 객체는 falsy 하지 않으면 무조건 truthy 객체이다.