이 글은 '10 Modern JavaScript Tricks Every Developer Should Use' 를 읽고 정리한 글입니다.
1. 조건부로 객체 속성 추가하기
spread 연산자 ...를 사용하여 조건부로 객체에 속성을 빠르게 추가할 수 있다.
const condition = true;
const person = {
id: 1,
name: 'John Doe',
...(condition && { age: 16 })
}
JavaScript
복사
2. property가 객체 안에 존재하는지 확인
in 키워드를 사용해 property가 JavaScript 객체 안에 존재하는지 확인할 수 있다.
const person = { name: 'John Doe', salary: 1000 };
console.log('salary' in person); // returns true
console.log('age' in person); // returns false
JavaScript
복사
3. 객체 프로퍼티 키 동적 생성
객체의 프로퍼티 키를 동적으로 설정하는 것은 간단하다. 프로퍼티를 추가하기 위해 ['key_name'] 표기법을 사용하면 된다.
const dynamic = 'flavour';
var item = {
name: 'Biscuit',
[dynamic]: 'Chocolate'
}
console.log(item); // { name: 'Biscuit', flavour: 'Chocolate'
var prefix = 'prop';
var i = 0;
var obj = {};
obj[prefix + '-' + ++i] = i;
obj[`${prefix}-${++i}`] = i;
obj[prefix + '-' + ++i] = i;
console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}
JavaScript
복사
동적 키로 객체를 참조할 때도 동일한 방법을 사용할 수 있다.
const keyName = 'name';
console.log(item[keyName]); // returns 'Biscuit'
JavaScript
복사
4. 동적 키를 사용한 객체 구조 분해
객체를 새로운 변수 값으로 분해
const person = { id: 1, name: 'John Doe' };
const { name: personName } = person;
console.log(personName); // returns 'John Doe'
JavaScript
복사
동적 키로 프로퍼티 구조 분해
const templates = {
'hello': 'Hello there',
'bye': 'Good bye'
};
const templateName = 'bye';
const { [templateName]: template } = templates;
console.log(template) // returns 'Good bye'
JavaScript
복사
5. Null 인지 확인하는 ?? 연산자
?? 연산자는 변수가 null 또는 undefined 인 경우 오른쪽 피연산자를 리턴하고 그렇지 않으면 왼쪽 피연산자를 리턴한다.
const foo = null ?? 'Hello';
console.log(foo); // returns 'Hello'
const bar = 'Not null' ?? 'Hello';
console.log(bar); // returns 'Not null'
const baz = 0 ?? 'Hello';
console.log(baz); // returns 0
JavaScript
복사
️ 잠깐 연산자 짚고 넘어가기•
|| 연산자
expr1 || expr2
JavaScript
복사
연산자의 앞의 값이 truthy한 값이라면 expr1을 리턴하고 아니라면 expr2를 리턴한다.
•
&& 연산자
expr1 && expr2
JavaScript
복사
연산자 앞의 값 expr1이 truthy한 값이라면 expr2를 리턴하고 아니라면 expr1를 리런한다
?? 연산자와 || 연산자와는 다르다. 0은 javascript에서 falsy한 값이나, null이나 undefined는 아니다.
const cannotBeZero = 0 || 5;
console.log(cannotBeZero); // returns 5
const canBeZero = 0 ?? 5;
console.log(canBeZero); // returns 0
JavaScript
복사
6. ?. 를 사용한 optional chaining
TypeError: Cannot read property 'foo' of null 과 같은 오류를 자주 만나게된다. 이를 해결하기 위해 우리는 Optional Chaining을 사용할 수 있다.
const book = { id:1, title: 'Title', author: null };
// normally, you would do this
console.log(book.author.age) // throws error
console.log(book.author && book.author.age); // returns null (no error)
// with optional chaining
console.log(book.author?.age); // returns undefined
// or deep optional chaining
console.log(book.author?.address?.city); // returns undefined
JavaScript
복사
다음과 같이 함수에도 사용할 수 있다.
const person = {
firstName: 'Haseeb',
lastName: 'Anwar',
printName: function () {
return `${this.firstName} ${this.lastName}`;
},
};
console.log(person.printName()); // returns 'Haseeb Anwar'
console.log(persone.doesNotExist?.()); // returns undefined
JavaScript
복사
7. !!를 사용한 Boolean 타입 전환
!! 연산자를 사용하면 값을 빠르게 Boolean값으로 전환할 수 있다.
const greeting = 'Hello there!';
console.log(!!greeting) // returns true
const noGreeting = '';
console.log(!!noGreeting); // returns false
JavaScript
복사
8. String과 Integer 타입으로 전환하기
문자열을 빠르게 숫자로 전환시키고 싶다면 + 연산자를 사용하면 된다.
const stringNumer = '123';
console.log(+stringNumer); // returns integer 123
console.log(typeof +stringNumer); // returns 'number'
JavaScript
복사
반대로 숫자를 문자열로 빠르게 전환시키고 싶다면 + 연산자 다음에 빈 문자열 ""를 사용하면 된다.
const myString = 25 + '';
console.log(myString); // returns '25'
console.log(typeof myString); // returns 'string'
JavaScript
복사
위 방법들은 편리하지만 코드 가독성과 명확성이 떨어진다. 프로덕트에 사용하기보다는 알고리즘 문제 풀이에 사용하는 것이 적합하다.
9. 배열 안의 Falsy 값 확인하기
우리가 잘 알고있는 배열 메소드 filter, some, every를 사용해 간단하게 배열 안 요소들의 값이 falsy한 값인지 확인할 수 있다.
const myArray = [null, false, 'Hello', undefined, 0];
// filter falsy values
const filtered = myArray.filter(Boolean);
console.log(filtered); // returns ['Hello']
// check if at least one value is truthy
const anyTruthy = myArray.some(Boolean);
console.log(anyTruthy); // returns true
// check if all values are truthy
const allTruthy = myArray.every(Boolean);
console.log(allTruthy); // returns false
JavaScript
복사
작동원리
myArray.filter(val => Boolean(val));
myArray.filter(Boolean);
// 둘 다 동일한 코드
JavaScript
복사
+
그렇다면 배열 안의 숫자들을 문자열로 변경할 때도 적용할 수 있지 않을까? 가능
const numArray = [1, 2, 3, 4, 5];
const result = numArray.map(String);
console.log(result); // ['1', '2', '3', '4', '5']
JavaScript
복사
10. 배열 안의 배열을 1차원 배열로 만들기
flat 메소드를 사용해 배열 안의 배열을 다 열어 1차원 배열로 만들 수 있다.
const myArray = [{ id: 1 }, [{ id: 2 }], [{ id: 3 }]];
const flattedArray = myArray.flat();
// returns [ { id: 1 }, { id: 2 }, { id: 3 } ]
JavaScript
복사
또한 flat을 적용할 깊이를 설정할 수 있다.
Thanks for reading to the end. I hope you found these tricks useful. Feel free to add any JavaScript tricks of your own in the comments, for me and others!
JavaScript
복사
+ ETC
변수 교환 트릭
let guest = "Jane";
let admin = "Pete";
// 변수 guest엔 Pete, 변수 admin엔 Jane이 저장되도록 값을 교환함
[guest, admin] = [admin, guest];
alert(`${guest} ${admin}`); // Pete Jane
JavaScript
복사