개발 기술을 향상시키는 데 도움이 되는 7가지 JavaScript 아이디어

JavaScript는 마스터하기가 복잡한 것입니다. 어떤 수준의 JavaScript 개발자라면 핵심 개념을 이해하는 것이 중요합니다. 이 기사는 모든 JS 개발자가 알아야 할 7가지 원칙을 다루지만 JS 개발자가 알아야 하는 모든 것을 다루지는 않습니다.

1. 값 대 참조 변수 할당

버그 없는 JavaScript를 작성하려면 먼저 JavaScript가 변수를 할당하는 방법을 이해해야 합니다. 이를 이해하지 못하면 자신도 모르는 사이에 값을 변경하는 코드를 쉽게 작성할 수 있습니다.
JavaScript는 항상 값으로 변수를 할당합니다. 하지만 이 부분이 매우 중요합니다. 할당된 값이 JavaScript의 5가지 기본 유형(즉, Boolean, null, undefined, String 및 Number) 중 하나일 때 실제 값이 할당됩니다. 그러나 할당된 값이 배열, 함수 또는 개체인 경우 메모리의 개체에 대한 참조가 할당됩니다.

예제 시간!

다음 스니펫에서 var2는 var1과 동일하게 설정됩니다. var1은 프리미티브 타입(String)이므로 var2는 var1의 String 값과 동일하게 설정되며 현 시점에서 var1과 완전히 다른 것으로 생각할 수 있다. 따라서 var2를 재할당해도 var1에는 영향을 미치지 않습니다.

let var1 = 'My string';
let var2 = var1;

var2 = 'My new string';

console.log(var1);
// 'My string'
console.log(var2);
// 'My new string'

이것을 개체 할당과 비교해 봅시다.

let var1 = { name: 'Jim' }
let var2 = var1;
var2.name = 'John';

console.log(var1);
// { name: 'John' }
console.log(var2);
// { name: 'John' }

기본 할당과 같은 동작을 예상한 경우 이것이 어떻게 문제를 일으킬 수 있는지 알 수 있습니다! 의도하지 않게 개체를 변경하는 함수를 만들면 특히 보기 흉해질 수 있습니다.

2. 파괴

자바스크립트 매개변수 파괴에 현혹되지 마세요! 개체에서 속성을 깔끔하게 추출하는 일반적인 방법입니다.

const obj = {
  name: 'Joe',
  food: 'cake'
}

const { name, food } = obj;

console.log(name, food);
// 'Joe' 'cake'

다른 이름으로 속성을 추출하려는 경우 다음 형식을 사용하여 속성을 지정할 수 있습니다.

const obj = {
  name: 'Joe',
  food: 'cake'
}

const { name: myName, food: myFood } = obj;

console.log(myName, myFood);
// 'Joe' 'cake'

다음 예제에서는 구조 분해를 사용하여 person 개체를 소개 함수에 깔끔하게 전달합니다. 즉, 구조 분해는 함수에 전달된 매개변수를 추출하는 데 직접 사용될 수 있습니다(그리고 자주 사용됩니다). React에 익숙하다면 전에 본 적이 있을 것입니다!

const person = {
  name: 'Eddie',
  age: 24
}

function introduce({ name, age }) {
  console.log(`I'm ${name} and I'm ${age} years old!`);
}

console.log(introduce(person));
// "I'm Eddie and I'm 24 years old!"

3. 폐쇄

클로저는 변수에 대한 비공개 액세스를 제공하는 중요한 JavaScript 패턴입니다. 이 예에서 createGreeter는 제공된 인사말 "Hello"에 액세스할 수 있는 익명 함수를 반환합니다. 향후 모든 사용을 위해 sayHello는 이 인사말에 액세스할 수 있습니다!

function createGreeter(greeting) {
  return function(name) {
    console.log(greeting + ', ' + name);
  }
}

const sayHello = createGreeter('Hello');
sayHello('Joe');
// Hello, Joe

보다 실제적인 시나리오에서는 API 키를 사용하는 일부 메서드를 반환하는 초기 함수 apiConnect(apiKey)를 구상할 수 있습니다. 이 경우 apiKey는 한 번만 제공하면 되며 다시는 제공되지 않습니다.

function apiConnect(apiKey) {
  function get(route) {
    return fetch(`${route}?key=${apiKey}`);
  }

 function post(route, params) {
    return fetch(route, {
      method: 'POST',
      body: JSON.stringify(params),
        headers: {
          'Authorization': `Bearer ${apiKey}`
        }
      })
  }

return { get, post }
}
const api = apiConnect('my-secret-key');
// No need to include the apiKey anymore
api.get('http://www.example.com/get-endpoint');
api.post('http://www.example.com/post-endpoint', { name: 'Joe' });

4. 스프레드 구문

사람들을 혼란스럽게 할 수 있지만 상대적으로 단순한 JavaScript 개념은 스프레드 연산자입니다! 다음의 경우 Math.max는 배열을 인수로 사용하지 않고 개별 요소를 인수로 사용하기 때문에 arr 배열에 적용할 수 없습니다. 스프레드 연산자 ...는 배열에서 개별 요소를 가져오는 데 사용됩니다.

const arr = [4, 6, -1, 3, 10, 4];
const max = Math.max(...arr);
console.log(max);
// 10

5. 나머지 구문

JavaScript 나머지 구문에 대해 이야기해 봅시다. 이를 사용하여 함수에 전달된 인수를 얼마든지 배열에 넣을 수 있습니다!

function myFunc(...args) {
  console.log(args[0] + args[1]);
}
myFunc(1, 2, 3, 4);
// 3

6. 항등 연산자(===) 대 동등 연산자(==)

JavaScript에서 식별 연산자(===)와 같음 연산자(==)의 차이점을 꼭 알아두세요! == 연산자는 값을 비교하기 전에 유형 변환을 수행하는 반면 === 연산자는 비교하기 전에 유형 변환을 수행하지 않습니다.

console.log(0 == '0');
// true
console.log(0 === '0');
// false

7. 콜백 함수

너무 많은 사람들이 JavaScript 콜백 함수에 겁을 먹고 있습니다! 간단합니다. 이 예를 들어보세요. console.log 함수는 myFunc에 콜백으로 전달됩니다. setTimeout이 완료되면 실행됩니다. 그게 전부입니다!

function myFunc(text, callback) {
  setTimeout(function() {
    callback(text);
  }, 2000);
}
myFunc('Hello world!', console.log);
// 'Hello world!'

이전에 이 7가지 원칙 중 하나도 몰랐다면 JavaScript 지식이 향상되었을 것입니다! 그리고 당신이 그들 모두를 알고 있다면, 이것이 당신의 지식을 테스트할 수 있는 기회였기를 바랍니다.