긍정적 사고, 음식의 절제, 규칙적인 운동

JavaScript is a versatile and powerful language that is essential for modern web development. Here are super hacks that will make you a more efficient and effective JavaScript developer, with detailed explanations and examples for each one.

1. Use `let` and `const` Instead of `var`

Problem: `var` has function scope which can lead to bugs and unpredictable behavior.

Solution: Use `let` and `const` which have block scope.

let count = 0;
const PI = 3.14;

Using `let` and `const` helps prevent scope-related bugs by ensuring variables are only accessible within the block they are defined.

2. Default Parameters

Problem: Functions can fail if arguments are not provided.

Solution: Use default parameters to set fallback values.

function greet(name = 'Guest') {
return `Hello, ${name}!`;
}
console.log(greet()); // "Hello, Guest!"

Default parameters ensure that a function has sensible defaults, preventing errors and making the code more robust.

3. Template Literals

Problem: String concatenation can be cumbersome and error-prone.

Solution: Use template literals for cleaner and more readable string interpolation.

const name = 'John';
const greeting = `Hello, ${name}!`;
console.log(greeting); // "Hello, John!"

Template literals make it easier to create strings with embedded expressions and multi-line strings.

4. Destructuring Assignment

Problem: Extracting values from objects and arrays can be verbose.

Solution: Use destructuring assignment to extract values more succinctly.

const user = { name: 'Jane', age: 25 };
const { name, age } = user;
console.log(name, age); // "Jane" 25

Destructuring assignment allows you to extract properties from objects and elements from arrays into distinct variables easily.

5. Arrow Functions

Problem: Traditional function expressions can be verbose and don’t bind `this` lexically.

Solution: Use arrow functions for shorter syntax and lexical `this`.

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

Arrow functions provide a concise syntax for function expressions and ensure that `this` is lexically bound.

6. Spread Operator

Problem: Combining arrays or objects can be cumbersome.

Solution: Use the spread operator to easily combine arrays and objects.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = […arr1, …arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]

The spread operator allows you to spread the elements of an array or object into another array or object.

7. Rest Parameters

Problem: Handling a variable number of function arguments can be tricky.

Solution: Use rest parameters to capture all arguments in an array.

function sum(…args) {
return args.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

Rest parameters allow you to handle an indefinite number of arguments as an array, making your functions more flexible.

8. Short-Circuit Evaluation

Problem: Writing conditional statements can be verbose.

Solution: Use short-circuit evaluation to write concise conditions.

const isLoggedIn = true;
const user = isLoggedIn && { name: 'Jane', age: 25 };
console.log(user); // { name: 'Jane', age: 25 }

Short-circuit evaluation uses the logical `&&` and `||` operators to simplify conditional expressions.

9. Optional Chaining

Problem: Accessing deeply nested properties can lead to errors if any part of the chain is `null` or `undefined`.

Solution: Use optional chaining to safely access nested properties.

const user = { profile: { name: 'Jane' } };
const userName = user?.profile?.name;
console.log(userName); // "Jane"

Optional chaining allows you to safely access nested properties without having to explicitly check each level of the chain for `null` or `undefined`.

10. Nullish Coalescing

Problem: Using `||` to provide default values can give unexpected results if the value is `0` or `””`.

Solution: Use nullish coalescing (`??`) to provide default values only when `null` or `undefined`.

const user = { name: '', age: 0 };
const userName = user.name ?? 'Anonymous';
const userAge = user.age ?? 18;
console.log(userName); // ""
console.log(userAge); // 0

Nullish coalescing allows you to provide default values only when the left-hand side is `null` or `undefined`.

11. Object Property Shorthand

Problem: Assigning variables to object properties can be repetitive.

Solution: Use property shorthand to simplify object creation.

const name = 'Jane';
const age = 25;
const user = { name, age };
console.log(user); // { name: 'Jane', age: 25 }

Property shorthand allows you to omit the property name when it matches the variable name, making the code cleaner.

12. Dynamic Property Names

Problem: Creating objects with dynamic property names can be verbose.

Solution: Use computed property names to dynamically create object properties.

const propName = 'age';
const user = { name: 'Jane', [propName]: 25 };
console.log(user); // { name: 'Jane', age: 25 }

Computed property names allow you to create object properties dynamically, using the value of an expression as the property name.

13. Array `map()`, `filter()`, and `reduce()`

Problem: Iterating over arrays to transform, filter, or accumulate values can be repetitive.

Solution: Use `map()`, `filter()`, and `reduce()` for common array operations.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 15

These array methods provide a functional approach to transforming, filtering, and reducing arrays, making your code more expressive and concise.

14. String `includes()`, `startsWith()`, and `endsWith()`

Problem: Checking if a string contains, starts with, or ends with a substring can be verbose.

Solution: Use `includes()`, `startsWith()`, and `endsWith()` for simpler string checks.

const str = 'Hello, world!';
console.log(str.includes('world')); // true
console.log(str.startsWith('Hello')); // true
console.log(str.endsWith('!')); // true

These string methods provide a simple and readable way to check for the presence, start, or end of a substring.

15. Array and Object Destructuring in Function Parameters

Problem: Extracting values from arrays or objects passed as function parameters can be verbose.

Solution: Use destructuring in function parameters to directly extract values.

const user = { name: 'Jane', age: 25 };
function greet({ name, age }) {
return `Hello, ${name}! You are ${age} years old.`;
}
console.log(greet(user)); // "Hello, Jane! You are 25 years old."

Destructuring in function parameters allows you to directly extract values from objects or arrays passed to the function, making the code more concise and readable.

16. Default Values in Destructuring

Problem: Handling missing properties when destructuring objects can be cumbersome.

Solution: Use default values in destructuring to provide fallback values.

const user = { name: 'Jane' };
const { name, age = 18 } = user;
console.log(name); // "Jane"
console.log(age); // 18

Default values in destructuring allow you to provide fallback values for properties that may be missing, making your code more robust.

17. Object `assign()`

Problem: Cloning or merging objects can be verbose and error-prone.

Solution: Use `Object.assign()` to clone or merge objects.

const target = { a: 1 };
const source = { b: 2 };
const merged = Object.assign(target, source);
console.log(merged); // { a: 1, b: 2 }

`Object.assign()` allows you to clone or merge objects efficiently, reducing the need for manual copying.

18. Array `find()` and `findIndex()`

Problem: Finding an element or its index in an array can be cumbersome

with loops.

Solution: Use `find()` and `findIndex()` for more readable code.

const users = [
{ id: 1, name: 'Jane' },
{ id: 2, name: 'John' },
];
const user = users.find(u => u.id === 1);
console.log(user); // { id: 1, name: 'Jane' }
const index = users.findIndex(u => u.id === 1);
console.log(index); // 0

These array methods provide a simple way to find an element or its index based on a condition, improving code readability.

19. Array `some()` and `every()`

Problem: Checking if some or all elements in an array meet a condition can be verbose.

Solution: Use `some()` and `every()` for cleaner code.

const numbers = [1, 2, 3, 4, 5];
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true
const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // false

These array methods allow you to check if some or all elements in an array meet a condition in a concise way.

20. Array `flat()` and `flatMap()`

Problem: Flattening nested arrays or mapping and flattening arrays can be cumbersome.

Solution: Use `flat()` and `flatMap()` for more readable code.

const nested = [1, [2, [3, [4]]]];
const flat = nested.flat(2);
console.log(flat); // [1, 2, 3, [4]]
const mapped = [1, 2, 3].flatMap(x => [x, x * 2]);
console.log(mapped); // [1, 2, 2, 4, 3, 6]

These array methods provide a simple way to flatten nested arrays and to map and flatten in a single step.

21. Array `from()` and `of()`

Problem: Creating arrays from iterable objects or arguments can be verbose.

Solution: Use `Array.from()` and `Array.of()` for cleaner code.

const set = new Set([1, 2, 3]);
const arrFromSet = Array.from(set);
console.log(arrFromSet); // [1, 2, 3]
const arrOfNumbers = Array.of(1, 2, 3);
console.log(arrOfNumbers); // [1, 2, 3]

`Array.from()` allows you to create arrays from iterable objects, and `Array.of()` allows you to create arrays from a list of arguments.

22. Parameter Destructuring in Callbacks

Problem: Accessing properties of objects passed to callbacks can be verbose.

Solution: Use destructuring in callback parameters for cleaner code.

const users = [
{ id: 1, name: 'Jane' },
{ id: 2, name: 'John' },
];
users.forEach(({ id, name }) => {
console.log(`User ID: ${id}, User Name: ${name}`);
});

Destructuring in callback parameters allows you to directly access properties of objects passed to the callback, making the code more concise.

23. Optional Callback Functions

Problem: Handling optional callback functions can be cumbersome.

Solution: Use short-circuit evaluation to call optional callbacks.

function fetchData(url, callback) {
fetch(url)
.then(response => response.json())
.then(data => {
callback && callback(data);
});
}

Short-circuit evaluation allows you to call an optional callback function only if it is provided, making the code more robust.

24. Promisify Callbacks

Problem: Converting callback-based functions to promises can be cumbersome.

Solution: Use a utility function to promisify callbacks.

function promisify(fn) {
return function (…args) {
return new Promise((resolve, reject) => {
fn(…args, (err, result) => {
if (err) reject(err);
else resolve(result);
});
});
};
}
const readFile = promisify(require('fs').readFile);
readFile('path/to/file.txt', 'utf8')
.then(data => console.log(data))
.catch(err => console.error(err));

Promisifying allows you to convert callback-based functions to promises, making it easier to work with async/await syntax.

25. Async/Await for Synchronous-Like Code

Problem: Writing asynchronous code with promises can be verbose and hard to read.

Solution: Use async/await to write asynchronous code in a synchronous style.

async function fetchData(url) {
try {
const response = await fetch(url);
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error fetching data:', error);
}
}
fetchData('https://api.example.com/data');

Async/await provides a way to write asynchronous code that looks and behaves like synchronous code, improving readability and maintainability.

26. Chaining Promises

Problem: Handling multiple asynchronous operations sequentially can be cumbersome.

Solution: Chain promises to handle multiple asynchronous operations.

fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log('Data:', data);
return fetch('https://api.example.com/more-data');
})
.then(response => response.json())
.then(moreData => {
console.log('More Data:', moreData);
})
.catch(error => {
console.error('Error:', error);
});

Chaining promises allows you to handle multiple asynchronous operations sequentially, improving readability and maintainability.

27. Promise.all for Concurrent Execution

Problem: Handling multiple asynchronous operations concurrently can be challenging.

Solution: Use `Promise.all` to handle concurrent asynchronous operations.

const fetchData1 = fetch('https://api.example.com/data1').then(response => response.json());
const fetchData2 = fetch('https://api.example.com/data2').then(response => response.json());
Promise.all([fetchData1, fetchData2])
.then(([data1, data2]) => {
console.log('Data 1:', data1);
console.log('Data 2:', data2);
})
.catch(error => {
console.error('Error:', error);
});

`Promise.all` allows you to handle multiple asynchronous operations concurrently and proceed when all of them are completed.

28. Debounce Function

Problem: Frequent function calls, such as during a window resize event, can degrade performance.

Solution: Use a debounce function to limit the rate at which a function is executed.

function debounce(func, wait) {
let timeout;
return function (…args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}
window.addEventListener('resize', debounce(() => {
console.log('Window resized');
}, 200));

A debounce function ensures that a function is only called after a certain period of inactivity, improving performance.

29. Throttle Function

Problem: Limiting the rate of function execution for events that fire frequently, like scroll or resize.

Solution: Use a throttle function to limit the execution rate of a function.

function throttle(func, limit) {
let lastFunc;
let lastRan;
return function (…args) {
if (!lastRan) {
func.apply(this, args);
lastRan = Date.now();
} else {
clearTimeout(lastFunc);
lastFunc = setTimeout(() => {
if (Date.now() - lastRan >= limit) {
func.apply(this, args);
lastRan = Date.now();
}
}, limit - (Date.now() - lastRan));
}
};
}
window.addEventListener('scroll', throttle(() => {
console.log('Window scrolled');
}, 200));

A throttle function ensures that a function is only called at most once in a specified period, improving performance for frequently firing events.

30. Deep Clone Objects

Problem: Cloning nested objects can be tricky and error-prone.

Solution: Use structured cloning or libraries like Lodash to deep clone objects.

const obj = { a: 1, b: { c: 2 } };
const deepClone = JSON.parse(JSON.stringify(obj));
console.log(deepClone); // { a: 1, b: { c: 2 } }

Deep cloning ensures that nested objects are copied by value, not by reference, preventing unintended modifications to the original object.

31. Memoization

Problem: Repeatedly calling expensive functions can degrade performance.

Solution: Use memoization to cache results of expensive function calls.

function memoize(func) {
const cache = new Map();
return function (…args) {
const key = JSON.stringify(args);
if (cache.has(key)) {
return cache.get(key);
}
const result = func.apply(this, args);
cache.set(key, result);
return result;
};
}
const expensiveFunction = memoize((num) => {
console.log('Computing…');
return num * 2;
});
console.log(expensiveFunction(2)); // "Comput
ing…" 4
console.log(expensiveFunction(2)); // 4

Memoization improves performance by caching results of expensive function calls and returning the cached result for subsequent calls with the same arguments.

32. Currying Functions

Problem: Creating functions with multiple parameters can be cumbersome.

Solution: Use currying to create functions with partially applied parameters.

function curry(func) {
return function curried(…args) {
if (args.length >= func.length) {
return func.apply(this, args);
}
return function (…nextArgs) {
return curried.apply(this, args.concat(nextArgs));
};
};
}
const sum = (a, b, c) => a + b + c;
const curriedSum = curry(sum);
console.log(curriedSum(1)(2)(3)); // 6
console.log(curriedSum(1, 2)(3)); // 6

Currying allows you to create functions that can be called with fewer arguments, returning a new function that accepts the remaining arguments.

33. Partial Application

Problem: Calling functions with repetitive arguments can be tedious.

Solution: Use partial application to pre-apply some arguments to a function.

function partial(func, …presetArgs) {
return function (…laterArgs) {
return func(…presetArgs, …laterArgs);
};
}
const multiply = (a, b, c) => a * b * c;
const double = partial(multiply, 2);
console.log(double(3, 4)); // 24

Partial application allows you to create new functions by pre-applying some arguments, making your code more flexible and reusable.

34. Function Composition

Problem: Combining multiple functions into a single operation can be cumbersome.

Solution: Use function composition to combine multiple functions.

const compose = (…funcs) => (arg) =>
funcs.reduceRight((prev, fn) => fn(prev), arg);
const add = (x) => x + 1;
const multiply = (x) => x * 2;
const addThenMultiply = compose(multiply, add);
console.log(addThenMultiply(5)); // 12

Function composition allows you to create a new function by combining multiple functions, making your code more modular and reusable.

35. Function Pipelining

Problem: Applying a series of functions to a value can be verbose.

Solution: Use function pipelining to apply a series of functions in sequence.

const pipe = (…funcs) => (arg) =>
funcs.reduce((prev, fn) => fn(prev), arg);
const add = (x) => x + 1;
const multiply = (x) => x * 2;
const addThenMultiply = pipe(add, multiply);
console.log(addThenMultiply(5)); // 12

Function pipelining allows you to apply a series of functions to a value in sequence, improving code readability and maintainability.

36. Self-Invoking Functions

Problem: Executing a function immediately upon definition can be cumbersome.

Solution: Use an Immediately Invoked Function Expression (IIFE).

(function () {
console.log('This runs immediately!');
})();

IIFEs allow you to execute a function immediately upon definition, useful for creating isolated scopes and avoiding polluting the global namespace.

37. Avoid Global Variables

Problem: Global variables can lead to conflicts and unintended side effects.

Solution: Use local variables and modules to avoid polluting the global namespace.

// Using local variables
function doSomething() {
let localVariable = 'This is local';
console.log(localVariable);
}
// Using modules
const myModule = (function () {
let privateVariable = 'This is private';
return {
publicMethod() {
console.log(privateVariable);
},
};
})();
myModule.publicMethod(); // "This is private"

Avoiding global variables helps prevent conflicts and unintended side effects, making your code more modular and maintainable.

38. Encapsulation with Closures

Problem: Exposing internal details of a function can lead to misuse.

Solution: Use closures to encapsulate internal details.

function createCounter() {
let count = 0;
return {
increment() {
count++;
return count;
},
decrement() {
count - ;
return count;
},
};
}
const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.decrement()); // 1

Closures allow you to encapsulate internal details and expose only the necessary functionality, improving code security and maintainability.

39. Module Pattern

Problem: Organizing code into reusable modules can be challenging.

Solution: Use the module pattern to create reusable and encapsulated code.

const myModule = (function () {
let privateVariable = 'This is private';
function privateMethod() {
console.log(privateVariable);
}
return {
publicMethod() {
privateMethod();
},
};
})();
myModule.publicMethod(); // "This is private"

The module pattern allows you to create reusable and encapsulated code, improving code organization and maintainability.

40. Singleton Pattern

Problem: Ensuring only one instance of a class is created can be challenging.

Solution: Use the singleton pattern to create a single instance.

const singleton = (function () {
let instance;
function createInstance() {
return {
name: 'Singleton Instance',
};
}
return {
getInstance() {
if (!instance) {
instance = createInstance();
}
return instance;
},
};
})();
const instance1 = singleton.getInstance();
const instance2 = singleton.getInstance();
console.log(instance1 === instance2); // true

The singleton pattern ensures that only one instance of a class is created, useful for managing shared resources or configurations.

41. Factory Pattern

Problem: Creating objects with complex initialization can be cumbersome.

Solution: Use the factory pattern to create objects.

function createUser(name, role) {
return {
name,
role,
sayHello() {
console.log(`Hello, my name is ${this.name} and I am a ${this.role}`);
},
};
}
const admin = createUser('Alice', 'admin');
const user = createUser('Bob', 'user');
admin.sayHello(); // "Hello, my name is Alice and I am an admin"
user.sayHello(); // "Hello, my name is Bob and I am a user"

The factory pattern allows you to create objects with complex initialization in a flexible and reusable way.

42. Observer Pattern

Problem: Managing state changes and notifying multiple components can be challenging.

Solution: Use the observer pattern to manage state changes and notify observers.

function Subject() {
this.observers = [];
}
Subject.prototype = {
subscribe(observer) {
this.observers.push(observer);
},
unsubscribe(observer) {
this.observers = this.observers.filter((obs) => obs !== observer);
},
notify(data) {
this.observers.forEach((observer) => observer.update(data));
},
};
function Observer(name) {
this.name = name;
}
Observer.prototype.update = function (data) {
console.log(`${this.name} received data: ${data}`);
};
const subject = new Subject();
const observer1 = new Observer('Observer 1');
const observer2 = new Observer('Observer 2');
subject.subscribe(observer1);
subject.subscribe(observer2);
subject.notify('New data available'); // "Observer 1 received data: New data available" "Observer 2 received data: New data available"

The observer pattern allows you to manage state changes and notify multiple observers, improving code organization and maintainability.

43. Event Delegation

Problem: Adding event listeners to multiple elements can degrade performance.

Solution: Use event delegation to manage events efficiently.

document.getElementById('parent').addEventListener('click', (event) => {
if (event.target && event.target.matches('button.className')) {
console.log('Button clicked:', event.target.textContent);
}
});

Event delegation allows you to manage events efficiently by adding a single event listener to a common parent element and handling events for multiple child elements.

44. Avoid Using `eval()`

Problem: Using `eval()` can lead to security vulnerabilities and performance issues.

Solution: Avoid using `eval()` and use safer alternatives.

// Avoid
const code = 'console.log("Hello, world!")';
eval(code); // "Hello, world!"
// Use safer alternatives
const func = new Function('console.log("Hello, world!")');
func(); // "Hello, world!"

Avoiding `eval()` helps prevent security vulnerabilities and performance issues, making your code more secure and efficient.

45. Using `for…of` for Iteration

Problem: Iterating over arrays with `for…in` can be error-prone.

Solution: Use `for…of` to iterate over arrays and other iterable objects.

const arr = [1, 2, 3, 4, 5];
for (const value of arr) {
console.log(value);
}
// 1
// 2
// 3
// 4
// 5

`for…of` provides a simple and safe way

https://blog.devgenius.io/45-javascript-super-hacks-every-developer-should-know-92aecfb33ee8

1. 빈 배열 대입

let array = [1,2,3,4,5];

array = []

console.log(array)  // []

단순하게 빈 배열 대입하여 배열을 비울 수 있습니다.

2. 배열의 길이 수정

let array = [1,2,3,4,5]

array.length = 0

console.log(array)  // []

배열의 길이를 0으로 수정하면 배열을 비울 수 있습니다.

※ 배열의 길이를 수정하면 해당 길이만큼 배열의 크기가 바꿔지며

    현재 길이보다 크게 변경 할 경우 해당 자리에 빈 값이 들어가며 sparse Array가 됩니다.

3. 배열 자르기

let array = [1,2,3,4,5]

array.splice(0)

console.log(array)  // []

splice 함수를 사용하면 해당 배열에서 설정한 크기만큼 잘라 반환합니다.
따라서 splice(0)을 사용하면 처음부터 끝까지 자르기 때문에 array가 비어지는 효과가 나타나게 됩니다.

4. 배열의 요소 하나하나 직접 반환

let array = [1,2,3,4,5]

while(array.length > 0){
    array.shift() 또는 array.pop()
}

배열의 shift() 또는 pop() 함수를 이용하여 요소들을 하나씩 직접 반환하는 방법입니다.

※ shift() - FIFO 먼저 들어온 요소 반환, pop() - LIFO 마지막에 들어온 요소 반환

자바스크립트는 세계에서 가장 성공적이고 다재다능한 프로그래밍 언어 중 하나지만 처음부터 그랬던 것은 아니다. 지금의 자바스크립트는 자바스크립트를 만든 사람들이 원래 구상했던 언어와 완전히 다른 언어다. 그 11가지 이유를 살펴보자.

1995년 큰 꿈을 갖고 모인 소수의 프로그래머들이 자바스크립트를 출범했다. 원래 이들이 생각했던 이름은 모카(Mocha)나 라이브스크립트(LiveScript)였지만 유행에 밝았던 몇 사람이 이미 상당한 인기를 끌고 있던 자바 언어의 시류에 올라타기로 했다.
 

새로운 스크립팅 언어의 처음 목표는 단순해서, 정적 웹 페이지에 생명력을 좀 불어넣자는 것이었다. (당시 웹 페이지에서 움직이는 부분은 <blink> 태그밖에 없었다. 이 태그는 오래전에 사라졌지만 아직 기억하는 사람이 있을 것이다.) 그때 자바스크립트 개발자는 양식 요소를 이중으로 확인하기 위해 만들어진 아주 작은 레이어 하나가 이후 소프트웨어 배포의 주된 방식이 될 것이라고는 꿈에도 생각하지 못했을 것이다.
 
현재의 자바스크립트 버전에서는 이 1세대 스크립팅 언어의 흔적을 거의 찾아볼 수 없다. 오래된 코드도 대부분 웹사이트에서 여전히 실행되지만 초창기부터 지금까지 수많은 기능과 레이어가 추가됐다. 자바스크립트의 역할과 책임의 범위도 훨씬 더 커졌다. Node.js 덕분에 자바스크립트는 웹 페이지 전용을 넘어 서버측 스택의 큰 부분을 차지하면서 이제 <blink> 태그 또는 고양이 밈과는 아무런 관계도 없는 코드를 실행하고 있다. 암호화폐 애플리케이션, 의료, 주식거래 봇을 비롯한 수많은 작업이 자바스크립트에 의존한다.
 
30주년을 눈앞에 둔 자바스크립트 언어가 그 사이 얼마나 변했는지 돌아보자. 지금 우리가 사용하는 자바스크립트는 다음과 같은 11가지 측면에서 이 언어를 만든 이들과 초기 도입자들이 상상했던 언어와 완전히 다르다.
 

더 이상 자바스크립트로 불리지 않음

처음에는 모두가 자바스크립트라고 불렀다. 지금도 대부분의 개발자가 이 이름을 사용한다. 그러나 표준을 만드는 사람들이 공식적으로 사용하는 이름은 ECMA스크립트다. 일부는 규범적 언어 사양의 공식 버전 번호(최대 14)까지 명시한다. ECMA스크립트는 입에 잘 붙지 않고 따뜻한 커피를 연상시키지도 않지만 자바스크립트를 자바와 확실히 구분해준다. 이 이름을 사용함으로써 자바스크립트 개발자는 자바 상표, 로고 또는 기타 트레이드 드레스에 대해 걱정할 필요가 없다. 단, 이 사양을 유지관리 주체인 ECMA 인터내셔널(ECMA International)은 이름 옆에 작은 등록 상표 기호를 붙이는 것을 좋아한다는 점만(ECMAScript®) 예외적으로 주의하면 된다.
 

너무 방대해서 특정 부분의 전문화 필요

지금의 자바스크립트는 너무 방대해서 누구도, 심지어 매일 자바스크립트를 사용하는 개발자라 해도 모든 부분을 아는 것은 불가능하다. 서버 측 옵션과 동형(isomorphic) 코드의 등장으로 새로운 에너지가 유입되고 많은 개발이 이뤄져 한 사람이 브라우저 또는 서버를 위한 코드 작성의 세세한 부분을 모두 알기가 극히 어려워졌다. 

이론적으로는 브라우저와 서버에서 모두 실행되는 코드를 쓸 수 있지만 현실에서 개발자는 브라우저 또는 서버 하나에 대한 전문성을 갖추는 데 집중한다. 개발자는 흔히 자신이 브라우저 기반 자바스크립트 프레임워크, 서버 측 자바스크립트, 또는 데이터베이스 측 자바스크립트를 다룬다고 구분해서 말한다. 자바스크립트 세계는 방대하다.
 

관건은 프레임워크

서버 세계와 브라우저 세계로 나누는 것 외에도 자바스크립트 개발자는 프레임워크 단위로 자신의 전문 분야를 좁히는 경향이 있다. 많은 구인 공고는 "자바스크립트" 프로그래머를 구하지 않는다. 이들은 리액트, 앵귤러를 비롯해 많이 사용되는 10여 개의 자바스크립트 프레임워크를 다룰 줄 아는 사람을 찾는다. 실용적인 결정이다. 

프로그래머는 성공하려면 이러한 프레임워크의 세세한 특성에 정통해야 한다. 물론 자바스크립트의 기본도 알아야 한다. 그러나 앵귤러가 HTML 속성을 어떻게 사용하는지 모른다면 자바스크립트 전문 지식을 아무리 많이 갖고 있어도 도움이 되지 않는다. 앵귤러, 리액트와 같은 대형 프레임워크도 너무 커지고 복잡해져서 일부 프로그래머는 상태 관리 툴(리덕스(Redux), 몹액스(MobX)) 또는 기본 모델 옵션과 같은 자바스크립트의 하위 영역에 집중하는 더 작은 툴에 대한 전문성을 키우고 있다.
 

동형

자바스크립트의 인기가 큰 폭으로 늘어난 계기 중 하나는 Node.js를 통해 서버에서 실행되는 자바스크립트 코드를 작성할 수 있게 된 것이다. 한 팀이 브라우저 소프트웨어를 처리하고 다른 팀이 서버 측을 관리할 필요가 갑자기 사라졌다. 동일한 코드를 두 위치에서 동형으로 실행할 수 있게 되면서 자바스크립트 개발자는 브라우저에서 서버로, 다시 브라우저로 훨씬 더 쉽게 함수를 옮길 수 있게 됐다. 

잠깐, 조금 전에 자바스크립트 세계가 두 갈래, 세 갈래 또는 그 이상으로 분화되고 있다고 말하지 않았던가? 맞다. 그러나 동형성은 여전히 가치 있다. 암호화와 같은 작업을 위한 많은 기본적인 함수는 다양한 영역에서 동일하게 실행이 가능하다. 물론 프로그래머는 한 틈새 영역에 대한 전문성을 키울 수 있지만 코드 자체는 모든 틈새 간에 아무런 제한 없이 흐를 수 있다.
 

다수의 새로운 연산자

원래의 자바스크립트에는 데이터 객체를 다루기 위한 간단한 기능이 몇 가지 있었다. 최신 버전은 데이터 구조를 분할하고 쪼개고 확장하고 변경할 수 있는 스프레드 연산자(…), map과 같은 추가 기능을 지원한다. 그 결과 매우 간결하면서도 매우 강력한 코드를 얻을 수 있다. 프로그래머는 복잡한 데이터 구조를 포장하고 풀기 위한 끝없는 루틴을 쓰지 않고도 손쉽게 이러한 구조를 제공할 수 있다. 코드는 더 간소하고 빠르며, 새로운 구문을 안다면 읽기도 더 쉽다.
 

모든 곳에 있는 JSON

초기 자바스크립트 프로그래머는 데이터를 공유하려면 파싱하고 직렬화할 수밖에 없었다. 이후 어느 영리한 사람이 네이티브 자바스크립트 객체 형식(JavaScript Object Notation, 즉 JSON)이 효율적인 동시에 속도도 빠르다는 사실을 발견했다. 자바스크립트 스택은 JSON을 사용해 저장된 데이터를 다른 대부분의 형식보다 더 빠르게 파싱할 수 있었다. 지금은 자바스크립트 코드를 쓰지 않는 프로그래머도 유연성과 효율성을 이유로 JSON 형식의 데이터를 사용한다. JSON은 모든 곳에 사용되지만, JSON을 빠르게 파싱하고 객체로 변환하는 자바스크립트 환경에 사용될 때 가장 잘 맞는 느낌이다.
 

빌드와 빌드 툴

초기 사람들은 텍스트 편집기로 자바스크립트를 쓰고 브라우저에서 테스트했다. 현대 자바스크립트 애플리케이션은 조금 더 복잡하다. 대부분의 경우 그런트(Grunt), 걸프(Gulp), 웹팩(Webpack)과 같이 다양한 구성요소를 최종 실행 스택으로 엮어주는 다단계 빌드 툴이 필요하다. 많은 개발자가 결국 코드를 테스트하고 충돌 가능성이 있는 버그를 확인하는 전체 CI/CD 서버를 사용하게 된다.
 
자바스크립트의 빌드 툴은 매우 강력해서 개발자와 일종의 애증의 관계에 있는 경우가 많다. 이들이 작성하는 코드는 분석을 거쳐 실제로 실행되는 형식으로 어셈블링되기 전까지는 아무 데서도 실행되지 않는다. 기술적으로 자바스크립트는 여전히 동적 스크립팅 언어지만 오래된 C 컴파일러보다 빌드에 더 오랜 시간이 걸리는 경우가 종종 있다.
 

JIT 컴파일

지금은 처리와 전처리가 스택의 위아래에서 이뤄진다. JIT(Just-In-Time) 컴파일러는 처음 등장할 때부터 자바스크립트의 잠재력을 끌어냈고 지금도 계속 개선되고 있다. 현재의 컴파일러는 코드가 실행될 때 반복적으로 이를 분석해서 대부분의 작업을 수행하는 알고리즘의 핵심 부분을 개선할 수 있을 만큼 똑똑하다. 가비지 수집에서 효과적이며 피해를 입히는 여러 가지 동작을 차단한다. 스크립팅 언어로 시작된 언어임을 감안하고 보면 자바스크립트의 JIT 레이어는 공식적으로 "컴파일되는" 언어만큼 강력해 보인다.
 

형식 안전성

자바스크립트 초창기 일부 프로그래머는 각 변수에 저장되는 데이터의 형식을 정의하기 위해 부가적인 입력이 필요하다는 점을 싫어했다. 여전히 기본 자바스크립트를 사용한다 해도 자유지만 이제는 상당히 많은 개발자가 타입스크립트와 기타 자바스크립트를 위한 형식 지정 옵션을 수용하고 있다. 이러한 프리프로세서는 형식 규칙, 그리고 이 규칙에 수반되는 모든 안전 장치를 적용한다.
 

방대한 라이브러리 생태계

오늘날 자바스크립트 생태계에는 폭과 깊이를 가늠하기 어려울 정도로 방대한 라이브러리가 번성 중이다. 수천, 수백만 가지의 애플리케이션을 위한 코드가 있다. 기본적인 프로젝트를 위한 빌드 파일도 수백 가지의 종속성을 가져올 수 있다. 자바스크립트는 깃허브, 깃랩 등의 리포지토리에서 가장 인기 있는 언어 중 하나다. 리포지토리에서 모든 경우에 맞는 코드를 며칠이고 탐색할 수 있다.
 

자바스크립트로 크로스 컴파일되는 다른 언어

자바스크립트의 최근 변화 하나를 꽂바면 다른 언어로 작성된 코드 지원이다. 자바스크립트로 크로스 컴파일해서 브라우저 또는 서버에서 실행할 수 있는 언어는 수백 가지에 이른다.

JIT 컴파일러 덕분에 이제 자바스크립트는 오래된 코볼 또는 새로운 하스켈을 어디서나 빠르게 실행하고자 하는 개발자에게 좋은 중간 지점 역할을 한다. 물론 이러한 언어를 좋아하는 사용자는 자체 컴파일러를 만들 수 있지만 자바스크립트로 크로스 컴파일해서 툴에 최적화를 맡기는 편이 더 쉽다. 결과적으로 많은 자바스크립트 코드가 완전히 다른 언어를 사용하는 프로그래머에 의해 작성됐다.

https://www.itworld.co.kr/news/346945

입력값 체크(한글, 영문, 특수문자, 공백 정규식 활용)

// 특수 문자 체크 
function checkSpecial(str) { 
    const regExp = /[!?@#$%^&*():;+-=~{}<>\_\[\]\|\\\"\'\,\.\/\`\₩]/g;
    if(regExp.test(str)) {
        return true;
    }else{
        return false;
    } 
} 

// 한글 체크
function checkKor(str) {
    const regExp = /[ㄱ-ㅎㅏ-ㅣ가-힣]/g; 
    if(regExp.test(str)){
        return true;
    }else{
        return false;
    }
}

// 숫자 체크
function checkNum(str){
    const regExp = /[0-9]/g;
    if(regExp.test(str)){
        return true;
    }else{
        return false;
    }
}

// 영문(영어) 체크
function checkEng(str){
    const regExp = /[a-zA-Z]/g; // 영어
    if(regExp.test(str)){
        return true;
    }else{
        return false;
    }
}

// 영문+숫자만 입력 체크
function checkEngNum(str) {
    const regExp = /[a-zA-Z0-9]/g;
    if(regExp.test(str)){
        return true;
    }else{
        return false;
    }
}


// 공백(스페이스 바) 체크
function checkSpace(str) { 
    if(str.search(/\s/) !== -1) {
        return true; // 스페이스가 있는 경우
    }else{
        return false; // 스페이스 없는 경우
    } 
} 



정규표현식 기초
형식: /정규식/

- : 범위(어디에서 어디까지)

a-z : a에서 z까지를 의미
0-9 : 0에서 9까지를 의미
ㄱ-ㅎ : ㄱ에서 ㅎ까지를 의미
ㅏ-ㅣ : ㅏ에서 ㅣ 까지를 의미
가-힣 : '가'에서 '힣'까지를 의미


[] : 괄호 안에 문자중 1개

[a-z] : a에서 z중 하나.
[abc]d : ad, bd, bd 를 의미


[^] : 괄호안의 문제 부정(제외)

[^a-z] : a ~ z를 제외한 모든 문자
[^0-9] : 숫자를 제외한 모든 문자


| : 또는(OR)

[a-z|A-Z] : a ~ z 또는 A ~ Z 의미(영어 전체)
[ㄱ-ㅎ|ㅏ-ㅣ|가-힣] : ㄱ ~ ㅎ 또는 ㅏ ~ ㅣ 또는 가 ~ 힣 의미(한글 전체)


^ : 문자열의 처음

^[a-zA-Z] : 영문자로 시작해야함


$ : 문자열의 끝

[a-zA-Z]$ : 영문자로 끝나야함
^[a-zA-Z]$ : 영문자로 시작하고, 영문자로 끝나야함


* : 0회 이상(여러개)

^[a-zA-Z]*$ : 여러개의 문자가 모두 영문자여야 함
^[0-9]*$ : 여러개의 문자가 모두 숫자여야 함
^[a-zA-Z0-9]*$ : 여러개의 문자가 모두 영문자나 숫자여야 함


{m, n} : m회 이상, n회 이하

^[a-zA-Z]*${1, 10} : 영문자 1자 이상, 10자 이하

전역 NaN 속성은 Not-A-Number(숫자가 아님)를 나타냅니다.

function sanitise(x) {
  if (isNaN(x)) {
    return NaN;
  }
  return x;
}

console.log(sanitise('1'));
// Expected output: "1"

console.log(sanitise('NotANumber'));
// Expected output: NaN

모바일 웹에서 뒤로가기 버튼 선택시 history.pushstate 사용해서 뒤로가기 이벤트 확인하기

모바일 웹에서 뒤로가기 버튼을 처리하려면 JavaScript를 사용하여 history.pushState를 활용할 수 있습니다. popstate 이벤트를 사용하여 뒤로가기 버튼의 클릭을 감지할 수 있습니다. 아래는 간단한 예제 코드입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>뒤로가기 이벤트 확인</title>
</head>
<body>
    <h1>뒤로가기 이벤트 확인</h1>

    <script>
        // 현재 상태 저장
        history.pushState({ page: 1 }, "Title 1", "?page=1");

        // 뒤로가기 이벤트 처리
        window.addEventListener('popstate', function(event) {
            // event.state에는 현재 상태의 데이터가 들어있습니다.
            if (event.state) {
                alert('뒤로가기 버튼이 눌렸습니다. 페이지 상태: ' + JSON.stringify(event.state));
            } else {
                // 더 이상 뒤로 갈 수 없을 때, 예를 들어 초기 페이지에서 뒤로가기 버튼을 눌렀을 때 처리할 내용을 여기에 추가할 수 있습니다.
                alert('뒤로 갈 수 없습니다.');
            }
        });

        // 새로운 상태 추가 및 주소 변경
        function changeState() {
            const newState = { page: 2 };
            history.pushState(newState, "Title 2", "?page=2");
        }
    </script>

    <!-- 버튼을 클릭하여 상태를 변경하고 뒤로가기 이벤트를 확인할 수 있습니다. -->
    <button onclick="changeState()">새로운 상태로 이동</button>
</body>
</html>