에바니네

모던 자바스크립트 Deep Dive - 20장

Strict Mode 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드들에 대해 명시적인 에러를 발생시키는 ES5부터 추가 된 기능. ESLint 같은 린트 도구를 사용해도 Strict mode와 유사한 효과를 얻을 수 있고, 코딩 컨벤션을 설정 파일 형태로 정의하고 강제해서 더욱 강한 효과를 얻을 수 있다고 한다. 사용법은 아래 링크를 참고하도록 하자. https://poiemaweb.com/eslint ESLint | PoiemaWeb 코드 linting은 특정 스타일 가이드를 따르지 않거나 문제가 있는 패턴이나 코드를 찾기 위해 사용되는 정적 분석 툴이다. ESLint는 처음부터 유용하게 사용할 수있는 b..

모던 자바스크립트 Deep Dive - 19장

프로토타입 프로토타입 공부에 앞서 객체지향 프로그래밍(OOP)이란 무엇인가? 전통적인 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러 개의 독립적 단위, 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 말한다. OOP는 실세계의 실체를 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작한다. 특징이나 성질을 나타내는 속성을 가지고 있고, 이를 통해 실체를 인식하거나 구별 할 수 있다. 이처럼 다양한 속성 중에서 프로그램에 필요한 속성만 간추려 내어 표현하는 것을 추상화라고한다. 프로퍼티 : 객체의 상태를 나타내는 데이터 메소드 : 상태 데이터를 조작할 수 있는 동작을 하나의 논리적인 단위 상속과 프로토타입 상속은 어떤 객체의 프로퍼티 또는 메소드를 다른 객체가 상속 받아 그대로 ..

모던 자바스크립트 Deep Dive - 18장

함수와 일급 객체 일급 객체의 조건 1. 무명의 리터럴로 생성할 수 있다 -> 런타임에 생성이 가능하다. 2. 변수나 자료구조 ( 객체, 배열 등)에 저장할 수 있다. 3. 함수의 매개변수에 전달할 수 있다. 4. 함수의 반환값으로 사용할 수 있다. const increase = function (num) { return ++num; }; const decrease = function (num) { return --num; }; // 2. 함수는 객체에 저장할 수 있다. const auxs = { increase, decrease }; // 3. 함수의 매개변수에게 전달할 수 있다. // 4. 함수의 반환값으로 사용할 수 있다. function makeCounter(aux) { let num = 0; ..

모던 자바스크립트 Deep Dive - 17장

생성자 함수에 의한 객체 생성 생성자 함수 new 연산자와 함께 호출하여 객체를 생성하는 함수를 뜻한다. 생성자 함수에 의해 생긴 객체를 인스턴스(instance)라고 한다. Object 생성자 함수 new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환하고 이후에 프로퍼트, 메소드를 추가해서 객체를 완성할 수 있다. 하지만 Object 생성자 함수를 사용해 객체를 생성하는 방식은 특별한 이유가 없다면 그다지 유용해 보이지 않는다. const obj = new Object(); // 빈 객체가 생성 console.log(obj) //{} // 프로퍼티 추가 obj.name = 'Lee'; obj.sayHello = function () { console.log('Hi! My ..

모던 자바스크립트 Deep Dive - 16장

프로퍼티 어트리뷰트 자바스크립트 엔진은 프로퍼티를 생성할 때, 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. 프로퍼티의 상태란 프로퍼티의 값, 값의 갱신 가능 여부, 열거 가능 여부, 재정의 가능 여부를 말합니다. const myInfo = { name : 'Evan', age : 26, ethnicity: 'korean' } myInfo.age = 24; console.log(Object.getOwnPropertyDescriptor(myInfo, 'name')); // {value: 'Evan', writable: true, enumerable: true, configurable: true} console.log(Object.getOwnPropertyDescriptors(..

모던 자바스크립트 Deep Dive - 15장

var는 ES5 시절까지는 변수를 선언할 수 있는 유일한 키워드였으나, 몇 가지의 치명적인 단점이 있기에 ES6에서는 그 단점을 보완할 변수 키워드 let, const를 만들게 되었습니다. 앞서서 var 키워드가 어떤점이 문제 였는지 확인해보겠습다. var의 문제점 1. 변수 중복 선언 허용 위 코드에서 볼 수 있듯이 var 키워드는 재할당도 아닌 재 선언을 저렇게 허용을 하고, let 먼저 저렇게 이미 선언됬다고 친절히 말해주는 것을 알 수 있습니다. 사용자가 동일한 이름의 변수가 이미 선언됬는지 모르고 그냥 선언하면서 할당 값도 바꾸게되면 부작용이 발생할 수 있습니다. 2. 함수 레벨 스코프 위 코드에서 볼 수 있듯이 문제는 명확하다. 일단 스코프에는 간단히 함수 스코프와 블록 스코프로 나눌수 있는..

고차함수 - HOF

고차함수란 ? 하나 이상의 함수를 인수로 취하는 함수를 말합니다. 가장 기본적인 고차함수 프레임 function f(a){ console.log(a); function hof(b){ console.log(b) } return hof; } 위에서 볼 수 있듯이 인자로 3을 전달해주면 그대로 console.log(a)가 실행되면 3을 출력해주고, hof 함수를 반환하고 코드가 종료하는 것을 확인 할 수 있다. 여기서 중요한 것은 함수가 실행되고 내부함수를 반환을 해주는 것이다. 반환된 내부함수를 변수에 할당해주면 어떻게 될까 ? assignedhof 라는 변수에 f함수의 반환값을 할당하였다. 그리고 assignedhof 함수를 호출해보면 위에서 보았던 f함수 반환값으로 나왔던 함수가 그대로 적용되서 실행되는..

모던 자바스크립트 Deep Dive - 14장

변수의 생명주기 변수는 생물처럼 생성되고 소멸되는 생명 주기(Life Cycle)가 있다. 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같지만, 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다. 지역 변수의 생명주기 지역 변수 n 생성 및 출력 테스트 코드 function localVar(){ var n = 'local'; console.log(n); return n; } localVar(); console.log(n); 출력 local ReferenceError: n is not defined 위에 출력을 보면 알 수 있듯이 함수 내에서 지역변수 n 은 출력이 잘 되었지만, 함수 밖 출력은 에러가 나온 것을 확인 할 수 있습니다. 지역 변수의 생명주기는 함수의..