영차영차 개발 기록장 영차영차 개발 기록장

리터럴 리터럴이란? MDN을 보면 리터럴을 아래와 같이 정의하고 있다. JavaScript에서 값을 나타내기 위해 리터럴을 사용합니다. 이는 말 그대로 스크립트에 부여한 고정값으로, 변수가 아닙니다. 이 말은 즉, 변수의 데이터 타입을 고정해서 부여한다는 말이다. 리터럴 방식의 변수 선언방식 (리터럴 표기법) var x = []; var y = 1; 코드를 살펴보자! 변수 x에 배열을 할당하고, 변수 y에 1을 할당했다. 그렇다는 것은 변수 x의 데이터 타입은 배열이고 변수 y의 데이터 타입은 정수라는 것이다. 변수 x는 배열이라는 고정값을, 변수 y는 정수라는 고정값을 갖는다. 자, 그럼 이제 MDN이 정의한 "이는 말 그대로 스크립트에 부여한 고정값"이라는게 무슨 말인지 이해할 수 있다. 변수 x는 ..

🖐️ 들어가기 전 아래 코드를 실행하면 어떤 결과값이 나올까? function whatThis() { console.log(this); }; whatThis(); 어떤 함수를 함수로서 호출한 경우 this는 전역객체를 참조하므로, 전역객체인 window가 출력된다. 만약, 전역객체가 아닌 다른 객체를 출력하고 싶다면 어떻게 해야할까? 바로 call, apply, bind를 사용하면 된다. 1. Call call 메서드는 메서드의 호출 주체인 함수를 즉시 실행하는 메서드다. func.call(thisArg[, arg1[, arg2[, ...]]]) 자, 그럼 구문을 살펴보자! 첫번째 인자는 this에 바인딩되고, 이후의 인자들은 호출할 함수의 매개변수로 전달된다. 그렇다면 아래 코드를 실행하면 어떤 결과 ..

1. Array.From() 유사 배열 객체나 반복 가능한 객체를 얕게 복사해서 새로운 객체를 만든다. const a = [1,2,3,4]; const b = Array.from(a); console.log(b === a); // false 2. Array.prototype.slice(begin, end) 기존 배열을 변경하지 않고 해당 배열의 일부를 반환한다. const a = [1,2,3,4,5]; console.log(a.slice(1,3)); // [2, 3] 시작 인덱스와 종료 인덱스를 매개변수로 받는다. 종료 인덱스의 -1 인덱스까지 추출된다. 인자를 생략하면 기존 배열의 얇은 복사본을 반환한다. const a = [1,2,3,4,5]; console.log(a.slice()); // [1, ..

What is Prettier? 협업을 하다보면 코딩 스타일이 각자 다르기때문에, 후에 유지보수 팀이 프로젝트를 열어보면 가독성과 유지보수의 문제가 있을 수 있다. 따라서, 코드 포맷을 정해서 한 방향으로 가는게 좋다. 이걸 도와주는 것이 바로 코드 포맷터(code formatter)인 Prettier다. Prettier는 다양한 언어와 Editor를 지원하고, 간단하게 사용자 맞춤 포맷 설정이 가능하므로 현업에서 많이 사용한다. Prettier · Opinionated Code Formatter Opinionated Code Formatter prettier.io What is ESLint? 자바스크립트는 문법 오류가 나도 알려주지 않고, 실행을 해서 오류를 확인해야 오류가 났다는걸 알 수 있다. 코드..

🙋‍♀️ 들어가기 전에 여러 자바스크립트 개념들과 연관되어 있기 때문에 자바스크립트 개발자는 실행 컨텍스트가 어떻게 생성되고 사용되는지 꼭 알아야한다고 생각한다. 따라서, 이번 포스팅을 통해 실행 컨텍스트의 개념을 확실히 익히는게 목적이다! 🤷‍♀️ 실행 컨텍스트란? 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체다. Javascript에는 3 종류의 실행 컨텍스트가 있다. 전역 실행 컨텍스트(Global execution context) : 자바스크립트 파일이 열리는 순간 처음으로 실행되는 컨텍스트 함수 실행 컨텍스트(Function execution context) : 함수가 실행될 때 실행되는 컨텍스트 eval 실행 컨텍스트 (Eval execution context) : eval..

😊 비동기 제어하기 1. Promise MDN에서 설명하는 Promise는 다음과 같다. "Promise는 프로미스가 생성될 때 꼭 알 수 있지는 않은 값을 위한 대리자로, 비동기 연산이 종료된 이후의 결괏값이나 실패 이유를 처리하기 위한 처리기를 연결할 수 있도록 합니다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하지는 않고, 대신 프로미스를 반환해서 미래의 어떤 시점에 결과를 제공합니다." 간단히 말하면 비동기 처리에서 사용하는 객체다. setTimeout(function () { console.log("one"); setTimeout(function () { console.log("two"); setTimeout(function ()..

🖐 들어가기 전에 비동기가 도대체 뭔데?!!!! 무턱대고 자바스크립트 코드를 작성 할때 항상 의문이였던건 비동기라는 것이였다. asyn/await만 붙이면 모든 함수들이 비동기가 되는줄 알아서 모든 함수에 asyn 붙이고...🤦‍♀️ 개념이 확실히 안 잡힌 상태에서 무작성 코드를 작성하니 갈수록 혼란해지고 답답한 마음이 커졌다. 이번 포스팅을 통해서 자바스크립트의 콜백 함수와 비동기 처리에 대해 확실히 이해하는 것이 목표다! 💁‍♀️ 사전에 알아야될 용어 정리 1. 동기 동기란 요청이 들어온 순서에 맞게 하나씩 처리하는 방식으로, 요청 들어온 작업이 끝날 때 까지 기다렸다가 응답을 즉시 처리하고 다음으로 넘어간다. 2. 비동기 비동기란 하나의 요청에 따른 응답을 즉시 처리하지 않아도, 그 대기 시간동안 ..

불변성이란? 사전적의미 그대로 변하지 아니하는 성질이다. 불변성이라는 개념을 이해하기 위해서는 자바스크립트의 데이터가 처리되는 과정을 이해해야한다. 자, 그럼 그 처리 과정을 대략적으로 살펴보겠다. var a = 'abc'; 필자는 a라는 변수를 선언하고, abc라는 데이터 값을 할당했다. 그럼 자바스크립 엔진은 메모리에 a라는 식별자를 가진 빈 공간을 마련하고, 주소를 할당한다. 그리고, 할당한 주소에 abc 라는 데이터 값을 저장한다. 여기서 한번 더 생각해야할 점은 a라는 식별자를 가진 메모리 공간에 바로 abc라는 데이터 값이 아닌, 데이터 값의 메모리 주소값을 할당한다는 점이다! 변수의 값을 변경하면 어떻게 될까? var a = 'abc'; a = 'bbb'; 선언해둔 a라는 변수에 bbb라는 ..