Web/JavaScript

프로토타입

자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어다. 클래스 es6에서 클래스가 도입되었다. 클래스도 함수이며, 기존 프로토타입 기반 패턴의 문법적 설탕이라고 볼 수 있다. 클래스는 생성자 함수보다 엄격하며 생성자 함수에서는 제공하지 않는 기능도 제공한다. __proto__접근자 프로퍼티 모든 객체는 proto 접근자 프로퍼티를 통해 자신의 프로토타입, 즉 [[Prototype]] 내부 슬롯에 간접적으로 접근할 수 있다. 내부 슬롯은 프로퍼티가 아니며 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공하기는 한다. proto 접근자 프로퍼티를 코드 내에서 직접 사용하는 것은 권장하지 않는다. Object.protytpe을 상속받지 않는 객체를 생성할 수또 있기 때문에 p..

렉시컬 스코프

var x = 1; function foo() { var x = 10; bar(); } function bar() { console.log(x); } foo(); // ? bar(); // ? 위 예제의 실행 결과는 bar 함수의 상위 스코프가 무엇인지에 따라 결정된다. 두 가지 패턴을 예측할 수 있다. 1. 함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정한다. 2. 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정한다. 첫 번째 방식으로 함수의 상위 스코프를 결정한다면 bar 함수의 상위 스코프는 foo함수의 지역 스코프와 전역 스코프일 것이다. 이 방식을 동적 스코프라 한다. 함수가 호출되는 시점에 동적으로 상위 스코프를 결정해야 하기 때문에 동적 스코프라 부른다. 두 번째 방식으..

라인 피드와 캐리지 리턴

IDE(VSCode)로 협업하며 개발을 하다 보면 문제가 없는 코드에 lint error 밑줄이 그어져 있는 경우가 있다. 이는 서로 운영체제가 달라서 그런데 Windows의 경우는 CRLF macOS는 LF를 사용하기 때문에 그렇다. LF는 라인 피드, CR을 캐리지 리턴을 의미하는데, 캐리지 리턴(\r)은 종리를 움직이지 않고 커서를 맨 앞줄로 이동하는 것이다. 초창기 컴퓨터는 출력을 프린터로 수행했는데, 이때 개행을 위해 라인피드와 캐리지 리턴을 모두 사용했다. 즉, CRLF(\r\n)로 커서를 맨 앞으로 이동시키고 종이를 한 줄 올리는 방식으로 개행했다. 자바스크립트에서 라인 피드와 캐리지 리턴은 모두 개행을 의미한다. 하지만 캐리지 리턴(/r)으로 개행하는 경우는 거의 없고 일반적으로 라인피드(..

자주 사용하는 정규표현식 [ javascript ]

자주사용하는 정규표현식 숫자를 포함하는 문자 const reg = /\d+/; console.log(reg.test("123")); // true console.log(reg.test("33asd")); // true console.log(reg.test("5asdasd")); // true console.log(reg.test("asdfasdf")); // true 숫자만 포함하는 문자 const reg = /^\d+$/; console.log(reg.test("123")); // true console.log(reg.test("33asd")); // false console.log(reg.test("5asdasd")); // false console.log(reg.test("asdfasdf")); /..

&&와 || 연산자

javascript의 ||와 &&연산자는 다른언어와는 다르게 연산을 수행한 결과값이 항상 boolean값이 아닙니다. 논리 AND a && b는 아래와 대략 같습니다, a ? b : a; var a1 = true && true; // t && t returns true var a2 = true && false; // t && f returns false var a3 = false && true; // f && t returns false var a4 = false && (3 == 4); // f && f returns false var a5 = "Cat" && "Dog"; // t && t returns Dog var a6 = false && "Cat"; // f && t returns false var..

하나만 true/truthy인지 구분하기 js

여러개의 값들 중에 하나만 true/truthy인지 구분하기 위한 함수 입니다. function onlyOne(...args) { return args.reduce((acc, arg) => (acc += arg), 0) === 1; } const a = true; const b = false; console.log(onlyOne(a, b, b, b)); // true console.log(onlyOne(a, a, b, b)); // false 코드 도출 과정 Rest 파라미터 ...args부분은 Rest 파라미터로 정해지지 않은 인수를 배열로 args라는 변수에 담을 수 있도록 합니다. Reduce 메서드 Reduce 메서드는 배열에 정해진 reducer함수를 실행하고 하나의 결과값을 반환해줍니다. ac..

간단하게 해주는 js 표현식 정리

특정상황에서 유용하게 쓰이는 표현식 모음입니다. 문자열의 포함 여부 확인하기 ( indexOf ) 2의 보수를 구하는 연산 (~)틸드를 사용 var a = "Hello World" if (~a.indexOf("lo")) {} // -4 truthy if (~a.indexOf("ol")) {} // 0 falsy Truthy, Falsy 값 형변환 이중 부정 !!을 사용 var a = "0"; var b = []; var c = {}; var d = ""; var e = 0; var f = null; var g; !!a; // true !!b; // true !!c; // true !!d // false !!e // false !!f // false !!g // false 논리 연산자 function fo..

javascript의 타입을 확인하는 typeof

javascript는 총 7개의 타입을 갖고 있습니다. null undefined boolean number string object symbol (es6부터 추가) 위 타입들은 typeof 연산자로 확인할 수 있습니다. typeof undefined === "undefined"; // true typeof true === "boolean"; // true typeof 42 === "number" // true typeof "42" === "string" // true typeof { life: 42 } === "object" // true typeof Symbol() === "symbol" // true 하지만 null은 예외적으로 typeof에 대한 값이 object로 나옵니다. typeof null..