왈왈이의 기술블로그

프로토타입이란 자바스크립트는 객체 간의 상속이 이루어질 때 C언어나 Java와는 다른 방식으로 상속이 이루어진다. 객체를 복사하는 방식으로 상속을 구현하는 다른 언어들과 달리 자바스크립트는 자신만의 속성들 + 프로토타입 객체에 대한 링크를 가진다. 프로토타입은 체인처럼 위에서 아래로 쭉 연결되어 있으며, 자신에게 연결된 프로토타입부터 위로 올라가며 프로토타입 체인의 종단에 이를 때까지 속성을 탐색할 수 있다. 모든 객체가 자기 자신의 속성을 보관하는 주머니와, 부모/조상 객체의 연결 주머니와도 연결된 연결 주머니(prototype)을 가진다고 이해할 수 있다. 이 둘이 혼동되기 쉬운데, 이 둘은 완전히 별개의 두 주머니라고 이해하는 것이 이해가 쉽다. 예를 들어 함수를 작성하고 그 함수를 생성자로 사용하..

자바스크립트에서 '', "" 등으로 표현하는 일반 문자열 내에서 줄바꿈 등을 표현하기 위해서는 아래와 같은 이스케이프 시퀀스를 사용해야 한다. 이스케이프 시퀀스 의미 \0 Null \b 백스페이스 \f 폼 피드: 프린터로 출력할 경우 다음 페이지의 시작 지점으로 이동 \n 개행: 다음 행으로 이동 (가장 흔히 사용) \r 개행: 커서를 처음으로 이동 \t 탭(수평) \v 탭(수직) \uXXXX 유니코드. 예를 들어, '\u0041'은 'A', '\uD55c'는 '한'을 의미함 \' 작은 따옴표 \" 큰 따옴표 \\ 백슬래시 이스케이프 시퀀스 없이 줄바꿈 등을 표현하고 싶다면 ``(백틱)으로 문자열을 표현하면 된다.

자바스크립트에서 배열에 사용할 수 있는 find() 메서드는 인자로 입력하는 판별 함수를 만족하는 첫번째 요소의 값을 반환한다. 원하는 값이 없는 경우 undefined를 반환한다. 찾는 값의 index를 반환하고 값이 없을 때 -1을 반환하는 indexOf()와는 차이점이 있다. 사용 예시는 아래와 같다. const array1 = [5, 12, 8, 130, 44]; const found = array1.find(element => element > 10); console.log(found); // Expected output: 12 문법은 아래와 같다. arr.find(callback) (두 번째 인자로 객체를 넣을 수 있지만 복잡하니 생략하자.) callback 함수의 인자로는 순서대로 아래의 세..

자바스크립트의 내장 객체인 Map은 일반 객체의 훌륭한 대안으로 사용된다. 평소 객체로는 한계가 있었던 많은 부분을 Map은 해결해주고 있다. Map 객체는 아래와 같이 생성한다. const myMap = new Map(); 주요 메서드 5개는 아래와 같다. 1. set() 객체에 프로퍼티를 추가하기 위해 사용하는 메서드이다. key와 value를 동시에 인자로 넣는다. myMap.set('key4', 'value4'); myMap.set('key5', 'value5'); 다만, 중복된 키값이 동시에 존재할 수 없으며, 후에 동일한 key로 set()메서드를 실행하면 value가 대체된다. 2. get() 키로 value를 불러올 때 사용하는 메서드이다. 일반적인 객체처럼 map.key 형태로는 사용할 ..

자바스크립트의 내장 객체인 Set은 중복을 허용하지 않는 값의 집합이다. 모든 값들이 unique하며, 삽입한 순서대로 순서가 유지된다. 배열에서 중복된 값들을 제외하고 보고 싶을 때가 많은데 그 때 Set객체가 아주 유용하다. 아래와 같이 새로운 set객체를 생성할 수 있다. const mySet = new Set(); 이렇게 만들면 빈 객체가 만들어지고, 아래와 같이 처음 생성 시 값을 넣어 만들 수도 있다. const mySet = new Set([1, 2, 3]); console.log(mySet); // Set(3) {1,2,3} 주요 메서드에는 아래와 같이 4가지 메서드가 있다. 1. add() 인자로 넣은 값을 객체에 추가한다. mySet.add("fish"); mySet.add("lion"..

자바스크립트 내장 메서드인 array.sort()는 배열의 요소를 정렬하는 메서드이다. sort()메서드는 원본 배열을 변경하므로 주의. 새로운 배열이 만들어지는 것이 아니다. 인자를 삽입하지 않고 array.sort()를 그대로 사용할 경우 유니코드 코드 포인트(문자열 순서)에 따라 정렬한다. 이는 숫자로 구성된 배열을 정렬할 때 특히 주의하여야 한다. 숫자라도 문자열로 인식했을 때의 기준으로 정렬되기 때문이다. 아래의 예시를 참고하자. const months = ['March', 'Jan', 'Feb', 'Dec']; months.sort(); console.log(months); // Expected output: Array ["Dec", "Feb", "Jan", "March"] const arra..

배열에 사용하는 reduce()메서드는 배열의 각 요소에 콜백 함수를 실행하여 `하나의 값`을 반환한다. 이때 accumulator를 사용할 수 있는 것이 특징적인데, accumulator라는 인자를 사용하여, 요소를 순회하며 콜백을 실행할 때 accumulator에 값을 저장해 다음 요소의 콜백에 넘길 수 있다. 아래와 같이 reduce 메서드는 callback 함수와 initial value 두 개의 인자를 받는다. initial value는 accumulator의 초기값으로, 입력하지 않으면 배열[0]이 할당된다. arr.reduce(callback, initialValue) callback함수는 최대 4개의 인자를 아래 순서대로 받는다. currentIndex와 array는 생략 가능하다. 1. ..

slice() 메서드는 어떤 배열의 시작 위치부터 끝 위치까지(끝 위치의 값은 미포함) 값을 복사하여 새로운 배열을 반환한다. 원본 배열은 바뀌지 않음. 문법은 아래와 같다. arr.slice([begin[, end]]) mdn에서 가져온 사용 예시는 아래와 같다. const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; console.log(animals.slice(2)); // 1. 결과: Array ["camel", "duck", "elephant"] console.log(animals.slice(2, 4)); // 2. 결과: Array ["camel", "duck"] console.log(animals.slice(1, 5)); // 3. 결..

자바스크립트에서 점 세개, `...` 은 두 가지 사용법이 있다. 1. Spread Operator 뒤늦게 알게 되어 매우 아쉬울 정도로 객체와 배열을 사용할 때 아주 유용한 방식이다. 객체와 배열을 사용할 때 서로 다른 객체/배열끼리 합치고 싶을 때가 많다. 그때 {}, [] 의 껍데기가 거슬리게 느껴지는데 이를 없애주는 것이 ...이다. 사용법은 아래와 같다. [객체 ver.] const walwal = { name: "Walwal", age: 19, height: 180, job: "backend developer" } const john = { ...walwal, name: "John", age: 20, hobby: "skating" } // john = { // name: "John", // a..

단축평가란 왼쪽부터 오른쪽으로 평가를 진행하여, 논리연산자 &&와 || 에 따라 다른 결과를 반환한다. &&는 and, || 는 or를 의미한다. 아래의 에러 핸들러에서 || 연산자가 사용되었다. const globalErrorHandler = (err, req, res, next) => { console.error(err); err.statusCode = err.statusCode || 500; res.status(err.statusCode).json({ message: err.message }); }; 단축평가는 왼쪽부터 평가되기 때문에 || 연산자의 경우 왼쪽 값이 true라면 그 값을 반환하고, false라면 오른쪽 값을 반환한다. 위 코드에서 err.statusCode에 값이 있다면 truthy..