[JavaScript] JavaScript 기본 다지기

오늘은 JavaScript를 접한 나를 위해 기본을 한 번 다져볼 것이다.

---

유의사항

- JavaScript는 자료형을 쓰지 않아도 된다.

동적 타입을 지원해주기 때문.

같은 변수에 서로 다른 값을 넣어도, 에러가 나지 않고 값과 타입이 변한다.

 

- 변수로는 var와 let이 있다. 그러나, 일반적으로 let을 많이 사용한다.

var는 재선언이 가능해서, 변수가 어디에 선언되어 있는지 판단하기가 어렵기 때문에

프로그램상의 오류를 일으킬 수 있어서 잘 사용하지 않는다.

 

- 상수로는 const가 있다. 상수는 변하지 않고 일정한 값을 갖는 수를 의미

상수로 지정한 후에는 나중에 값을 바꿀 수 없다.

 

변수

let으로 선언

> let apple = 'yummy'

 

상수

const로 선언

> const arr = [ 1, 2, 3 ]

 

---

숫자로 구성된 배열 정렬

배열을 만든다

> const arr = [4, 8, 2, 7, 6, 1, 10]

 

배열을 정렬하는 함수 toSorted

람다 함수식을 사용하여, 오름차순으로 정렬한다.

> const arr2 = arr.toSorted((a, b) => a - b)

 

(+) 만약 내림차순 정렬이라면?

> cosnt arr2 = toSorted((a, b) => b - a)

<ul class="test1"></ul>

    <script>
        const arr = [4, 8, 2, 7, 6, 1, 10]
        console.log(arr)

        // const arr2 = arr.toSorted((a, b) => { return a - b })
        const arr2 = arr.toSorted((a, b) => a - b)
        console.log(arr2)

        const test1 = document.querySelector('ul.test1')
        arr2.forEach((num) => {
            test1.innerHTML += '<li>' + num + '</li>'
        })
    </script>
    
</body>
</html>

 

결과

• 1
• 2
• 4
• 6
• 7
• 8
• 10

---

문자열 배열 정렬

자바스크립트는 문자열도 크기 비교가 가능하다.

 

정렬 기준 함수를 전달하지 않아도, 문자열로 정렬해주지만 이후 객체 혹은

HTMLElement를 정렬하려면 직접 정렬 기준식을 작성할 줄 알아야 한다.

 

정렬함수에 전달되는 콜백함수는 정수를 반환한다.

반환되는 정수가 0보다 큰지, 작은지 판별하여 정렬을 수행한다.

따라서 작성하는 콜백함수에는 항상 1 혹은 -1을 반환할 수 있도록 처리한다.

 

만약 비교기준이 정수라면 -연산을 이용하여 두 수의 차이만 반환해도 된다.

 

삼항연사자를 이용한 오름차순 정렬

> const arr2 = arr.toSorted((a, b) => {return (a > b) ? 1 : -1 })

 

(+) 만약 내림차순 정렬을 하려면? 

->   const arr2 = arr.toSorted((a, b) => {return (a < b) ? 1 : -1 })

 <ul class="test"></ul>

    <script>
        const arr = ['유빈', '유진', '현웅', '민정']
        // 위 배열을 정렬하여 ul.test에 출력하세요

        console.log('apple' > 'banana') // "apple".compareTo("banana") > 0
        console.log('apple' < 'banana') // "apple".compareTo("banana") < 0

        const arr2 = arr.toSorted((a, b) => {return (a > b) ? 1 : -1})

        const ul = document.querySelector('ul')
        arr2.forEach(e => ul.innerHTML += '<li>' + e + '</li>')
    </script>
    
</body>
</html>

 

결과

• 민정
• 유빈
• 유진
• 현웅

---

버튼을 클릭했을때 정렬되도록 하기 

 

버튼의 id 가 sortAsc 인 요소를 getElementById 를 이용하여 불러온다.

->  const sortAsc = document.getElementById('sortAsc')

 

정렬 대상을 불러온다.

->  const ul = document.querySelector('ul')

 

CSS선택자로 모든 요소를 NodeList 형태로 불러온다.

->  const liList = document.querySelectorAll('ul > li')

 

NodeList타입에는 sort()가 없기 때문에, 배열로 바꿔준다.
->   const liArray = Array.from(liList)

 

정렬을 수행할 대상들은 <li> 이고, 그 기준은 <li>의 내부 텍스트이다.
->    const resultArray = liArray.toSorted((a, b) => { return a.innerText > b.innerText ? 1 : -1 })

 

정렬을 수행했지만 스크립트내부에서만 적용되기 때문에

문서에 반영하기 위해 appendChild를 수행한다.

기존에 있는 요소이므로, 추가하지 않고 자리만 바꾼다.

->   resultArray.forEach(e => ul.appendChild(e)) 

<ul>
        <li>유빈</li>
        <li>민정</li>
        <li>진호</li>
        <li>재영</li>
        <li>민서</li>
        <li>형주</li>
    </ul>
    <div>
        <button id="sortAsc">오름차순 정렬</button>
    </div>

    <script>
        const sortAsc = document.getElementById('sortAsc')

        const ul = document.querySelector('ul')

        sortAsc.onclick = function() {
            const liList = document.querySelectorAll('ul > li')

            const liArray = Array.from(liList)

            const resultArray = liArray.toSorted((a, b) => {
                return a.innerText > b.innerText ? 1 : -1
            })

            console.log(resultArray)

            resultArray.forEach(e => ul.appendChild(e)) 
        }
    </script>
    
</body>
</html>

 

---

아직 자바스크립트는 익숙치 않은 언어이지만 나름 재미도 있고, 별로 어렵게 느껴지지 않아서 다행이다.