프론트엔드/JavaScript
[JavaScript] this
JavaScript에서 this가 바인딩할 객체는 함수가 선언할 때 정적으로 결정되는 것이 아니다. 함수를 호출할 때 함수의 호출 방식에 따라 바인딩할 객체가 동적으로 결정된다. 1. 함수의 this 기본적으로 this는 전역 객체를 바인딩한다. 전역 객체 (Global Object) 전역 객체는 모든 객체의 유일한 최상위 객체를 의미한다. Browser-side → window 객체 Server-side → global 객체 // browser side this === window // true // server side (node.js) this === global // true 내부 함수 내부 함수는 일반 함수, 메서드, 콜백 함수 어디에서 선언되었든 관계없이 this가 전역 객체를 바인딩한다. f..
[JavaScript] Prototype
1. Prototype (프로토타입) JavaScript는 프로토타입 기반 객체지향 프로그래밍 언어이다. JavaScript의 모든 객체는 상속되는 정보가 담긴 프로토타입(prototype) 객체를 가지고 있다. 이를 통해 모든 객체는 자신의 프로토타입으로부터 프로퍼티와 메소드들을 상속받을 수 있다. 덕분에 JavaScript는 클래스 없이 프로토타입만으로 객체를 생성할 수 있다. (ES6에서 클래스 문법 추가) 2. [[Prototype]] vs prototype 프로퍼티 모든 객체는 자신의 프로토타입을 가리키는 [[Prototype]] 이라는 내부 슬롯(internal slot)을 갖는다. (내부 슬롯은 은닉 속성 정도로 해석되며, 상속을 위해 사용된다.) 함수도 객체이므로 [[Prototype]] ..
[JavaScript] Spread와 Rest의 차이
ES6에서 도입된 Spread와 Rest 문법은 똑같이 생겼다. 다만 쓰이는 상황에 따라서 둘을 구분하기 때문에 확실하게 정리해보고자 한다. 1. Spread (전개 구문) Spread는 배열, 문자열 등의 Iterable 한 요소들을 개별 요소로 분리할 수 있다. 주로 객체나 배열의 연결, 복사 등의 용도로 유용하게 쓰인다. (참고로 객체는 Iterable이 아니지만 ES9부터 Spread 사용이 가능해졌다.) 1) 배열 결합 기존엔 두 배열을 합치는 데에 concat()를 이용했었다. 하지만 ES6에선 Spread 연산자를 이용하여 좀 더 쉬게 배열을 합칠 수 있다. // ES5 - concat() var arr1 = [1, 2, 3]; var arr2 = [4, 5, 6]; var arr = arr..
[JavaScript] var, let, const 차이
기존의 문법인 var와 ES6에서 새로 추가된 let, const을 비교하고자 한다. 추가로 호이스팅과 그로 인한 TDZ 현상에 대해서도 알아보겠다. var ES6 이전의 변수 선언 방식이다. 유연한 방식으로 인해 발생하는 문제가 많아 최대한 사용하지 않는 것이 좋다. 1. 함수 레벨 스코프 if문 안의 foo와 if문 밖의 foo는 같은 스코프로 취급하여 동일한 변수가 된다. var foo='hello'; if(true) { var foo = 'hello if'; } console.log(foo); // hello if 2. 중복 선언 가능 같은 변수를 여러 번 선언해도 오류가 나지 않는다. var foo='hello1'; var foo='hello2'; console.log(foo); // hello..
[JavaScript] 구조 분해 할당 (Destructing)
Destructuring (구조 분해 할당) JavaScript로 개발을 하다 보면 함수에 객체나 배열을 전달하는 경우가 생긴다. 또 모든 데이터가 아닌 일부만 필요한 경우도 자주 생긴다. 이럴 때 Destructing(구조 분해 할당)을 통해 객체나 배열을 변수로 쉽게 분해할 수 있다. 1. Array Destructuring (배열 구조 분해 할당) 1) 배열은 인덱스 위치를 기준으로 할당된다. const arr = [1, 2, 3]; const [one, two, three] = arr; console.log(one, two, three); // 1 2 3 [x, y] = [1]; console.log(x, y); // 1 undefined [x, y] = [1, 2, 3]; console.log(..
[JavaScript] axios와 fetch 차이
axios와 fetch 모두 JavaScript의 비동기 통신을 위한 라이브러리다. 두 라이브러리는 어떤 차이가 있을까? 이를 비교하기 위해 우선 Ajax가 무엇인지부터 알아보자. Ajax (Asynchronous JavaScript And XML) Javascript를 사용한 비동기 통신을 의미한다. 클라이언트와 서버 간에 XMLHttpRequest(XHR)를 활용해 소통한다. Asynchronous Asynchronous(비동기)는 요청을 보낸 후 응답을 기다리지 않고 다음 동작이 이루어지는 방식이다. XMLHttpRequest (XHR) XMLHttpRequest(XHR) 객체는 서버와 상호작용하기 위하여 사용된다. 이를 통해 전체 페이지의 새로고침 없이도 URL로부터 일부의 데이터를 받아올 수 있..
[JavaScript] Clean Code - 11. 주석(Comments)
1. 주석을 다는 것은 로직이 복잡하다는 증명이다. 좋은 코드는 코드 자체로 말한다. // BAD function hashIt(data) { // 이건 해쉬입니다. let hash = 0; // lengh는 data의 길이입니다. const length = data.length; // 데이터의 문자열 개수만큼 반복문을 실행합니다. for (let i = 0; i < length; i++) { // 문자열 코드를 얻습니다. const char = data.charCodeAt(i); // 해쉬를 만듭니다. hash = ((hash
[JavaScript] 클린 코드 - 10. 포맷팅(Formatting)
포맷팅에 관한 과도한 논쟁은 낭비라고 생각한다. 이미 좋은 포맷팅 도구가 많기 때문이다. 하지만 아래의 몇 가지 기본적인 지침은 따르는 것이 좋다. 1. 일관된 대소문자를 사용한다. // BAD const DAYS_IN_WEEK = 7; const daysInMonth = 30; const songs = ['Back In Black', 'Stairway to Heaven', 'Hey Jude']; const Artists = ['ACDC', 'Led Zeppelin', 'The Beatles']; function eraseDatabase() {} function restore_database() {} class animal {} class Alpaca {} // GOOD const DAYS_IN_WEEK..
[JavaScript] 클린 코드 - 9. 에러 처리
1. 단순히 에러를 확인만 하지 않는다. 에러를 확인했다면 그에 대한 계획이나 장치를 마련해야 한다. // BAD - 출력만 하면 에러 로그를 잃어버리기 쉽다. try { functionThatMightThrow(); } catch (error) { console.log(error); } // GOOD try { functionThatMightThrow(); } catch (error) { // 1. console.error는 console.log보다 조금 더 알아채기 쉽다. console.error(error); // 2. 유저에게 에러를 알린다. notifyUserOfError(error); // 3. 서비스 자체에 에러를 기록한다. reportErrorToService(error); // 4. 그 ..