로니의 개발 이야기

실행 컨텍스트는 자바스크립트에서 가장 중요한 핵심 개념 중에 하나입니다. 자바스크립트에서 작동하는 다양한 것들의 동작 원리를 담고 있기 때문입니다. 이를 정확히 이해하는 것은 자바스크립트 개발자에게 매우 중요합니다. 목표 실행 컨텍스트에 대해서 이해한다 실행 컨텍스트란? 실행 컨텍스트는 실행 가능한 코드에 제공할 환경 정보들을 모아놓은 객체를 말합니다. 따라서, 우리가 코드를 작성하고 실행하게 된다면 실행 컨텍스트 내부에서 실행되고 있는 것입니다. 여기서 말하는 실행 가능한 코드는 아래와 같습니다. 전역 코드 : 전역 영역에 존재하는 코드 함수 코드 : 함수 내에 존재하는 코드 Eval 코드 : eval 함수로 실행되는 코드 block 코드 : while, if , for, function 등에서 만들어..

var, const, let의 차이점을 비교하려면 var의 문제점을 알아야 한다. 그렇다면 var를 사용함으로써 어떤 문제가 발생하게 될까? var를 사용하면서 발생하는 문제점 ⓵ 변수 중복 선언 가능하여, 예기치 못한 값을 반환할 수 있다. ⓶ 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다. ⓷ 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다. ⓸ 어떤 의도로 선언되었는지 알 수 없다. 위와 같은 문제들이 발생할 수 있는데, 이를 개선하기 위해 ES6에서 나온 새로운 키워드가 const와 let이다. 이제 var, const, let의 차이에 대해서 알아보겠다. var, const, let의 차이 const와 let은 중복 선언이 불가능하다 → 어떤..

스코프(scope)란? 식별자의 유효 범위를 뜻하며, 선언된 위치에 따라 유효 범위가 달라진다. 전역에 선언된 변수는 전역 스코프를, 지역에 선언된 변수는 지역 스코프를 갖는다. 전역 변수는 어디에서든지 참조가 가능한 값이다. 반면, 지역 변수는 함수 몸체 내부를 말한다. 따라서 지역 변수는 자신의 지역 스코프와 그 하위 지역 스코프에서 유효하다. 블록 레벨 스코프 자바스크립트에서 모든 코드 블록(ex. 함수, if, for, while, try/catch 문 등)을 지역 스코프로 인정하는데, 이를 블록 레벨 스코프라고 한다. 코드 블록 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 함수 레벨 스코프 var 키워드로 선언된 변수는 오로지 함수의 코드 블록만을 지..

변수란? 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙여진 이름을 말한다. 즉, 변수란 값의 위치를 가리키는 상징적인 이름을 말한다. var foo = 135; console.log(foo) // 135 변수명(식별자)인 foo는 변수의 값이 아닌 메모리 주소를 기억하고 있고, 변수명을 사용하게 되면 자바스크립트 엔진이 변수명과 맵핑된 메모리 주소를 통해 value 값을 반환한다. 아래의 예제를 살펴보자. console.log(foo); // ① undefined var foo = 135; console.log(foo); // ② 135 { var foo = 246; } console.log(foo); // ③ 246 var 키워드를 사용하여 선언한 변수는..

Optional chaining 이 필요한 이유? 옵셔널 체이닝은 왜 필요한 것일까? 일단 옵셔널 체이닝(optional chaining)?. 을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다고 한다. 에러 없이 안전하게 접근한다? 음.. 어떤 부분에 대해서 안전할까에 대해서 한번 천천히 생각해보도록 하자. 만약, data라는 배열을 받아와서 핸들링한 후 리턴하는 예시가 있다고 해보자. 코드의 결과는 당연히 undefined가 나올 것이다. 왜 undefined가 나올까? 그것은 data가 아직 도착하지 않았는데 map 함수가 실행되었기 때문이다. map 함수 입장에서는 data가 뭔지 모르겠으니까 data를 undefined 취급해줄 수밖에 없는 것이다. const examp..

커링(Currying) 이란? 커링은 인자를 여러개 받는 함수를 분리하여, 인자를 하나씩만 받는 함수의 체인으로 만드는 방법이다. 함수형 프로그래밍 기법 중 하나로 함수를 재사용하는데 유용하게 쓰일 수 있는 기법이다. 자바스크립트 내부에는 커링이 내장되어 있지 않지만 자바스크립트로도 구현이 가능하다. 예시 적용 전에 const testAction = (initialState, action) => produce(initialState, draft => { const { type } = action; switch (type) { case TEST_ACTION1: draft.test1 = 'test1'; break; case TEST_ACTION2: draft.test2 = 'test2'; break; def..

Generator 함수와 일반 함수 일반 함수를 정의하고 return 값을 지정해줬을 때 아래와 같이 보통 하나의 return 값을 지정해주게 된다. function sayHi(){ return 'hi' } const result = sayHi() console.log(result); // hi를 출력 만약 여기서 return 값을 두개를 주었을 때는 어떻게 될까? hi 와 hello 두개의 값을 리턴해주면 좋겠지만 결과는 hi 만 출력된다. function sayHi(){ return 'hi' return 'hello' } const result = sayHi() console.log(result); // hi를 출력 이와 달리 generator 함수를 이용했을 때는 Object [Generator] ..

❔ 화살표 함수와 일반 함수는 어떻게 다를까 문법 차이 - 함수를 표현 방식 1️⃣ function 키워드의 생략 function 키워드를 생략하여 간단하게 표현할 수 있다. const func1 = function() { const num = 3; }; const func1 = () => { const num = 3; }; 2️⃣ 함수의 매개 변수의 괄호 생략 함수의 전달 인자인 매개 변수가 하나인 경우 괄호()를 생략할 수 있다. const func2 = function(num){ for(let i = 0; i { for(let i = 0; i < 10; i++){ num++; return num; ..

1️⃣ 비동기 처리란 무엇일까? 비동기 처리의 가장 흔한 사례는 jquery의 ajax이다. 이 ajax를 통신을 통해 데이터를 서버로부터 가져올 수 있기 때문이다. 👀 아래의 ajax 코드를 한편 살펴보자. function getData(){ var dongleData; $.get('https://domain.com/product/1', function(response){ dongleData = response; }); return dongleData; } console.log(getData()); // undefined ▫ $. get()이 ajax 통신을 하는 부분 ▫ https://domain.com에 HTTP GET 요청을 해서 product 1번을 요청 ▫ 서버에서 받아온 데이터는 respon..

💡 Template literal 자바스크립트를 좀 더 편하게 사용하기 위해 Template literal을 간단하게 사용해보기로 했다. var nick_name = 'dongle'; var letter = 'Dear' + nick_name + '\n\n Hello, my name is dongri.'; console.log(letter); 위의 코드는 아래와 같이 실행될 수 있다. +라던가 \n 등을 사용하지 않고 좀 더 편하게 사용할 수 있게 template literal을 적용해볼 수 있다. literal이 시작되는 부분에 grave accent( ` ) 를 입력 ${선언된 변수} 입력 literal이 끝나는 부분에 grave accent( ` ) 를 입력 var letter = `Dear ${ni..