[JS] JS의 특징과 문법 정리

JS는 아직 미숙하다.. 폼에서 ajax써볼때 느낌 😂 그래서 JAVA 개발자의 측면에서 알면 좋을만한 JS의 특징과 문법 정리를 해보고자한다.

자바랑은 좀 다른 자바의 특징들

JS는 자동 형전환을 지원한다

<script>
    let a=10;
    if(a)
    {
        console.log("**********");
    } else{
        console.log("error1");
    }

    if(a=="10")
    {
        console.log("==========");
    } else{
        console.log("error2");
    }
    
    if(a==="10")
    {
        console.log("%%%%%%%%%%");
    } else{
        console.log("error3");
    }
    
</script>

JS는 오버로딩이 없다

<script>
// 매개변수가 숫자인 경우에만 두 숫자를 더하는 함수
function add(a, b) {
    if (typeof a === 'number' && typeof b === 'number') {
        return a + b;
    } else {
        return "숫자를 입력해주세요.";
    }
}

console.log(add(2, 3)); // 출력: 5
console.log(add("2", 3)); // 출력: 숫자를 입력해주세요.
console.log(add(2)); // 출력: 숫자를 입력해주세요.
</script>

• 대신 유사 매개변수에 디폴트값을 줄 수 있다

JS는 null 이외에 undefined가 있다

<script>
    let a;
    let b= null;
    console.log("a = ", a);
    console.log("b = ", b);

    if(a==undefined){
        console.log("undefined");
    }else{
        console.log("null");
    }
    
</script>

• null이 아무것도 안담아 둔 휴지칸 이면 undefined는 휴지칸이 통째로 없다는것
• JS에서는 어떤 타입의 변수간에 없다 = undifined 라고 표현하고 변수타입 자체도 undifined임

호이스팅?

<script>
    let ho = "hi";
    {
        console.log(foo);
        let ho = "bye";
    }
</script>

• 호이스팅은 변수 및 함수 선언이 해당 스코프의 최상위로 옮겨지는 현상
• 요약하자면 선언만 호이스팅되는데 초기화는 호이스팅안됨
• 먼저 ho라는 변수를 선언하고 "hi"라는 값을 할당. 그 다음 중괄호({}) 내부에서 새로운 블록 스코프를 만듬
• 그런 다음 console.log(ho);를 호출하려고 하지만, 여기서 주목해야 할 점은 ho 변수가 호이스팅되지만 할당된 값은 호이스팅되지 않는다는 것입니다. 즉, 변수 ho가 호이스팅되어 현재 스코프의 맨 위로 올려지지만, 아직 값이 할당되지 않았으므로 undefined로 간주됨.

콜백함수

<script>
function callback(a,b){
    return a+b;
}

function mycall(x, y, callback) {
    let result = callback(x, y);
    console.log("Result:", result); // 결과 출력
}

    mycall(4,5,callback);
    mycall(4,5,function(x,y){return x-y} );
    mycall(4,5, (x,y) => x*y);

</script>

• 말 그대로 함수를 콜 백 하는것

---

JS의 문법들

진짜 기본적인건 생략

백틱 사용 예시

<script type="text/javascript">
    let name = "홍길동";
    let age=23;
    let s=`${name}님의 나이는 ${age} 입니다`;
    console.log(s);

s = 
`
    이름 : ${name}
    나이 : ${age}
`
console.log(s);
</script>

• ` ` 얘가 백틱

람다 사용 예시

<script>

    function add(x,y){
        return x+y;
    }

    let sub = function(x,y){
        return x-y;
    }
    let mul = (x,y)=>x*y;

    console.log(add(8,5));
    console.log(sub(8,5));
    console.log(mul(8,5));
    
</script>

• => 같은 화살표를 사용하는게 트랜드

for 반복문 예시

<script>
    for(i=1; i<=10; i++){
        console.log(`i=${i}`);
    }
    let arr= [1,2,3,4,5,6,7,8,9,10];
    for(i=0; i<arr.length; i++){
        console.log(arr[i]);
    }

    for(i in arr){
        console.log(arr[i]);
    }

    for(i of arr){
        console.log(i, arr[i]);
    }
    function callFunc(x){
        console.log(x);
    }
    arr.forEach(callFunc);

    arr.forEach( function(x){console.log(x);});
    
    arr.forEach(x => {console.log(x);});

</script>

• forEach 와 람다를 쓰는게 트랜드

JSON 예시

<script>

    let person = {"name":"홍길동", 
                    "age":"23", 
                    "email":"hong@hanmail.net",
                    "main-address":"서울시"    
                };
    console.log(person);
    console.log(person.name);
    console.log(person.age);
    console.log(person.email);
    console.log(person.main-address);// 문자 - 이 들어가서 안됨
    

    console.log(person["name"]);
    console.log(person["age"]);
    console.log(person["email"]);
    console.log(person["main-address"]);
</script>

종합예시

<script>
    //json으로 객체 선언
    let persons = [
        {name:"홍길동", age:23},
        {name:"임꺽정", age:25},
        {name:"장길산", age:27},
        {name:"강감찬", age:33},
        {name:"윤관", age:43},
    ];

    for(i=0; i<persons.length; i++)
    {
        console.log(`${persons[i].name} 님의 나이는 ${persons[i].age} 입니다`);
    }

    for(i in persons)
    {
        console.log(`${persons[i].name} 님의 나이는 ${persons[i].age} 입니다`);
    }

    for(let person of persons)
    {
        console.log(`${persons[i].name} 님의 나이는 ${persons[i].age} 입니다`);
    }

    persons.forEach(p=> {
        console.log(`${p.name} 님의 나이는 ${p.age} 입니다. `);
    });

</script>

배열

<script>
    // 주어진 배열 생성
    let arr1 = [56,7,8,9,11,14,17,22,25,27,3]

    // 홀수와 짝수를 저장할 빈 배열 초기화
    let even_arr=[];
    let odd_arr=[];
    
    // 주어진 배열을 순회하면서 홀수와 짝수를 분리하여 각각의 배열에 추가
    for(i=0; i<arr1.length; i++){
        if(arr1[i] % 2 ==0){
            even_arr.push(arr1[i]); // 짝수 배열에 추가
        } else {
            odd_arr.push(arr1[i]); // 홀수 배열에 추가
        }
    }

    // 짝수 배열과 홀수 배열을 출력
    console.log("Even numbers:", even_arr);
    console.log("Odd numbers:", odd_arr);

    // filter 메서드를 사용하여 짝수 배열 생성
    even_arr = arr1.filter(x => x % 2 == 0);
    console.log("Even numbers using filter:", even_arr);

    // filter 메서드와 forEach 메서드를 연결하여 짝수를 출력
    arr1.filter(x => x % 2 == 0)
        .forEach(x => console.log("Even number using filter and forEach:", x));

    // map 메서드를 사용하여 각 요소에 10을 더한 배열 생성
    let arr2 = arr1.map(x => x + 10);
    console.log("Array with each element incremented by 10:", arr2);

    // filter 메서드로 짝수를 걸러내고, map 메서드로 각 요소에 10을 더하여 출력
    arr1.filter(a => a % 2 == 0)
        .map(a => a + 10)
        .forEach(x => console.log("Even numbers incremented by 10:", x));
</script>

배열 관련 연산자

let arr1 = [1, 265, 4, 100, 9, 8, 45, 21, 17];
arr1.forEach((item, i)=>{
    console.log(`인덱스 ${i} : ${item}`);
});

let arr2 = arr1.map((item, i) => item * 2);
console.log("배열 인덱스x2: ", arr2);

let arr3 = [[1,3], [45,13], [25,72], [28,71], [35,9], [34,93]];
arr3.forEach((item,i)=>{
    item.forEach((a,ii)=>{
        console.log(i, ii, a);
    })
});

let result1 = arr3.map( (item,i)=>{
    return item.map((a, ii)=>{
        console.log(i, ii, a);
        return a * 2;
    });
});
console.log(result1);

let arr4 = [1, 265, 301, 100, 9, 8, 45, 21, 17];
let evenNumbers = arr4.filter(x => x % 2 == 0);
console.log("짝수 데이터: ", evenNumbers);

let numberOver300 = arr4.find(x => x > 300);
console.log("300이상 데이터: ", numberOver300);

let sum = arr4.reduce((prev, item) => prev + item, 0);
console.log("데이터 합:", sum);

• filter
• map
• find
• reduce

전개 연산자

let arr= [1,2,3];
let spread= [-1,0, ...arr , 4,5,6];
let spread2= [-1,0, arr, 4,5,6];
console.log(spread);
console.log(spread2);
//(8) [-1, 0, 1, 2, 3, 4, 5, 6]
//(6) [-1, 0, Array(3), 4, 5, 6]

• ...을 사용해서 객체 혹은 배열을 출력할수있게함

---

이벤트

• 이벤트 : 시스템에서 일어나는 사건
• 이벤트 핸들러 : 이벤트가 발생했을 때 호출되는 함수

<body>
    <h1>이벤트 핸들러</h1>
    <button type="button" onclick="alert('alert')">누르기1</button>
    <button type="button" onclick="goPress()">누르기2</button>
    <button type="button" id="btnPress">누르기3</button>
</body>
</html>
<script>
    function goPress()
    {
        alert("goPress");
    }

    let btn = document.getElementById("btnPress");
    btn.addEventListener("click", ()=>{
        alert("이벤트 리스너");
    });


</script>

• addEventListener 로 람다식 많이씀

선택자(selecter)

그래서 이벤트를 어떻게 쓰냐(bind)? 그건 선택자가 해줌

<body>


    <p id="content1">스타일1</p>
    <p id="content2">스타일2</p>
    <p class="content3">스타일3</p>
    <p class="content3">스타일3</p>
    <p class="content3">스타일3</p>

    <button type="button" id="btn1">클릭</button>
    <button type="button" id="btn2">클릭</button>

</body>
</html>
<script>
    window.onload = function() {
        let btn1 = document.getElementById("btn1");
        btn1.addEventListener("click", function() {
            document.getElementById("content1").style.color = "#ff0000";
        });

        let btn2 = document.getElementById("btn2");
        btn2.addEventListener("click", function() {
            let ptags = document.querySelectorAll(".content3"); 
            for (let i = 0; i < ptags.length; i++) {
                ptags[i].style.color = "#00ff00";
            }
        });
    }
</script>

• getElementById와 getElementsByName 그리고 querySelectorAll 많이 씀

응용 : 사칙연산 폼

<script>
    window.onload=()=>{
        let btnAdd = document.querySelector("#btnAdd");
        let btnSub = document.querySelector("#btnSub");
        btnAdd.addEventListener("click", ()=>{
            let x = document.getElementById("x").value;
            let y = document.getElementById("y").value;
            let result = parseInt(x) + parseInt(y);
            document.getElementById("result").innerHTML = result;
        })

        btnSub.addEventListener("click", ()=>{
            let x = document.getElementsByName("x")[0].value;
            let y = document.getElementsByName("y")[0].value;
            let result = parseInt(x) - parseInt(y);
            document.getElementById("result").innerHTML = result;
        })

        btnMul.addEventListener("click", ()=>{
            let x = document.getElementById("x").value;
            let y = document.getElementById("y").value;
            let result = parseInt(x) * parseInt(y);
            document.getElementById("result").innerHTML = result;
        })

        btnDiv.addEventListener("click", ()=>{
            let x = document.getElementsByName("x")[0].value;
            let y = document.getElementsByName("y")[0].value;
            let result = parseInt(x) / parseInt(y);
            document.getElementById("result").innerHTML = result;
        })

    }
</script>

---

계속 추가 예정...