CS 스터디 - JavaScript, TypeScript

동적으로 변경되는 콘텐츠멀티미디어 제어이미지에 애니메이션 적용등 거의 모든 작업을 수행할 수 있는 스크립팅 언어새 이름을 입력하도록 요청하고 해당 이름을 name이라는 변수에 저장문자열 "플레이어 1: "과 name 변수의 값을 합쳐 온전한 텍스트 레이블("Player

변수 선언 변수를 정의하는 것 > ver, let const 키워드 사용 변수 할당 변수가 선언된 후 대입 연산자(=)를 통해 값을 넣어주는 것 > 변수 초기화 변수를 선언함과 동시에 값을 넣어주는 것 > 차이점

null이라는 오직 하나의 값만 가짐undefined라는 오직 하나의 값만 가짐논리 요소를 나타내며, true와 false 두 가지의 값을 가짐조건문 또는 반복문에서 유용하게 사용정수 또는 실수형 숫자를 표현하는 자료형숫자로서 읽을 수 없음(parselnt("어쩌구")

JavaScript에서 객체를 생성하기 위해 사용되는 특수한 함수생성자 함수로 객체를 생성하기 위해서는 new 연산자를 호출생성자 함수는 화살표 함수(Arrow Function)로 만들 수 없으며 오직, function 키워드를 사용해야 함생성자 함수의 이름은 생성자

java에서의 this와 python에서의 self는 인스턴스 자기자신을 가리킴JavaScript의 함수는 호출될 때 this를 암묵적으로 전달 받음JavaScript에서의 this는 일반적인 프로그래밍 언어에서의 this와 조금 다르게 동작JavaScript는 해당

콜백은 태스크가 끝나기 전에 함수가 실행되지 않는 것을 보장다르게 말하자면 콜백은 그 태스크가 끝난 직후에 실행됨=> 콜백은 비동기 자바스크립트 코드를 작성할 수 있도록 해주고 여러 문제와 에러들로부터 안전하게 지켜줌!

최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환프로미스가 가질 상태대기(pending): 이행하지도, 거부하지도 않은 초기 상태.이행(fulfilled): 연산이 성공적으로 완료됨.3거부(rejected): 연산이

자바스크립트 비동기 처리에 사용되는 객체비동기 작업이 완료되면 프로미스 객체가 이행(resolve)되고, 실패하면 거부(reject).then() 메서드를 사용하여 성공적인 완료 시 결과를 처리하고, .catch() 메서드를 사용하여 실패 시 에러를 처리할 수 있음주로

JavaScript에서 비동기 코드를 보다 간결하고 명확하게 작성할 수 있도록 도와주는 키워드async 키워드를 함수 앞에 붙이면 해당 함수는 항상 프로미스를 반환async 함수 내에서 await 키워드를 사용하여 비동기 작업이 완료될 때까지 기다릴 수 있음 async

비동기 작업을 표현하는 데 콜백 함수보다는 명확하고 구조화된 방법을 제공Promise는 객체이며, .then()과 .catch()를 통해 비동기 작업의 성공과 실패를 처리합니다. 비동기 작업을 표현하는 데 콜백 함수보다는 명확하고 구조화된 방법을 제합니다.async 함

AJAX를 사용하면 웹 페이지가 전체를 다시 로드하지 않고도 서버로부터 데이터를 가져오거나 서버에 데이터를 보낼 수 있음웹 애플리케이션의 사용자 경험을 향상시키고, 더 나은 반응성을 제공하는 데 도움이 됨AJAX의 핵심은 XMLHttpRequest(XHR) 객체=> J

동일한 이름으로 여러 번 중복 선언 가능때문에 마지막에 할당된 값이 변수에 저장됨!필요할 때마다 변수를 유연하게 사용할 수 있다는 장점과 동시에 코드량이 많아졌을 때, 같은 이름의 변수명이 여러번 선언되었을 경우 어디에서 문제가 발생하는지 파악하기 힘들거나 값이 바뀔

함수 표현식은 함수의 이름을 생략한 익명 함수로 정의 가능표현식에서 함수 이름을 명시하는 것도 가능=> 이 경우 함수 이름은 호출에 사용되지 못하고 디버깅 용도로 사용됨함수 선언식은 함수 전체를 호이스팅 함함수 표현식은 별도의 변수에 할당하게 되는데, 변수는 선언부와

blue 영역을 클릭하면 onClick 핸들러 동작부모 요소인 purple의 onClick 핸들러 동작부모 요소인 pink의 onClick 핸들러 동작거의 모든 이벤트는 버블링이 된다!!event.stopPropagation()을 활용하면 된다!!이렇게 작성하면 파랑색

var로 선언된 변수는 선언 이전에 참조할 수 있으며, 이러한 현상을 호이스팅이라고 한다.변수 선언 이전 위치에서 접근 시 undefined를 반환즉, javascript에서 변수들은 실제 실행 시에 코드의 최상단으로 끌어올려지게 되고, 이러한 이유 때문에 var로 선

변수가 해당 스코프에 존재하지 않는다면 사용할 수 없음하위 스코프는 상위 스코프에 접근 가능하지만, 상위 스코프는 하위 스코프에 접근 불가능전역 스코프(Global scope) : 어디에서든 참조 가능지역 스코프(Local scope) : 블록 안, 함수 내에서만 참조

함수 안에 함수를 선언한 환경에서의 관계함수가 선언될 때의 외부 변수에 대한 참조를 유지하고, 함수가 나중에 실행될 때에도 그 변수에 접근 가능=> 자바스크립트는 함수를 리턴하고 리턴되는함수가 클로저를 형성하기 때문클로저는 반환된 내부함수가 자신이 선언되었을때의 환경(

함수의 실행, 호이스팅, 렉시컬 환경, 클로저 등의 개념들을 관통하는 하나의 큰 개념스크립트가 처음 실행될 때 생성되는 실행 컨텍스트전역 변수와 함수는전역 실행 컨텍스트 안에서 정의되고, 전역 실행 컨텍스트는 코드 실행이 끝날 때까지 유지됨함수가 호출될 때마다 생성되는

자바스크립트 엔진이 코드 실행 중에 자동으로 데이터 형을 변환하는 것숫자와 문자열을 더하는 연산에서 숫자를 문자열로 변환하거나, 문자열을 숫자로 변환하는 경우 등개발자가 직접 데이터 유형을 변환하는 것형변환 함수나 연산자를 사용하여 수행됨parseInt(), parse

자바스크립트는 변수의 데이터 유형을 런타임 시간에 자동으로 파악하기 때문에 개발자가 변수를 선언할 때 데이터 유형을 명시적으로 지정할 필요가 없음=> 코드 단순화, 유연성 높임자바스크립트는 객체의 속성을 런타임 시간에 동적으로 추가하거나 제거할 수 있음=> 객체의 구조

모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체를 가진다는 의미객체 지향 프로그래밍에서 상속을 구현하는 메커니즘자바스크립트에서는 모든 객체가 다른 객체를 기반으로 만들어지는데, 이 때 객체는 프로토타입을 가짐, 그리고 이 프로토타입은 해당

객체의 참조값(주소값)을 복사=> 객체 내부에 있는 객체나 배열은 참조로 복사됨원본 객체의 내부 객체나 배열이 변경되면 복사본에도 영향을 줌객체의 실제 값 복사=> 내부 객체나 배열도 새로운 메모리에 복사됨깊은 복사를 구현하는 방법 중 하나는 재귀적으로 객체를 탐색하고

상태를 변경할 수 없다는 것은, 객체의 프로퍼티를 변경할 수 없다는 것을 의미Number, String, Boolean, Null, Undefined 등과 같은 기본 자료형, 불변함메모리영역 안에서 변경이 불가능하며, 변수에 할당할 때 새로운 값이 만들어져 주소값이 재

처리되어야 하는 작업이 전체적인 작업 흐름을 막는 지에 대한 관점A함수가 B함수를 호출하면 B에게 제어권을 넘김제어권을 넘겨받은 B는 함수를 실행, A는 B에게 제어권을 넘겨주었기 때문에 함수 실행을 잠시 멈춤B함수는 실행이 끝나면 자신을 호출한 A에게 제어권을 돌려줌

순서대로 처리한다 == 이전 작업이 끝나면 다음 작업을 시작한다요청을 보내고 응답이 올 때까지 기다렸다가 다음 로직을 처리(택배같은 느낌)순서가 중요한 처리에 대해서는 동기식으로 진행해야 한다시간이 필요한 작업들은 요청을 보낸 뒤 응답이 빨리 오는 작업부터 처리예시)

같은 이름의 변수를 한 범위 내에서 다시 선언할 수 없음let으로 선언된 변수는 값을 재할당할 수 있음호이스팅 발생선언과 동시에 값을 할당해야 함const로 선언된 객체나 배열은 변경할 수 있지만, 해당 변수가 다른 객체나 배열을 참조하도록 변경할 수는 없음함수를 비교

undefined는 JavaScript에서 원시 데이터 타입 중 하나변수를 선언하고 값을 할당하지 않은 경우, 해당 변수는 자동으로 undefined 값을 갖게 됨함수에서 반환 값이 명시적으로 지정되지 않은 경우 기본적으로 undefined를 반환null은 또 다른 원

JavaScript는 기본적으로 싱글 쓰레드 기반의 언어이기 때문에 멀티 쓰레드를 직접적으로 지원하지 않는다!JavaScript는 한 번에 하나의 일만 수행할 수 있는 Single Thread 언어로 동시에 여러 작업을 처리할 수 없음작업을 처리할 때 실제로 작업을 수

비동기 작업을 수행하는 함수가 Promise를 반환할 때, then() 메서드를 사용해 해당 Promise가 완료될 때까지 기다릴 수 있음async 함수 내에서 await 키워드를 사용하여 비동기 작업의 완료를 기다릴 수 있음이렇게 작성하면 비동기적인 작업이 동기적인

배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과로 새로운 배열을 반환array.map(callback(element\[, index, array]))배열의 각 요소에 대해 콜백 함수를 한 번씩 실행콜백 함수의 반환 값을 요소로 하는 새로운 배열 반환기존 배열

필요할 때 할당합니다.할당된 메모리를 사용합니다. (읽기, 쓰기)더 이상 필요하지 않으면 해제합니다.프로그래머가 메모리 할당을 신경을 쓸 필요가 없도록, JavaScript는 값을 선언할 때 자동으로 메모리를 할당함수 호출의 결과 메모리 할당메소드가 새로운 값이나 오브

클래스는 속성(멤버 변수)과 메서드(함수)를 포함하며, 이러한 멤버들을 사용하여 객체를 생성class로 만든 함수에는 특수 내부 프로퍼티인 \[IsClassConstructor]: true가 붙음=> 따라서 new와 함께 호출하지 않으면 에러가 발생또한 클래스에 정의된

함수를 정의하는 즉시, 해당 함수를 호출하여 실행하는 것을 의미함수는 함수 표현식으로 정의되고, 바로 이어지는 괄호 ()를 통해 즉시 호출함수를 선언하고 즉시 실행하여 함수 스코프 내에 있는 변수들은 외부에서 접근할 수 없음전역 이름공간을 오염시키는 것을 방지IIFE

코드 실행이 더 엄격하게 제어되며, 일부 특정한 조건과 규칙을 적용하여 코드의 오류를 줄이고 JavaScript 엔진의 최적화를 도모일부 예약어의 사용이 제한된다.=> 예를 들어, eval, arguments, implements, interface, package,

함수가 호출될 때마다 해당 함수의 정보가 스택의 맨 위에 push되고, 함수가 종료되면 pop되어 스택에서 제거됨이러한 동작은 함수의 호출과 반환을 추적하며, 호출된 함수의 실행이 완료될 때까지 다른 함수의 실행을 일시 중단함따라서 콜 스택은 호출 스택(Call Sta

비 구조화 할당 문법과 함께 객체, 배열, 함수의 매개변수에서 사용가능위와 같이 rest 키워드를 사용하는데, 추출한 값의 이름이 꼭 rest일 필요는 없음이렇게 작성해도 됨!!배열 비구조화 할당을 통해 원하는 값을 밖으로 꺼내고, 나머지 값을 rest 안에 넣을 수

여러 개의 값을 필요에 따라 하나씩 반환(yield) 가능가장 가까운 yield value문을 만날 때까지 실행을 지속yield value문을 만나면 실행이 멈추고 산출하고자 하는 값인 value가 바깥 코드에 반환value: 산출 값done: 함수 코드 실행이 끝났으

이터러블 프로토콜을 준수한 객체를 이터러블(iterable) 이라고 함!!이터러블 -> Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 객체for…of 문으로 순회 가능스프레드 문법의 대상으로 사용 가능일반

타입을 사용함으로써 타입으로 코드 퀄리티와 가독성을 높일 수 있음TypeScript의 정적 타입 기반, 즉 컴파일을 하는 과정에서 타입을 결정하기 때문에 변수에 들어갈 값의 형태에 따라 자료형을 지정해 주어야 함!=> 컴파일 시 자료형에 맞지 않은 값이 들어가면 컴파일

type과 interface는 모두 타입스크립트에서 객체의 타입, 함수의 타입 등을 정의하는 것들이다!extends 키워드를 활용해 확장& 기호를 활용해 확장선언적 확장(Declaration Merging)이 가능같은 이름의 interface를 선언하면 자동으로 확장된

일반적인 코드를 작성하고, 이 코드를 다양한 객체에 대하여 재사용하는 프로그래밍 기법=> 제네릭을 이용하면 클래스나 함수, 인터페이스를 다양한 타입으로 재사용 할 수 있다.타입을 파라미터화해서 컴파일시 구체적인 타입이 결정되도록 해준다.=> 실행시에 타입에러가 나는 거

어디에서나 접근할 수 있으며 생략 가능한 default 값해당 클래스의 인스턴스에서만 접근 가능이렇게 작성하면 에러가 발생한다.그리고 서브클래스에서 name을 public으로 바꿔주려고 해도 에러 발생!해당 클래스 혹은 서브클래스의 인스턴스에서만 접근 가능단, 서브클래

class를 통한 별도의 인스턴스나 객체를 생성하지 않고도, 바로 class 내부의 함수 및 인자를 사용할 수 있는 방법

ES6가 나오면서 JavaScript에 클래스 문법이 생겨 JavaScript를 좀 더 JAVA스럽게 객체 지향적으로 표현이 가능해졌다.다만, 생김새만 클래스 구조일 뿐 엔진 내부적으로는 프로토타입 방식으로 작동된다.constructor는 인스턴스를 생성하고 클래스 필

자바스크립트에서는 클래스 인스턴스 변수를 굳이 선언하지 않아도 생성자 메서드(contructor)에서 this 키워드로 자동 생성시킬 수 있다.하지만 타입스크립트에서는 생성자 메서드(constructor)와 함께 클래스 바디에 인스턴스 변수를 정의해 주어야 한다.타입스

SOLID원칙이란, 객체 지향 설계에서 지켜줘야 할 5개의 소프트웨엇 개발 원칙(SRP, OCP, LSP, ISP, DIP)를 말한다.💠 SRP(Single Responsibility Principle) : 단일 책임 원칙💠 OCP(Open Closed Princi

프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체로 만들고, 객체들 간의 상호작용을 통해 로직을 구성하는 프로그래밍 방법이다.대표적으로 java, python, c++ 등이 있다.모듈화, 캡슐화로 인해 유지보수에 용이하다.객체 자체가 하나의 프로그램이기

extends 키워드를 활용해 확장 가능& 기호를 활용해 확장 가능선언적 확장 가능같은 이름의 interface를 선언하면, 자동으로 확장된다.선언적 확장 불가능객체의 타입을 설정할 때 사용 가능하고, 원시 자료형에는 사용 불가능하다.객체의 타입을 정의할 때도 사용이

상자 하나하나는 모두 객체(Object)이고, 자바 용어로는 Class이다.이러한 계층을 표현하기 위해 만들어진 것이 상속이다.상속 시, 하위 객체(자식)은 상위 객체(부모)의 특징(메서드, 변수 등)을 물려받게 된다.이 때, 상위 객체(부모)의 특징(메서드, 변수 등

매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것간단하게 예를 들자면,위 코드를 보면 sayHello() 함수를 호출할 때 입력 매개변수로 문자열과 printing 함수 자체를 전달하는 것을 볼 수 있다.그리고 sayHello() 함수가 실