Promise로 resolve, reject 사용하기
·
웹개발/JavaScript
JavaScript에서 비동기 작업을 처리할 때 콜백 함수는 유용합니다. 하지만 콜백 함수를 여러번 사용하면 중첩이 발생하여 콜백 지옥에 빠질 수 있습니다.이때 Promise를 이용하면 코드를 깔끔하게 짤 수 있습니다.Promise란?Promise란 비동기 작업을 처리할 때 그 작업이 성공하거나 실패할 것에 대해서 결과를 알려준다고 약속하는 것입니다. Promise를 이용하여 비동기 작업이 성공하면 resolve를, 실패하면 reject로 반환 값을 전달합니다.const myPromise = new Promise((resolve, reject) => { // 비동기 작업을 수행 let success = true; if (success) { resolve("작업이 성공적으로 완..
undefined가 나타나는 세 가지 경우
·
웹개발/JavaScript
JavaScript에서 undefined가 발생하는 경우는 대표적으로 3가지가 있습니다.이 3가지에 대해 다뤄보도록 하겠습니다. undefined가 나타나는 세 가지 경우 1. 빈 객체일때객체를 선언만 하고 속성 값을 정의하지 않은 상태에서, 해당 객체의 속성을 호출하면 undefined가 반환됩니다.const obj = {};console.log(obj.name); // undefined여기서 객체 obj에는 { }로 속성이 정의되어 있지 않기 때문에, name이라는 key의 value를 호출해도 undefined가 반환됩니다. 2. 함수에 return이 없을 때함수에서 값을 반환하지 않으면, return이 없으면, 함수 호출의 결과가 자동으로 undefined가 됩니다.const text = () ..
콜백(CallBack)함수 이거 보고도 모르면 바보
·
웹개발/JavaScript
콜백함수 뭔가 들었을때 어려울거 같지 않아요? 괜히 막 거부감들고 하기싫고..저는 그랬답니다^^ ㅎㅎ하지만 후에 필요한 Promise, async/await를 이해하려면 콜백함수를 확실히 이해해야하는데요, 저도 몰랐을때 처럼.. 최대한 쉽게 이해시켜보겠습니다. 가시죠.콜백 함수 개념부터.JavaScript에서 콜백함수는 다른 함수가 "끝난 후에 실행할 작업"을 담은 함수입니다.예를 들어, 어떤 함수가 하나의 작업을 하고 있을 때, 그거 끝나고 바로 뭔가 해야해!!!바로 해야하는 작업을 콜백함수를 이용하여 쉽게 만들 수 있습니다. 콜백 함수 예시.아래는 c라는 함수가 callback이라는 함수 인자를 받아서 실행하는 예시입니다.const a = () => console.log("A");const b = (..
JavaScript 함수의 호이스팅
·
웹개발/JavaScript
Function Hositing. 함수 호이스팅입니다.함수 호이스팅이란, JavaScript에서 JS엔진이 코드를 실행시키면, 돌아가기 전에 코드의 함수 선언에 대한 부분을 끌어 올립니다. 즉, JS엔진이 실행전에 코드 전체를 한 번 훑어보고 선언된 부분부터 먼저 읽는다~ 라고 생각하시면 편할 것 같습니다.함수 호이스팅에 대해 알기 전에, JS에서는 함수를 정의하는 방법이 2가지가 있죠?1. 함수 선언식2. 함수 표현식차례대로 설명드리겠습니다. 1. 함수 선언식함수 선언식은 호이스팅이 적용됩니다. 그러면 함수 표현식은요?? 뒤에 말씀드릴게요.JavaScript 코드를 실행시에 선언에 대한 코드는 맨 위로 끌어 올려 처리가 됩니다. 즉 선언식에서는 함수가 선언되기 전에 호출이 가능합니다.console.lo..
null의 typeof가 object인 이유
·
웹개발/JavaScript
배열 [ ] 의 typeof는 뭐일까요? => object 객체입니다.객체 { } 의 typeof는 뭐일까요? => object 객체입니다.너무나도 당연한 사실이죠. 그런데 null 의 typeof는 뭐엇일까요?놀랍게도 object객체가 나옵니다. 이유는 JavaScript 초기 설계에 오류가 있었기 때문입니다. 그냥 개발이 잘못된 거에요.typeof null === "object"는 자바스크립트의 설계 상의 버그로, 수정되지 않고 현재까지 남아있는 역사적인 흔적입니다.
JavaScript, NaN 뭔지는 알고 있자
·
웹개발/JavaScript
혹시 NaN(Not a Number)이라는 결과를 본적이 있지 않으신가요?없으시다면,, 고수시거나 뉴비시거나 둘중 하나일 테지요.. 하하하 NaN이란 "Not a Number"라는 뜻으로 자바스크립트에서 "숫자가 아니다."를 나타내는 특수한 값이에요. 숫자 연산 중에서 정상적인 숫자 값을 얻을 수 없는 경우에 NaN이 반환이 됩니다. 가장 쉬운예시로 24+"2" 이런식이죠,더 많은 예시를 보여드릴게요.console.log(Number("hello")); // NaNconsole.log(10 / "two"); // NaNconsole.log(Math.sqrt(-1)); // NaN이 코드에서 알 수 있듯이, 문자열을 숫자로 변환할 수 없거나, 0으로 나누거나 등등 잘못된 연산에서 NaN이 발생..
JavaScript 리터럴이란 무엇인가
·
웹개발/JavaScript
공부하다가 갑자기 리터럴이라는 단어가 되게 낯설게 느껴지는거 있죠?저 스스로에게 설명해보라 하는데 저도 명확이 얘기를 못하더라고요..그래서 정리해봤습니다.리터럴이란...코드에 직접 작성하는 값을 의미합니다. 쉽게 말해서 변수나 함수에 저장되는 것이 아닌, 코드 자체에 포함되어 있는 값을 말하는데요, 잘 이해가 안되시죠?코드로 설명드릴게요.// 변수에 저장된 값let name = "Jun";// 코드에 직접 작성된 값 (리터럴)console.log("문자열1");console.log(24); // 숫자 리터럴여기서 "Jun", "문자열1", 24가 모두 리터럴에 해당합니다.1. 문자열 리터럴 (String Literal)문자열 데이터를 표현할 때 사용합니다. ' ', " ", 또는 벡틱 ` `을 사용할 수..
네이밍 컨벤션 4가지: 카멜, 스네이크, 파스칼, 케밥 케이스
·
웹개발/JavaScript
프로그래밍에서 네이밍 컨벤션은 코드의 가독성과 유지보수성을 크게 향상시킵니다.이때 사용할 수 있는 4가지의 네이밍 컨벤션을 설명하겠습니다.1. 카멜 케이스 (Camel Case)첫 단어는 소문자로 시작하고, 이후 각 단어의 첫 글자를 대문자로 표기하는 방식입니다.// 변수명let firstName = "Kimjunsu";const maxCount = 100; let isActive = true;// 함수명function getUserData() { ... }function calculateTotal() { ... }// 객체의 프로퍼티const user = { firstName: "Kim", lastName: "Junsu", phoneNumber: "123-456-7890"};낙타의 등 ..