JavaScript

이번 게시글은 지난 게시글 (데이터 타입(종류 / 배경지식))에 이어서 데이터 타입 그 중, 변수 선언과 데이터 할당에 대해 알아보도록 하겠습니다.동작 원리를 알아 볼 것입니다.기본적인 변수 선언식은 아래와 같습니다.말로 풀어 쓰면, "변할 수 있는 데이터를 만든다.

이번 게시글은 자바스크립트의 기본기를 다지기 위하여, '데이터 타입'에 대해 알아보도록 할 것 입니다.목표는, 자바스크립트가 데이터를 처리하는 과정을 살펴봄으로써, 기본형과 참조형 타입이 서로 다르게 동작하는 이유를 이해하고 활용 가능하도록 하며, 데이터 타입 관련 중

Date 생성자시간의 특정 지점을 나타내는 Date 객체 생성Date 객체 1970년 1월 1일 UTC(국제 표준 시) 00:00으로부터 지난 시간을 밀리 초로 나타내는 유닉스 타임 스탬프를 사용Date 객체 초기화자바 스크립트 Date 객체 생성 법= new 연산자

조건문이란? 조건에 따라 코드의 실행 흐름을 다르게 동작하도록 제어하는 것. 종류 if문 switch문 if문 설명 → 조건식이 true 값을 가질 때 중괄호({ })안의 실행문을 작동시킨다. → 조건식이 false이면 중괄호({

문자열을 입력할 때 사용숫자를 입력 받아야 하는 경우는 문자열로 입력 받은 뒤 변환첫번째 매개변수는 입력 창에서 띄워줄 메시지두번째 매개변수는 입력 부분의 기본 값

slice 일명 : 뽑아내기 arr.slice([begin[, end]]) 배열의 일부분을 잘라내어, 새로운 배열로 리턴하기 위해서 사용 slice 함수는 잘라낼 배열의 시작index와 end index를 파라미터로 받아서, 그 사이의 원소들을 새로운 배열로 만들어서

백틱( \` (esc키 밑에 있음))을 사용줄바꿈 지원: 단순 코드상의 줄바꿈을 통해서.문자열 안에서 자유로운 따옴표 사용${변수명}의 형태로 특정 변수 전달 가능(변수명 형태)${} 안에서 특정 표현식 사용/ 간단한 연산 가능(특정 표현식)(간단한 연산 (위 코드는

문자열: 문장이라는 뜻. ex. 자바에서 문자열에 해당하는 자료형은 String이다. 위 문자열을 자바에서 표현하려면 아래와 같다.

변수란? 정보를 저장할 수 있는 공간에 이름을 붙인 것이다. → 비유 변수 = 박스 변수명 = 박스에 붙인 라벨 변수 값 = 박스 안의 내용물 → 변수 만든 것 박스를 조립하고 라벨을 붙이는 것은, 변수를 선언하는 것이다. 박스에 내용

for 문반복횟수 명확히 알고 있을 때가장 많이 사용 (가독성, 편함 ↑)while문조건에 따라 반복횟수를 결정해야 할 때do-while문while문과의 차이점: 조건을 먼저 검사하느냐 나중에 검사하느냐 while문과의 공통점: 기본적인 로직은 같다.for문, whi

페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델역할: HTML인 웹페이지와 스크립팅언어(JavaScript)를 서로 이어줌JavaScript가 웹 페이지에 접근하고, 페이지 수정하는 것을 가능하게 함JavaScript의 document 객체

A 변수 verb와 project가 가지는 값에 따라 다른 키와 다른 값을 가지는게 가능 B 키와 값: 고정순서가 보장되지 않은 순회어떤 객체가 가지고 있는 키들의 목록을 배열로 리턴하는 메소드객체 생성자인 Object 가 직접 가지고 있는 메소드응용\_반복

변화 ↓ 코드

프로그램이 동적으로 할당했던 메모리 영역 중에서 필요 없게 된 영역을 해제하는 기능메모리 관리 기법 중의 하나메모리의 힙(Heap) 영역에 할당된 부분이 참조되지 않는데도 해제되지 않은 채로 메모리를 계속 점유하고 있는 것JS는 도달 가능성을 사용해 메모리 관리 수행도

변수 es6부터 생성 let, const [ 선언 ] var vs let 비교 | | var | let | | --- | --- | --- | | 재선언 | o | x | | 선언 전, 사용 | o | x | > 예시 재선언 선언 전, 사용

↑ 이렇게 만드는 것첫 글자 → 대문자 ( 어떤 함수라도 new를 붙이면 알고리즘이 동일하게 동작 ) 함수 호출 방법 : new 연산자new 함수명(); 을 실행하면this = {} 빈 객체({})를 만들고 this에 할당this에 프로퍼티 할당this = {} &

대괄호로 사용 시, 해당 변수에 할당된 값이 들어감 어떤 것이 key가 될지 모르는 경우 → 유용 객체 복제user 변수에는 객체에 대한 참조 값(객체가 저장되어 있는 메모리 주소)이 저장됨. (객체 자체가 들어있는 것이 아니라)즉, const cloneUser =

객체의 key는 숫자형, boolean 형 가능하지만, Object.keys() 나 값에 접근할 때 → 문자형으로 나오거나, 접근해야 함. 예시 코드 전체 코드 중 딱 하나설명 붙여주기 가능방법: 문자열 전달(symbol 생성에 영향 x)장점디버깅 편해짐예시 코드

문자로 반환n 진수 변환 toString(n) 예시 코드 JS의 내장 객체 ( 수학과 관련된 property & methods 보유 )원주율 (3.141592653589793)올림예시 코드내림예시 코드반올림인수로 받은 수만큼 소수점 갯수 반영소수부 갯수보다 큰 수

'(작은 따옴표), "(큰 따옴표) 와의 차이 별로 없음 → 상황에 맞게 쓰면 됨'(작은 따옴표) "(큰 따옴표) \` (백틱) 문자열 길이사용하는 경우 글자 제한 (가입 시, id나 비밀번호) 예시 코드\[](대괄호) 활용한 글자만 교체 x예시 코드 모든

특정 요소(n부터 m개) 지움예제 코드특정 요소(n부터 m개) 지우고 추가(x)예시 코드 중간에 추가 (삭제 없이)m → 0예시 코드 삭제된 요소 반환예시 코드 n ~ (m-1)까지 반환m 없으면 끝까지 반환 arr.slice() ⇒ 배열 복사 예시 코

구조 분해 할당 구문 이란? 배열/객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식 >

...JS에서 함수에 넘겨주는 인수의 갯수 제한 → 없음인수 갯수 정해놓고 함수 만들어도 → 호출할 시 갯수 맞출 필요 x 아무것도 전달하지 않아도error 발생 x예시 코드 arguments 로 접근화살표 함수에 없음나머지 매개변수현재 추세 (여러 장점 有)함수

함수 선언문 함수 표현식 호출 가능한 타이밍프로그래밍 언어 (순차적 실행, 즉시 결과 반환)JS함수 선언 문이 어디서든 호출 가능 한 이유JS 내부 알고리즘 때문 JS는 실행 전, 초기화 단계에서 코드의 모든 함수 선언문을 찾아서 생성해둠 → 사용 범위 커짐 (

함수와 함수가 선언된 어휘적 환경의 조합특징자신이 생성될 시점의 환경을 기억하는 함수 → 함수 실행이 끝나고도 메모리에 스스로를 남겨둘 수 있는 방법클로저를 통해서 JS에는 없는 (비)공개 속성/메소드 구현 방안 마련 가능(외부 함수에 의해 반환되는 내부 함수를 가리

JS는 어휘적 환경을 갖는다.코드가 위 → 아래 까지 어떻게 동작하는지 파악코드가 실행되면 스크립트 내에서 선언한 변수들이 어휘적 환경 (Lexical Environment) 에 올라감let 으로 선언된 변수호이스팅 됨.초기화 x → 사용 불가함수 선언문바로 초기화 →

일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것구현 방법 setTimeout, setInterval일정 시간이 지난 후, 함수를 실행setTimeout(함수, 시간, 인수)매개변수첫 번째 실행하는 함수(일정 시간이 지난 뒤) 두 번째

함수 호출 방식과 관계 없이 this 지정 가능JS에서는 (일반적인 방법 외에도, 함수를 어디서 어떻게 호출했느냐에 관계 없이) this가 무엇인지 지정 가능모든 함수에서 사용 가능. this를 특정 값으로 지정 가능.함수 호출 & call사용 & this로 사용할 요

객체가 특정 프로퍼티를 (직접) 가지고 있는지 확인 (boolean)사용법 객체명.hasOwnProperty('확인할 프로퍼티 이름') 예시 코드위치 \[\[Prototype]] (\_\_proto\_\_) 라는 객체가 있음. 이것을 프로토 타입이라고 함. 객

함수의 실행을 중간에 멈췄다가 재개할 수 있는 기능즉, 다른 작업을 하다가 다시 돌아와서 next()해주면 진행이 멈췄던 부분부터 이어서 실행Redux-saga에서 활발히 사용function\*yield내부에서 사용함수의 실행을 멈출 수 있음예시 코드 Generato

ES6에 추가된 스펙class 라는 키워드를 사용.객체를 만들어주는 생성자 메서드위치: class 내부new를 통해 호출 시, 자동 실행.내부에서 객체 초기 값 정해짐.인수 받기 가능.저장 위치 : 해당 클래스의 프로토타입 ↔ 생성자 함수의 저장 위치: 객체 내부

Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냄비유로 이해하기가정 상황상점에서 물건 주문 시, 나올 때 까지 시간이 걸림.언제 완료 될지 모름 & 가끔 물건 제작 실패하는 경우 有소비자의 대안10초에 한 번씩 묻기 (❌)다 됐나

기본적으로 비동기 코드를 쓰고 Promise를 더 읽기 더 쉽도록 만들어줌.즉, 가독성 ↑ (Promise의 then 메소드를 chain형식으로 호출하는 것보다)함수 앞에 async를 붙여주면, Promise 반환→ 함수 호출 후, then 사용 가능예시 코드값 그대로

프로그래밍에서 비동기는 기초적이며 중요한 작업입니다.그래서 이번에는 비동기 작업에 관한 글을 작성해보았습니다. 동기와 비동기에 대해 알아보고 비동기 작업에 해당되는 콜백 함수, Promise, async/await에 대해 알아볼 것입니다.동기(synchronous)의

맞다. 하지만 JS 자체는 싱글 쓰레드지만 JS 런타임은 싱글 쓰레드가 아님.JS를 싱글 쓰레드 언어라고 부르는 이유 event loop(JavaScript의 main thread)가 single thread이기 때문 그러나, 멀티 쓰레드 환경(웹 브라우저나 Nod

캡처링 단계 – 이벤트가 하위 요소로 전파되는 단계타깃 단계 – 이벤트가 실제 타깃 요소에 전달되는 단계버블링 단계 – 이벤트가 상위 요소로 전파되는 단계예시 테이블 안의 <td>를 클릭하면 어떻게 이벤트가 흐르는가? → <td>를 클릭하면 이벤트가

바로 아래 단계의 값만 복사중첩된 객체에서 참조형 데이터가 저장된 프로퍼티를 복사할 때 그 주솟값만 복사그러면 해당 프로퍼티에 대해 원본과 사본이 모두 동일한 참조형 데이터의 주소를 가리키게 됨. (사본을 바꾸면 원본도 바뀌고 원본을 바꾸면 사본도 바뀜.)예시 코드객체

명시적 this 바인딩이 없는 경우 성립하는 규칙전역 공간에서의 this 전역 객체(브라우저 → window, Node.js → global)를 참조 어떤 함수를 메서드로서 호출한 경우 this 메서드 호출 주체(메서드명 앞의 객체)를 참조 어떤 함수를 함수로서

실행 컨텍스트실행할 코드에 제공할 환경 정보를 모아놓은 객체.전역 컨텍스트 (전역 공간에서 자동으로 생성), eval, 함수 실행에 의한 컨텍스트 등활성화되는 시점에 3가지 정보 수집 (VariableEnvironment, LexicalEnvironment, ThisB