JavaScript (36) 썸네일형 리스트형 [JS] 배열 비우기(빈 배열로 만들기, 초기화) 방법 예전에 사수가 코드리뷰를 하시면서 이런 말씀을 하셨다.'빈 배열을 만드는 방법 중, 배열의 길이를 0으로 만드는 것과 빈 배열을 할당하는 게 같아 보이지만 차이가 있다.'처음에는 무슨 말인지 이해를 못해 찾아보았고, 찾아본걸 바탕으로 정리하려고 한다. 배열이 선언 & 할당되어 있을 때,배열을 초기화(빈 배열로 만들기)하는 방법은 여러가지가 있겠지만 크게 세 가지로 정리해보려고 한다. 우선, 아래와 같은 배열이 있다고 해보자.let name = ['ria', 'Jun'] 방법1. 배열에 새로운 빈 배열을 할당name = [];정확하게 말하면 이 방법은 배열을 비우는 것이 아니라, 새로운 빈 배열이 저장된 메모리주소를 참조시키는 것. 1/ let name = ['ria', 'jun']처음에는 name.. 자바스크립트 동작 원리(Call Stack, Task Queue, Event Loop etc) 코드를 잘 짜고 싶으면 문법말고도 여러가지 배울것이 많다. ex: 웹브라우저 동작 원리 등. 그러면 코드 잘짜는 개발자가 될 수 있다. 자바스크립트를 작성하면 브라우저가 실행시킨다. HTML, CSS, JS를 해석해주는 것이 브라우저. - 특징 : 자바스크립트를 해석하는 순서가 특이함. 아래 코드를 실행시키고싶다. 1+1 하고 1초 쉬고 2+2 하고 일반 프로그래밍 언어는 이런식을 작동한다. //python ver print(1+1) time.sleep(1) print(2+2) 파이썬 같은 경우는 위에서부터 한줄한줄 실행된다. 2 → 1초 쉬고 → 4 자바스크립트에서도 똑같은 기능을 만들어보려고 setTimeout을 사용해서 코드를 작성하였다. //JavaScript ver console.log(1+1).. 비동기 처리 - async/await # Promise를 통한 비동기 코딩 먼저 Promise를 통해서 어떻게 비동기 처리를 하는지 간단하게 리뷰해보자. 어떤 원격 REST API를 호출하여 게시물 작성자의 이름을 return하는 함수를 작성하고, 그 함수를 호출해보자. function fetchAuthorName(postId) { return fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`) .then((response) => response.json()) //resolve()함수의 인자로 넘겨받은 값이 response가 된다. .then((post) => post.id) //위 return한 response.json()값이 post가 된다. .then((userId) => { .. 비동기처리 - Promise # 콜백함수를 통한 비동기처리의 문제점 ES6에 Promise가 도입되어 지금처럼 널리 사용되기 이전에는 주로 콜백함수를 다른 함수의 인자로 넘겨서 비동기처리를 했었다. 2023.12.23 - [JavaScript] - 비동기함수의 순서를 제어하는 방법 1. Callback함수 비동기함수의 순서를 제어하는 방법 1. Callback함수 # 콜백함수란? 2023.12.23 - [JavaScript] - callback함수란? callback함수란? # 함수란? - 어떤 특정한 일을 하는 코드의 묶음 - 다양하고 의미있는 일을 하기 위해 매개변수(인자)를 전달받을 수 있다. - 여러 lion284.tistory.com 단순 코드를 작성할 때는 위와 같이 전통적인 방식으로 콜백함수를 통해 비동기처리를 해도 큰.. 비동기함수의 순서를 제어하는 방법 1. Callback함수 # 콜백함수란? 2023.12.23 - [JavaScript] - callback함수란? callback함수란? # 함수란? - 어떤 특정한 일을 하는 코드의 묶음 - 다양하고 의미있는 일을 하기 위해 매개변수(인자)를 전달받을 수 있다. - 여러 종류의 인자를 전달받을 수 있다. ex: 숫자, 문자열, 객체 등 - 함 lion284.tistory.com 비동기 방식에서는 각각의 처리 로직이 '병렬'로 수행되므로, 이 처리로직이 언제 시작되고 언제 종료되는지 알 수 없다. 하지만, 순차처리를 하고싶은 경우가 있을 수 있다. 콜백함수는 원하는 시점에 호출을 할 수 있으므로, 비동기 처리가 완료되면 호출되도록 할 수 있다. 그래서 콜백함수를 중첩 사용하여 순차처리를 할 수 있다. 즉, 중첩된 콜백함수를 이용.. callback함수란? # 함수란? - 어떤 특정한 일을 하는 코드의 묶음 - 다양하고 의미있는 일을 하기 위해 매개변수(인자)를 전달받을 수 있다. - 여러 종류의 인자를 전달받을 수 있다. ex: 숫자, 문자열, 객체 등 - 함수는 또다른 함수도 전달받을 수 있다. function main(param) { param(); } main(function() {}); //다른 함수의 인자로 전달되는 함수 ← 콜백함수 # 콜백함수 콜백함수는 콜백함수를 전달받은 함수(위 예시에서 main함수)에 의해서 호출된다. 그래서 이름이 'callback 함수'이다. "내가 함수 하나 전달할테니까 나중에 니가 알아서 불러줘!" function main(x) { //x라는 매개변수를 받음 ← x에 숫자, 문자열, 함수(콜백함수) 등 전달 가능... 원시 값과 객체의 비교 # 7가지 데이터타입자바스크립트가 제공하는 7가지 데이터 타입은 크게 원시 타입(primitive type)과 객체 타입(object/reference type)으로 구분할 수 있다. 구분데이터 타입설명원시 타입숫자(number) 타입숫자. 정수와 실수 구분 없이 하나의 숫자 타입만 존재문자열(string) 타입문자열불리언(boolean) 타입논리적 true/falseundefined 타입var 키워드로 선언된 변수에 암묵적으로 할당되는 값null 타입값이 없다는 것을 의도적으로 명시할 때 사용하는 값심벌(symbol) 타입ES6에 추가된 7번째 타입객체 타입객체, 배열, 함수 등 # 원시 타입 vs 객체타입 차이점크게 3가지 측면에서 다르다. 1/ 원시타입의 값, 즉 원시 값은 변경 불가능한 값(im.. 자바스크립트 11. 비동기 처리의 시작 콜백 이해하기, 콜백 지옥 체험 😱 JavaScript Callback | 프론트엔드 개발자 입문편 (JavaScript ES6) 1. 동기와 비동기 JavaScript is synchronous. 자바스크립트는 동기적이다. Execute the code block in order after hoisting. => hoisting이 된 이후부터 우리가 작성한 코드의 순서에 맞춰서 하나하나 동기적으로 실행된다. ex) console.log('1'); console.log('2'); console.log('3'); 코드를 위와 같이 작성하면, console에 1, 2, 3 순서대로 출력된다. # asynchronous : 비동기 : 언제 코드가 실행될 지 예측할 수 없는 것. 예시) "setTimeout"이라고 하는 web API(브라우저에서 제공하는 API) 우리가 지정한 시간이 지나면 전달한 콜백함수를 호출한다. setTimeout.. 이전 1 2 3 4 5 다음
