자바스크립트에서 언어 차원에서 지원하는 문법

자주 쓰이는 자료구조인 객체와 배열을 적은 코드로 쉽게 할당할 수 있게 해준다.

 

간단한 사용 예시

//단순히 scope를 나누기 위함
function scope1(){
    const arr = [1,2,3];
    const data1 = arr[0];
    const data2 = arr[1];
    const data3 = arr[2];
    console.log(`예전 방식`,data1,data2,data3);
    //배열분해할당
    const [a,b,c] = arr;
    console.log(`신 방식`,a,b,c);
}
scope1();

자동으로 매핑되어 할당된 것을 볼 수 있다.

 

크기가 다른 경우



function scope2(){
    const arr1 = [1,2,3,4,5];
    const arr2 = [1,2,3];
    const [a1, a2, a3] = arr1;
    const [b1, b2, b3, b4, b5] = arr2;
    console.log(`배열 요소가 더 많은 경우`,a1,a2,a3);
    console.log(`변수가 더 많은 경우`, b1,b2,b3,b4,b5);
}


할당할 수 있는 만큼 잘 할당된 것을 볼 수 있다.

 

활용



//활용, Arguments
function scope3(a1,a2,a3){
    const [b1,b2,b3] = Array.from(arguments);
    console.log(b1,b2,b3);
}
scope3(1,2,3);
//활용, 나머지 연산자
function scope4(...args){
    const [b1,b2,b3] = args;
    console.log(b1,b2,b3);
}
scope4(1,2,3);


주의사항



//활용, Arguments 주의사항
function scope5(a1 = 1,a2 = 2,a3 = 3){
    console.log(arguments);
    const [b1,b2,b3] = Array.from(arguments);
    console.log(b1,b2,b3);
    console.log(a1,a2,a3);
}
scope5();

기본값을 활용하는 경우 위와 같이 원하던 동작 대로 동작하지 않는다.

 

객체분해할당

배열의 경우도 분해할당이 유용하지만 더 유용한 것은 객체분해할당이다.

 

매개변수

메서드 혹은 함수에서 좋은 매개변수 숫자는 몇 개 일까?

"이펙티브 자바" 책에 따르면 좋은 매개변수 숫자는 0개이다.

그 다음은 1개 ,그 다음은 2개 이다.

 

매개변수 2개 부터는 인자의 순서도 신경을 써야하기 때문에 사용성이 제곱으로 어려워 진다.

즉, 인자가 2개 이상부터는 인자 간 순서에 의존하게 된다.

 

이 점은 알고 다음 예시를 보자

//객체분해할당
class Car {
    constructor(year, model, gas){
        [this.year, this.model, this.gas] = arguments;
    }
}
console.log(new Car(2023,'그렌저','가솔린'));
//사용자가 실수로 순서를 잘못 넣음
console.log(new Car('그렌저',2023,'가솔린'));

데이터가 잘못 들어간 것을 볼 수 있다.



//객체분해할당, 매개변수 순서 의존 제거
class Car2 {
    constructor({year = '2022', model = '소나타', gas = '가솔린'} = {}){
        this.year = year;
        this.model = model;
        this.gas = gas;
    }
}
console.log(
    new Car2({
        year : 2023 ,
        model : '그렌저' ,
        gas : '가솔린' ,
    })
);
console.log(
    new Car2({
        gas : '가솔린' ,
        model : '그렌저' ,
        year : 2023 ,
    })
);
console.log(
    new Car2()
);

객체의 특성을 사용해 인수의 순서 의존을 제거했다.

추가로 기본값을 주어 안정성을 높였다.

 

https://ko.javascript.info/destructuring-assignment

저작자표시

'개발 > 자바스크립트' 카테고리의 다른 글

배열은 객체?  (0) 2023.08.18
반올림 함수  (0) 2023.04.10
평균 구하기 주의점  (0) 2023.01.21
자바스크립트 중복제거 - 2  (0) 2022.12.15
자바스크립트 중복 제거  (0) 2022.12.12

배열은 객체인 지 확인하기

배열은 사실 객체라고 하는데, 확인해보기

 

//배열 선언
const arr = [];
//객체 확인
console.log(typeof arr);
object

실제로 타입이 object인 것을 볼 수 있다.

 

객체처럼 다뤄보기1

const funcKey = function() {}
class classKey{}
//배열 객체처럼 다루기 블록 접근
arr['string'] = '리터럴';
arr[{}] = '객체';
arr[[]] = '배열';
arr[()=> 'a'] = '화살표함수';
arr[funcKey] = '함수';
arr[classKey] = '클래스';
console.log(
    Object.entries(arr)
);
[
  [ 'string', '리터럴' ],
  [ '[object Object]', '객체' ],
  [ '', '배열' ],
  [ "()=> 'a'", '화살표함수' ],
  [ 'function() {}', '함수' ],
  [ 'class classKey{}', '클래스' ]
]

배열로 객체이므로, Object.entries() 메서드가 동작한다.

toString() 결과가 key가 되고 있다.

 

객체처럼 다뤄보기2

//배열 객체처럼 다뤄보기2, 점 접근
const arr2 = [];
arr2.name = "홍길동";
arr2.age = 10;
console.log(arr2);
[ name: '홍길동', age: 10 ]

 

 

객체처럼 다룬 배열을 배열처럼 사용해보기

console.log(arr.length);
arr.pop();
arr.pop();
arr.unshift();
arr.unshift();
console.log(arr);
0
[
  string: '리터럴',
  '[object Object]': '객체',
  '': '배열',
  "()=> 'a'": '화살표함수',
  'function() {}': '함수',
  'class classKey{}': '클래스'
]

기존 데이터가 배열로 인식을 안 해 length로 안 잡히고 있다.

 

arr[9] = 10;
arr[5] = 6;
console.log(arr.length);
console.log(arr.toString());
console.log(arr.join(","));
10
,,,,,6,,,,10
,,,,,6,,,,10

객체라고 가정하고, key가 숫자인 경우만 인식하여 동작하고 있다.

 

응용해보기

배열이 객체 관련된 메서드가 적용되므로, 동일한 함수를 만들면 같이 사용이 가능할 것

//응용해보기
const obj = {};
obj['string'] = '리터럴';
obj[{}] = '객체';
obj[[]] = '배열';
obj[()=> 'a'] = '화살표함수';
obj[funcKey] = '함수';
obj[classKey] = '클래스';
console.log(obj);
console.log("\n\n\n")
//배열과 함수를 받아 순회하는 함수
function each(objOrArr){
    const keys = Object.keys(objOrArr);
    keys.forEach(key => console.log(key, objOrArr[key]));
}
each(arr);
each(obj);


5 6
9 10
string 리터럴
[object Object] 객체
 배열
()=> 'a' 화살표함수
function() {} 함수
class classKey{} 클래스
string 리터럴
[object Object] 객체
 배열
()=> 'a' 화살표함수
function() {} 함수
class classKey{} 클래스

 

결론

배열은 객체처럼 다룰 수 있다.

객체처럼 쓰는 사람은 없겠지만...

확실하진 않지만, 객체는 요소에 접근할 때 아마도 해시를 사용할 것 같고,

배열은 말 그대로 배열로 만들어 인덱스로 접근하는 것 같다.

 

 

 

https://ko.javascript.info/array#ref-1135

https://www.udemy.com/course/clean-code-js/  - 배열 - 배열은 객체다.

저작자표시

'개발 > 자바스크립트' 카테고리의 다른 글

구조 분해 할당  (0) 2023.08.21
반올림 함수  (0) 2023.04.10
평균 구하기 주의점  (0) 2023.01.21
자바스크립트 중복제거 - 2  (0) 2022.12.15
자바스크립트 중복 제거  (0) 2022.12.12 
function round(number, position){
    if(typeof number !== 'number') return number;
    if(Number.isNaN(number) || !Number.isFinite(number)) return number;
    if(typeof position !== 'number') return number;
    if(Number.isNaN(position) || !Number.isFinite(position)) return number;
    if(Math.abs(position)>15) return number;
	// 능력것 유효성 추가...
    
    var dp = 1;

    if(position == 0) return Math.round(number);
    
    for (let i = 0; i < Math.abs(position); i++)  dp *=10;

    if(position<0) return Math.round(number/dp)*dp; 
    else return Math.round(number*dp)/dp; 
}

 

<!DOCTYPE html>
<html lang="en">
<script src="round.js" ></script>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>function test</title>
</head>
<body>
    
</body>
<script>
    const number = 123456789.123456789;
    console.log(number);
    console.log('round(number)', round(number));
    console.log('round(number)', round(number,0));
    console.log('round(number,-1)', round(number,-1));
    console.log('round(number,-5)', round(number,-5));
    console.log('round(number, 1)', round(number,1));
    console.log('round(number, 5)', round(number,5));
    console.log(round('string'));
    console.log(round(number , 'string'));
    console.log(round(null),round(Infinity),round(NaN));

</script>

</html>

테스트

 

 

 

 

 

 

저작자표시

'개발 > 자바스크립트' 카테고리의 다른 글

구조 분해 할당  (0) 2023.08.21
배열은 객체?  (0) 2023.08.18
평균 구하기 주의점  (0) 2023.01.21
자바스크립트 중복제거 - 2  (0) 2022.12.15
자바스크립트 중복 제거  (0) 2022.12.12

쇼핑몰을 개발하는 중이라고 가정하자

고객이 배송율 현황을 만들어 달라고 했다.

헤더 행 당일배송 익일배송 총배송 당일배송률
데이터행...        
데이터행...        
데이터행...        
마지막 집계 행        

 

위와 같은 집계 그리드 중 마지막 집계 행에 당일배송율에 대한 주

의점을 알아보자

//DB에서 뽑힌 데이터 갯수 설정
const ROWNUM = 10;
//DB에서 뽑힌 데이터라 가정
var dbData = [];
for (let i = 0; i < ROWNUM; i++) {
    var val1 = Math.floor(Math.random() * 100)+1;
    var val2 = Math.floor(Math.random() * 50)+1;
    var sum = val1+val2;
    var per = Math.round((val1/sum*10000))/100;
    dbData.push({당일배송 : val1, 익일배송: val2 , 총배송 : sum, 당일배송률 : per});
}

console.log(dbData);

위와 같은 데이터에서 마지막 집계 행에 당일배송률에 대한 평균값을 구해야한다.

 

당일배송률 평균을 구하기 위해 "당일배송률 합계 / 전체행 수" 로 나눴다.

var count = 0;
var 잘못된당일배송률평균 = dbData.map(row=>{
    count++;
    return row.당일배송률;
}).reduce((a,b)=>a+b) /count;

console.log('잘못된당일배송률평균',Math.round(잘못된당일배송률평균*100)/100);

과연 올바른 값일까?

 

잘못된 값이다. 당일배송률은 이미 가공된 데이터이다.

그 가공된 데이터에 대한 평균값을 구한 것이지, 전체 모수로하는 당일배송률 평균이 아니다. 

 

올바른 값을 알아보자

 

var 총배송합계 = dbData.map(row=>{
    return row.총배송;
}).reduce((a,b)=>a+b);
console.log('총배송합계',총배송합계);


var 당일배송합계 = dbData.map(row=>{
    return row.당일배송;
}).reduce((a,b)=>a+b);
console.log('당일배송합계',당일배송합계);


var 익일배송합계 = dbData.map(row=>{
    return row.익일배송;
}).reduce((a,b)=>a+b);
console.log('익일배송합계',익일배송합계);

//전체 행 수
var count = 0;
var 잘못된당일배송률평균 = dbData.map(row=>{
    count++;
    return row.당일배송률;
}).reduce((a,b)=>a+b) /count;

console.log('잘못된당일배송률평균',Math.round(잘못된당일배송률평균*100)/100);

console.log('제대로된당일배송률평균',Math.round(당일배송합계/총배송합계 *10000)/100);

잘못된당일배송률평균은 당일배송율평균 간 평균값이 계산된 것이다.

반면에 제대로된당일배송률평균은 전체를 하나의 행으로 집계하고 그 결과를 가공해 평균값을 만들었다.

따라서 전체를 대표하는 평균값이 계산된 것이다.

평균구하기주의점.html
0.00MB

 

 

 

 

 

 

 

 

저작자표시

'개발 > 자바스크립트' 카테고리의 다른 글

구조 분해 할당  (0) 2023.08.21
배열은 객체?  (0) 2023.08.18
반올림 함수  (0) 2023.04.10
자바스크립트 중복제거 - 2  (0) 2022.12.15
자바스크립트 중복 제거  (0) 2022.12.12

See the Pen Untitled by rkwhr0010 (@rkwhr0010) on CodePen.

 

저작자표시

'개발 > 자바스크립트' 카테고리의 다른 글

구조 분해 할당  (0) 2023.08.21
배열은 객체?  (0) 2023.08.18
반올림 함수  (0) 2023.04.10
평균 구하기 주의점  (0) 2023.01.21
자바스크립트 중복 제거  (0) 2022.12.12

See the Pen Untitled by rkwhr0010 (@rkwhr0010) on CodePen.

그리드가 따로 존재하고 거기서 명확히 어떤 행이 중복인지 알려주는 코드,

단순히 중복만 판단하는 것은 더 간단하다.

어떤 행이 중복인지 알아야하는 이유는 해당 그리드 행으로 포커스를 가도록 처리하는 경우가 많기 때문

 

다음에는 이 코드를 함수화.

 

저작자표시

'개발 > 자바스크립트' 카테고리의 다른 글

구조 분해 할당  (0) 2023.08.21
배열은 객체?  (0) 2023.08.18
반올림 함수  (0) 2023.04.10
평균 구하기 주의점  (0) 2023.01.21
자바스크립트 중복제거 - 2  (0) 2022.12.15

+ Recent posts

티스토리툴바