Medium - JavaScript Methods That Every Beginner and Pro Should Use
in Trend
Trend 파악을 위한 Medium 기고문 포스팅 - 입문자와 전문가 모두가 사용해야 하는 자바스크립트 메소드; 좀 더 깔끔하고 효과적인 코드를 작성하기 위해 자주 사용되는 자바스크립트 메소드를 모아봤습니다.
Photo by Tyler Franta on Unsplash
자바스크립트는 설명이 필요없는 언어입니다. 69% 가량의 개발자들이 매일 사용하고 있으며 현존하는 가장 인기있는 언어중에 하나라고 말할 수 있습니다. JetBrains에서 실행한 2019년 개발자 에코시스템 설문 조사에 따르면 자바스크립트와 관련 프레임워크들이 투표의 최상위권을 차지했습니다. ES7과 ECMAScript 2016이 나와있지만 대다수의 개발자들은 아직도 ES6이나 ES5를 사용해서 코드를 작성하고 있습니다. 이 기사에서는 ES2016에서도 사용가능한 유용한 자바스크립트 메소드들에 대해서 알아보겠습니다.
Arrays
배열은 자바스크립트에서 가장 많이 쓰이는 데이터타입으로 배열을 쉽게 조작할 수 있는 매우 좋은 메소드들이 많이 있습니다.
1.find()
주어진 배열에 특정 값이 있는지 찾는 것은 우리가 배열에 대해 수행하게 될 가장 기본적인 작업 중 하나입니다. 자바스크립트에서 find 메소드가 해당 작업을 수행해주며 배열에서 뭔가를 찾을 때마다 루프문을 작성하지 않아도 됩니다.
const numbers = [1, 2, 3, 4, 10];
numbers.find( x => x === 4 );
numbers.find( x => x > 5 );
const itemPresent = numbers.find( x => x === 4);
return itemPresent ? true : false;
위의 예제는 조건문을 이용해 값이 존재하는지 확인할 수 있습니다. 위의 코드에서는 배열에 4가 있다면 참을 리턴하고 그렇지 않으면 false를 리턴합니다. 매우 짧고 간단하죠, 그리고 객체의 배열에 대해서도 같은 작업을 수행할 수 있습니다.
const people = [
{
name: 'test1', id: 1, email: 'test1@test.com'
},
{
name: 'test2', id: 2, email: 'test2@test.com'
},
{
name: 'test3', id: 3, email: 'test3@test.com'
},
{
name: 'test4', id: 4, email: 'test4@test.com'
},
]
const person2 = people.find( person => person.id === 2 )
console.log(person2);
2.findIndex()
위의 메소드는 배열에 값이 있다면 해당 인덱스를 리턴하고 그렇지 않다면 -1을 리턴합니다.
const numbers = [1, 2, 3, 4, 10];
numbers.findIndex( x => x === 4 )
numbers.find( x => x === 15 )
- find나 findIndex 메소드는 처음으로 일치하는 값에 대해서 리턴을 합니다.
3.filter()
주어진 조건을 만족하는 새로운 배열을 리턴합니다.
const numbers = [1, 2, 3, 4, 10]
const evenNumbers = numbers.filter( x => x % 2 === 0 )
console.log(evenNumbers)
4.includes()
해당 메소드는 배열이 주어진 값을 가지고 있다면 참을 아니라면 거짓을 리턴합니다.
const cars = ['BMW', 'Toyota', 'Tesla', 'Audi']
console.log(cars.includes('Toyota'))
console.log(cars.includes('mercedes'))
5.Spread operator
스프레드 연산자는 다양한 목적으로 사용할 수 있는 것으로 배열을 복사하거나 두 배열을 연결하는 데 사용합니다.
const cars = ['BMW', 'Toyota', 'Tesla', 'Audi']
let newCarsArray = [...cars];
console.log(newCarsArray)
// ['BMW', 'Toyota', 'Tesla', 'Audi']
const array1 = [1,2,3]
const array2 = [4,5]
const array3 = [...arr1,...arr2]
console.log(array3)
// [ 1, 2, 3, 4, 5 ]
Strings
이제 자바스크립트에서 사용가능한 문자열에 관한 메소드 중 가장 일반적으로 쓰이는 것에 대해 알아봅시다. 여기서 가장 중요한 것은 이런 메소드들이 매우 예민해서 주의해서 쓰셔야 한다는 것입니다.
1.startsWith()
여러분의 추측대로 특정 부분문자열로 주어진 문자열이 시작하게 되면 참을 리턴합니다.
const str = 'Hello world, welcome to the JavaScript.'
console.log(str.startsWith('Hello')) //true
console.log(str.startsWith('Help')) //false
2.endsWith()
endsWith 메소드도 존재하며 주어진 문자열이 특정 서브스트링으로 끝나게 되면 참을 리턴을 하게 됩니다.
3.includes()
includes 메소드는 주어진 문자열에 특정 문자열이 일치한다면 참을 리턴합니다.
Objects
자바스크립트에서는 객체가 왕입니다. 객체를 이해했다면 자바스크립트를 이해한 것입니다. 자바스크립트의 모든 것은 객체로 간주될 수 있습니다. 그러나 여기서는 일반적인 JSON 객체에 대한 메소드를 살펴볼 것입니다.
Creating and copying objects
Object.assign()메소드는 자신의 열거 가능한 자신의 모든 프로퍼티 값을 목표 객체로 복사하는 데 쓰입니다.
const dest1 = { a: 1}
const source = { b: 2, c: 3}
Object.assign(dest, source)
console.log(dest) // {a: 1, b: 2, c: 3}
const dest2 = { aa: 1}
const source1 = { bb: 2, cc: 3}
const source2 = { dd: 4, ee: 5}
Object.assign(dest2, source1, source2)
console.log(dest2) // {aa: 1, bb: 2, cc: 3, dd: 4, ee: 5}
Summary
- 자주 쓰이는 자바스크립트 메소드 정리
