js) code short & infomation #2311

# 코드 줄이기

if (변수 > 0 && 변수 < 5) {
    변수 = 0;
} else if (변수 > 5 && 변수 < 10) {
    변수 = 5;
} else if (변수 > 10 && 변수 < 15) {
    변수 = 10;
} else {
    변수 = 15;
}


// 위의 코드가 3번 반복되어서 너무 지저분해 보였다..
// 규칙을 찾아서 식을 만들어서 정의 한다

private 함수명() {
    let size = 전역변수.length ?? 0;
    let perSize = 4;
    if (window.innerWidth >= 2000) {
        perSize = 6;
    } else if (window.innerWidth >= 1802) {
        perSize = 5;
    }
    this.변수명2 = Math.floor(size / perSize) * perSize;
}

* 4,5,6 일때 등등 3번정도 반복되어야 하니 너무 지저분해 보였다.

해당부분을 해결할 식을 만들어서 간단하게 줄였다. (나빼고 다 천재만 있는 회사..ㅎㅎ)

 

# toLocaleString('ko-KR')

 

 NumberObject.toLocaleString([locales [, options]])

locales에 지역의 언어 태그를 입력한다. 

지정된 지역에서 사용하는 숫자의 표현방식으로 문자열로 리턴한다.

- 3자리마다 콤마를 찍구 싶어서 사용하였다.

 👀참조 : https://blog.munilive.com/posts/javascript-localization-with-toLocaleString.html

 

 

# 어떤값이 Y로 오면 true 를 주고 싶을 때

 

변수.value = data.데이터변수 == 'Y';     -> true가 나온다.

 

- 여태껏 변수.value = data.데이터변수 == 'Y' ? true : false; 이렇게 적은 나.. 역시나 현업이 짱이다!

- 가장 많이 쓸때는 로컬스트로지 값을 불러올때 Y가 아니더라도 어떤값이 있을때 true를 적고 싶다면 저 Y 부분만 해당값으로 바꾸면 된다.

 

# vue에서 html 태그로 직접 넣을 때 = v-html

 

v-html="함수명"  로 적고 

함수에 필요한 것을 적으면 html 코드로 들어간다. 참고 v-html은 template 에 적을 수 없다.

html 태그만 사용가능하다.

 

 

# 배열과 객체 

 

1. 배열 (Array)
var arr = new Array();
var arr = [];

👀참고  : https://velog.io/@surim014/%EC%9B%B9%EC%9D%84-%EC%9B%80%EC%A7%81%EC%9D%B4%EB%8A%94-%EA%B7%BC%EC%9C%A1-JavaScript%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-part-7-Arrays

2. 객체 (Object)

var user = new Object(); // "object constructor" syntax
var user = {}; // "object literal" syntax

- key / value 로 이루어짐
- 객체 리터럴 : 중괄호안에 key : value의 목록

👀참고 : https://velog.io/@surim014/%EC%9B%B9%EC%9D%84-%EC%9B%80%EC%A7%81%EC%9D%B4%EB%8A%94-%EA%B7%BC%EC%9C%A1-JavaScript%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-part-7-Object-35k01xmdfp#%EA%B0%9D%EC%B2%B4-object

 

반응형

 

 

♦️ 콘솔창에 Array.prototype 이나 Object.prototype 를 치면 해당 배열이나 객체에서 사용할 수 있는 메서드가 뜬다. 🥲

- 타입을 모른다면 콘솔창에 (typeof  변수명)  이런식으로 치면 타입이 나온다.

 

 

# Nullish coalescing operator (물음표 두개 조건문 ?? )

 

변수1 = 변수2 ?? 변수1;

- 변수 1에 값을 변수 2로 대체할 것인대 변수2가 없을경우에는 ?? 우측에 있는 값(현재는 변수1)으로 대체한다.
- undefined나 null값 들어왔을때 default value를 셋팅하려고 사용

- 최신버전이 아닐경우 안먹을 수 있다 . 이럴경우  변수1 = typeof 변수2 != 'undefined'  ? 변수2 : 변수1;  로 써야 한다.♦️

+++최신문법 참조 👀 : https://inpa.tistory.com/entry/JS-%F0%9F%9A%80-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%B5%9C%EC%8B%A0-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC-ES6-ES12

 

 

#  새로운 객체 만들기

 

let 새로운객체 = [];

배열.map((배열하나하나, index) => {   
    새로운객체.push({
        ...배열하나하나, // 기존 배열안에 값들 (전개 연산자)
        객체키값: (조건문 ?
                  {객체키값: 객체 벨류값)
    });
})

 

- 기존 배열이 있는대 거기에 어떠한 값을 합치려고 할때 새로운 객체를 만들고 기존 배열을 map으로 돌린 후 새로운객체에 원하는 모양으로 push 하면 된다.

 

# sort 내림차순

 

변수명.sort(function(a,b){
    return b - a;
})

// 올림차순은 반대로~

 

 

# 객체를 배열로 만들기

 

const 새로만들어쓸려는변수 = computed(() => {
    let a = 오브젝트;
    const b = {}; // 새로 만들려는 배열
    for (let i = 0; i < a.length; i++) {
        b[a[i].bjIdx] = a[i];
    }
    return b;
});




// 객체하나의 값에 그 객체안의 배열의 값을 더하고 싶을 때

const 총점수 = computed(() => {
    const score = {};
    팀들.filter((team) => {
        score[team.항목명] = team.score;
        team.개인.filter(item => {
            score[team.항목명] += 다른곳에있는개인리스트[item].score;
        });
    });
    return score;
});

 

- 위의 식은 뷰의 computed 지만 안의 식을 보면 이해가 간다.

- 객체가 있을때 내가 원하는 배열로 만들때 사용하면 유용하다.

- 객체나 배열에서 타고 타고 들어가서 원하는 것을 계산할 때 사용한다. (사실 이부분 생각하기 쉽지않다..이것이 개발자의 길...)

 

 

# 남은시간 계산기

 

const 남은시간계산기 = computed(() => {
    let time;
    let 정해진시간변수 = dayjs(정해진시간).unix();
    if (!isNaN(변수명1)) {
        let 남은시간 = 정해진시간변수 - 현재시간변수명;
        if(남은시간 > 0){
            const sec = 남은시간 % 60;
            const min = Math.floor(남은시간 / 60) % 60;
            const hour = Math.floor(남은시간 / 3600);
            time = `${hour < 10 ? '0' : ''}${hour}:${min < 10 ? '0' : ''}${min}:${sec < 10 ? '0' : ''}${sec}`
        } else{
            time = "00:00:00";
        }
    }
    return time;
});

 

- 현재시간은 setInterval 로 1초마다 카운트 해주면 된다.

 

 

 

 

 

+++++++  이번프로젝트에서 배운 부분은 전부 내가 원하는 값으로만 만들어 쓸려고 배열에서 객체로 바꾸거나 배열에서 객체로 만들어 쓰거나 이부분을 너무 많이 배웠다

++++++  그리고 이값을 뽑아낼때 계산하는 방식.. 앞으로 도면을 그려본후 하나하나 바꿔가면서 짜보면 좋을 거 같다.

++++++ 학원에서 map, filter만 하다가 현업에서의 이러한 방식에 놀랐지만 앞으로 해내 갈것이다.