본문 바로가기

Front-End/JavaScript

 (23)
[JavaScript] 동기 처리, 비동기 처리, 콜백함수 JavaScript는 싱글스레드 기반의 동기적 언어이다. (* 싱글스레드 : 호출한 함수들이 쌓이는 호출스택이 1개인 것으로, 이벤트를 처리하는 호출스택이 1개여서 한 번에 하나의 작업만 가능) 따라서 여러 이벤트를 처리 시 하나의 이벤트가 많은 시간을 소요하게 되면 해당 작업이 끝날 때까지 다른 작업을 못하게 되는데, 웹에서 자주 사용되는 JavaScript가 이렇게 한 번에 한 작업만 하게 된다면 이용자들에게 불편함을 줄 것이다. 그래서 지원하게 된 것이 바로 비동기 처리 방식이다. 즉, 기본적으로 JavaScript는 동기 처리 방식으로 진행되지만 setTimeout이나 서버 요청 같은 비동기 처리 방식으로 진행되는 예외 방식이 존재하는 것이다. 그런데 이런 비동기 처리 방식에서도 비동기 작업들을 ..
[JavaScript] 구조 분해 할당(Destructuring assignment) 구조 분해 할당 (Destructuring assignment) : 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식 : 할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해해 할당할지 정의한다. 1) 배열 구조 분해 기본 변수 할당 const numbers = [1, 2]; const [x, y] = numbers; console.log(x); //1 console.log(y); //2 변수에 기본값 할당 : 분해한 값이 undefined일 경우 기본값을 대신 사용할 수 있다. let a, b; [a=5, b=7] = [1]; console.log(a); //1 console.log(b); //7 변수 값 교환 let a = 1; let b = 3..
[JavaScript] 즉시 실행 함수 (IIFE) 즉시 실행 함수 (IIFE) : 함수를 선언하자마자 바로 호출되는 함수 : 함수에 이름을 붙이는 기명함수로도 사용할 수 있지만, 즉시 실행 함수는 재사용이 불가하기 때문에 익명 함수를 주로 사용한다. 익명 즉시 실행 함수 (function () { console.log("IIFE"); })(); // 화살표 함수로도 사용 가능하다 (() => { console.log("IIFE"); })(); 기명 즉시 실행 함수 (function square(x) { console.log(x*x); })(2); (function square(x) { console.log(x*x); }(2)); 즉시 실행 함수 사용 이유 - 불필요한 전역변수의 생성을 줄일 수 있다. : 기본적으로 함수를 생성하면 해당 함수는 전역변수로..
[JavaScript] 객체 (Object) 객체 (Object) : JavaScript의 데이터 유형 중 하나로 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입이다. : Key - Value로 구성된 집합이다. 1) 객체 생성 1-1) Object() 생성자를 통한 생성 : Object() 생성자는 주어진 값을 객체 래퍼로 만들어준다. : 만약 값이 null 또는 undefined라면 빈 객체를 생성해 반환한다. const obj = new Object(); //{ ... } 빈 객체 생성 const obj2 = new Object({foo: 42}); //{foo: 42} 1-2) 객체 초기자 / 리터럴 구문을 통한 생성 : 객체 초기자는 중괄호({})로 묶인 0개 이상의 객체의 프로퍼티명과 관련 값의 쌍을 콤마로 구분한 목록이..
[JavaScript] 템플릿 리터럴(Template Literal) 템플릿 리터럴 (Template Literal) : ES6부터 도입된 새로운 문자열 표기법으로 이전 버전에서는 템플릿 문자열 (Template Strings)라고 불렸다. : 이중 따옴표, 작은따옴표 대신 백틱(``)을 이용한다. Multi-line strings : 일반적인 문자열 표기법에서는 줄바꿈이 허용되지 않고 공백(white-space) 표현을 위해선 \n을 별도로 작성해줘야 했지만, 템플릿 리터럴은 여러 줄에 걸쳐 문자열을 작성할 수 있으며 모든 white-space가 그대로 적용된다. //일반적인 문자열 표기법(ES5) const s = '가나 다라'; //SyntaxError: Invalid or unexpected token const s = '가나\n'+ '다라'; console.log..
[JavaScript] 배열(Array) 1. 배열(Array) : 배열은 인덱스를 가지는 복수의 자료를 저장할 수 있는 자료구조이다. 1-1. 배열 생성 배열 리터럴 방식 : 가장 단순하고 직관적인 배열 생성 방식으로 가장 성능이 좋은 방식이다. const arr1 = []; const arr2 = [1, 2, 3]; - Spread Syntax를 사용해 기존 배열 혹은 이터러블을 대상으로 새로운 배열을 생성할 수 있다. const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [...arr1, ...arr2]; //[1, 2, 3, 4, 5, 6] const s = 'Hello'; const arr4 = [...s]; //['H', 'e', 'l', 'l', 'o'] Array 생성자 함수..
[JavaScript] 기본 문법 (변수, 함수, 조건문, 반복문) 1. 변수 : 값을 담는 컨테이너 : ES6 이전에는 var만 존재하였지만 ES6부터는 let, const가 생겼다. var let const 스코프(Scope) 함수 스코프 블록 스코프 블록 스코프 초기값 필수 X 필수 X 필수 O 선언 이미 선언되어 있는 이름과 같은 이름으로 선언 가능 이미 선언되어 있는 이름과 같은 이름으로 선언 불가능 이미 선언되어 있는 이름과 같은 이름으로 선언 불가능 할당 값 재할당 가능 값 재할당 가능 한번 할당한 값은 변경 불가능 (상수로 선언된 배열과 객체 내부의 값은 변경 가능) var name = 'dain'; console.log(name); //dain if(true){ var name = 'kimdain'; console.log(name); //kimdain }..

티스토리툴바