일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- typescript
- location
- ECMAScript
- react
- URLSearchParams
- 동기
- webapi
- 비동기
- react-router-dom
- 가변성
- fetch
- 코딩테스트
- math
- context api
- node
- promise
- element
- Web API
- 불변성
- javascirpt
- 연산자
- date
- NEXT
- 프로그래머스
- JavaScript
- Today
- Total
목록Javascript (50)
sol의 개발로그
🔗Math MDN 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체이며 함수 객체가 아니다. Math는 Number 자료형만 지원하며 BigInt와 사용할 수 없다. 자주 사용되는 Math 메서드 알아보기 Math.abs 주어진 숫자의 절댓값을 반환한다. x가 양수이거나 0이라면 x를 리턴하고, x가 음수라면 x의 반대값, 즉 양수를 반환한다. console.log(Math.abs(2)); //2 console.log(Math.abs(-2)); //2 Math.ceil 주어진 숫자를 올림해 정수를 반환한다. 즉, 주어진 숫자보다 크거나 같은 숫자 중 가장 작은 숫자를 정수로 반환한다. console.log(Math.ceil(3.1415926535)) // 4 Math.floor 주어진 숫자를 ..
toFixed 숫자를 지정된 고정 소수점 표기(자릿수)까지 표현하는 문자로 반환한다. 단, 주의해야 하는 점은 toFixed 메서드를 사용하여 반환된 값은 문자데이터로 반환되니 숫자 데이터가 필요한 경우 다시 데이터 타입을 변경해줘야 한다. const num = 3.1415926535; console.log(num.toFixed(2)); // "3.14" console.log(parseFloat(num.toFixed(2))); // 3.14 parseFloat 문자열에서 숫자로 변환할 수 있는 부분까지만 분석(Parsing)하고 이후에는 숫자가 아닌 문자가 나타나면 분석을 하지 않는다. 문자열의 앞부분에 숫자가 없거나, 숫자 다음에 문자가 포함되어 있을 경우에는 해당 문자열을 NaN(Not a Numbe..
length 문자의 길이(숫자)를 반환하며 띄어쓰기까지 포함된다. const string = "Hello world!"; // 012345678901 console.log(string.length) //12 includes() 대상 문자에 주어진 문자가 포함되어 있는지 확인하고 결과값을 불린값으로 반환한다. 대소문자를 구분하기 때문에 정확한 비교문자값 작성해야한다 // 메서드 작성방법 1. string.includes("비교할문자") 2. string.includes("비교할문자", 어느지점부터비교할껀지number) const string = "Hello world!"; console.log(string.includes("hello")); //false console.log(string.includes(..

prototype으로 작성하는 것과 Class문법으로 작성하는 코드는 기능적으로는 같다고 할 수 있다. Class문법이 프로토타입 기반 코드를 대체하는 것은 아니며 기존방식은 여전히 유효하고 이부 상황에서는 더 유용하게 사용될 수 있다. 하지만 기존의 protoptype으로 작성하지 않고 ES6부터 Class문법으로 사용되는 이유는 가독성과 유지보수성이 높다는 것과 표준화에 의미가 있다 Class문법을 사용함으로써 코드의 가독성을 높이고 개발 생산성을 향상할 수 있어서 ES6 이후에는 Class문법을 활용하는 것이 일반적 추세가 되었다. Class문법으로 사용되는 생성자 함수 예시코드 class User { constructor(first, last) { this.firstName = first; thi..

자바스크립트에서 모든 객체는 프로토타입이라는 특별한 속성을 가지고 있다 프로토 타입은 객체가 가지고 있는 메서드와 속성에 대한 참조를 가지고 있는 객체로 해당 객체의 부모 역할을 한다. 객체 생성 시 프로토타입을 지정하지 않는다면 자동으로 Object.prototype이라는 기본 프로토타입이 할당된다. // 배열 생성방법 1. 배열 리터럴 const fruits = ["apple", "banana", "cherry"]; // 배열 생성방법 2. 생성자 함수로 생성하고 인수로 데이터 작성 const fruits = new Array("apple", "banana", "cherry"); // 자바스크립트 prototype에서 기본으로 제공하는 속성 or 메소드 console.log(fruits.length)..
자바스크립트에서의 this는 함수가 호출될 때마다 해당 함수를 호출한 객체를 가리키는 특수한 키워드를 의미한다. this의 값은 함수를 어떤 방식으로 어떻게 호출했냐에 따라서 동적으로 결정이 된다 this는 일반함수와 화살표 함수에 따라 다른 방식으로 해석된다. 1. 일반 함수에서의 this : 호출 위치에서 this 정의 const user = { firstName: "eun", lastName: "lee", age: 25, getFullName: function () { return `${this.firstName} ${this.lastName}`; // return `${user.firstName} ${user.lastName}`; }, }; console.log(user.getFullName())..
자바스크립트에서 비동기코드를 처리하는 방법 중 한 개로 자바스크립트는 기본적으로 단일 스레드로 동작하며 동기적으로 실행되는 코드는 호출 스택(Call Stack)을 사용하여 순차적으로 실행된다 하지만 비동기적인 작업(예: 네트워크요청, 파일 읽기등등..)은 호출 스택을 차지하지 않고 별도의 스케줄링이 필요하고 이를 함수 호출 스케줄링을 의미한다. 예시코드 // setTimeout const hello = () => { console.log("안녕~"); }; const timeout = setTimeout(hello, 2000); const h1El = document.querySelector("h1"); h1El.addEventListener("click", () => { console.log("cle..