자바스크립트

ES6 이후에 새롭게 정의된 Object 편의 정적 메서드들

새롭게 추가된 Object 객체의 정적 메서드가 중요한 이유 현재 자바스크립트 표준을 정하는 ECMA 위원회의 의중이 가장 많이 반영된 메서드들이다. ECMA 위원회는 과거에 자바스크립트가 저지른 실수를 바로잡으려 한다. 그러나 하위 호환성을 완벽하게 유지해야 한다는 숙제가 있다. 그래서 ECMA 위원회는 기존의 것을 없애기보다 Object 쪽에 새로운 메서드들을 추가하며 그들의 현재 의중을 반영하고 있다. Object.assign() Object.assign(target, ...source); target 객체에 source 객체의 속성을 덮어씌운다. 마지막에 온 source 객체의 속성이 가장 나중에 덮어씌워지므로 승리한다. Object.assign() 은 엔진 내부에 있는 C 함수로 퍼포먼스가 매우..

호이스팅이란 무엇인가요?

호이스팅이란? 호이스팅이란 자바스크립트 엔진의 동작 매커니즘 중 하나로 변수, 함수, 클래스 선언을 코드 실행 전 최상단 스코프로 끌어올리는 것을 말합니다. 이해를 위해 끌어올린다는 표현을 사용하였으나 실제로 각 식별자들을 인식하는 과정입니다. 단, 선언(declaration) 만 끌어올릴 뿐 초기화(initialization) 를 끌어올리지는 않습니다. 코드 예제 var 의 경우 console.log(message); //output : undefined var message = "The variable Has been hoisted"; 선언이 끌어올려져 undefined 를 출력하고 있습니다. var message; console.log(message); message = "The variable H..

메모이제이션이란 무엇인가요?

메모이제이션이란? 메모이제이션은 프로그래밍 기법 중에 하나입니다. 이 기법을 캐시라고 부르는 사람들도 있습니다. 한 번 연산한 값을 메모리에 기억해두었다가 값이 필요할 때 연산을 다시 반복하지 않고 메모리에서 이미 연산된 값을 다시 꺼내쓰는 기법입니다. 만일 함수의 결과가 외부 요인에 영향을 받지 않는다면, 메모이제이션 기법을 적용할 수 있는 좋은 대상이 됩니다. 인자별 결과 값을 메모리에 저장해두면 나중에 같은 인자로 함수가 호출되었을 때 연산을 하지 않고 메모리에서 바로 값을 제공할 수 있습니다. 이렇게 함수의 결과 값을 메모리에서 가져오면, 비싼 컴퓨팅 자원을 아끼게 해주고 함수 실행 결과도 매우 빨리 나오게 됩니다. 주로 재귀 함수나 동적 프로그래밍에 이 기법이 많이 이용됩니다. 웹에서는 만일 매..

자바스크립트에서 URL 을 인코드하거나 디코드하는 방법에 대해서 알고 있나요?

자바스크립트 URL 인코드 디코드 방법 URL 인코드 디코드는 아래의 경우에 사용합니다. URL 파라미터에 특수문자가 있는 데이터를 넘길 때 ex) www.naver.com/search?keyword=%3A%2F%2F%5E%5E%3A%2F%2F 쿠키에 데이터를 담을 때 쿠키의 데이터의 기호가 쿠키의 양식에 맞지 않게 들어가 HTTP 헤더의 포맷을 깰 수 있으므로 인코딩하여 넘기는 것이 안전합니다. encodeURI(), decodeURI() 글로벌 오브젝트에 내장 메서드로 encodeURI() 와 decodeURI() 가 있습니다. 이 함수를 통해서 "full URL"을 인코드하거나 디코드할 수 있습니다. 가끔은 encodeURI() 와 decodeURI() 를 통해 인코딩 디코딩이 불가능한 경우도 있습..

모던 자바스크립트, 메서드 정의 문법과 super, [[HomeObject]]

메서드 정의와 super, [[HomeObject]] 메서드 정의 문법은 function 키워드 없이 객체 내에서 메서드를 선언하는 것이다. [[HomeObject]] 에 접근할 수 있도록 해준다. super 에 접근이 가능하다. const obj = { functionProperty: function() { // 함수 프로퍼티 문법 (function 키워드 사용) } method() { // 메서드 정의 (function 키워드와 ':' 이 없음) }, }; super 접근 예제코드 정말 메서드 문법에서만 super 에 접근 가능한지 확인해보자. 메서드 문법을 사용하지 않는 경우 const obj1 = { name: "Joe", toString: function () { return su..

모던 자바스크립트, 단축 속성 (shorthand properties)

단축 속성 (shorthand properties) 단축 속성 (shorthand properties) 은 프로퍼티의 키와 값이 동일할 때 키만 적어도 같은 이름의 변수 값을 값 영역으로 끌어온다. 예제 function getMinMax(nums) { const min = Math.min(...nums); const max = Math.max(...nums); return { min, max }; } getMinMax([1, 2, 3]); // {min: 1, max: 3}

모던 자바스크립트, 계산된 속성 이름 (computed property name)

계산된 속성 이름 (computed property name) 계산된 속성 이름 (computed property name) 은 표현식의 결과를 프로퍼티의 이름으로 쓸 수 있게 해준다. 예제1: 기본 사용법 const name = "answer"; const obj = { [name]: 100, }; console.log(obj); 예제2: 작동 순서 파악하기 let counter = 0; const obj = { [counter++]: counter++, [counter++]: counter++, }; console.log(obj); // {"0": 1, "2": 3} 인터프리터에 의해 해석되는 시점에 왼쪽에서 오른쪽으로 위에서 아래로 식이 하나씩 평가된다. let counter = 0; const g..

모던 자바스크립트, 프로토타입 얻기 설정하기 (getPrototypeOf, setPrototypeOf)

객체 프로토타입 얻기와 설정하기 Object.getPrototypeOf(o) 를 통해 객체의 프로토타입을 얻을 수 있다. ES5의 obj.__proto__ 와 같다. Object.setPrototypeOf(obj, proto) 를 통해 객체의 프로토타입을 설정할 수 있다. ES5의 obj.__proto__ = proto 와 같다. ES5 예제 소스코드 const proto = { greet() { console.log(`proto greet, name = ${this.name}`); }, }; const obj = Object.create(proto); console.log(obj.__proto__); // {greet: ƒ} obj.name = "Joe"; obj.greet(); // proto gre..

자바스크립트의 TDZ (Temporal Dead Zone) 에 대해서 간단히 설명해주실 수 있나요?

Temporal Dead Zone (TDZ) 란? Temporal Dead Zone 은 줄여서 TDZ 라고 부르며 한국어로 해석하면 시간상 사각지대 정도로 해석할 수 있습니다. let 과 const 로 선언된 변수는 var 와 같이 호이스팅을 거치지만, 초기화 전까지는 TDZ 에 들어간 변수입니다. TDZ 에 들어가 있는 변수를 사용하는 경우, Reference Error 를 만나게 됩니다. console.log(a); // 레퍼런스 에러! TDZ 에 들어간 변수입니다. let a = 10; typeof 와 TDZ console.log(typeof a); // 레퍼런스 에러! let a = 10; typeof 연산자를 사용해도 마찬가지로 Reference Error 를 만나게 됩니다. 어휘적 스코프와 결..

switch 문에서 에러 없이 let 으로 변수를 재선언해보세요.

switch 문에서 에러를 내지 않고 변수를 재선언해보세요. let x = 1; switch (x) { case 0: let name; break; case 1: let name; // SyntaxError for redeclaration. break; } 위의 코드는 에러가 발생합니다. 왜일까요? let 키워드가 블록 스코프를 갖는데, 같은 블록 내에 중복된 이름의 식별자가 존재하기 때문입니다. 각 let name 이 존재하는 곳을 블록으로 나눠주면, 에러가 사라집니다. 이는 ES6(ES2015) 에서 추가된 문법입니다. let x = 1; switch (x) { case 0: { let name; break; } case 1: { let name; break; } }

let 키워드를 var 와 비교하여 설명해보세요

let 키워드와 var 키워드 let 은 변수를 선언할 때 사용합니다. 블록 스코프를 가집니다. 호이스팅이 됩니다. 단, 초기화 전까지는 Temporal Dead Zone 에 속합니다. var 도 변수를 선언할 때 사용합니다. 함수 스코프를 가집니다. 호이스팅이 됩니다. 초기화 전에도 참조가 가능하지만, undefined 라는 값을 가지고 있습니다. 함수 스코프의 특징 function foo() { for (var a = 0; a < 10; a++) { console.log(a); } console.log(`outside: ${a}`); } var 로 for 문을 작성하고 외부에서 a 를 참조해도 참조가 가능합니다. 이는 함수 스코프라는 특성 때문입니다. 블록에 갇혀있더라도 함수 내에서는 변수를 계속 참..

pure function (순수 함수) 란 무엇인가요?

순수함수란? 아래의 조건을 만족하는 함수입니다. 사이드 이펙트가 없어야 합니다. 몇번을 호출해도 반환 값이 동일해야 합니다. 전역변수를 건들거나, DOM 을 편집하거나, console.log 처럼 로그를 찍거나, new Date() 와 같이 시간에 의존해서도 안됩니다. 현대 프로그래밍에서 불변성(immutability)이 주목받으며 함께 부각된 개념 중 하나입니다. 순수함수의 장점은? 유닛테스트에 용이합니다. 외부 환경에 의존하지 않기 때문에 코드를 테스트하기 굉장히 쉬워집니다. 신뢰할 수 있습니다. 실행 시점이나 실행 컨텍스트에 따라서 결과가 변경되지 않기 때문에 신뢰할 수 있습니다. SRP(Single Responsibility Principal) 를 지키기 쉽습니다. 함수를 순수하게 구성하다보면, ..