본문 바로가기

javascript

(17)
자바스크립트 '비동기' 다시 정리하기 왜 비동기 처리가 필요한가?자바스크립트는 기본적으로 싱글 스레드 언어이다. 이는 한 번에 하나의 작업만을 처리할 수 있다는 의미이다. 즉, 동기적으로 코드가 실행된다는 것인데, 만약 모든 코드가 동기적으로 실행된다면 네트워크 요청이나 파일 읽기 등과 같은 시간이 오래 걸리는 작업이 실행되는 동안 전체 프로그램이 멈추게 된다. 이를 '블로킹(Blocking)'이라고 한다. // 동기적 처리의 문제점console.log('시작');// 만약 이 함수가 3초가 걸린다면?heavyTask(); // 3초 동안 프로그램이 멈춤console.log('끝'); // 3초 후에야 실행됨 이런 문제를 해결하기 위해 자바스크립트에는 비동기 처리 개념이 도입되었다.비동기 처리를 통해 시간이 오래 걸리는 작업을 백그라운드에서..
[JS] 16. 응용: 비 구조화 할당 / spread 연산자 1) 비 구조화 할당 비 구조화 할당(구조 분해 할당): 배열의 요소들 또는 객체의 프로퍼티 값들을 변수에 할당받아 사용하는 방법. ① 배열의 비 구조화 할당 배열의 비 구조화 할당은 대괄호를 이용하여 배열의 요소들을 인덱스 순서대로 변수에 할당합니다. let arr = [1, 2, 3]; let one = arr[0]; let two = arr[1]; let three = arr[2]; console.log(one, two, three); //1,2,3 ⇓ let arr = [1, 2, 3]; let [one, two, three,four] = arr; //배열 arr의 요소를 인덱스 순서대로 각각 변수 one, two, three에 할당 console.log(one, two, three,four); ..
[JS] 15. 응용: 조건문 업그레이드 방법 조건문을 더 간결하고 효율적으로 작성할 수 있는 방법 중 가장 기본적인 두 가지 방법을 알아보겠습니다. ① 배열 내장함수 includes 이용 조건문의 조건식이 여러가지 케이스 중 하나에 해당하는지를 비교하는 경우일 때 배열 내장함수 includes를 이용하는 방법입니다. [예시 코드] /* 태극기에 사용되는 색상인지를 검사 */ function isTaegeukgiColor(color) { if ( color == "white" || color == "black" || color == "red" || color == "blue" ) { return true; } return false; } const color1 = isTaegeukgiColor("red"); const color2 = isTaegeu..
[JS] 14. 응용: Truthy & Falsy / 삼항 연산자 / 단락 회로 평가 1) Truthy & Falsy Truthy는 참은 아니지만 참 값은 값, Falsy는 거짓은 아니지만 거짓 같은 값입니다. 자바스크립트의 조건식에는 boolean형 값 외에도 자바스크립트만의 특정 기준으로 인자를 참이나 거짓으로 분류하는 속성이 있습니다. 여기에서 나오는 개념이 Truthy와 Falsy입니다. Boolean 타입의 true가 아니어도 true로 분류되는 값들을 Truthy, 반대로 false가 아니어도 false로 분류되는 값들을 Falthy라고 부릅니다. [Flathy 값] null undefined 0, -0 NaN "" / '' / `` (빈 문자열) flase falty로 정의된 값들을 제외한 나머지 값들은 모두 truty 값으로 분류됩니다. [활용 예시] const getNam..
[JS] 13. 기초 문법: 배열 내장함수 배열은 배열을 쉽게 다룰 수 있도록 도움을 주는 굉장히 많은 수의 유용한 내장함수들을 가지고 있습니다. 배열 내장함수를 잘 이용하면 훨씬 더 깔끔하고 유연하면서 간결한 코드를 작성할 수 있습니다. 알아볼 내장함수는 forEach, map, includes, indexOf, findIndex, find, filter, slice, concat, sort, join 이렇게 총 11가지 입니다. 이외에도 더 많은 유용한 내장함수들이 있지만 우선 기본적인 내장함수들만 정리해보겠습니다. [ 들어가기 전에] 자바스크립트의 자료형은 모두 객체로 이루어져 있습니다. 그렇기 때문에 내장함수를 사용할 때는 객체의 메서드를 사용하는 것과 동일한 방식을 이용합니다. (객체의 프로퍼티에 접근하는 방식 중 점 표기법 - '객체명..
[JS] 12. 기초 문법: 반복문 (for문) 반복문은 특정 명령을 여러 번 실행하는 것을 도와주는 문법입니다. 반복문을 이용하면 똑같은 코드를 여러 번 중복해서 작성지 않고도 같은 동작을 반복해서 실행할 수 있습니다. for 반복문 [구조] for (초기식; 조건식; 증감 연산) { 반복 수행할 명령 } for (let i = 0; i < 5; i++) { console.log("오늘도 즐거운 하루"); } ↳ '오늘도 즐거운 하루'를 5번 출력합니다. [for문을 이용하여 배열 요소 접근하기] for 반복문은 배열의 요소 또는 객체의 프로퍼티 값에 순차적으로 접근할 때 매우 유용하게 사용할 수 있습니다. 배열 순회 const arr = ["H", "e", "l", "l", "o"]; for (let i = 0; i < arr.length; i++..
[JS] 11. 기초 문법: 배열 배열: 자바스크립트의 비 원시 자료형 중 하나로 순서 있는 요소들의 집합. [생성 방법] ① new 키워드 let 배열명 = new Array(); ② 베열 리터럴 let 배열명 = []; //배열 생성 let 배열명 = [ 배열 요소 ] //배열 생성과 동시에 초기화 let arr = [1, "2", true, null, undefined, {}, [], function(){}]; console.log(arr); 콘솔 출력 화면 [배열 요소 접근] 배열명[인덱스] * 인덱스: 배열이 위치한 순서. (0번째부터 시작) let arr = [1, 2, 3, 4, 5]; console.log(arr[0]); //1 출력 console.log(arr[1]); //2 console.log(arr[2]); //3 ..
[JS] 10. 기초 문법: 객체 자바스크립트에서 객체란 비 원시 자료형 중 하나로 키/이름과 값으로 구성된 프로퍼티(property)의 정렬되지 않은 집합을 의미합니다. [생성 방법] ① new 키워드 let 객체명 = new Object(); ② 객체 리터럴 방식 (더 많이 사용) let 객체명 = { (객체)프로퍼티 }; * 객체 프로퍼티(property): 객체 내부의 속성 ↳ 콜론( : )을 이용해 key: value 형식으로 작성합니다. let a = { key1: "value1", //멤버 key2: 123, key3: true, key4: undefined, key5: [1, 2], key6: function () {} //메서드 }; console.log(a); * 멤버와 메서드: 객체를 다루는 방법이라는 뜻에서 객체 안..