Web/Vanilla JS

Array Method

Array 배열은 리스트와 비슷한 '객체'이다. JS의 배열은 길이도 고정되어 있지 않고, 요소의 자료형도 고정되어 있지 않다. 따라서 한 배열에 숫자와 문자열이 같이 들어갈 수도 있고, 아래와 같이 그냥 뒤에 값을 넣을 수도 있다. let arr = [1, 2]; arr[2] = 3; console.log(arr); // [1, 2, 3] 또한 위와 같이 그냥 리터럴 표기법으로 배열을 생성할 수도 있고, 생성자로 생성할 수 있다. 이제 아래에서 생성자를 시작으로 관련 메소드들을 알아보자. Array() 생성자 let arr1 = new Array(3); console.log(arr1); // [empty * 3] console.log(arr1[0]); // undefined 위 코드와 같이 '빈 슬롯'..

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("공부 노잼"); 한 줄 주석 단축키 : ..