본문 바로가기

Javascript90

[JS] 61. 생성자 함수와 new 연산자/프로토타입 상속과 체인 안녕하세요. 박기린 입니다. 이번엔 객체 지향 프로그래밍(OOP - Object Oriented Programming)의 class를 생성하는 방법에 대해 알아보겠습니다. 생성자 함수와 new 연산자 자바스크립트에서는 생성자 함수와 new 연산자를 이용해서 class를 생성할 수 있습니다. 이 방식은 JavaScript의 구식 방식으로, 앞으로 소개해드릴 모든 자바스크립트 class 생성 방법의 근간이 되는 방식입니다. 다른 언어와는 다른 부분이 많다보니 헷갈릴 수도 있습니다. const Person = function(firstName, birthYear) { // Instance properties this.firstName = firstName; this.birthYear = birthYear; }.. 2023. 1. 11.
[JS] 60. 타이머 : setTimeout & setInterval 안녕하세요. 박기린 입니다. 이번에는 JS에서 타이머를 설정하는 방법에 대해 알아보겠습니다. setTimeout() const ingredients = ['olives', 'spinach']; const pizzaTimer = setTimeout( (ing1, ing2) => console.log(`Here is your pizza with ${ing1} and ${ing2} 🍕`), 3000, ...ingredients ); setTimeout( 콜백함수, 밀리초, 콜백함수에 들어올 인수들 ) setTimeout()은 특정 시간이 지나면 콜백함수를 불러오는 JS 내장함수 입니다. 이때, 단 한 번만 콜백함수를 불러옵니다. 실행한 후 3초를 기다리면 함수가 실행됨을 확인할 수 있습니다. clearTime.. 2023. 1. 10.
[JS] 59. Date 객체를 이용해서 날짜 계산하기 안녕하세요. 박기린 입니다. 이전에 쓴 Date 객체 설명글에 이어서, 실제 앱에서 사용할 수 있는 날짜 계산 방식에 대해 설명해보겠습니다. 타임스탬프를 이용해서 날짜 계산하기 const future = new Date(2037, 10, 19, 15, 23); console.log(+future); Date 객체를 +연산자를 이용해서 Number 타입으로 coercion하면, 타임 스탬프 값으로 변환됩니다. (타임 스탬프에 관한 설명이 담긴 글 : https://arnopark.tistory.com/569) 이 타임 스탬프를 이용해서 두 날짜 간의 간격을 계산할 수 있습니다. const calcDaysPassed = (date1, date2) => Math.trunc(date2 - date1) / (10.. 2023. 1. 4.
[JS] 58. 날짜 만들기 - Date 안녕하세요. 박기린 입니다. 이번에는 Date 객체를 이용해서 JavaScript에서 날짜를 구현하는 방법에 대해 알아보겠습니다. 현재 시각 const now = new Date(); console.log(now); // 현재 날짜를 출력 new Date() Date() 생성자 함수를 이용해서 날짜를 구현할 수 있습니다. 현재 시각을 나타내고 싶을 때는 아무것도 인수로 넘기지 않고 Date() 생성자 함수만 선언해주면 됩니다. Date()의 인수 - String console.log(new Date('Aug 02 2020 18:05:41')); console.log(new Date('December 24, 2015')); Date() 생성자는 구문 분석 기능을 가지고 있습니다. 특정 시간이 입력된 Str.. 2023. 1. 3.
[JS] 57. Bigint 타입 안녕하세요. 박기린 입니다. 이번에는 Bigint에 대해 설명을 하겠습니다. Bigint Bigint는 ES2020부터 도입된 데이터 타입입니다. Number타입처럼 숫자를 저장하는 데이터 타입이지만, Number의 숫자 저장 한도를 넘은 수까지 저장할 수 있는 데이터 타입입니다. 그래서 말 그대로 Big - integer라고 볼 수 있습니다. Number의 한계 900719925470991가 Number가 나타낼 수있는 최대 숫자 입니다. console.log(2 ** 53 - 1); // 900719925470991 console.log(Number.MAX_SAFE_INTEGER); // 900719925470991 console.log(2 ** 53 + 1); // 900719925470992 2023. 1. 2.
[JS] 56. Math object 안녕하세요. 박기린 입니다. 이번에는 자바스크립트의 수학 연산관련 내장 객체인 'Math'의 속성과 메소드에 대해 설명해보겠습니다. Math.sqrt() console.log(Math.sqrt(25)); // - 지수가 분수인 수 - console.log(25 ** (1 / 2)); console.log(8 ** (1 / 3)); Math.sqrt(제곱근을 구하고 싶은 Number); Math.sqrt() 함수는 인수로 받은 Number의 제곱근을 구해줍니다. 만약 세제곱근을 비롯한 '지수가 분수인 수'를 계산하고 싶다면, 위의 예제 코드처럼 **(제곱 연산자)에 분수를 넘겨주면 됩니다. Math.max() console.log(Math.max(5, 18, 23, 11, 2)); // 23 console.. 2022. 12. 28.
[JS] 55. Number 타입의 부가적인 내용 (conversion, parsing, checking) 안녕하세요. 박기린 입니다. 이번에는 JS의 Number type의 부가적인 내용을 설명하겠습니다. Number의 동등 연산자 console.log(23 === 23.0); // true JS에서 Number은 부동 소수점 숫자로 이루어집니다. 그래서 정수와 소수 모두를 Number라는 하나의 type으로 관리합니다. console.log(0.1 + 0.2); // 0.30000000000000004 2022. 12. 22.
54. sorting Arrays 안녕하세요. 박기린 입니다. 이번에는 Array를 정렬하는 메소드인 sort()에 대해 알아보겠습니다. Array.prototype.Array() const owners = ['j', 'z', 'a', 'm']; owners.sort(); console.log(owners) // [a, j ,m ,z] 비교함수의 구성 (a, b) => { { a와 b를 비교하는 함수 } } a : Array의 elements 중, 첫 번째로 비교하는 element b : Array의 elements 중, 두 번째로 비교하는 element sort()는 Array의 메소드로, Array 내부 elements를 정렬해주는 함수입니다. sort()는 원본 배열에도 영향을 줍니다. Number에서 sort() const mov.. 2022. 12. 21.
53. includes/some/every 안녕하세요. 박기린 입니다. 자바스크립트의 Array 내장 메소드 중, Array의 elements를 탐색하는 내장메소드인 includes, some, every에 대해 알아보겠습니다. Array.prototype.includes() const movements = [200, 450, -400, 3000, -650, -130, 70, 1300]; console.log(movements.includes(-130)); // true Array이름.includes( 찾고자 하는 value, Number : 몇 번째 순서의 elemets 부터 찾을지 ) 첫 번째는 includes() 입니다. includes()가 첫 번째 인수로 받은 값을, includes() 메소드가 적용된 Array의 각 element 마다.. 2022. 12. 20.

티스토리툴바