Web

Modern Javascript / 함수 심화학습

목차 재귀와 스택 나머지 매개변수와 전개 문법 변수의 유효범위와 클로저 오래된 'var' 전역 객체 객체로서의 함수와 기명 함수 표현식 new Function 문법 setTimeout과 setInterval을 이용한 호출 스케줄링 call/aply와 데코레이터, 포워딩 함수 바인딩 화살표 함수 다시 살펴보기 재귀와 스택 문제 해결을 하다 보면 함수에서 다른 함수를 호출해야 할 때가 있다. 이때 함수가 자기 자신을 호출할 수도 있는데, 이를 재귀라고 부른다. 두 가지 사고방식 재귀와 스택 ko.javascript.info 가장 처음 하는 호출을 포함한 중첩 호출의 최대 개수는 재귀 깊이(recursion depth)라고 한다. pow(x, n)의 재귀 깊이는 n이다. 자바스크립트 엔진은 최대 재귀 깊이를 ..

Modern Javascript / 코드 품질 - Chrome으로 디버깅

Chrome으로 디버깅하기 디버깅은 스크립트 내 에러를 검출해 제거하는 일련의 과정을 의미한다. 모던 브라우저와 호스트 환경 대부분은 개발자 도구 안에 UI 형태로 디버깅 툴을 구비해 놓는다. 디버깅 툴을 사용하면 디버깅이 훨씬 쉬워지고, 실행 단계마다 어떤 일이 일어나는지를 코드 단위로 추적할 수 있다. 중단점 줄 번호를 클릭하면 중단점을 설정할 수 있다. 중단점을 이용하면 실행이 중지된 시점에 변수가 어떤 값을 담고 있는지 알 수 있다. 또한 실행이 중지된 시점을 기준으로 명령어를 실행할 수도 있다. debugger 명령어 function hello(name) { let phrase = `Hello, ${name}!`; debugger; // 여기서 실행이 멈춘다 say(phrase); } debug..

Modern Javascript / 자료구조와 자료형

목차 원시값의 메서드 숫자형 문자열 배열 배열과 메서드 iterable 객체 맵과 셋 위크맵과 위크셋 Object.keys, values, entries 구조 분해 할당 Date 객체와 날짜 JSON과 메서드 원시값의 메서드 원시값: 원시형 값이다. 원시형의 종류는 문자(string), 숫자(number), bigint, 불린(boolean), 심볼(symbol), null, undefined 형으로 총 일곱 가지 이다. 객체: 프로퍼티에 다양한 종류의 값을 저장할 수 있다. {name: "John", age: 30}와 같이 대괄호 {}를 사용해 만들 수 있다. 함수도 객체의 일종이다. 숫자형 숫자를 입력하는 다양한 방법 let billion = 1000000000; billion = 1bn; billi..

Modern Javascript / 객체: 기본

객체 객체형은 원시형과 달리 다양한 데이터를 담을 수 있다. 키로 구분된 데이터 집합이나 복잡한 개체를 저장할 수 있다. 객체는 중괄호 {...}를 이용해 만들 수 있다. 중괄호 안에는 '키(key): 값(value)' 쌍으로 구성된 프로퍼티를 여러개 넣을 수 있다. 키엔 문자형, 값엔 모든 자료형이 허용된다. // 객체를 생성하는 두가지 문법 let user = new Object(); // '객체 생성자' 문법 let user = {}; // '객체 리터럴' 문법 리터럴과 프로퍼티 let user = { // 객체 name: "John", // 키: "name", 값: "John" age: 30 // 키: "age", 값: 30 "likes birds": true // 복수의 단어는 따옴표로 묶어야 ..

Modern Javascript / 자바스크립트 기본

'script 태그' 스크립트 후 외부 스크립트 자바스크립트 코드의 양이 많은 경우에, 외부에 따로 작성하여 저장한다. 저장한 js파일은 src속성을 사용해 HTML에 삽입한다. // 절대 경로 // URL을 속성으로 사용 // 복수의 스크립트를 사용하고 싶다면 여러번 사용하면 된다. 스크립트를 별도의 파일에 작성하면 스크립트를 다운받아 캐시에 저장하게 된다. 따라서 여러 페이지에 동일한 스크립트를 사용하는 경우, 페이지가 바뀔 때마다 스크립트를 새로 다운받지 않고, 캐시에 저장된 스크립트를 불러와 사용하게 된다. 따라서 성능상의 이점이 있고 속도가 빨라지게 된다. 코드 구조 주석 // 한 줄 주석 alert("공부 시러"); /* 여러 줄 주석 */ alert("공부 노잼"); 한 줄 주석 단축키 : ..

Vanilla JS / Number() 와 parseInt()

나는 학교에서 가르침을 받을때도, parseInt()만 배워서 Number()라는 것이 있는 줄 몰랐다. 알고리즘 문제를 풀면서, 내가 parseInt()를 사용한 자리에 Number()를 사용한 사람들을 보고 의구심이 들었다. 과연 둘은 어떻게 다를까? Number(str) 만약 str을 숫자로 변환할 수 없으면 NaN을 리턴한다. 생성자로써 사용하지 않으면(new 연산자를 사용하지 않으면) Number를 사용하여 형변환을 할 수 있다. const num1 = Number("100입니다"); // NaN을 리턴한다. const num2 = Number("100"); // 숫자 100을 리턴한다, num2 === 100 은 true. const num3 = new Number("100") // num3 ..