JS에서 사용하면 좋을 8가지 코드 팁!



JS에서 사용하면 좋을 8가지 코드 팁! 고고~!

 

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

코드는 a와 b의 값을 서로 바꾸기 위해 구조 분해 할당을 사용.

a와 b의 값을 배열로 묶어주고, 그 값을 다시 순서를 바꾼 배열로 할당함으로써 변수를 스왑할 수 있다.

let a = 5;
let b = 10;

console.log('스왑 전: ');
console.log('a:', a); // 출력: a: 5
console.log('b:', b); // 출력: b: 10

// 구조 분해 할당을 사용하여 변수 스왑
[a, b] = [b, a];

console.log('스왑 후: ');
console.log('a:', a); // 출력: a: 10
console.log('b:', b); // 출력: b: 5

 

 

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

// 루프를 사용한 제곱 값 출력
for (let i = 1; i <= 5; i++) {
    console.log(i * i);
}
// 출력:
// 1 4 9 16 25

// 배열 생성 메서드로 제곱 값 출력
const numbers = Array.from({ length: 5 }, (_, index) => (index + 1) ** 2);
numbers.forEach(num => console.log(num));
// 출력:
// 1 4 9 16 25

함수형 프로그래밍 방식으로 배열을 생성해 루프

https://jongminfire.dev/%ED%95%A8%EC%88%98%ED%98%95-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D%EC%9D%B4%EB%9E%80

함수형 프로그래밍이란?

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

Array.prototype.reduce() - JavaScript | MDN

 

3. 배열 내 같은 요소 제거하기(Set 함수 사용)

//from을 사용
const arrayWithDuplicates = [1, 2, 2, 3, 4, 4, 5];

const uniqueArray = Array.from(new Set(arrayWithDuplicates));

//seperate operator 사용
const arrayWithDuplicates = [1, 2, 2, 3, 4, 4, 5];

const uniqueArray = [...new Set(arrayWithDuplicates)];


console.log('중복 제거 전:', arrayWithDuplicates);
// 출력: 중복 제거 전: [1, 2, 2, 3, 4, 4, 5]

console.log('중복 제거 후:', uniqueArray);
// 출력: 중복 제거 후: [1, 2, 3, 4, 5]

 

 

 

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

spread operator은 대괄호 중괄호 모두 벗긴다. 괄호 안의 값들만 보여줌.

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const mergedObj = { ...obj1, ...obj2 };

console.log('병합된 객체:', mergedObj);
// 출력: 병합된 객체: { a: 1, b: 3, c: 4 }

 

5. &&와 || 활용

// && 연산자 활용
const x = 5;
const y = 10;

if (x > 0 && y > 0) {
    console.log('x와 y는 둘 다 양수입니다.');
} else {
    console.log('x와 y 중 적어도 하나는 양수가 아닙니다.');
}

// || 연산자 활용
const name = '';
const displayName = name || 'Guest';

console.log('사용자 이름:', displayName);

//객체병합에도 활용
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

// obj1과 obj2를 병합하되, obj2의 속성이 우선순위를 가지도록 함
const mergedObj = { ...obj1, ...obj2.b && { b: obj2.b }, ...obj2.c && { c: obj2.c } };

console.log('병합된 객체:', mergedObj);
// 출력: 병합된 객체: { a: 1, b: 3, c: 4 }

 

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

함수에 객체를 넘길때 필요한 것만 꺼내 사용 가능

function processUser({ name, age, isAdmin }) {
    console.log('사용자 이름:', name);
    console.log('사용자 나이:', age);
    console.log('관리자 여부:', isAdmin ? '예' : '아니오');
}

const user = {
    name: 'Alice',
    age: 30,
    isAdmin: true
};

processUser(user);

7. 동적 속성 이름

ES6에 추가된 기능으로 객체의 키를 동적으로 생성 가능

const dynamicKey = 'age';

const user = {
    name: 'Alice',
    [dynamicKey]: 30,
    isAdmin: true
};

console.log('사용자 정보:', user);

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

출력된 값이 null 인지 undefined인지 모르겠을 때 !! 을 사용하여 false로 바꿔놓으면 공통된 결과로서 사용가능할 듯

const value = 'Hello'; 

const booleanValue = !!value; // !! 연산자를 사용하여 값을 불리언(Boolean) 값으로 변환

console.log('불리언 값:', booleanValue); // 변환된 불리언(Boolean) 값 출력

const number = 42;
const booleanNumber = !!number;
// booleanNumber는 true가 됨


const emptyString = '';
const booleanEmptyString = !!emptyString;
// booleanEmptyString는 false가 됨

const nullValue = null;
const booleanNullValue = !!nullValue;
// booleanNullValue는 false가 됨