![]()
자바스크립트의 프로미스Promise는 비동기 처리에 사용되는 객체입니다. 비동기 처리는 특정 작업이 끝날 때까지 기다리지 않고 다른 작업을 실행하는 것을 말합니다. 프로미스는 이러한 비동기 처리를 더 효율적으로 처리하고 코드를 더 읽기 쉽게 만들어줍니다. 프로미스는 세 가지 상태를 가질 수 있습니다: 대기(pending): 비동기 처리가 완료되지 않은 상태로 초기 상태 이행(fulfilled): 비동기 처리가 성공적으로 완료된 상태 거부(rejected): 비동기 처리에 실패한 상태 비동기 처리가 완료되면 resolve(이행) 콜백을 호출해 성공적으로 처리된 결과를 전달합니다. 만약 작업에 실패하면 reject(거부) 콜백을 호출하고 실패 사유를 전달합니다. 프로미스는 다음과 같은 구조로 작성됩니다: c..
![]()
먼저 등장하는 walk(500), walk(300), walk(200) 호출에서는 각각 주어진 시간 동안 걷기를 시도했다는 메시지가 콘솔에 표시되지만, 네 번째 walk(700) 호출에서는 amount가 주어진 함수의 조건문에 걸어둔 500을 초과하기 때문에 "the value is too big"이라는 오류 메시지를 출력합니다. 비동기 처리 도중 오류가 발생했으므로 walk(400)은 호출되지 않아 이후 콘솔에는 아무런 메시지도 뜨지 않습니다. // 코드 - async/await 오류 발생 예시 function walk(amount) { return new Promise((resolve, reject) => { if (amount > 500) { reject("the value is too big");..
![]()
이 코드는 재귀적인 방법으로 최대공약수Greatest Common Divisor를 구하는 함수입니다. 이 함수는 유클리드 호제법Euclidean algorithm에 기반하여 작동합니다. 유클리드 호제법은 최대공약수를 구하는 방법 중 하나로, 재귀적인 나머지 연산을 통해 두 수의 최대공약수를 효율적으로 구하는 방법입니다. function gcd(a, b) { if (b === 0) { return a; // 만약 b가 0이면, a를 반환 } return gcd(b, a % b); // 재귀 호출을 통해 최대공약수를 구함 } 알고리즘은 다음과 같이 동작합니다: 두 수 a와 b를 입력받습니다. 만약 b가 0이면, a가 최대공약수이므로 a를 반환합니다. 그렇지 않은 경우, a를 b로 나눈 나머지를 구합니다. a..
![]()
이 테스트용 웹사이트에 들어가면 다음과 같은 정보가 들어 있다. html 파일에서 API 호출하는 순서 테스트용 html 파일을 만든다. html 파일에서 자바스크립트 코드는 Promise로 API 호출하기 fetch("url") ===> 데이터를 가져오려는 사이트 주소를 fetch한다. .then(response => response.json()) ===> response를 json 형태로 바꾼다. .then(x => (document.querySelector(".test").textContent = x.title)) ===> test 클래스에 데이터 title을 집어넣는다. // Promise로 API 호출하기 async/await으로 API 호출하기 const response = await fetc..
![]()
Set() 메서드를 쓰면 문자열이나 배열에서 문자를 하나씩만 남기고 제거할 수 있다. const my_string = "My name is Carver"; console.log([...new Set(my_string)]); // ['M', 'y', ' ', 'n', 'a', 'm', 'e', 'i', 's', 'C', 'r', 'v'] has() 메서드는 Set에 특정 문자가 포함되어 있는지 확인한다. const set1 = new Set([1, 2, 3, 4, 5]); console.log(set1.has(1)); // Expected output: true console.log(set1.has(5)); // Expected output: true console.log(set1.has(6)); // E..
![]()
replace() 메서드는 조건에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환한다. 매개변수의 첫 번째 자리에는 교체할 문자열을, 두 번째 자리에는 반환할 문자열을 입력하면 된다. // 문자열을 다른 문자열로 교체 let text = "Hello World!"; let result = text.replace("World", "Steve"); // "Hello Steve!" 교체할 문자열이 두 개 이상이면 정규 표현식을 활용한다. // 문자열을 다른 문자열로 교체 let text = "Steve likes cats more than dogs"; let result = text.replace(/Steve/g, "Mike"); // Mike likes cats more than dogs //..
![]()
객체의 값은 키를 이용한 점(.) 표기법이나 대괄호([]) 표기법으로 쉽게 찾을 수 있다. 반대의 경우는 조금 복잡한데, 아래와 같은 방법이 있다. let obj = { 1: 1, 2: 1, 3: 3, 4: 1, 100: 4, 200: 5, }; // 찾고자 하는 값 let val = 4; // 객체의 키 배열을 먼저 구한다 // 해당 배열에서 값이 일치하는 객체의 키를 찾는다 let count = Object.keys(obj).find(x => obj[x] === val); console.log(count); // 100 Object.keys() 메서드는 객체의 키를 배열 형태로 반환한다. const object1 = { a: 'somestring', b: 42, c: false }; console.l..
![]()
메모 reduce는 누적 계산값(prev)에서 현재값(cur)을 더해가는 방식으로 작동한다. 0은 초기값으로 생략해도 무관하다. 초기값을 설정하지 않으면 arr의 첫 번째 값이 들어간다. 예시 // arr의 합계 let arr = [1, 2, 3, 4, 5]; let result = arr.reduce((prev, cur) => { return prev + cur; }, 0); console.log(result); // 15 // 현재 객체의 price가 50보다 크면 name만 반환하기 const products = [ { name: "Product 1", price: 20, category: "Electronics" }, { name: "Product 2", price: 30, category: "C..
![]()
Number.prototype 메서드 Object.prototype.toString() - 숫자를 문자열로 반환한다. function Dog(name) { this.name = name; } const dog1 = new Dog('Gabby'); Dog.prototype.toString = function dogToString() { return `${this.name}`; }; console.log(dog1.toString()); // Expected output: "Gabby" Number.prototype.toFixed() - 숫자를 고정 소수점 표기법으로 표시한다. const numObj = 12345.6789; numObj.toFixed(); // '12346'; rounding, no frac..
![]()
자바스크립트에서는 sort() 메서드와 화살표 함수를 이용해 숫자를 간단히 정렬할 수 있다. /* 오름차순 */ const arr = [11, 10, 7, 10, -2, 1]; arr.sort((a, b) => a - b); console.log(arr); // [ -2, 1, 7, 10, 10, 11 ] /* 내림차순 */ const arr = [11, 10, 7, 10, -2, 1]; arr.sort((a, b) => b - a); console.log(arr); // [ 11, 10, 10, 7, 1, -2 ]
![]()
상점에서 물건을 주문하는데 그 물건이 나올 때까지 시간이 걸린다고 가정해보자. 언제 완료되는지는 알 수 없고 가끔 물건을 만들다가 실패하는 경우도 있다. 이럴 때 소비자는 어떡할까? 10초에 한 번씩 물어보면 될까? 가끔 다 됐는지 물으면 만들다가 실패한 경우도 있을 것이다. 그러면 다시 물건을 주문해야 한다. 이럴 때는 상점에 주문을 하고 상품이 준비됐거나 실패하면 알려달라고 하면서 전화번호를 주고 나오는 게 낫다. 그러면 상품이 준비되는 동안 다른 작업도 할 수 있을 것이다. 상점은 이 번호를 기억했다가 작업이 완료되거나 실패했을 때 소비자에게 알려주면 된다. 이럴 때 사용하는 게 바로 Promise이다. Promise는 이렇게 사용한다. new Promise로 생성한다. 함수를 전달받는데, 이때 인..
![]()
이번에는 이벤트가 어떻게 전파되는지 알아보자. 이런 코드가 있다. body 안에 div 안에 ul 안에 li가 있다. 이 모든 요소에 클릭 이벤트가 발생시 console.log()를 찍도록 만들 것이다. 이렇게 하고 li를 클릭해보면 li, ul, div, body 순서로 로그가 찍힌 걸 볼 수 있다. 초록색 박스를 클릭해보면 자기 자신인 div와 부모 요소인 body가 모두 찍힌다. 이를 통해 알 수 있는 것은 자식 요소에서 발생된 이벤트 객체는 부모와 그 부모를 통해 전달된다는 것이다. 즉 하위 요소에서 상위 요소로 올라가는 것이다. 더 이상 부모 요소가 없을 때까지 이 과정은 반복된다. 이렇게 DOM 트리가 있다. li에서 클릭 이벤트가 발생하면 부모 요소로 이렇게 전파된다. 이벤트가 거슬러 올라가..
![]()
JavaScript는 렉시컬 환경을 갖는다. 다음가 같은 코드가 있다. 위에서부터 아래로 어떻게 동작하는지 살펴보자. 코드가 실행되면 스크립트 내에서 선언한 변수들이 렉시컬 환경에 올라간다. 참고로 let으로 선언된 변수도 호이스팅된다. 렉시컬 환경에 올라가지만 초기화가 안 되어 있을 뿐이다. 그래서 사용은 불가능하다. 그에 비해 함수 선언문은 변수와 달리 바로 초기화된다. 그래서 저 위치에서도 사용 가능하다. 변수에 할당한 함수 표현식은 저렇게 안 된다. 처음으로 one이라는 변수가 선언된다. 아직 할당은 되어 있지 않기 때문에 초기값 undefined를 갖는다. 이제 사용해도 에러는 발생하지 않는다. 값이 undefined일 뿐이다. 다음으로 one에 숫자 1이 할당된다. 한편 함수 선언은 초기에 이..
![]()
콜백함수를 두 가지 레벨로 설명할 것이다. 첫 번째는 초보자 레벨, 그리고 두 번째는 중급자 레벨. 초보자 레벨에서는 정의와 용도까지만 알면 된다. 먼저 정의는 그냥 함수 안에 파라미터 형태로 들어가는 함수를 콜백함수라고 부른다. 그리고 용도는 JavaScript에서 순차적으로 코드를 실행하고 싶을 때 콜백함수를 쓰는 것이다. 그 이상의 용도는 없다. 그래서 우리가 초보 때 이벤트 리스너 같은 걸 배울 때 콜백함수를 가장 먼저 발견한다. 우리가 HTML의 어떤 버튼을 눌렀을 때 특정 JavaScript 코드를 실행하고 싶다면 이벤트 리스너를 이용해 코드를 짠다. 이벤트 리스너를 붙이고 싶으면 이런 addEventListener()라는 함수를 갖다 쓰면 된다. 그런데 이 함수를 사용할 때 콜백함수를 넣게 ..
![]()
JavaScript에서는 일반적인 방법 외에도 함수를 어디에서 어떻게 호출했는지에 상관없이 this가 무엇인지 지정할 수 있다. 먼저 call부터 살펴보자. call 메서드는 모든 함수에서 사용할 수 있으며 this를 특정 값으로 지정할 수 있다. 다음 예제를 살펴보자. 여기에서 this는 window를 가리킨다. window.name이 빈 문자열이기 때문에 이렇게 나오는 것이다. 이때 showThisName()에 call을 해주고 이곳에 mike를 전달해보자. 그러면 Mike가 나온다. 함수를 호출하면서 call을 사용하고 this로 사용할 객체를 넘기면 해당 함수가 주어진 객체의 메서드인 것처럼 사용할 수 있다. call의 첫 번째 매개변수는 this로 사용할 값이고, 매개변수가 더 있으면 그 매개변..
![]()
슈퍼맨에게는 특별한 능력들이 있다. 저 객체에 하늘을 나는 능력을 추가해 보자. 이렇게 객체에 함수를 추가하고 superman.fly()를 호출해 보면 슈퍼맨이 날아간다고 로그에 찍힌다. 이렇게 객체 프로퍼티로 할당된 함수를 메서드라고 한다. 여기에서 fly 함수가 superman 객체의 메서드인 것이다. 단축 구문으로도 작성할 수 있다. 양쪽의 코드는 같다. 메서드의 function 키워드는 생략 가능하다. 객체의 메서드의 관계를 살펴보자. user 이름은 'Mike'이고 sayHello라는 메서드를 가지고 있다. 이 메서드 로그에 객체의 name 프로퍼티를 넣고 싶다면 어떻게 하면 될까? user의 name이니까 이렇게 하면 된다. 하지만 이 방식은 문제가 발생할 수 있다. 이 부분은 잠시 후 코드로..
![]()
객체는 중괄호로 작성하고 키(key)와 값(value)으로 구성된 프로퍼티가 들어간다. 각 프로퍼티는 쉼표로 구분한다. 마지막 쉼표는 없어도 되지만 있는 게 수정, 삭제, 이동할 때 용이하다. 객체에 접근하고 싶을 때는 점을 사용하면 된다. 혹은 대괄호도 사용할 수 있다. 추가할 때도 점이나 대괄호를 이용할 수 있다. 삭제는 delete 키워드를 사용하면 된다. 삭제하고 싶은 프로퍼티 앞에 붙여준다. 단축 프로퍼티를 사용하면 보다 간단하게 객체를 작성할 수 있다. 이 객체의 name에는 name 변수가 들어가 있고 age에는 age 변수가 들어가 있다. 즉 객체의 name은 'clark'이고 age는 '33'이다. 이 코드는 이렇게 쓸 수도 있다. 만약 존재하지 않는 프로퍼티에 접근하면 어떻게 될까? 에..
![]()
서비스를 만들다 보면 같거나 비슷한 동작이 생기기 마련이다. 팝업창을 띄운다든지 결제할 때 같은. 이런 동작들을 자주 사용하거나 여러 곳에서 사용한다면 하나로 만든 다음 재사용하는 게 좋다. 그렇게 해야 중복되는 코드도 줄어들고 유지 보수도 편해지기 때문이다. 함수는 이때 쓰인다. 함수에는 브라우저가 이미 갖고 있는 console, alert, confirm도 포함된다. 함수는 이런 식으로 작성한다. 매개변수는 인수라고도 불리는데 완전히 동일한 의미라고는 할 수 없다. 매개변수는 없을 수도 있고, 지금처럼 한 개일 수도 있고, 두 개 이상일 수도 있다. 만약 매개변수가 여러 개라면 쉼표로 구분한다. 중괄호 내부에는 함수의 실행 코드를 작성한다. 지금은 간단히 이름을 받아 앞에 "Hello"를 붙이고 로그..
![]()
1부터 10까지 로그를 찍을 때 코드를 어떻게 짤까? 절대적 양이 적다면 다음처럼 하나씩 하드 코딩할 수도 있겠지만 감당할 수 없는 양이라면 반복문을 쓰면 된다. 반복문은 동일한 작업을 여러 번 반복해준다. 일반적으로 가장 많이 활용되는 반복문은 for이다. for문은 세미콜론으로 구분하며 세 부분으로 나눌 수 있다. 첫 번째 부분에는 초기값을 설정한다. 처음 반복문에 진입할 때만 한 번 실행된다. 지금은 i라는 변수를 만들고 0이라는 변수를 넣어두었다. 두 번째 부분에는 조건을 적어둔다. 반복문이 돌면서 조건을 확인하고 false가 되면 멈춘다. 지금은 i가 10보다 적으면 true를 반환하게 해두었다. 세 번째 부분에는 반복문이 한 번 실행된 후 해야 할 작업을 명시한다. 지금은 i에 1을 더하면서 ..
![]()
자바스크립트에는 다음과 같은 세 종류의 논리 연산자가 있다. OR(||)는 여러 개 중 하나라도 true면 true이다. 즉 모든 값이 false일 때만 false를 반환한다. AND(&&)는 모든 값이 true일 때만 true이다. 즉 하나라도 false가 있으면 false를 반환한다. NOT(!)은 true와 false를 반대 값으로 바꿔준다. OR는 첫 번째 true를 발견하는 즉시 평가를 멈춘다. 그러니까 다음과 같이 아무리 많은 조건이 있어도 남자라는 조건이 true이므로 true를 반환한다. 반대로 AND는 첫 번째 false를 발견하는 즉시 평가를 멈춘다. 다음의 경우는 두 번째 조건인 '한국인이며'에서 false가 반환되며 평가가 중단된다. 간단한 평가로 true와 false를 판단할 수 ..
