Javascript/문법

Promise 콜백 헬 이라 불리는 지저분한 JS 코드의 해결책 내용이 실행은 되었지만 결과를 아직 반환하지 않은 객체 then을 붙이면 결과를 반환함 실행이 완료되지 않았으면 완료된 후에 then 내부 함수가 실행됨 Resolve(성공리턴값) => then으로 연결 Reject(실패리턴값) => catch로 연결 Finally 부분은 무조건 실행 const condition = true; // true면 resolve, false면 reject const promise = new Promise((resolve, reject) => { if (condition) { resolve('성공'); } else { reject('실패'); } }); // 다른 코드가 들어갈 수 있다. promise .then(..

호이스팅 변수 호이스팅 다음과 같이 코드를 짰다고 가정해보자. function doSomething(){ var a = 10; console.log(a); // 10 console.log(b); // undefined var b = 100; } doSomething(); 자바스크립트에서 변수를 선언하면 변수선언부가 최상단으로 올라가게 된다. function doSomething(){ var a = 10; var b; console.log(a); // 10 console.log(b); // undefined b = 100; } doSomething(); 변수의 경우 사실 호이스팅이 큰 문제가 되지 않는다. 그러나... 함수 호이스팅 변수 호이스팅과 유사하나.. 자바스크립트에는 함수를 선언하는 방식이 두 가..

Reference 타입 Datevar date = new Date(); console.log(date) 자바스크립트의 사용시간대와 우리나라 사용시간대는 다름에 주의 날짜를 다루는 객체이기에 날짜 관련 내부 기능이 많이 있음 문제는 자바스크립트에서 이 date를 사용하는 방법이 비효율적이다. 따라서 자바스크립트에서 날짜 관련 기능을 만들 때에는 Date를 바로 쓰기 보다 moment 나 Luxon 을 사용하는 것이 좋다. 자바스크립트 기본 Date는 문제가 많은 듯 하다. 여기서도 지적을 한다. Regexp(Regular Expression)var reg1 = /abc/; // 리터럴 표기법 var reg2 = new RegExp("/abc/", "g"); // 객체방식 리터럴 표기법의 장점은 다음과같이 ..

코딩애플 영상 참고 다음 영상을 참고하여 정리한 글입니다. optional chaining 연산자 ?. var use = { name : 'kim', age : 20 } console.log(user.age) // 20 console.log(user?.age) // 20 user.age와 user?.age의 차이 user가 null이거나 undefined이면 user.age가 에러를 뱉는다. user가 null이거나 undefined여도 user?.age는 undefined를 남긴다. when to use? 중첩된 object자료에서 자료를 뽑을 때 reference error 없이 안전하게 뽑을 수 있음 var user = { name: 'kim' }; console.log(user.age) // un..

객체 비구조화 할당 (객체 구조 분해) 객체에서 특정 값을 추출해내는 것을 의미함. const ironMan = { name : '토니 스타크', actor : '로버트 다우니 주니어', alias : '아이언맨' }; 먼저 위와 같은 객체를 선언한다. function print(hero){ const text = `${hero.alias}(${hero.name}) 역할을 맡은 배우는 ${hero.actor}입니다.`; console.log(text); } console.log(print(ironMan)); // 아이언맨(토니 스타크) 역할을 맡은 배우는 로버트 다우니 주니어입니다. 하지만 이렇게 매번 객체.key값을 써주는 것이 번거로울 수 있다. 그래서 비구조화 할당을 사용한다. // 비구조화 할당 ..

자바스크립트 사용 시 주의해야 할 정말 매우 몹시 기본적인 문법 변수 선언할 때 자바스크립트의 변수 선언에는 var, let, const가 있다. 그냥 var는 쓰지 않는다고 생각하는 것이 좋다. var a = 1 var a = 3 var를 쓰면 이래도 문제가 없어진다. 반면 let a = 1 let a = 3 이 경우에는 error가 발생한다. 즉, let을 사용하면 같은 이름의 변수를 중복해서 사용하면 에러 표시가 뜨기 때문에 내가 원하는 변수의 값이 중간에 의도하지 않게 바뀔 우려가 없어진다. 결론적으로 그냥 var가 아닌 let을 사용하자 그럼 const와 let의 차이는 뭘까? const의 경우 let과 달리 immutable하다. 비교 연산자 사용할 때 비교 연산자 보통의 다른 언어들(java..

https://velog.io/@raram2/%EB%8B%B9%EC%8B%A0%EC%9D%B4-innerHTML%EC%9D%84-%EC%93%B0%EB%A9%B4-%EC%95%88%EB%90%98%EB%8A%94-%EC%9D%B4%EC%9C%A0 당신이 innerHTML을 쓰면 안되는 이유 textContent 중심으로 본 innerText 및 innerHTML과의 장단점 비교 velog.io innerHTML을 통해 태그 내에 텍스트를 입력하는 것 뿐만 아니라 존재하고 있는 text도 가져올 수 있기에 신기하여 검색하다가 이글을 보게 되었다. 가급적 textContent를 더 사용해보자~

python에서의 for in문을 자바스크립트의 for in 문과 동일하게 생각했다가 삽질해서 쓰는 글 배열(리스트)에서 key : value가 있다고 해보자. 자스는 프로퍼티'명'(key)을 가져오는것이고 python이나 java는 프로퍼티 '값'(value)을 가져온다. 자바스크립트의 배열 var elements = ['a', 'b', 'c']가 있으면 0 : 'a' 1 : 'b' 2 : 'c' 가 되어서 for element in elements 를 할 때 파이썬의 경우 element에 'a', 'b', 'c'가 들어오지만 자바스크립트는 0, 1, 2가 들어온다는 것이다. (그것도 정수형이 아닌 문자열로 가져오게 된다. console.log(typeof(element))를 해보면 Number가 아닌..