저번 포스팅에 리스트 데이터 형식은 배열이 좋다는 말을 했었는데, 오늘 포스팅할 함수도 배열에 사용할 수 있는 함수입니다. 오늘은 두 가지의 함수를 비교하면서 알아보려고 합니다.
SOME vs EVERY
이 두 가지의 함수는 배열 안에 값을 검증하는 용도로 자주 쓰이는데 살펴보도록 하겠습니다.
1. some
배열 안에 있는 값들을 순회하면서 TRUE인 값이 하나라도 있으면 순회를 멈추고 함수는 TRUE를 리턴하고 종료됩니다. some이라는 단어에 어울리게 무엇인가 하나라도 있으면 참이 되는 함수입니다. 만약 참이 안 나오면 마지막 값까지 순회를 하고 끝까지 TRUE가 없으면 함수는 FALSE를 리턴하고 종료됩니다.
let numbers = [ 1, 2, 3, 4, 5 ]
// example 1
let result = numbers.some(function(value) {
console.log(value)
return false
})
console.log(`result is ${result}`)
// 결과
// 1
// 2
// 3
// 4
// 5
// result is false
// example 2
let result = numbers.some(function(value) {
console.log(value)
if ( value === 3 ) {
return true
}
return false
})
console.log(`result is ${result}`)
// 결과
// 1
// 2
// 3
// result is true
배열 안에 어떤 값이 하나라도 존재하는지 확인하는 함수로 리턴 타입은 BOOLEAN입니다. 하나라도 있으면 TRUE를 리턴하는 게 간절함이 느껴지는 함수네요.
1. every
배열에 있는 값 중에 하나라도 FALSE가 있으면 FALSE를 리턴하고 종료됩니다. 모든 값이 TRUE여야만 함수가 TRUE를 리턴합니다. 모든 값이 참이어야만 참을 리턴하는, 모든 값이 조건을 만족하는지 체크하는 용도로 자주 쓰입니다.
let numbers = [ 1, 2, 3, 4, 5 ]
// example 1
let result = numbers.every(function(value) {
console.log(value)
return true
})
console.log(`result is ${result}`)
// 결과
// 1
// 2
// 3
// 4
// 5
// result is true
// example 2
let result = numbers.every(function(value) {
console.log(value)
if ( value === 3 ) {
return false
}
return true
})
console.log(`result is ${result}`)
// 결과
// 1
// 2
// 3
// result is false
중간에 만족하지 않는 값이 하나라도 있으면 FALSE를 리턴하고 종료됩니다. every라는 단어에 걸맞게 모든 값의 통일을 중시하네요. All or nothing! 극단적인 함수입니다.
이번 포스팅에서는 some과 every함수를 다뤄보았습니다. 배열에서 사용할 수 있는, 값을 검증하는데 유용한 함수였습니다. 다음에는 값을 검증하는 것이 아닌 값을 찾는데 필요한 함수를 포스팅할게요!
자바스크립트로 코딩을 하다 보면 리스트 형식의 데이터를 다뤄야 하는 일이 당연히 많습니다. 그리고 그 데이터를 다루는 데 있어서 서버에서 어떤 식으로 보내줄지 항상 고민을 하는데요, 그냥 결론부터 말씀드립니다.
가능하면 배열안에 객체를 넣으세요.
앞으로 자바스크립트를 쓰면서 코딩을 하게 되면 filter, find, map, sort 등 리스트에 특화된 많은 함수들을 만날 수 있게 됩니다. 그런데 함수들을 찾아보면 알겠지만 배열일 경우에 사용하는 함수들입니다. 아마 코딩 좀 해본 분들은 "당연히 리스트 형식의 데이터는 배열 형식이지 다른 게 있나?"라고 하겠지만 초보의 눈에서 보면 당연한 것이 아니게 됩니다. 제가 그랬거든요.
예전에 코딩을 독학하면서 만들었던 첫번째 프로젝트에서 리스트를 다룬 제 방법을 보여드립니다.
어떤 고객의 정보, 해당하는 코드, 코드에 대한 점수를 객체로 표현했습니다. 위 코드는 짧게 해 놓았지만 사실 20개가 넘고 values의 값도 간단한 배열로 표현했지만 7~8가지 값을 가지고 있었어요. 그리고 데이터베이스에는 각 code값을 설명하는 데이터가 들어있습니다.
그 당시 생각으로는 이제 데이터베이스로 codes값만 보내면 따로 가공할 필요없이 바로 설명하는 값을 얻을 수가 있고, 리스트를 만드는 데 있어서도 codes값을 for문으로 돌려서 쭉 표현하고 values값은 index값으로 가져올 수 있으니 되겠다!라는 생각이었습니다.
for ( let i=0; i < informaton.codes.length; i++ ) {
let code = information.codes[i]
let value = information.values[i]
console.log( code, value)
}
사실 기능상으로는 문제가 없습니다. 구현하면서 values의 값이 있는지 체크해보는 함수가 늘어나서 그게 좀 짜증났지만 가능했었거든요. 그런데 이 리스트에서 특정한 값만 찾거나, 특정값만 삭제하는 작업을 할 때 혼돈이 찾아왔습니다. 누가 그랬죠? 시작이 반이라고? 제 생각엔 그 이상인거 같아요. 처음부터 뜯어고쳐야 했거든요.
만약 위 데이터를 배열로 만들었으면 어땠을까? 라고 생각하는 순간 새로운 세상이 열렸습니다.
언뜻보면 무슨 차이인가 싶겠지만 이제 함수를 사용함에 있어서 객체 하나를 찾아서 그 값을 찾고 수정하고 삭제하는데 상당히 편해질 것이라는 것을 예상할 수 있습니다. 이전 데이터에서는 index를 찾아서 각각의 배열마다 값을 수정해야 하고 확인해야 하는 반면에, 지금 데이터는 find함수를 통해서 바로 찾을 수 있고, filter를 이용해서 걸러낼 수도 있습니다.
왜 그런지 모르겠지만... 저 배열안에 있는 객체의 모습을 보면 기분이 좋아져요. 훗...
그리고 생각해봤습니다. 객체는 어떻게 표현되어야 하는 것일까? 예전 프로젝트에서는 그냥 Key값과 Value값을 갖는 데이터 표현방식, 또는 집합체라고 생각했었는데, 지금은 하나의 물건 또는 사람, 그 자체라는 생각을 합니다.
예를 들어 사람 A, B, C가 있다고 했을 때, 예전에는 A, B, C의 나이를 묶고, 성별을 묶어서 객체로 만들었습니다. 특정한 집합을 만들었죠. 그렇게 되면 나이가 어떤지, 성별이 어떤지 한눈에 들어오지만, 어떤 사람의 나이와 성별을 같이 생각해야 할 때는 복잡해지게 됩니다.
이제 A, B, C를 따로 객체 하나하나 만들게 되면, 사람 한 명 한 명을 바라볼 수 있고 누가 어떤지 확인이 쉬워집니다. 그런데 나이만 따로 알고 싶고, 성별만 알고 싶은 일이 생기는데, 그럴 때는 자바스크립트 함수가 일을 쉽게 할 수 있게 도와줍니다. 코드가 짧아지죠. 읽기 쉬워집니다.
코드 좀 해본 분이라면 당연히 알고있고, 자연스럽게 알게 되는 이 정보를 누군가는 궁금해하지 않을까 하면서 포스팅해봅니다.
자바스크립트로 코딩을 하다 보면 항상 배열 또는 문자열을 자르고 붙이는 일이 자주 생깁니다. 특히 배열이나 문자열을 자를 때는 slice 함수와 splice 함수는 항상 헷갈리게 되죠. paramete에 넣는 게 시작이 먼저인지 끝이 먼저인지, 반환 값이 배열인지 원래 배열을 수정하는 건지 매번 찾아보다 지쳐서 그냥 정리하게 되었습니다.
남들도 많이 포스팅해서 차고 넘치지만 내가 쓸 거 내가 정리한다 시리즈 1탄.
slice()vssplice()
▶ slice
▷ array.slice([begin[, end]])
☆ 반환 값 : 새로운 배열, 기존의 배열의 값을 수정하지 않는다.
① begin : 어디서부터 자를지 시작점을 정한다. 인덱스 값이다.
let arr = [1, 2, 3, 4, 5]
- 0일 경우 : 시작점부터 잘라 가져온다.
let result = arr.slice(0) //result : [1, 2, 3, 4, 5]
- 양수일 경우 : 인덱스(start값의 자리에 있는 배열 값)를 포함하고 값을 가져온다.
let result = arr.slice(2) //result : [3, 4, 5]
- 음수일 경우 : 배열의 마지막 값이 (-1)이다. (-2) 일 경우 배열의 마지막 두 개의 값을 잘라서 가져온다.
let result = arr.slice(-2) //result : [4, 5]
- undefined인 경우 : 0일 경우와 같다.
let result = arr.slice(undefined) //result : [1, 2, 3, 4, 5]
- 배열의 길이보다 숫자가 큰 경우 : 빈 배열을 반환한다.
let result = arr.slice(9 //result : []
② end : 어디까지 자를지 정한다. 인덱스 값이다. 생략이 가능하다. 생략할 경우 시작점부터 배열의 마지막까지 가져온다.
- 0일 경우 : 시작점이 어디든 빈 배열을 반환한다.
let result1 = arr.slice(1, 0) //result1 : []
let result2 = arr.slice(-1, 0) //result2 : []
let result3 = arr.slice(0, 0) //result3 : []
let result4 = arr.slice(10, 0) //result4 : []
let result5 = arr.slice(undefined, 0) //result5 : []
- 양수일 경우 : begin 인덱스 값은 포함, end 인덱스(end값의 자리에 있는 배열 값) 값은 제외하고 가져온다.
let result1 = arr.slice(0, 2) //result1 : [1, 2]
let result2 = arr.slice(undefined, 2) //result2 : [1, 2]
let result3 = arr.slice(-3, 5) //result3 : [3, 4, 5]
let result4 = arr.slice(-3, 1) //result4 : []
//result4의 경우 begin 인덱스의 위치보다 end 인덱스의 위치가 더 앞(왼쪽, 작은값)이라서 빈 배열 반환
- 음수일 경우 : (-2)일 경우 배열의 마지막 두 개의 값을 잘라서 버리고 나머지만 가져온다.
let result1 = arr.slice(0, -2) //result1 : [1, 2, 3]
let result2 = arr.slice(undefined, -2) //result2 : [1, 2, 3]
let result3 = arr.slice(-3, -5) //result3 : []
//result3의 경우 begin 인덱스의 위치보다 end 인덱스의 위치가 더 앞(왼쪽, 작은값)이라서 빈 배열 반환
let result4 = arr.slice(-3, 1) //result4 : [3, 4]
