Carrot

Front-end/JavaScript 7

[Moment.js] Moment.js를 이용한 날짜 계산

최신 업데이트: 2024. 01. 30 현재 시각 구하기 moment() const now = moment(); console.log(now.toLocaleString()); // Tue Jan 30 2024 13:58:30 GMT+0900 특정 날짜를 Moment 객체로 만들기 moment('YYYY-MM-DD') 날짜 문자열을 파라미터로 전달한다. 이때 Moment.js에 지원되는 여러 문자열 포맷이 있는데, 여기를 참고한다. const myDate = moment('2024-01-01') console.log(myDate.toLocaleString()); // Mon Jan 01 2024 00:00:00 GMT+0900 특정 시각보다 먼저인지 뒤인지 알아내기 moment.isBefore(moment..

[JavaScript] this와 this 바인딩

목차 1. this가 뭔가? 2. this 바인딩이란? 3. this는 동적으로 바인딩이 된다고 하는데, 바인딩되는 객체가 어떻게 다른가? 1. this가 뭔가? 자신이 속한 객체를 가리키는 자기 참조 변수 대부분의 객체지향에서의 this는 클래스로 생성한 인스턴스 객체를 의미하지만, 자바스크립트에선 상황에 따라 this가 바라보는 대상이 달라진다. 2. this 바인딩이란? 함수가 호출되는 방식에 따라 this가 동적으로 결정되는 것 대부분 4+1 규칙에 의해 this 바인딩이 이뤄진다. (1) 기본 바인딩 아래에 해당되는 경우가 없을 때 기본적으로 적용되는 규칙. this는 전역 객체(window / global)에 바인딩됨 (2) 암시적 바인딩 객체의 메소드로서 호출될 때, 해당 함수를 호출한 객체..

[JavaScript] 클로저란?

자바스크립트는 함수 지향 언어다. ❌ 자바스크립트는 객체 지향 언어가 아니다. 객체 지향 언어라고 할 순 없지만 class를 이용해 객체 지향 프로그래밍이 가능하다. 다시 본론으로 돌아가, 자바스크립트는 함수 지향 언어로, 함수를 다른 함수의 인수로 넘길 수 있고, 외부의 함수를 호출할 수도 있다. 이 때 함수를 사용하면서 여러 변수의 유효 범위가 정해진다. 중첩(nested) 함수 자바스크립트에서 흔히 중첩 함수가 사용된다. 중첩 함수는 함수 자체를 반환할 수 있고, 따라서 이렇게 반환된 함수는 어디서든 호출해 사용할 수 있다. // makeCount 함수를 호출하여 다음 숫자를 반환해주는 counter 함수 생성 및 호출 function makeCounter() { let count = 0; retu..

[JavaScript] Array 배열 | 삽입, 수정, 삭제하는 법

목차 1. 배열 선언 2. 인덱스로 배열 원소에 접근 3. 배열의 길이 알아내기 4. 배열 순회하기 5. 배열에 원소 추가하기 6. 인덱스로 배열의 특정 원소 삭제하기 자바스크립트의 배열은 Array(정확히는 Object의 특수한 한 형태)로, 이번 시간엔 배열 선언과 아이템의 삽입 / 수정 / 삭제하는 방법을 알아본다. 1. 배열 선언 // 1. 정수형 배열 const arr1 = [1, 2, 3, 4, 5]; // 2. 실수형 배열 let arr2 = [3.14, 1.3, 10.1, 144.0]; // 3. 문자열 배열 const arr3 = ['JavaScript', 'Python', 'C++']; // 4. boolean형 배열 const arr4 = [true, false, false, true..

[JavaScript] Date 객체로 시간 차 구하기

Date 객체를 이용하여 두 시점의 시간 차를 구하는 방법 /* 두 시각 설정하기 */ let today = new Date(); //현재 시각의 Date 객체 생성 let past = new Date(2021, 0, 30); //과거 시각의 Date 객체 생성 //2021-1-30 console.log('현재 시각: ' + today.toLocaleString()); console.log('과거 시각: ' + past.toLocaleString()); let gap = today - past; // gap의 값에는 두 시각차의 밀리초가 저장. console.log(gap); /* 밀리초를 일, 시, 분, 초로 변환하기 */ // 1s = 1000ms, 1m = 60sec, 1h = 60min, 1day..

[JavaScript] 객체(Object)

목차 1. 객체(object)와 속성(property) 2. 객체와 중첩 객체 선언 3. 객체의 속성 접근하기 4. 객체의 속성 추가 / 수정 / 삭제하기 5. 속성 존재 여부 확인하기 객체(object) 여러 데이터들을 하나로 묶는 역할 속성(property) 객체 안에 정의한 데이터 하나 하나 1. 객체를 선언하는 방법 /* 객체 선언 */ const object1 = { name: 'duck', bornYear: 1999, bornMonth: 1, bornDay: 30, dept: 'Computer', }; // (+) property name에서 띄어쓰기가 있거나 숫자로 시작하는 경우 따옴표로 묶는다. const object2 = { name: 'Duck', 'my birthday': '1999...

[JavaScript] 문자열 내 따옴표 표현하기

목차 1. 백슬래시(\) 사용하기 2. 백틱(`) 사용하기 다른 언어와 비슷하게 자바스크립트도 문자열을 따옴표로 감싸서 표현한다. 이 때 문자열 내에서 따옴표를 표현하고 싶으면 어떻게 해야할까? // 작은 따옴표, 큰 따옴표 상관없지만 pair를 맞춰야 한다. console.log("Hello, World!"); // Hello, World! console.log('Hello, World!'); // Hello, World! // Error ❌ console.log("Hello "My Name" is Duck!") 1. 백슬래시(\) 사용 console.log("Hello \"My Name\" is Duck!"); // Hello "My Name" is Duck! console.log("Hello \'M..