네발로 코딩하는 포메라니안

외부 파일에 선언한 변수를 import해서 사용할 수 있다. 먼저, html 문서에서 곱셈을 계산하는 모듈을 가져와 사용하려고 한다. 다른 곳에서 사용하도록 설정하는 방법에는 2가지 방법이 있다. 1. 외부에서 사용하도록 허가할 변수마다 export 키워드 붙이기 export const title = "계산기 모듈"; export function mul(i, j) { return i * j; } function off() { //외부에서 사용 불가 console.log("종료"); } 2. 마지막에 외부에서 사용하도록 허가할 변수들을 모아서 한 번에 export 키워드 붙이기 //cal.js const title = "계산기 모듈"; function mul(i, j) { return i * j; } fu..

1. Promise란? 자바스크립트에서 비동기를 처리할 때, 동기처럼 처리하기 위해 사용하는 객체를 말한다. 비동기 처리가 끝난 후, 실행되어야 하는 것을 정의해놓고 비동기 처리가 끝나면 불려질 수 있도록 한다. 말 그대로, "넌 비동기 처리 끝나고 실행해줄게"하는 약속을 맺는다고 보면 된다. 비동기 처리 시 아래의 코드처럼 특정 로직이 끝나는 걸 기다리지 않고, 뒤의 로직을 바로 실행시키기 때문에 원하는 결과를 얻을 수 없다. let data; setTimeout(() => { data = 20; console.log('비동기 코드 실행 완료'); }, 3000); console.log(data); //undefined //비동기 코드 실행 완료 이를 해결하는 방법은 대표적으로 콜백함수가 있고, 지금 ..

Destructing이란, 구조(자료 구조)를 할당하면 좌항에 맞게 알아서 분해해서 할당해주는 것을 말합니다. let arr = [1, 2, 3]; let [n1, n2, n3] = arr; console.log(n1, n2, n3); 활용 1. 객체 프로퍼티 값 참조 let person = { name: "홍길동", age : 25, introduce(){ console.log(`이름은 ${this.name}이고, 나이는 ${this.age}입니다.`); } } //var은 window에 선언하는 변수 //let(지역변수)으로 쓰면 this가 window라서 introduce의 이름, 나이값 출력X var {name, age, introduce} = person; console.log(name, age..

1. 매개변수의 개수에 따른 사용법 1. 매개변수가 없는 경우 func = () =>{ console.log("func"); } func(); 2. 매개변수가 1개인 경우 func = (num) =>{ console.log("func", num); } func(3); 매개변수가 1개면, ( ) 생략 가능 func = num =>{ console.log("func", num); } func(3); 3. 매개변수가 여러 개인 경우 반드시 ( )로 매개변수들을 묶어야 한다. func = (n1, n2) =>{ console.log("func", n1*n2); } func(3, 2); 2. return값에 따른 사용법 1. 실행 문장이 return 1개인 경우 1) return 키워드 사용 우리가 흔히 사용하는..

1. Window 객체란? - 웹브라우저에서 작동하는 JS의 최상위 전역 객체 - 여러 객체와 속성, 함수들이 있음 : Frame, Location, History, Document - BOM(Browser Object Model)으로 불리기도 함 [Window 객체 속성] 속성 설명 self 현재 창 자신으로, 자신의 window객체와 같은 의미 document document 객체, 가장 많이 사용 history history 객체, 페이지 이력과 관련됨 location location 객체, 현재 페이지와 관련됨 opener 자신을 연 창을 의미하는 객체 screen 화면의 가로, 세로 크기 정보 pageXOffset 현재 나타나는 페이지의 X위치(IE 지원 X) pageYOffset 현재 나타나는..

1. JS의 함수란? - 일급(first-class) 객체 - 변수, 객체, 배열 등에 저장 가능 - 함수의 인자 혹은 반환값으로 사용 가능 - 프로그램 실행 중, 동적으로 생성 가능 2. 함수 정의 방법 방법1) 함수 선언문 function 함수이름(매개변수1, ... ){ //실행 코드 } 방법2) 함수 표현식 let 함수이름 = function(매개변수1, ... ){ //실행 코드 } 방법3) Function 생성자 함수(잘 안씀) let 함수이름 = new Function("매개변수1", "매개변수2", ..., "함수내용"); let sum = new Function("n1", "n2", "console.log(n1+n2);"); sum(1, 2);//3 [함수 호출] 함수이름(매개변수1, ...

1. 객체란? - 키(Key)와 값(Value)로 구성된 프로퍼티(Property)들의 집합 - 프로퍼티를 동적으로 추가하거나 삭제 가능 - JS의 함수는 일급객체로, 프로퍼티 값으로 함수 사용 가능 2. 객체 생성 방법 1. 객체 리터럴 - { }내에 프로퍼티를 넣어 객체 생성 let person = { name: "홍길동", age : 25, introduce : function(){ console.log(`이름은 ${this.name}이고, 나이는 ${this.age}입니다.`); } } console.log(person.name);//홍길동 console.log(person["name"]);//홍길동 person.introduce();//이름은 홍길동이고, 나이는 25입니다. 2. Object 생..

1. 주석 1. 한 줄 주석 = // code 2. 블록 주석 = /* code */ 2. 변수 동적 타입 언어로, 실행하면서 값이 할당되는 시점에 타입이 결정된다. 변수 = 형용사, 명사 사용 권장 함수 = 동사 사용 권장 낙타 표기법 ex) userName 키워드, 공백 포함X 숫자로 시작X 특수 문자는 _와 $만 허용 3. 자료형 1. 원시 타입 자료형 typeof 값 설명 숫자 number 정수 or 실수 (구분X) 문자열 string 문자, ' ' or " "로 표기 boolean boolean 참(true, 1, "-" 등) or 거짓(false, 0, null, "" 등) undefined undefined 변수가 선언되었지만, 초기화 되지 않을 경우 (개발자가 직접 할당X) null obj..

*본 블로그에서는 웹 용 JS를 말함. 일반 JS는 바닐라 JS라고 부르기도 하며, 웹에서와 다른 부분이 존재 1. JS란? - 객체 지향 - 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어 - 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어 2. HTML에 적용 1. 외부 스크립트 적용 - html 문서 내에 //js파일 document.querySelector(".b1").textContent = "바뀜"; 2. 내부 스크립트 적용 - html내에 사이에 js 작성