JavaScript 언어 자체의 기능
JavaScript 엔진(V8, SpiderMonkey 등)**에서 제공하는 기능으로 어디서든 동작 가능 (브라우저, Node.js, 서버 등)
JavaScript Keyword
In Operator(javascript property in object) : The in operator returns true if the specified property is found in the specified object or its prototype chain. Its syntax is:
String Object Method
Stringinstance.toUpperCase() : 문자열을 대문자로 변환 후 반환함
Stringinstance.length() : 문자열의 길이를 반환함
Stringinstance.IndexOf() : 문자의 index를 찾아서 반환하며, 찾지 못하면 -1를 반환함.
Stringinstance.trim() : whitespace를 제거함
출력
- console.log("Hello, World!"); // 문자열 출력
- console.log({ name: "Alice", age: 25 }); // 객체 출력
String
- + conCatenation : "hello"+"world" = "helloworld"
- stringInstance.length() : 글자의 길이를 출력
변수 생성
- var : ES6 이전 방식, 현재는 잘 사용하지 않음 (함수스코프)
- let : var보다 안전하며 최신 코드에서 사용 (블록스코프)
- const : 변경할 필요 없는 값에 사용 (블록스코프)
Math 객체사용
- Math.random() : 0.0 이상 1.0 미만의 실수를 반환
- Math.floor() : 소수점 제거
- Math.floor(Math.random() * 10) : 0부터 9까지 정수
Function Style
- Arrow Function : a shorter way to write a function.
Full Function Definition
function sayHi() {
console.log("Hi");
}
short Function Definition without inputParameter
const sayHi = () => {
console.log("Hi");
};
short Function Definition
Asynchronous Handling in JavaScript: The 3 Main Ways
Callback Functions – the old way:
- A callback is a function that is passed as an argument to another function and is called later — often after some async work is done.
setTimeout(() => {
console.log("Callback after 1 second");
}, 1000);
- Basic and direct
- Gets messy when you nest too many:
doSomething(() => {
doAnother(() => {
doMore(() => {
// callback hell 😵
});
});
});
Promises – modern and powerful
- A Promise is an object representing the eventual completion or failure of an asynchronous operation and its value. Essentially, it's a placeholder for the consequences..
const promise = new Promise((resolve, reject) => {
// do something (like fetching or timing)
if (/* success */) {
resolve('Success!');
} else {
reject('Something went wrong');
}
});
- ✅ Handles chaining cleanly
- ❌ Still uses .then().catch() which can get long
- then Method
- promise.then(onFulfilled, onRejected)
- onFulfilled — A function to be called if the promise is fulfilled. tak fulfillment value as argument.
- onRejected — A function to be called if the promise is rejected. This is optional.
- Returns: then returns a new promise, which can be chained with additional then or catch methods.
- The catch method is used to register a callback for handling any errors.
- promise.then(onFulfilled, onRejected)
async/await – cleanest and easiest to read
- ✅ Looks like synchronous code but runs asynchronously
- ✅ Easier to try/catch for error handling
- 🔥 Best choice for clean readable async code
async function run() {
const result = await new Promise(resolve => setTimeout(() => resolve("Done"), 1000));
console.log(result);
}
run();
Why Asynchronous? : In the context of web browsers, there are many tasks like loading images, downloading files, or fetching data from a server. These tasks can take time to complete and you wouldn't want your browser to freeze or stop responding while these tasks are being done. is unique and designed to work within the constraints of a single-threaded execution mode (Synchronous : Can be less fluid, as it involves a full page reload Asynchronous : Provides a smoother experience by updating parts of the web page without a reload)
Promise Object
'개발기술 > 프론트엔드' 카테고리의 다른 글
프론트엔드 환경설정 및 배포 (0) | 2025.03.24 |
---|---|
웹 브라우저 API (0) | 2025.02.26 |
웹 서버의 정적파일 제공 (0) | 2025.02.26 |
백엔드 개발자와 프론트 엔드 이해도 (0) | 2025.02.12 |
Java, Javascript, Python 비교 (1) | 2025.01.14 |