| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 |
- 버블정렬
- next.js
- 해쉬
- react
- NextAuth
- aws lightsail
- 라이프사이클
- tailwindcss
- nestjs
- js알고리즘
- 그리디
- 투포인터
- isNaN
- styled-components
- 정렬
- 빅오
- nextjs
- TypeScript
- typscript
- never타입
- react-query
- 슬라이딩윈도우
- 스택
- Algorithm
- 블로그만들기
- 큐
- 알고리즘
- cookie
- JavaScript
- textarea autosize
- Today
- Total
목록JavaScript (21)
far
1. 엄격 모드 function foo() { x = 10; } foo(); console.log(x); // ? 위 식의 경우 x 변수를 찾을 수 없음에도 ReferenceError가 발생하지 않는다. 자바스크립트 엔진이 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성하고 이를 전역 변수처럼 사용할 수 있게 해주기 때문이다. 이 현상을 암묵적 전역(implicit global)이라고 한다. 하지만 이런 현상은 나중에 예기치 못한 오류를 발생시키는 원인이 될 가능성이 있다. 그래서 ES5부터 문법적으로 오류를 발생시킬 가능성이 높거나 JS엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시키는 엄격 모드(Strict mode)가 추가되었다. 'use strict'; functi..
1. 프로토타입이란? 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어이다. 그래서 프토로타입은 ES6에서 클래스 문법이 도입되기 이전에 객체 지향 프로그래밍(OOP)의 핵심을 맡고 있었다. 게다가 클래스 문법 또한 완전히 새로운 객체지향 모델을 제공하는 것이 아니라 프로토타입 기반 패턴의 문법 변형이라고 볼 수 있다. (사실 클래스는 생성자 함수(new)는 동일하게 작동하지 않으며, 클래스가 좀 더 엄격하고 생성자 함수에서 제공하지 않는 기능도 제공하기 때문에 새로운 객체 생성 매커니즘으로 보는 것이 좀 더 합당할 수도 있다.) 1.1 상속과 프로토타입 자바스크립트는 프로토타입을 기반으로 상속을 구현한다. // 생성자 함수 function Circle(radius) { this.radius = ..
1. 프로퍼티 어트리뷰트 자바스크립트 엔진은 프로퍼티를 생성할 때 프로터피의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. 1.1. 데이터 프로퍼티 데이터 프로퍼티는 키와 값으로 구성된 일반적인 프로퍼티로 value, writable, enumerable, configurable의 프로퍼티 어트리뷰트를 가진다. 이 프로퍼티 어트리뷰트는 자바스크립트 엔진이 프로퍼티를 생성할 때 기본값으로 자동 정의된다. 프로퍼티 어트리뷰트 프로퍼티 디스크립터 객체의 프로퍼티 설명 [[Value]] value 프로퍼티 키를 통해 프로퍼티 값을 변경하면 [[Value]]에 값을 재할당한다. 이때 프로퍼티가 없으면 프로퍼티를 동적 생성하고 생성된 프로퍼티의 [[Value]]에 값을 저장한다. [[Writabl..
1. var ES6이전에는 변수를 선언할 수 있는 유일한 방법이 var를 사용하는 것이었다. ES6에서 let과 const가 등장한 이후 var의 사용이 거의 사라졌는데, 그 이유는 var가 가진 독특한 특징이 때문이다. 1.1 변수 중복 선언 허용 var x = 1; var y = 1; var x = 100; var y; console.log(x); // 100 console.log(y); // 1 var로 선언한 변수를 중복 선언하면 초기화문(변수 선언과 동시에 초기값을 할당하는 문) 유무에 따라 다르게 동작한다. 초기화문이 있는 경우 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작하고 초기화문이 없는 변수 선언문은 무시된다. 하지만 위와 같이 동일한 이름의 변수를 중복 선언하면서 값을 할..
즉시 실행 함수 즉시 실행 함수란 함수 정의와 동시에 즉시 호출되는 함수를 말하며, 단 한 번만 호출되고 다시 호출 할 수 없다. 즉시 실행 함수는 지금은 잘 사용하지 않지만 ES6이전 var를 블록 레벨 스코프로 사용하기 위해 고안되었으며, 주로 변수를 전역 스코프에 선언하는 것을 피하기 위해 사용한다. (function () { let a = 3; let b = 5; return a * b; }()); // 화살표 함수로도 사용 가능 (() => { let a = 3; let b = 5; return a * b; }()); 즉시 실행 함수는 위와 같이 익명 함수를 사용하는 것이 일반적이지만 기명 함수로도 사용이 가능하다. (function foo() { let a = 3; let b = 5; retu..
자바스크립트의 형 변환은 명시적 형 변환과 암시적 형 변환 두가지가 있다. 1. 명시적 형 변환(타입 캐스팅) 명시적 형 변환은 개발자가 의도적으로 값의 타입을 변환하는 것을 말한다. 표준 빌트인 생성자 함수(String, Number, Boolean)를 new 연산자 없이 호출하는 방법과 빌트인 메서드를 사용하는 방법, 암시적 형 변환을 이용하는 방법이 있다. 빌트인 생성자 함수: 자바스크립트에서 기본 제공하는 함수로 new 연산자와 함께 호출한다. 빌트인 메서드: 자바스크립트에서 기본 제공하는 빌트인 객체의 메서드 1.1. 문자열 형 변환 문자열 타입이 아닌 값을 문자열 타입으로 변환하는 방법은 세가지가 있다. // 1. String 생성자 함수를 new 연산자 없이 호출하는 방법 String(1);..
1. 데이터 타입(Data type)이란? 자바스크립트 데이터 타입은 값의 종류를 말하며, 원시타입과 객체타입으로 나뉜다. 1.1 데이터 타입의 필요성 값은 메모리에 저장하고 참조할 수 있어야 한다. 메모리에 값을 저장하려면 먼저 확보해야 할 메모리 공간의 크기를 결정해야 한다. 다시 말해, 몇 바이트의 메모리 공간을 사용해야 낭비와 손실 없이 값을 저장할 수 있는지 알아야 한다. const score = 100; 위 코드가 실핼되면 컴퓨터는 숫자 값 100을 저장하기 위해 메모리 공간을 확보단 다음, 확보된 메모리에 숫자 값 100을 2진수로 저장한다. 이러한 처리를 하려면 숫자 값을 저장할 때 확보해야 할 메모리 공간의 크기를 알아야 한다. 이 때 자바스크립트 엔진은 데이터 타입에 따라 확보해야 할 ..
1. 동등 연산자(Equality Operator) 동등 연산자(==)는 0과 false를 구별하지 못한다. 동등 연산자는 형이 다른 피연산자를 비교할 때 형변환이 수행되지 않기 때문이다. 하지만 서로 다른 자료형을 가지는 두 피연산자를 동등 연산자로 비교하면 자바스크립트 엔진이 양쪽 변수의 자료형을 공통 자료형으로 강제 형변환시킨다. 1.1 동등 연산자의 형변환이 일어나는 경우 1. 피연산자가 string이거나 boolean일 경우 number타입으로 형변환을 시킨다. 2. 양쪽 모두 null이나 undefined인 경우 true가 반환된다. 3. 피연산자가 기본형과 객체를 비교하는 경우 객체를 기본형으로 변환시킨다. console.log(0 == false); // true console.log(''..
NaN NaN이란 Not a Number라는 뜻으로 나오는 값이 숫자가 아니라는 뜻이다. 숫자 계산시 중간에 숫자가 아닌 값이 들어갔을 경우 발생한다. 대표적으로 NaN이 나오는 경우는 아래와 같다. 1. 숫자로 인식이 불가능한 경우 (Number(문자열), Number(undefined) 등) 2. 0을 0으로 나누는 경우 (다른 수를 0으로 나오면 NaN이 나오지 않는다.) 3. 덧셈을 제외한 문자열을 포함하는 계산식 4. 결과가 허수인 계산식 (Math.sqrt(-1)) 5. 피연산자가 NaN인경우 isNaN() isNaN은 매개변수가 숫자인지 검사해주는 함수로써 주어진 값이 NaN이면 true, 아니라 false를 반환한다. function milliseconds(x) { if (isNaN(x))..
Splice const months = ['Jan', 'March', 'April', 'June']; months.splice(1, 0, 'Feb'); // Inserts at index 1 console.log(months); // Expected output: Array ["Jan", "Feb", "March", "April", "June"] months.splice(4, 1, 'May'); // Replaces 1 element at index 4 console.log(months); // Expected output: Array ["Jan", "Feb", "March", "April", "May"] 설명하기 좋을 것 같아서 MDN의 splice예시 코드를 가져왔다. 위 예시에서 보이는 그대로 sp..