[JS] 동기비동기 · 콜백 이해하기
·
STUDY/JavaScript
동기와 비동기차이 ⦁ 동기적(Synchronous) 어떤 작업을 요청했을 때 그 작업이 종료될때 까지 기다린 후 다음 작업을 수행하는 방식 ⦁ 비동기적(Asynchronous) 어떤 작업을 요청했을 때 그 작업이 종료될때 까지 기다리지 않고 다른 작업을 하고 있다가, 요청했던 작업이 종료되면 그에 대한 추가 작업을 수행하는 방식 자바스크립트는 동기적인 것입니다. *호이스팅된 이후부터 코드가 우리가 작성한 순서에 맞춰서 하나하나씩 동기적으로 실행된다는 말입니다. *호이스팅: var변수, function선언들이 자동적으로 제일 위로 올라가는 것 console.log('1'); console.log('2'); console.log('3'); 동기적(Synchronous)은 위 console.log와 같이 1,..
[JS] 자바스크립트 내장함수
·
STUDY/JavaScript
내장함수란? 내장함수란 자바스크립트 엔진에 내장된 함수를 말합니다. 내장함수는 개발자가 함수를 직접 선언하지 않아도됩니다. 즉, 자바스크립트에 이미 내장된 함수는 바로 호출할 수 있습니다. 내장 함수의 종류 종류 설명 사용예 encodeURI() 문자를 유니코드값으로 인코딩합니다. (영문, 숫자, 일부기호(;,/?:@&=+$ 제외) encodeURI("?query=값") → "?query=%EA%B0%91" encodeURIComponent() 문자를 유니코드 값으로 인코딩합니다. (영문,숫자 제외) encodeURIComponent("?query=값") →"%3Fquery%3D%EA%B0%91" decodeURI 유니코드값을 디코딩해 다시 문자화합니다. decodeURI("?query=%EA%B0%91..
[JS] 브라우저 객체 모델
·
STUDY/JavaScript
브라우저 객체란? 브라우저에 내장된 객체를 브라우저 객체라고 합니다. window는 브라우저 객체의 최상위 객체이며, window 객체에 하위 객체가 포함되어있습니다. 즉 계층적 구조로 이루어져 있으며, 이를 브라우저객체모델(BOM, Browser Object Model)이라고 합니다. Window객체 window객체의 메서드 종류 종류 설명 open("URL", "새창이름", "새창옵션") URL 페이지를 새창으로 나타냅니다 alert(data) 경고창을 나타내고 데이터를 보여줍니다. 방문자가 [확인]버튼을 누르면 alert()를 사용한다음 위치의 코드를 수행합니다. prompt("질문", "답변") 질문과 답변으로 질의 응답 창을 나타냅니다. confirm("질문 내용") 질문내용으로 확인이나 취소창..
[JS] 자바스크립트 내장 객체
·
STUDY/JavaScript
날짜정보객체 참조변수 = new Date(); 날짜관련메서드 날짜 정보를 가져올 때 (GET) 날짜 정보를 수정할 때 (SET) getFullYear() 연도 정보를 가져옴 setFullYear() 연도 정보만 수정함 getMonth() 월 정보를 가져옴(현재 월-1) setMonth() 월 정보만 수정함 (월 -1) getDate() 일 정보를 가져옴 setDate() 일 정보만 수정함 getDay() 요일 정보를 가져옴(일:0~토:6) '요일'은 날짜를 바꾸면 자동으로 바뀌므로 setDay() 는 필요없음 getHours() 시 정보를 가져옴 setHours() 시 정보만 수정함 getMinutes() 분 정보를 가져옴 setMinutes() 분 정보만 수정함 getSeconds() 초 정보를 가져옴..
[JS] prototype 이란?
·
STUDY/JavaScript
코딩애플식 정의 : prototype은 유전자이다. function기계(){ this.q = "strike" //여기에 무언갈 쓰면 자식이 직접 가지게 된다. } 기계.prototype.name = 'kim' //여기에 쓰면 부모가 가지게 된다. var nunu = new 기계(); nunu.name //kim이 나옴 여기서 부모 유전자에 있는 것을 자식이 사용 가능한 이유는? object에서 자료 뽑을 때 일어나는 일 직접 자료를 가지고 있으면 그것을 출력한다. 없으면 부모유전자까지 찾아본다. 없으면 부모의 부모 유전자까지 찾아본다. 이것을 prototype chain ~ 이라고 칭한다. array.sort() 나 array.length() 처럼 array에 붙일 수 있는 이유가 무엇일까? 기본적으로 ..
[JS] padStart() · Date.parse()
·
STUDY/JavaScript
padStart() padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 묶음, 주어진 길이를 만족시키는 새로운 문자열을 반환합니다. str.padStart(targetLength [, padString]) targetLength 목표 문자열 길이. 현재 문자열의 길이보다 작다면 충전물이 그대로 반환됩니다. padString 현재 문자열에 채워넣기를 다른 문자열입니다. 반환값 : String const str1 = '5'; console.log(str1.padStart(2, '0')); // expected output: "05" 'abc'.padStart(10); // " abc" 'abc'.padStart(10, "foo"); // "foofoofabc" 'abc'.padStart(6,"1..
[JS] arguments 객체
·
STUDY/JavaScript
arguments 객체 만약 함수의 정의보다 더 많은 수의 인수가 전달되면, 매개변수에 대입되지 못한 인수들은 참조할 방법이 없게 됩니다. 하지만 arguments 객체를 이용하면, 함수로 전달된 인수의 총 개수를 확인하거나, 각각의 인수에도 바로 접근할 수 있습니다. arguments 객체는 함수가 호출될 때 전달된 인수를 배열의 형태로 저장하고 있습니다. 첫 번째 인수는 arguments[0]에 저장되며, 다음 인수는 arguments[1]에 저장됩니다. 또한, 인수의 총 개수는 arguments 객체의 length 프로퍼티에 저장됩니다. 다음 예제의 addNum() 함수는 전달받는 인수의 개수에 상관없이 언제나 정상적인 계산을 수행합니다. function addNum() { var sum = 0; ..
[JS] spread operator - 배열의 복사
·
STUDY/JavaScript
spread operator (펼침 연산자) 펼침연산자는 ... 를 사용한다.마치 String의 concat이 새로운 공간을 할당받아 이어진 문자열을 만들어 주는것 처럼,spread operator를 사용하면 새로운 공간을 할당받아 복사된 값을 가진 배열을 만든다.  1. 배열에서의 스프레드 문법배열을 복사하거나 다른 배열과 합칠 때 스프레드 문법을 사용할 수 있습니다. 배열 복사하기배열을 복사할 때 스프레드 문법을 사용하면, 원본 배열을 그대로 복사하여 새로운 배열을 만들 수 있습니다.const arr = [1, 2, 3];const newArr = [...arr]; // arr을 복사하여 newArr에 할당console.log(newArr); // [1, 2, 3]let pre = ["apple", ..