본문 바로가기

Javascript14

14. [JavaScript] Module 🏃🏻‍♀️ Module [ 모듈, Module ] 자바스크립트데이터들을 집합해놓은 문서(파일, .js) 기능이나 데이터들을 파일로 구분하는것을 모듈화라고함 모듈 가져오기 import, 모듈 내보내기 export 둘 중 하나의 키워드가 있어야 자바스크립트의 모듈에 해당됨 자바스크립트모듈은 자바스크립트 파일을 호출하는 html의 script 태그에 type="module"속성이 있어야 활용가능함 /* index.html */ - 내보내기, export default 기본 내보내기 하나의 모듈(파일)에서 하나의 default와 하나의 데이터만 내보내기 가능함 export default 333 이름 내보내기 변수에 데이터를 할당해 여러개를 내보낼수 있음 export const welcome = 'Welc.. 2023. 8. 27.
13. [JavaScript] 표준 내장 객체 - JSON 🏃🏻‍♀️ 표준 내장 객체 [ JSON, .json ] 🗄💾 JSON (JavaScript Object Notation) 문자, 숫자, 논리(불린), 객체, 배열, Null의 데이터만 사용가능하고 이 데이터들을 전달하기 위한 표준포멧(undefinde등 사용불가) 문자데이터는 "" 만 사용가능 객체의 마지막 속성과 값뒤에 ,(후행쉼표) 사용 불가능 - JSON.stringify(javascriptDate); 자바스트립트 데이터를 JSON포멧형식의 문자로 변환 console.log(JSON.stringify('Welcome to the world of Poppy!')); // "Welcome to the world of Poppy!" console.log(JSON.stringify(123)); // Jso.. 2023. 8. 27.
12. [JavaScript] 표준 내장 객체 - Object 🏃🏻‍♀️ 표준 내장 객체 [ Object, 객체 ] 🏰 const object; const alien = { name: 'Poppy', age: 300, nationality: 'Space', } - Object.entries(Object); 배열안에 대상객체의 속성과 값을 자식 배열로 만들어 배열안에 배열이 아이템으로 있는 이중배열을 반환함 console.log(Object.entries(alien)); // (3)[Array(2), Array(2), Array(2)] // 0: (2) ['name', 'Poppy'] // 1: (2) ['age', 300] // 2: (2) ['nationality', 'Space'] // length: 3 // [[Prototype]]: Array(0) // fo.. 2023. 8. 27.
11. [JavaScript] 표준 내장 객체 - Array 🏃🏻‍♀️ 표준 내장 객체 [ Array, 객체 ] 🏰 const array; const numName0 = ['One', 'Two', 'Three']; const numName1 = ['Four', 'Five', 'Six']; const users = [ {name: 'Poppy', age: 35}, {neme: 'GguGGu', age: 3}, {name: 'An84', age: 40} ]- .length(); 배열의 아이템 갯수를 반환 console.log(numName0.length); // 3 - .at(num); 배열의 인덱싱기능과 같으나 추가 기능으로 음수를 사용해.. 2023. 8. 13.
10. [JavaScript] 표준 내장 객체 - Date 🏃🏻‍♀️ 표준 내장 객체 [ Date, 날짜 ] MDN - Date 🏰 const date; // const 인스턴스 = 생성자함수(new) 객체, 함수명, 클래스; const today = new Date(); // 인수로 숫자데이터를 넣어서 원하는 날짜 설정 가능 // 월에 해당하는 인수만 제로베이스트넘버링사용 // 5는 6월에 해당(1월=0, 2월=1...12월=11) const birthDay = new Date(1988, 5, 11, 9, 27, 33); // 원하는 날짜 설정순서: 년, 월, 일, 시, 분, 초 // 인수로 타임스템프 형식의 문자데이터를 넣어도 해석해서 날짜형식의 인스턴스로 반환 const stBirth = new Date('수 Jun 6 1988 9:27:33 GMT+090.. 2023. 8. 6.
9. [JavaScript] 표준 내장 객체 - Math 🏃🏻‍♀️ 표준 내장 객체 [ Math, 수학 ] Math의 모든 멤버(속성과 메서드) 정적임. Math객체(Math 클래스)에 사용해야함 MDN - Math - 🏰 const math; const pi = 3.1415926535; const num0 = 123; const num1 = -123; const num2 = 60; const num3 = 10; - Math.abs(num); absolute(절대값)의 줄임말로 숫자의 절대값은 +,-를 제거한 값 즉 인수가 음수이면 양수로 변환해서 반환 (양수와 0은 그대로 반환) console.log(Math.abs(num0)); // 123 console.log(Math.abs(num1)); // 123 - Math.ceil(num); 소수점을 올림해서 정.. 2023. 8. 1.
8. [JavaScript] 표준 내장 객체 - Number 🏃🏻‍♀️ 표준 내장 객체 [ Number, 숫자 ] 🏰 const number; const pi = 3.1415926535; const piStr = '3.1415926535'; const num0 = 123456; const numStr = '123456'; const numNat = NaN; const str = 'Hello world'; const nul = null; - .toFixed(num); 대상이 부동소숫점일때 소수점 자리를 인수만큼 잘라서 문자 데이터로 반환 console.log(pi); // numberData 3.1415926535 console.log(pi.toFixed(2)); // stringData 3.14 // parseFloat(); 숫자형식의 문자데이터를 숫자데이터로 반.. 2023. 7. 31.
7. [JavaScript] 표준 내장 객체 - String 🏃🏻‍♀️ 표준 내장 객체 멤버 - 객체의 속성과 메소드를 통틀어 칭함 [ String, 문자 ] MDN - string의 멤버 🏰 const welcome; const welcome = 'Welcome to the world of Poppy!'; // length 123456789012345678901234567890 // index 012345678901234567890123456789 // backCounting -098765432109876543210987654321 (음수, 모든 숫자 앞에 -) - .length 특수문자, 띄어쓰기를 포함한 문자열의 갯수(길이)를 숫자 데이터로 반환 console.log(welcome.length); // 30 - .includes('문자데이터', index);.. 2023. 7. 27.
6. [JavaScript] 클래스 🏃🏻‍♀️ class [ 프로토 타입 ] prototype 자바스크립트는 prototype(이웅모 선생님 블로그 - prototype) 기반 자바스크립트의 모든 객체와 배열은 상위 객체와 연결되어 상위 객체의 속성과 메소드를 상속(공유)되어 사용할수있음 이때 상위 객체를 프로토타입이라고 함 최상위 배열, 객체에 내장되어있는 메소드(MDN - 배열 내장 메소드)나 프로토타입(.prototype)으로 새로 등록하는 함수(.함수명 = function() {})를 prototype메소드(prototype속성)이라고 함 함수안에 this를 사용 할 경우 fucntion키워드를 사용하는 일반함수로 등록 -> 화살표함수의 this는 정의가 다르기때문 프로토타입메소드는 인스턴스에서만 사용가능 생성자함수로 실행이되서 호.. 2023. 7. 27.
5. [JavaScript] 함수 🏃🏻‍♀️ 함수 function [ 함수의 정의 ] - 함수의 구조와 호출 함수명 매개변수(인수로 들어온 데이터를 매개변수로 받음) function add (a, b) { 반환값 return a + b; } 인수 add(3, 5); // 함수 호출 5 인수 = Argument / 매개변수 = Parameter 함수호출시 인수로 작성된 데이터가 매개변수에 할당됨 -> 인수가 할당된 매개변수는 함수의 코드블럭{} 안에서만 유효(지역변수) - 호이스팅 MDN - Hoistiong 자바스크립트는 최상단에서 -> 하단 순서로 코드를 읽고 실행하는데 호이스팅이 발생하면 함수 선언문을 유효범위의 최상단으로 끌어올려 먼저 다 읽음 즉, 호이스팅이 발생하는 함수의 선언문(함수의 로직)이 함수호출 아래에 있어도 함수가 실.. 2023. 7. 25.

티스토리툴바