![]()
실행 컨텍스트 실행 컨텍스트는 자바스크립트 동작 원리를 담고 있는 핵심 개념이다. 이를 잘 이해하면 자바스크립트의 여러가지 동작원리에 대해 자세하게 이해할 수 있다. 스코프를 기반으로 식별자와 식별자에 바인딩 된 값을 관리하는 방식 호이스팅이 발생하는 이유 클로저의 동작 방식 태스크 큐와 함께 동작하는 이벤트 핸들러 비동기 처리의 동작 방식 등등 등을 이해하는데 도움이 된다. 차근차근 알아보자 실행 컨텍스트의 구성 요소 실행 컨텍스트는 크게 세 가지 주요 구성 요소를 가진다. 변수 환경(Variable Environment) 로컬 스코프에 선언된 변수, 함수 선언, 매개변수 등을 저장하는 환경 최초 생성 시점의 환경 스냅샷을 유지 렉시컬 환경(Lexical Environment) 실행 중인 코드의 식별자..
![]()
this 키워드 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나로 묶은 복합적인 자료구조이다. 객체에 들어있는 메서드를 실행하기 위해서는 자신이 속한 객체의 상태에 접근, 즉 프로퍼티를 참조해 변경할 수 있어야 한다. 객체 리터럴 방식으로 생성한 경우 메서드 내부에서 메서드 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조한다. const circle = { radius: 5, getDiameter() { return 2 * circle.radius; } }; console.log(circle.getDiameter(10)); // 10 객체 리터럴은 이미 circle 변수에 할당 되기 직전에 평가된다. 따라서 getDiameter 메서드가 호출되는 시점에는 이미 객체가 생성되어 메서드..
![]()
자바스크립트는 명령형, 함수형, `프로토타입 기반 객체지향 프로그래밍`을 지원하는 멀티타임 프로그래밍 언어다. 자바스크립트를 “이루고 있는 모든 것이 객체이다” 정확히 말하자면 원시 타입을 제외한 모든 것이 객체로 되어있다. 객체지향 프로그래밍 **객체지향 프로그래밍**이란 기존에 명령어 또는 함수 목록으로 보는 전통적인 명령형 프로그래밍 방식인 절차지향적 관점이 아닌 독립적 단위, 즉 객체(Object)의 단위로 프로그램을 표현하는 패러다임이다. // 객체 생성 const person = { name: "Song", address: "Seoul" }; console.log(person) 위 코드에서는 이름과 주소로 속성을 표현하고 객체{…}로 묶어서 표현했다. 프로그래머(주체)는 이름과 주소 속성으로 ..
![]()
일급 객체 **일급 객체**의 조건은 다음과 같다. 무명의 리터럴로 생성할 수 있다. 변수나 자료구조등에 저장할 수 있다. 함수의 매개변수에 저장할 수 있다. 함수의 반환값으로 사용할 수 있다. 자바스크립트의 함수는 이 조건을 만족한다. 일급 객체의 예 무명의 리터럴로 생성 const increase = function () { return num++; } 함수는 자료구조등에 저장할 수 있다. const auxs = { decrease } 변수에 함수 할당 const greet = function() { console.log("Hello, World!"); }; greet(); // "Hello, World!" 함수의 파라미터로 함수 전달 function executeFunction(callback) {..
![]()
내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드는 ECMAScript 사양에서 자바스크립트 엔진의 구현 알고리즘을 설명 하기위해 사용하는 의사 프로퍼티와 의사 메서드다. 이중 대괄호([[…]])로 감싼 이름들이다. 하지만 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 내부 로직이기 때문에 접근을 허용하지 않는다. 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 정의한다. 프로퍼티 상태란 프로퍼티의 값 : [[**Value**]] 값의 갱신 여부 : [[**Writable**]] 열거 가능 여부 : [[**Enumerable**]] 재정의 가능 여부 : [[**Configurable**]] Object.ge..
![]()
var, let, const 세 가지 변수 선언 키워드의 주요 차이점 특징 var let const 스코프 함수 스코프(Function Scope) 블록 스코프(Block Scope) 블록 스코프(Block Scope) 재선언 가능 불가능 불가능 재할당 가능 가능 불가능 초기화 선언 시 undefined로 초기화 선언 시 초기화하지 않음(TDZ 적용) 선언과 동시에 초기화 필요 호이스팅 선언이 스코프의 최상단으로 끌어올려짐 선언이 스코프의 최상단으로 끌어올려짐(TDZ) 선언이 스코프의 최상단으로 끌어올려짐(TDZ) Temporal Dead Zone (TDZ) 적용되지 않음 적용됨 적용됨 - 함수 스코프(Function Scope): var로 선언된 변수는 선언된 함수의 전체 범위에서 유효합니다. ```j..
![]()
스코프(유효범위)는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적인 중요한 개념이다. function add(x, y) { // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. // 즉, 매개변수의 스코프는 함수 몸체 내부다. console.log(x, y) // 2 5 return x + y; } add(2, 5) // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. console.log(x, y) // ReferenceError: x is not defined 변수는 선언된 위치에 의해 자신의 유효범위 즉, 선언한 위치에 따라 스코프가 달라진다. 이건 변수 뿐만 아니라 모든 식별자(함수 이름, 변수 이름, 클래스 이름 등)는 선언된 위치에 따른 코드가 식별자 자신을 참조 할 수 있는 유효 범..
![]()
즉시 실행 함수 함수 정의와 동시에 호출되는 함수로 단 한번만 호출되며 다시 호출할 수 없다. // 익명 즉시 실행 함수 (function () { var a = 3; var b = 5; return a * b }()); // 기명 즉시 실행 함수 (function foo() { var a = 3; var b = 5; return a * b }()); foo() // ReferenceError: foo is not defined 그룹 연산자(..) 내의 기명 함수는 함수 선언문이 아니라 함수 리터럴로 평가되어 다시 호출 할 수 없다. 즉시 함수를 그룹 연산자로 감싸는 이유는 먼저 함수 리터럴로 평가해서 함수 객체를 생성하기 위해서 이기 때문이다. 즉시 실행 함수도 일반 함수 처럼 값을 반환할 수 있고 인..
![]()
프로그래밍 언어의 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 입력 값을 받아서 출력 값을 내보낸다. 이때 입력을 전달받는 변수를 매개변수, 입력을 인수, 출력을 반환 값이라 한다. 함수 명시적으로 호출해야 사용할 수 있는데 이를 함수 호출이라 한다. funtion add(x,y) { return x + y } // 함수 호출 var result = add(2,5); console.log(result) /// 7 함수를 사용하는 이유 함수는 필요할 때 여러번 호출할 수 있다. 즉, 실행 시점을 개발자가 결정할 수 있고 몇 번이든 재사용이 가능하다. 잘 만든 함수는 유지보수의 편의성을 높이고 코드의 신뢰성을 높이는 효과가 있다. 함수는 객체 타입 값이다. ..
![]()
데이터 타입은 크게 원시 타입과 객체 타입으로 구분한다. 왜 두가지로 분리할까? 이유는 원티 타입과 객체 타입이 근본적으로 다르기 때문이다. 3가지 측면에서 다르게 볼 수 있는데 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이다. 객체(참조) 타입의 값, 즉 객체는 변경 가능한 값이다. 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장되는데, 이에 비해 객체를 변수에 할당하면 변수에 참조 값이 저장된다. 원시 값을 갖는 변수를 다른 변수에 할당시 원시 값이 복사되어 전달되고 이를 값에 의한 전달이라 한다. 이에 비해 객체를 가르키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. 이를 참조에 의한 전달이라 한다. 원시 값 변경 불가능한 값 원시 타입의 값, 즉..
![]()
객체란? 자바스크립트는 객체 기반 언어이다. 원시값을 제외한 나머지 값(정규표현식, 배열, 함수)는 모두 객체다. 원시 타입은 하나의 값만 나타내지만 객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조이다. 또한 원시 타입의 값, 즉 원시값은 변경 불가능한 값이지만 객체 타입의 값은 변경 가능한 값이다. 객체는 0개 이상의 프로퍼티로 구성되어있고 프로퍼티는 키와 값으로 구성된다. 또한 프로퍼티의 값이 함수일 경우 메서드라 칭한다. 객체 리터럴에 의한 객체 생성 C++ 이나 자바 같은 클래스 기반 객체지향 언어는 클래스를 사전에 정의하고 필요한 시점에 new 연산자와 함께 생성자(constructor)를 호출하여 인스턴스를 생성하는 방식으로 객체를 생성 한다. 📔 인스턴스란? 클래스에 ..
![]()
제어문은 프로그래밍을 함에 있어서 없어서는 안될 필수 내용이다. 제어문은 조건에 따라 코드 블록을 실행하거나 반복 실행 할 때 사용한다. 일반적으로 코드는 위에서 부터 아래 방향으로 순차적으로 실행되는데 실행 흐름을 인위적으로 제어 할 수 있다. 하지만 자연스럽게 위에서 부터 아래로 순차적으로 실행되는 코드를 인위적으로 흐름을 변경하려는 순간 우리는 직관적인 코드의 흐름 해치기 때문에 가독성이 떨어지도록 만들 수 있다. 다시말해, 필요 이상의 제어문을 많이 사용한다면 코드의 가독성을 해치기 때문에 적당히 사용하는 것이 좋다. 제어문을 사용할 때 여러 고차 함수를 사용한 프로그래밍 기법들이 있지만 가장 기본적인 for 문을 알고 사용해야 고차 함수에서도 무리없이 사용이 가능한다. 블록문 블록문은 0개 이상..
![]()
제어문은 프로그래밍을 함에 있어서 없어서는 안될 필수 내용이다. 제어문은 조건에 따라 코드 블록을 실행하거나 반복 실행 할 때 사용한다. 일반적으로 코드는 위에서 부터 아래 방향으로 순차적으로 실행되는데 실행 흐름을 인위적으로 제어 할 수 있다. 하지만 자연스럽게 위에서 부터 아래로 순차적으로 실행되는 코드를 인위적으로 흐름을 변경하려는 순간 우리는 직관적인 코드의 흐름 해치기 때문에 가독성이 떨어지도록 만들 수 있다. 다시말해, 필요 이상의 제어문을 많이 사용한다면 코드의 가독성을 해치기 때문에 적당히 사용하는 것이 좋다. 제어문을 사용할 때 여러 고차 함수를 사용한 프로그래밍 기법들이 있지만 가장 기본적인 for 문을 알고 사용해야 고차 함수에서도 무리없이 사용이 가능한다. 블록문 블록문은 0개 이상..
![]()
연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산을 수행해 하나의 값을 만든다. 이때 연산의 대상자를 피연산자라고 한다. 피연산자는 값으로 평가될 수 있는 표현식 이어야 한다. // 산술 연산자 5 + 4 // 20 // 문자열 연결 연산자 'My name is ' + 'Song' // My name is Song // 할당 연산자 color = 'red' // 'red' // 비교 연산자 3 > 5 // false // 논리 연산자 true && false // false // 타입 연산자 typeof 'Hi' // string 피연산자가 값 이라는 명사의 역할을 한다면 연산자는 피연산자를 연산하..
![]()
종류 구분 데이터 타입 설명 원시 타입 Number 숫자를 나타내며, 정수와 실수 구분 없이 하나의 숫자 타입만 존재합니다. String 문자열을 나타내며, 문자의 시퀀스로 이루어져 있습니다. Boolean 논리적 값(true 또는 false)을 나타냅니다. Undefined 변수가 값 없이 선언되었을 때 기본적으로 할당되는 값입니다. Null 어떤 값이 의도적으로 비어있음을 나타냅니다. Symbol ES6에서 추가된 타입으로, 고유하고 수정 불가능한 데이터 타입으로 주로 객체 속성의 키로 사용됩니다. BigInt Number 타입으로 표현할 수 있는 범위를 넘어서는 큰 정수를 표현할 때 사용됩니다. ES2020에서 도입되었습니다. 객체 타입 Object 키와 값으로 구성된 속성들의 집합입니다. 배열, ..
![]()
개념을 파악하는 데 있어서 용어의 정확한 이해와 설명이 필수적입니다. 핵심적인 개념 중 하나는 바로 '값'입니다. 값이란, 식(표현식)이 평가되어 생성된 결과를 지칭합니다. 이때 '평가'는 식을 해석하여 값을 생성하거나 참조하는 과정을 의미합니다. 예를 들어, 10 + 20이라는 식은 평가 과정을 거쳐 30이라는 결과 값을 생성합니다. 이 과정을 우리는 "10 + 20이 평가되어 30을 생성한다"고 표현합니다. 모든 값은 데이터 타입을 가지며, 이 데이터 타입에 따라 메모리 상에서 다양한 방식으로 해석됩니다. 데이터는 메모리에 2진수 형태로 저장되지만, 저장된 데이터를 어떻게 해석할지는 그 데이터의 타입에 의해 결정됩니다. 변수에 관해서는, 변수를 하나의 값을 저장하기 위해 ..
![]()
변수란 무엇인가? 왜 필요한가? 애플리케이션은 본질적으로 데이터를 처리하는 것입니다. 복잡한 애플리케이션도 결국 데이터를 입력 받아 처리하고, 그 결과를 사용자에게 제공합니다. 이러한 과정에서 변수는 프로그래밍 언어에서 데이터를 관리하는 핵심적인 역할을 담당합니다. 변수의 역할 변수는 메모리 상에 데이터를 저장하고, 저장된 데이터를 재사용할 수 있도록 지원합니다. 예를 들어, JavaScript 코드 10 + 20은 데이터(10, 20)와 연산자(+)를 포함하고 있습니다. 이 표현식을 컴퓨터가 계산하기 위해서는 해당 데이터와 연산의 의미를 알고 있어야 하며, 계산 결과인 30은 메모리에 저장됩니다. 10 + 20 그러나 여기서 문제는 계산 결과를 저장했음에도 불구하고, 해당 데이터를 나중에 재사용할 수 ..
![]()
직사각형 별찍기 설명 이 문제에는 표준 입력으로 두 개의 정수 n과 m이 주어집니다. 별(*) 문자를 이용해 가로의 길이가 n, 세로의 길이가 m인 직사각형 형태를 출력해보세요. 제한 사항 n과 m은 각각 1000 이하인 자연수입니다. 입출력 예 m n 5 3 정답 풀이 process.stdin.setEncoding('utf8'); process.stdin.on('data', data => { const n = data.split(" "); const a = Number(n[0]), b = Number(n[1]); for(let i=0; i
![]()
행렬의 덧셈 설명 행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요. 제한 사항 행렬 arr1, arr2의 행과 열의 길이는 500을 넘지 않습니다. 입출력 예 arr1 arr2 return [[1,2],[2,3]] [[3,4],[5,6]] [[4,6],[7,9]] [[1],[2]] [[3],[4]] [[4],[6]] 정답 풀이 function solution(arr1, arr2) { let procession = []; procession = arr1.map((e, i) => ( e.map((el, k)=>( el + arr2[i][k] ))..
![]()
부족한 금액 계산하기 설명 새로 생긴 놀이기구는 인기가 매우 많아 줄이 끊이질 않습니다. 이 놀이기구의 원래 이용료는 price원 인데, 놀이기구를 N 번 째 이용한다면 원래 이용료의 N배를 받기로 하였습니다. 즉, 처음 이용료가 100이었다면 2번째에는 200, 3번째에는 300으로 요금이 인상됩니다. 놀이기구를 count번 타게 되면 현재 자신이 가지고 있는 금액에서 얼마가 모자라는지를 return 하도록 solution 함수를 완성하세요. 단, 금액이 부족하지 않으면 0을 return 하세요. 제한 사항 놀이기구의 이용료 price : 1 ≤ price ≤ 2,500, price는 자연수 처음 가지고 있던 금액 money : 1 ≤ money ≤ 1,000,000,000, money는 자연수 놀이기..
![]()
약수의 개수와 덧셈 설명 두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return 하도록 solution 함수를 완성해주세요. 제한 사항 1 ≤ left ≤ right ≤ 1,000 입출력 예 left right result 13 17 43 24 27 52 정답 풀이 function solution(left, right) { let b = 0; for(let i = left; i
![]()
정수 제곱근 판별 설명 임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다. n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을 리턴하는 함수를 완성하세요. 제한 사항 n은 1이상, 50000000000000 이하인 양의 정수입니다. 입출력 예 n return 121 144 3 -1 정답 풀이 function solution(n) { let num = Math.sqrt(n); return n%num == 0 ? (num+1) * (num +1) : -1 } 해설 Math.sqrt는 제곱근을 판별해 주는 메소드로 사용하여 매개변수 n의 제곱근을 판별해줍니다. num에 제곱근을 저장하고 삼항연산자를 사용하여 제곱근인 수..
![]()
x만큼 간격이 있는 n개의 숫자 설명 함수 solution은 정수 x와 자연수 n을 입력 받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요. 제한 사항 x는 -10000000 이상, 10000000 이하인 정수입니다. n은 1000 이하인 자연수입니다. 입출력 예 x n answer 2 5 [2,4,6,8,10] 4 3 [4,8,12] -4 2 [-4, -8] 정답 풀이 function solution(x, n) { return Array.from(Array(n), (n, index) => x * (index + 1)); } 해설 Array(n)은 길이가 n인 유사 배열을 만들고 기존의 배열 값..
![]()
가운데 글자 가져오기 설명 단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다. 제한 사항 s는 길이가 1 이상, 100이하인 스트링입니다. 입출력 예 s return "abcde" "c" "qwer" "we" 정답 풀이 function solution(s) { return s.length%2 !== 0 ? s[Math.floor(s.length/2)] : s.slice(s.length/2-1, s.length/2+1) } 해설 문자열을 반으로 자른다. 잘랐다 홀수라면 문자열의 길이를 2로 나눴을때 홀수를 만들고 Math를 통해서 내림을 해서 s의 문자열의 위치를 측정한다. 짝수라면 arr.slice([begin[, end]]..
![]()
제일 작은 수 제거하기 설명 정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 리턴 하고, [10]면 [-1]을 리턴 합니다. 제한 사항 arr은 길이 1 이상인 배열입니다. 인덱스 i, j에 대해 i ≠ j이면 arr[i] ≠ arr[j] 입니다. 입출력 예 arr return [4,3,2,1] [4,3,2] [10] [-1] 정답 풀이 function solution(arr) { let i = arr.indexOf(Math.min(...arr)) arr.splice(i, 1) return arr.length..
![]()
콜라츠 추측 설명 1937년 Collatz란 사람에 의해 제기된 이 추측은, 주어진 수가 1이 될 때까지 다음 작 업을 반복하면, 모든 수를 1로 만들 수 있다는 추측입니다. 작업은 다음과 같습니다. 1-1. 입력된 수가 짝수라면 2로 나눕니다. 1-2. 입력된 수가 홀수라면 3을 곱하고 1을 더합니다. 2. 결과로 나온 수에 같은 작업을 1이 될 때까지 반복합니다. 예를 들어, 주어진 수가 6이라면 6 → 3 → 10 → 5 → 16 → 8 → 4 → 2 → 1 이 되어 총 8번 만에 1이 됩니다. 위 작업을 몇 번이나 반복해야 하는지 반환하는 함수, solution을 완성해 주세요. 단, 주어진 수가 1인 경우에는 0을, 작업을 500번 반복할 때까지 1이 되지 않는다면 -1을 반환해 주세요. 제한 ..
![]()
문자열을 정수로 바꾸기 설명 문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요. 제한 사항 s의 길이는 1 이상 5이하입니다. s의 맨앞에는 부호(+, -)가 올 수 있습니다. s는 부호와 숫자로만 이루어져있습니다. s는 "0"으로 시작하지 않습니다. 정답 풀이 function solution(a, b) { let answer = 0; for(let i = Math.min(a,b); i
![]()
문자열을 정수로 바꾸기 설명 문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요. 제한 사항 s의 길이는 1 이상 5이하입니다. s의 맨앞에는 부호(+, -)가 올 수 있습니다. s는 부호와 숫자로만 이루어져있습니다. s는 "0"으로 시작하지 않습니다. 정답 풀이 function solution(s) { let i = Number(s) return i } 해설 와.. 처음에 문제를 보고 매개변수에 console.log 찍고 일단 숫자로 바꿔보자 하고 Number메소드를 사용하여 일단 테스트를 돌렸는데 통과해서 채점했는데 바로 통과 했습니다.. 이런문제는 행복하네요 ㅎㅎ 좋은하루 되십셔 아? 이미 하루가 끝났지만 주말도 끝나구 .. 망해라 세상
![]()
자릿수 더하기 설명 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다. 제한 사항 n은 10,000,000,000이하인 자연수입니다. n return 12345 [5,4,3,2,1] 정답 풀이 function solution(n) { let a = n.toString() let b = [...a] let c = b.reverse().map(a => Number(a)) return c } 해설 정수를 받아서 배열로 만들고 뒤집어서 출력하는 문제입니다. 처음에 n으로 받은 정수를 toString 메소드를 사용하여 문자열로 만들고 스프레드 연산자를 사용해 배열 형태로 만들어서 변수 b에 저장하였습니다. 그리고 revers..
![]()
자릿수 더하기 설명 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다. 제한 사항 n은 10,000,000,000이하인 자연수입니다. n return 12345 [5,4,3,2,1] 정답 풀이 function solution(n) { let a = n.toString() let b = [...a] let c = b.reverse().map(a => Number(a)) return c } 해설 정수를 받아서 배열로 만들고 뒤집어서 출력하는 문제입니다. 처음에 n으로 받은 정수를 toString 메소드를 사용하여 문자열로 만들고 스프레드 연산자를 사용해 배열 형태로 만들어서 변수 b에 저장하였습니다. 그리고 revers..
