프론트엔드 공부한 거 정리하기

날짜를 저장할 수 있고, 날짜와 관련된 메서드를 제공해주는 자바스크립트 내장 객체 Date 객체를 활용해서 생성 및 수정 시간을 저장하거나 시간을 측정할 수 있고, 현재 날짜를 출력하는 용도 등으로도 활용할 수 있음. 작성의 용이함을 위해 보통 변수나 상수에 대입해서 사용. const now = new Date(); new Date(); 인수 없이 작성 시 현재 날짜 및 시간이 출력됨. console.log(now); // Mon Dec 05 2022 15:43:13 GMT+0900 (한국 표준시) .getMonth(); 현재 월을 0~11로 반환. console.log(now.getMonth() + 1 + '월'); // 월 0~11까지 반환. 즉 11번째는 '12월'​ 그 외 다양한 메서드

문자 객체의 메서드 .trim() : 문자열 양 끝 공백 제거 후 반환. 스페이스, 탭, 줄바꿈 등 공백 제거 console.log(`.trim() ----------------- `); let hello = ` 안녕 하세요? `; console.log(hello); hello = hello.trim(); console.log(hello); .indexOf(검색대상문자열) : 문자열 찾음. 인덱스 번호로 반환. -1은 찾을 수 없는 경우 반환. 대소문자 구분 let text1 = `재미있는 자바스크립트` console.log(text1); let count = text1.indexOf(`재미있는`); // = 0 // 인덱스 번호의 시작은 0부터. 첫번째 존재 count = text1.indexOf(`자..

JSON(JavaScript Object Notation) 자료를 표현하는 방식, 데이터 교환시 주로 사용 CSV, XML, CSON 등이 있지만 현재 웹에서 가장 많이 사용하는 방식 { "key" : "value"} 형태로 작성 값 (value)는 문자열, 숫자, 불린형만 가능 (함수 x) 키 (key)에 반드시 큰 따옴표 필수. 값의 문자열도 반드시 큰 따옴표 필수 객체와 달리 마지막 프로퍼티나 자료에 쉼표(,)는 쓰지 않는다. 자료가 하나일 때 중괄호로 감싸고 프로퍼티와 자료를 쉼표(,)로 구분 { "id" : 1, "prefix" : "ht", "body" : false } 자료가 여러개일 때 대괄호로 감싸고 각 중괄호와 그 안의 프로퍼티 및 자료를 쉼표(,)로 구분 [ { "id" : 1, "p..

객체 (Object) 함수, 배열, 정규 표현식 등 변형 가능한 데이터들의 집합 객체 종류 코어 객체(Array, Math, Date, Number, String, ...) DOM 객체 BOM 객체 기본 구조 { 키(key): 값(value); console.log(`주문하신 ${obj2.coffee} 나왔습니다.`); obj2.order(); console.log(`총 ${obj2.price}원 입니다.`); 객체 내부에 있는 함수는 메서드(Method)라고 한다. delete 키워드를 작성해 프로퍼티를 삭제할 수 있다.'delete 객체리터럴.프로퍼티식별자' console.log(obj2); delete obj2.price; console.log(obj2); 객체 특징 키와 값에 인용 부호 작성 가능..

콜백함수 callback function 함수의 매개변수에 함수를 인수로 전달하는 것. 자바스크립트 내장 함수 setTimeout(콜백함수, 시간); 일정 시간 후 한 번만 실행하는 자바스크립트 내장 함수로 '호출 스케줄링'이라고 한다. const working = () => { let study = `자바스크립트`; setTimeout(function() { console.log(`재미있는 ${study}`); }, 2000) // css: 1초 == 1s / js: 1초 == 1000 } working(); // 2초 후 '재미있는 자바스크립트' 출력 clearTimeout(); setTimeout()을 중단하는 함수로, setTimeout()을 변수에 대입해서 사용하고 그 식별자를 ()안에 작성하면..

중첩 함수 내부 함수 : 함수 안에 작성된 함수로 외부에서 접근할 수 없음.

즉시 실행 함수 함수 선언과 동시에 실행되는 함수. (호출 x) 한 번만 호출되기 때문에 주로 초기화 값으로도 많이 사용. 전역으로 선언되는 것을 방지. 함수 선언문을 즉시 실행 함수로 작성 괄호로 function을 감싸서 작성. ( function 이름(){} ) (); ( function 이름(){}() ); (function fn1() { let a = 5, b = 10; console.log(a * b); })(); //함수를 호출하지 않아도 선언과 동시에 50 출력 (function fn2() { let a = 10, b = 20; console.log(a * b + a); }()); //함수를 호출하지 않아도 선언과 동시에 210 출력 함수 표현식(익명함수)을 즉시 실행 함수로 작성 (func..

지역 변수 : {} 영역 안에서만 적용 전역 변수 : 문서 전체에 적용 //전역 변수 let aLet = 10; // 블록 스코프(block scope) -> {} var bVar = 10; // 펑션 스코프(function scope) -> function() {} const noName1 = () => console.log(`noName1 함수 내부에 적용됨: ${bVar}`); // 전역 var변수 bVar의 값을 함수 내부로 전달 받을 수 있음. console.log(`noName1 문서 전체에 적용됨: ${bVar}`); // 함수 외부에도 당연히 적용 됨. noName1(); const noName2 = () => console.log(`noName2 함수 내부에 적용: ${aLet}`); n..

산술연산자 + (더하기) : 변수의 자료형에 따라 값을 더하거나 문자열을 출력. var num1 = 10, num2 = 20; console.log(num1 + num2); // num1과 num2의 값이 더해져 30 출력 console.log(`num1 + num2 = ` + (num1 + num2)); // num1 + num2 = 30 // `백틱`안의 문자열 `num1 + num2`와 ()안의 숫자 num1+num2의 값 -> 30을 출력 console.log(`오늘은 ` + `즐거운 ` + `금요일`); // '오늘은 즐거운 금요일' 출력 console.log(`11` + `22`); // 1122 //숫자형 문자열을 문자열로 연산한다. console.log(11 + `22`); // 1122 ..

형 변환 함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환된다. alert의 값이 모두 문자열로 변환되는 것. 문자와 문자의 + 연산이나 문자와 숫자형 문자열의 연산 등 ... 이 외에, 의도적으로 타입을 변환하는 것도 가능한데 이것을 '명시적 변환'이라고 함. 문자형으로 변환 String(값) 함수를 호출해 전달받은 값을 문자열로 변환. let num = 1; //숫자 typeof String(num); // 문자열 숫자형으로 변환 수학과 관련된 함수와 표현식에서 자동으로 변환됨. 혹은 Number(값); 함수 호출. let num = '1' + '3' let num1 = '1' - '3' let num2 = '1' / '3' let num3 = '1' * '3' let num4 = '..