[JS] 실행 컨텍스트, 호이스팅, 함수 선언문과 함수 표현식
2022. 7. 21. 01:40
🔥 Front-End/JavaScript
실행 컨텍스트(Execution Context) 실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다. 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 이를 콜스택에 쌓아 올립니다. 실행 컨텍스트는 전역공간이 생성될 때, 함수가 호출될 때 생성됩니다. 실행 컨텍스트와 콜 스택 예제 코드 실행시, 전역공간이 활성화되면서 전역 컨텍스트가 생성되고 함수 호출 순서대로 콜스택에 실행 컨텍스트가 쌓이는것을 확인할 수 있습니다. 실행 컨텍스트가 담고 있는 정보 Variable Environment environmentRecord (snapshot) : 현재 컨텍스트 내의 식별자들에 대한 정보 outerEnvironmentReference (snapshot) :..
[JS] 클로저(Closure)
2022. 7. 21. 00:49
🔥 Front-End/JavaScript
클로저의 의미 및 원리 이해 앞에서 실행컨텍스트에 대해 배운 지식을 바탕으로 클로저를 정의해본다면, 클로저란 외부 함수의 변수를 참조하는 내부 함수를 외부로 전달할 때 외부 함수의 실행 컨텍스트가 종료된 후에도 외부 함수를 참조할 수 있는 현상이라고 생각합니다. 제가 왜 클로저를 정의했는지 예제를 통해 살펴보겠습니다. 우선 외부 함수에서 변수를 선언하고 내부 함수에서 해당 변수를 참조하는 형태의 간단한 코드를 작성해보겠습니다. var outer = function () { var a = 1; var inner = function () { console.log(++a); }; inner(); }; outer(); outer 함수에서 변수 a를 선언했고, outer의 내부 함수인 inner 함수에서 a의 값..
[JS] 스코프(Scope)
2022. 7. 21. 00:32
🔥 Front-End/JavaScript
스코프 스코프(Scope, 유효범위)는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적인 개념으로 확실한 이해가 필요하다. 먼저 아래 예제의 실행 결과에 대해 생각해보자. var x = 'global'; function foo () { var x = 'function scope'; console.log(x); } foo(); // ? console.log(x); // ? 이름이 같은 변수 x가 중복 선언되었다. 전역에서 변수 x를 참조할 때, 그리고 함수 foo 내부에서 변수 x를 참조할 때 이름이 중복된 2개의 변수 중 어떤 변수를 참조해야 하는가? 자바스크립트는 어떻게 변수를 식별하는 것일까? 스코프는 참조 대상 식별자(identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분..
[JS] JavaScript 객체와 불변성
2022. 7. 20. 22:46
🔥 Front-End/JavaScript
기본형 데이터와 참조형 데이터 데이터 타입의 종류 자바스크립트 데이터 타입은 기본형, 참조형 이렇게 크게 두가지로 볼 수 있습니다. 기본형은 할당이나 연산시 복제되고 참조형은 참조됩니다. 엄밀히 말하면 둘 모두 복제를 하긴 하지만, 다만 기본형은 값이 담긴 주솟값을 바로 복제하는 반면 참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제한다는 점이 다릅니다. 불변값(Immutable Value) 기본형 데이터들은 모두 불변값(immutability을 띕니다. 기본형이 궁금하시다면, [JS] 모던자바스크립트 Deep Dive - 데이터 타입 6장 데이터 타입(Data Type) ES6부터는 7개의 데이터 타입을 제공한다. 7개의 데이터 타입은 원시 타입(Primitive Type)과 객체 ..
[Algorithm] 프로그래머스 - 폰켓몬
2022. 7. 20. 13:49
🖥 CS/Algorithm
/* https://school.programmers.co.kr/learn/courses/30/lessons/1845 문제 설명 당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 홍 박사님 연구실의 폰켓몬은 종류에 따라 번호를 붙여 구분합니다. 따라서 같은 종류의 폰켓몬은 같은 번호를 가지고 있습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3번, 1번, 2번, 3번]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 한 마리, 2번 폰켓몬 한 마리가 있음을 나타냅니다. 이때, 4마리의 폰켓몬 중 2마리를 고르는 방법은 다음과 같이 ..
[Algorithm] 프로그래머스 - 약수의 합
2022. 7. 20. 13:47
🖥 CS/Algorithm
/* https://school.programmers.co.kr/learn/courses/30/lessons/12928 약수의 합 문제 설명 정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요. 제한 사항 n은 0 이상 3000이하인 정수입니다. */ const solution = (n) => { let answer = 0; for (let i = 0; i
[JS] JavaScript의 자료형과 JavaScript만의 특성
2022. 7. 19. 23:38
🔥 Front-End/JavaScript
느슨한 타입(loosely typed)의 동적(dynamic) 언어 JavaScript는 Java, C, TypeScript 등 엄격히 타입선언을 해야하는 언어와는 달리 느슨한 타입을 지닙니다. let foo = 42 // foo가 숫자 foo = 'bar' // foo가 이제 문자열 foo = true // foo가 이제 불리언 이처럼 변수에도 따로 타입 지정을 해주지 않아도 되며, 값에 따라 자동으로 타입이 지정됩니다. 즉, JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당(및 재할당) 가능합니다. JavaScript 형변환 이전에 정리한 글을 참조해주세요. [JS] 4. 암시적 형변환, 명시적 형변환, Nominal, 구조화, 덕 타이핑 오픈소스 깃허브 주소:..
[Algorithm] 프로그래머스 - 이상한 문자 만들기
2022. 7. 19. 21:57
🖥 CS/Algorithm
/* https://school.programmers.co.kr/learn/courses/30/lessons/12930 문제 설명 문자열 s는 한 개 이상의 단어로 구성되어 있습니다. 각 단어는 하나 이상의 공백문자로 구분되어 있습니다. 각 단어의 짝수번째 알파벳은 대문자로, 홀수번째 알파벳은 소문자로 바꾼 문자열을 리턴하는 함수, solution을 완성하세요. 제한 사항 문자열 전체의 짝/홀수 인덱스가 아니라, 단어(공백을 기준)별로 짝/홀수 인덱스를 판단해야합니다. 첫 번째 글자는 0번째 인덱스로 보아 짝수번째 알파벳으로 처리해야 합니다. */ const solution = (str) => { const answer = str .split(' ') // 받아온 인자값을 ' ' 공백으로 쪼갠뒤 .map..