전체 글282 템플릿 리터럴(template literal) 템플릿 리터럴(template literal)ES6에 도입된 내장된 표현식을 허용하는 문자열 리터럴표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공런타임 시점에 일반 자바스크립트 문자열로 처리/변환됨 ▶ 템플릿 리터럴 기본 문법템플릿 리터럴은 작은따옴표(')나 큰따옴표(") 대신 백틱(`, grave accent)로 감싸줌 `string text` // 문자열 표현`string text line 1 string text line 2` // 개행된 문자열 표현var expression;`string text ${expression} string text` // 변수값 문자열 조합function tag() { };tag `string text ${expression}.. 2024. 6. 11. Symbol SymoblSymbol은 생성자 symbol 원시 값을 반환하는 내장 객체symobl은 ES6 버전의 JavaScript에서 새롭게 추가 7번째 원시 타입symbol 원시 값은 심볼 값, 혹은 짧게 심볼이라고만 부르며 고유함이 보장됨 일반적으로 심볼 타입은 객체 프로퍼티 키(property key)를 고유하게 설정함으로써 키의 충돌을 방지하기 위해 사용 ▶ 심볼의 생성 및 특징심볼은 Symbol 함수를 호출함으로써 생성할 수 있음이때 생성되는 심볼은 변경이 불가능한 원시 값 const sym = Symbol();console.log(sym); // Symbol()console.log(typeof sym); // 'symbol' Symbol 함수를 호출할 때 인자로 전달하는 문자열 값은 생성될 신볼에 .. 2024. 6. 11. JavaScript OOP (new, Prototype chain, Subclassing) 자바스크립트 객체 지향(JavaScript OOP)자바스크립트는 멀티 패러다임 언어로 명령형, 함수형, 프로토타입 기반 객체 지향 언어 - 멀티 패러다임 프로그래밍 언어프로그래밍 언어는 설계 될 때 각자 지향하는 패러다임을 설정함멀티 패러다임 프로그래밍 언어란 하나 이상의 프로그래밍 패러다임을 지원하는 프로그래밍 언어 - 명령형수행할 명령들을 순서대로 써 놓은 수행 기법(How)자바스크립트는 기본적으로 명령형 프로그래밍 언어이지만, 함수형 프로그래밍의 요소를 포함하고 있어서 선언형 프로그래밍 (무엇을 하는지에 초점을 맞춤 - What) 도 가능함예를들어 map() 함수는 선언형 프로그래밍의 예시. 어떻게 만들지가 아닌 무엇을 하는지를 명시함 - 프로토 타입 기반 언어모든 객체들이 메소드와 속성들을 상속 .. 2024. 6. 10. Call Stack 콜 스택(Call Stack = 호출 스택)자바스크립트는 단일 스레드 프로그래밍 언어로, 자바스크립트 엔진은 하나의 콜 스택을 가지는 싱글 스레드 하나의 콜 스택을 가진다는 뜻은 한 번에 하나의 일(Task)만 처리할 수 있다는 뜻 콜 스택은 함수 호출과 관련된 정보를 저장하는 스택 자료구조스택이라는 이름에서 알 수 있듯 후입선출(LIFO, Last In First Out)으로 동작함즉, 최근에 호출된 함수(가장 나중에 호출된 함수)가 가장 먼저 완료된다는 의미 자바스크립트는 함수 호출을 스택에 추가(Push)하고 완료되면 스택에서 제거(Pop)이렇게 스택에 쌓이는 함수 호출은 순차적으로 실행되며, 이것이 자바스크립트의 실행 컨텍스트를 관리하는 중요한 부분 호출 스택의 각 항목을 스택 프레임이라고 함 .. 2024. 6. 10. 실행 컨텍스트(Execution Context) 실행 컨텍스트실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 실행 컨텍스트는 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 객체를 구성하고, 이를 콜스택에 쌓아올렸다가 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장함어떤 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고 외부 환경 정보를 구성하고, this 값을 설정하는 등의 동작을 수행함 콜 스택(Call Stack)Javascript는 전역 실행 컨텍스트 및 함수 실행 컨텍스트를 추적하기 위해 호출스택을 사용해당 호출스택은 실행 컨텍스트 스택, 런타임 스택이라고 부름 스택은 LIFO 원칙으로 엔진이 스크립트 실행을 처음 실행할때, 전역 컨택스트를 생.. 2024. 6. 10. Scope & Closure (Function Scope, Lexical Scope) 스코프(Scope) 스코프란 단어의 뜻 그래도 '범위'라는 의미를 가지고 있음코드에서의 스코프는 '변수에 접근할 수 있는 범위'라고 보면 됨글로벌 스코프(Global Scope): 전역 변수로 선언. 코드 어디에서든 접근 가능함수 스코프(Function Scope): 함수 내부에서 선언. 해당 함수 내부에서만 접근 가능블록 레벨 스코프(Block Level Scope): 블록(중괄호 { }내)에서만 접근 가능(let 또는 const로 선언된 변수만 해당)▶ Function Scope함수 내에서 선언된 변수는 해당 함수 내에서만 접근 가능(외부에서는 접근할 수 없음)function foo() { var localVar = "I am local"; console.log(localVar); // "I am.. 2024. 6. 7. Asynchronous (Web API - setTimeout, setInterval, XMLHttpRequest, Callback Queue) Web APIJavaScript는 싱글 쓰레드 기반의 프로그래밍 언어로 동기적으로 작동함싱글쓰레드: 한 번에 하나의 태스크만을 실행할 수 있는 방식멀티쓰레드: 한 번에 여러개의 태스크를 실행할 수 있는 방식따라서 네트워크 요청, 타이머, 애니메이션 등 오래 걸리고 반복적인 작업들은 자바스크립트 엔진이 아닌 브라우저 내부의 멀티 스레드인 Web APIs에서 비동기 + 논블로킹으로 처리됨(비동기 + 논블로킹은 메인 스레드가 작업을 다른 곳에 요청하여 대신 실행하고, 그 작업이 완료되면 이벤트나 콜백 함수를 받아 결과를 실행하는 방식) ▶ 이벤트 루프 동작 과정싱글 스레드인 자바스크립트의 작업을 미리 스레드로 돌려 작업을 동시에 처리하거나 여러 작업 중 어떤 작업을 우선으로 동작시킬것인지 결정하는 세심한 컨트.. 2024. 6. 7. this this자바스크립트에서 this 키워드는 다른 언어와 조금 다르게 동작함기본적으로 함수는 동적으로 this가 바인딩 됨(즉, 호출 시에 this가 결정)this에 바인딩되는 객체는 한가지가 아니라 해당 함수 호출 방식에 따라 this에 바인딩되는 객체가 달라짐따라서 this가 무엇을 가리키는지 알기 위해서는 함수의 정의가 어떻게 되었는지가 아닌 누가 호출하였는지를 유의해서 보아야함 들어가기 전 단어 정리프로퍼티: 객체의 속성을 의미객체는 키- 값 쌍의 집합으로 구성되어 있으며, 여기서 키는 프로퍼티의 이름이고 값은 프로퍼티의 값함수: function func() { } 과 같은 형태로 정의되어, func() 형태로 호출할 수 있는 함수를 의미메소드: obj.func() 형태로 호출할 수 있도록, 객체 내.. 2024. 6. 5. Variables (Primitive type, Reference Type, Casting) Variables(변수)변수는 데이터를 할당하고 참조하기 위해 사용됨자바스크립트 변수는 값을 할당하고 해당 값을 다른 부분에서 사용할 수 있도록 해줌변수를 사용하면 데이터를 유연하게 다룰 수 있으며, 계산, 조건부 로직, 데이터 처리 등 다양한 작업을 수행할 수 있음변수는 코드의 가독성을 높이고 유지보수를 용이하게 만들어 줌변수를 사용하면 의도를 명확히 표현하고 코드를 조직화할 수 있음 ▶ 변수 선언 방법의 역할변수를 선언할 때 사용하는 명령문(Statement)은 var, let, const 세가지를 사용(ES5 let과 const의 등장으로 var는 이제 사용하지 않음)var: 오래된 변수 선언 방식으로 재선언, 재할당이 가능하며 함수 스코프를 가짐let: 재선언을 불가능하지만 재할당이 가능하며 블록.. 2024. 6. 5. 이전 1 2 3 4 5 ··· 32 다음
