🦜 Computer Language/JavaScript

🦜 Computer Language/JavaScript
[JavaScript] var를 지양해야하는 이유
자바스크립트 공부를 하다보니 var 대신 let이나 const를 많이 사용하더라. 우선, var은 동일한 변수 이름으로 다른 값을 담아도 에러가 발생하지 않는다. 이 때, 가장 마지막에 선언된 name이 나오게 된다. 편하다고 생각할 수도 있지만, 사실 굉장히 위험한 기능이다. 개발 중 코드 길이가 길어지다보면 내가 선언해준 변수 이름이 기억이 나지 않을 수도 있는데, 이 과정에서 값이 바뀌어버린다면.. 그 날 이제 울면서 늦게 자는거임 var name = "Jedi"; var name = "Yujin"; 반면, let은 var과 다르게 선언했던 변수를 재선언할 수 없다. 그렇기 때문에 아까 언급한 실수를 방지할 수 있다. let name = "Jedi"; let name = "Yujin"; // Err..
→2022.03.13
🦜 Computer Language/JavaScript
[JavaScript] async & await | 비동기 처리
async & await 자바스크립트의 비동기 처리 패턴으로, 기존의 비동기 처리 방식인 콜백 함수와 Promise의 단점을 보완하는 키워드라고 한다. (아직 Promise도 잘 모르는데..^^) async function 함수명(){ await 비동기처리메서드명(); } async async 키워드를 붙여준 함수의 return 값은 비동기 객체인 Promise의 resolve 값이 된다. 즉, Promise와 동일한 결과값을 얻는다. async function helloAsync(){ return new Promise(function(resolve, reject){ var s = "Hello, Async!"; resolve(s) }); } async function logSentence(){ var s..
→2022.03.13
🦜 Computer Language/JavaScript
[JavaScript] Promise | 콜백지옥을 탈출하는 방법
동기 & 비동기 글에서 등장한 콜백 지옥을 해결하는 방법은 Promise 연산자를 사용하는 것이다. Promise란? : 자바스크립트의 비동기를 돕는 객체이다. 콜백을 줄지어서 사용하는 것을 방지해준다. 우선, 비동기작업이 가질 수 있는 상태는 다음과 같다. 대기(Pending): 비동기 상태가 작업 중이거나 시작할 수 없는 문제가 발생한 경우 이행(Fulfilled): 비동기 상태가 정상적으로 진행된 상태 거부(Rejected): 버그, 또는 실패한 상태로 비동기 작업이 정상적으로 진행되지 않은 상태 resolve: 대기 => 이행 reject: 대기 => 거부 function isPositiveP(number) { const executor = (resolve, reject) => { setTimeo..
→2022.03.11
🦜 Computer Language/JavaScript
[JavaScript] 동기 & 비동기
자바스크립트는 코드가 작성된 순서대로 작업을 처리하며, 이전 작업이 진행 중일 때는 다음 작업을 수행하지 않고 기다린다. 이런 Task 처리 방식을 동기 방식의 처리라고 한다. function TaskA() { console.log("TASK A"); } function TaskB() { console.log("TASK B"); } function TaskC() { console.log("TASK C"); } TaskA(); TaskB(); TaskC(); 동기적 처리의 단점은 하나의 작업이 너무 오래 걸린다면 모든 작업이 해당 작업이 종료되기 전까지 STOP 되기 때문에 전체 흐름이 지체된다. 즉, 성능 상의 문제가 발생한다. 다른 언어(C, C++ ... )에서는 멀티스레드 방식을 사용할 수도 있지만..
→2022.03.04
🦜 Computer Language/JavaScript
[JavaScript] spread | 전개 연산자
스프레드 연산자('...')는 연결, 복사 등의 용도로 사용되며 배열과 객체를 한 줄로 펼치는 방법이라고 할 수 있다. 배열에서는 다음과 같이 사용할 수 있다. const coffee = ["아메리카노", "바닐라라떼"]; const juice = ["포도주스", "오렌지주스", "토마토주스"]; const menu = [...coffee, "새로운 음료", ...juice]; console.log(menu); // ["아메리카노", "바닐라라떼", "새로운 음료", "포도주스", "오렌지주스", "토마토주스"] 상당히 직관적인 예시라고 생각한다 ^-^! 객체에서는 다음과 같이 사용할 수 있다. const latte = { base: "milk", from: "Starbucks" }; const bani..
→2022.03.03
🦜 Computer Language/JavaScript
[JavaScript] 비구조화 할당 그리고 SWAP
배열의 비구조화 할당 배열에서 비구조화 할당을 사용한다면, 배열 안에 있는 값을 추출해서 변수 / 상수로 바로 선언이 가능하다. 배열 안에 있는 원소를 새로 선언해주고 싶을 때 굉장히 유용한 문법이다. # Case 1: 기존 할당 방법 let colors = ["red", "green", "blue"]; let color0 = colors[0]; let color1 = colors[1]; let color2 = colors[2]; console.log(color0, color1, color2); // red green blue # Case 2: 비구조화 할당 let [color1, color2, color3] = ["red", "green", "blue"]; console.log(color0, color..
→2022.03.03
🦜 Computer Language/JavaScript
[JavaScript] Truthy & Falsy
Truthy: 참이 아니라 참같은 값 Falsy: 거짓이 아니라 거짓같은 값 이게 무슨 소리인가 예시를 보자 Truthy ex: {} 빈 객체 [] 빈 배열 0을 제외 한 숫자값 빈 문자열을 제외한 문자열 Falsy ex: null defined 0 빈 문자열 NaN 예시를 보니깐 감이 온다. 파이썬에서도 빈 배열인지 확인할 때 # python arr = [] if not arr: print("빈 배열입니다.") else: print("빈 배열이 아닙니다.") 위 예시처럼 arr를 true/false로 반환하여 판단하는데, 이런 걸 truthy/falsy라고 하는 것 같다. 위의 Python 예시를 JavaScript로 바꿔보면 다음과 같다. # JavaScript const arr = [] if (!a..
→2022.02.24
🦜 Computer Language/JavaScript
[JavaScript] 배열 내장 함수
forEach 배열의 요소들을 반복하여 작업을 수행할 수 있다. forEach 구문의 인자로 콜백 함수를 등록할 수 있으며, 배열의 요소를 순회할 때 해당 콜백 함수가 호출된다. 이때, 배열 요소의 인덱스와 값에 접근 가능하다. const arr = [1, 2, 3, 4, 5]; arr.forEach((elm) => console.log(elm * 2)); arr.forEach(function(item, index){ console.log(item, index); }); // item: 배열 각각의 아이템 & index: 배열 아이템의 index map 원본 배열의 모든 요소를 순회하며 연산을 한 후, return 값으로 해당 연산의 결과를 받아올 수 있다. const arr = [1, 2, 3, 4, ..
→2022.02.21

• 이전
• 1
• 2
• 다음