도리쓰에러쓰

1. 실행 컨텍스트(Execution Context)란? 자바스크립트 엔진은 코드를 실행하기 위해 실행에 필요한 여러가지 정보(전역변수, 매개변수, 유효범위, this 등)들을 알고 있어야 한다. 어떤 실행 컨텍스트가 활성화될 때, 자바스크립트 엔진은 해당 컨텍스트의 코드를 실행하는데 필요한 환경 정보들을 수집해서 실행 컨텍스트에 저장한다. 다시 말해, 코드가 실행되기 위해 필요한 정보들을 가진 범위를 추상화하기 위해 객체 형태로 나타낸 것이다. 자바스크립트에서 실행 컨텍스트(Execution Context)를 만들 수 있는 방법은 총 4가지이다. 1️⃣ 전역 코드: 전역 영역에 존재하는 코드 2️⃣ Eval 코드: eval() 함수로 실행되는 코드 3️⃣ 함수 코드: 함수 내에 존재하는 코드 4️⃣ (..

1. 얕은 복사(Shallow Copy) 얕은 복사(Shallow Copy)는 참조값의 복사를 나타낸다. const obj = { a: 1 }; const copyObj = obj; copyObj.a = 2; console.log(obj.a); // 2 console.log(obj === copyObj); // true obj라는 객체를 copyObj라는 객체에 복사하여 copyObj.a값을 변경하였더니 기존의 obj.a값도 같이 변경되었다. 마찬가지로 두 객체를 비교해봐도 true가 나온다. 이렇게 자바스크립트의 참조 타입은 얕은 복사(Shallow Copy)가 된다고 볼 수 있으며, 이는 데이터가 그대로 생성되는 것이 아닌 해당 데이터의 참조 값을 전달하여 한 데이터를 공유하는 것이다. 2. 깊은 복..

자바스크립트에는 this라는 키워드가 있다. this는 문맥에 따라서 다양한 값을 가지는데 this가 쓰이는 함수를 어떤 방식으로 실행하느냐에 따라서 그 역할이 구별된다. this의 값들은 크게 4가지로 나눌 수 있는데 지금부터 알아보겠다. 1. 일반 함수 실행 방식 (Regular Function Call) 일반 함수 실행 방식(Regular Function Call)이란 아래 코드처럼 함수를 선언한 후, 실행할 때 흔히 사용하는 방식을 말한다. 일반 함수 실행 방식(Regular Function Call)으로 함수를 실행했을 때 this의 값은 Global Object 즉, 브라우저 상에서는 window 객체를 가리킨다. const example = () => { console.log(this); }..

코딩테스트를 진행하면서 가끔 헷갈리는 메서드가 존재하는데 자세하진 않지만 확인용으로 간단하게 작성해보았다. 'dori'[1];// 'o' 'dori'.includes('or');// true 'dori'.indexOf('r');// 2 'dori'.startsWith('i');// false 'dori'.endsWith('i');// true 'dori'.slice(0,3);// 'dor' 'dori'.slice(2);// 'ri' 'dori'.toUpperCase();// 'DORI' 'dORi'.toLowerCase();// 'dori' 'dori'.replace('or', 'hh');// 'dhhi' 'dori'.repeat(3);// 'doridoridori' 'do ri'.split('');//..

D-day 기능을 구현하면서 밀리초 계산이 헷갈렸다. 우선 변수 setDate와 변수 nowDate를 new Date() 객체를 통해 날짜 데이터를 저장하고, const setDate = new Date("2022-09-25T00:00:00+0900"); const nowDate = new Date(); 아래 코드를 통해 계산할 날의 밀리초를 변수 distance에 넣었다. const distance = setDate.getTime() - nowDate.getTime(); 이제 밀리초를 어떻게 일, 시, 분, 초로 표현할까? 우선 계산 방법은 아래와 같다. 계산할 날의 밀리초 / (1000 * 60 * 60 * 24) = 일 (계산할 날의 밀리초 / (1000 * 60 * 60)) % 24 = 시 (계산..

알고리즘 문제를 풀면서 배열 메서드를 많이 접하는데, 주로 사용하는 배열 메서드를 블로그에 남기고 머릿속에 남기고 싶어서 한 눈에 보기 쉽게 정리했습니다. 1️⃣ 배열에 값 추가 혹은 삭제하는 메서드 // 배열 끝에 값 추가 [1, 2, 3].push(4);// [1, 2, 3, 4] // 배열 끝에 값 삭제 [1, 2, 3].pop();// [1, 2] // 배열 앞에 값 추가 [1, 2, 3].unshift(4);// [4, 1, 2, 3] // 배열 앞에 값 삭제 [1, 2, 3].shift();// [2, 3] 2️⃣배열 조작하는 메서드 // 배열 합치기 ['a', 'b', 'c'].concat(['d', 'e'], 'f');// ['a', 'b', 'c', 'd', 'e', 'f'] // 배열 ..

Set 객체는 ES6에서 지원하는 새로운 데이터 Object입니다. Set 객체는 배열 내에 중복되는 원소를 제거해줍니다. 아래 코드는 Set 객체를 사용하는 방법입니다. let arr1 = [1, 2, 3]; let arr2 = [2, 4, 6]; let setArr = [...new Set([...arr1, ...arr2])]; console.log(setArr);// [1, 2, 3, 4, 6] - [...array] : 배열의 값이 아닌 내용만 복사 (ES6 Spread Operator 참고) 🚨 Set 객체는 데이터 타입을 구분하기 때문에 숫자 1과 문자열 "1"은 다르다는 점 유의해주세요 !

ES6에서는 더 간결하고 가독성 있는 객체 리터럴 기능 3가지를 제공했습니다. 지금부터 그 기능에 대해 알아보겠습니다. 1. 프로퍼티 축약 표현 기능 - 객체 리터럴의 프로퍼티는 프로퍼티 키와 프로퍼티 값으로 구성되어 있습니다. // ES5 let a = 1, b = 2; let c = { a: a, b: b }; console.log(c);// {a: 1, b: 2} - ES6에서는 프로퍼티 값으로 변수를 사용하는 경우 변수명과 프토퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략할 수 있습니다. (프로퍼티 키는 변수명으로 자동 생성) // ES6 let a = 1, b = 2; let c = { a, b }; console.log(c);// {a: 1, b: 2} 2. 계산된 프로퍼티명 - ES5에서는..