JS의 9가지 코드 트릭

JS의 9가지 코드 트릭

1. 구조 분해 할당을 이용한 변수 swap

• ES6 문법(구조 분해 할당)을 사용하여 두 변수를 교환 할 수 있다.

let a = 5;, b = 10;
[a, b] = [b, a];
console.log(a, b) // 10, 5 

2. 배열 생성으로 루프 제거하기

• 배열 생성을 통해 루프를 제거하는 것은 함수형 프로그래밍의 기법 중 하나이다.

// 루프를 사용한 예시 코드
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = [];
for (let i = 0; i < numbers.length; i++) {
  doubledNumbers.push(numbers[i] * 2);
}
console.log(doubledNumbers); // 출력: [2, 4, 6, 8, 10]

• 이 코드는 루프를 사용하여 numbers 배열의 각 요소를 순회하고, doubledNumbers 배열에 각 요소를 두 배로 만든 후 추가하는 방식이다.

// 함수형 프로그래밍 방식으로 루프를 제거한 예시 코드
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((num) => num * 2);
console.log(doubledNumbers); // 출력: [2, 4, 6, 8, 10]

• 이 코드는 numbers 배열의 map 메소드를 활용하여 배열을 생성하는 방식이다.
  map 메소드는 콜백 함수를 인자로 받아 해당 배열의 각 요소에 콜백 함수를 적용한 새로운
  배열을 생성한다. 이를 통해 루프를 명시적으로 작성하지 않고도 간결하게 배열을 생성할 수 있다.

3. 배열 내 같은 요소 제거하기

• 배열 내에서 중복된 요소를 제거하는 방법 중 하나로 Set을 사용한다.
• Set은 중복을 허용하지 않는 값들의 집합을 나타내는 자료구조이다.

const numbers = [1, 2, 3, 4, 4, 5, 5, 6];

// Set을 사용하여 중복 제거
const uniqueNumbers = [...new Set(numbers)];

console.log(uniqueNumbers); // 출력: [1, 2, 3, 4, 5, 6]

• 이 코드에서 Set 생성자 함수를 사용하여 numbers 배열을 Set으로 변환한다.
  이후 ... 전개 연산자를 사용하여 Set을 다시 배열로 변환합니다.
  Set은 중복된 값을 허용하지 않기 때문에 중복된 요소가 제거된 새로운 배열이 생성된다.

4. Spread 연산자를 이용한 객체 병합

• Spread 연산자를 이용한 객체 병합은 두 개 이상의 객체를 하나로 병합하는 방법이다.
• Spread 연산자(...)를 사용하여 객체의 속성과 값을 펼쳐서 새로운 객체를 생성한다.

const person = {
    name: 'Lee Sun-Hyoup',
    familyName: 'Lee',
    givenName: 'Sun-Hyoup'
};

const company = {
    name: 'Cobalt. Inc.',
    address: 'Seoul'
};

const leeSunHyoup = { ...person, ...company };
console.log(leeSunHyoup);

//  {
//  name: 'Cobalt. Inc.', 같은 키는 마지막에 대입된 값으로 정해진다.
//  familyName: 'Lee',
//  givenName: 'Sun-Hyoup',
//  address: 'Seoul'
//  }

5. &&와 || 활용

• &&와 ||는 조건문 외에서도 활용 가능하다.

// ||를 활용한 기본값 설정
function greet(name) {
  name = name || "Guest";
  console.log(`Welcome, ${name}!`);
}

greet("Alice");  // 출력: Welcome, Alice!
greet();         // 출력: Welcome, Guest!

• 이 코드에서 || 연산자는 왼쪽 피연산자가 false 값일 경우 오른쪽 피연산자로 대체된다. 따라서 name이 주어지지 않거나 false 값인 경우에는 기본값인 "Guest"가 할당된다.
  이를 통해 함수의 인자로 전달되는 값이 없는 경우에도 기본값을 설정할 수 있다.

/// &&을 활용한 조건부 실행
const user = {
  name: "Hyojin",
  isAdmin: true,
  hasPermission: true,
};

// isAdmin이 true이고 hasPermission이 true일 때만 실행
user.isAdmin && user.hasPermission && console.log("관리자 권한 확인됨");

• 이 코드에서 && 연산자는 앞의 조건이 true일 경우에만 뒤의 표현식을 실행된다.
• user.isAdmin이 true이고 user.hasPermission이 true일 때만 console.log 문이 실행된다.

6. 구조 분해 할당 사용하기

• 객체나 배열을 해체하고 해당 요소를 개별 변수로 할당할 수 있다.
• 객체 생성 시 키를 생략하여 간결하게 객체를 생성할 수 있다.

const user = { 
  name: "Alice", 
  age: 25, city: 
  "New York" 
};

const { name, age, city } = user;

console.log(name);  // 출력: Alice
console.log(age);   // 출력: 25
console.log(city);  // 출력: New York

• 이 코드에서 { name, age, city }는 구조 분해 할당을 사용하여 user 객체의 name, age, city 프로퍼티를 개별 변수로 할당한다. 이를 통해 코드를 더 간결하게 작성성하고, 객체의 특정 프로퍼티에 접근할 때도 직관적이다.

객체 생성 키 생략하기

• 객체 생성 시 키 생략

const name = "Alice";
const age = 25;

const user = { name, age };

console.log(user);  // 출력: { name: "Alice", age: 25 }

• 이 코드 { name, age }는 키를 생략하고 변수의 값으로 객체를 생성하는 방법이다.
  변수의 이름과 동일한 키로 자동으로 할당되며, 이를 통해 객체를 생성하는 코드를 더 간결하게 작성할 수 있다.

7. 비구조화 할당 사용하기

• 배열이나 객체에서 원하는 요소를 추출하여 개별 변수로 할당하는 기능이다.

• 코드를 간결하게 작성하고 필요한 데이터에 쉽게 접근할 수 있다.

• 함수에 객체를 넘길 경우 필요한 것만 꺼내 쓸 수 있다.

• 배열 비구조화 할당

const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;

console.log(first);   //  1
console.log(second);  //  2
console.log(rest);    // [3, 4, 5]

• 이 코드에서 [first, second, ...rest]는 배열 numbers의 첫 번째 요소를 first 변수에, 두 번째 요소를 second 변수에 할당하고, 나머지 요소들을 rest 배열에 할당한다. 이를 통해 배열의 각 요소에 간편하게 접근할 수 있다.

• 함수에 객체를 전달하는 경우,
  함수의 매개변수를 비구조화하여 원하는 객체의 프로퍼티에 접근할 수 있다.

function printUser({ name, age, city }) {
 return name, age, city
}

const user = { name: "Alice", age: 25, city: "New York" };
console.log(user);

• 이 코드에서 printUser 함수는 객체를 매개변수로 받고 매개변수를 비구조화하여 { name, age, city }와 같이 작성하면, 함수 내부에서 해당 객체의 name, age, city 프로퍼티에 바로 접근할 수 있다.

8. 동적 속성 이름

• E6 추가된 기능으로 객체 키를 동적으로 생성 할 수 있다.

const nameKey = 'name';
const emailKey = 'email';
const person = {
  [nameKey]: 'Lee Sun-Hyoup',
  [emailKey]: 'kciter@naver.com'
};
console.log(person);
// {
//   name: 'Lee Sun-Hyoup',
//   email: 'kciter@naver.com'
// }

• 동적 속성 이름을 사용하여 객체의 키를 동적으로 생성할 수 있다. 실행 시점에서 속성 이름을 결정할 수 있어 더 유연한 객체 구조를 구성할 수 있다.

9. !! 연산자를 사용하여 Boolean 값으로 바꾸기

• !! 연산자를 이용하여 0, null, 빈 문자열, undefined, NaN 을 false로 그 외에는 true로 변경할 수 있다.

const values = [0, null, "", undefined, NaN, 123, "Hello"];

const converted = values.map(value => !!value);

console.log(converted); 
// [false, false, false, false, false, true, true]