교과서

https://ko.javascript.info/

java와 js의 차이

<script>
    
    console.log("hello world!");
    
    // 자바와 자바 스크립트의 차이

    // js는 타입을 명시하지 않아도 된다
    // 자바 String str = "a";
    // var: 함수 단위 스코프
    var str = "a"; 
    // let : 블록 단위 스코프
    let str1 = "a";
    // const : 블록 단위 스코프 + final
    const str2 = "a";

    // 자바는 모든 코드가 class 안에
    // js는 class가 없어도 코드 작성 가능
    function add(a, b){
        return a + b;
    }
    
    // 타입은 자동으로 인식
    console.log(add(1, 2)); // 3
    console.log(add("a", "b")); // ab
    console.log(add("a", 1)); // a1

    // 자바 스크립트에서는 OR조건을 사용하면
    // 마지막 값이나 false가 아닌 값이 출력된다
    console.log(false || false || true); // true
    console.log("ㅎㅇ" || 0 || false); // ㅎㅇ
    console.log(false || false || "ㅎㅇ" || "ㅂㅇ"); // ㅎㅇ

    // js OR조건에서
    // 0이나 null 등도 false 조건으로 판단
    console.log(0 || null || "ㅎㅇ"); // ㅎㅇ

    const data = "aaa";

    // if나 while 조건 안에 boolean이 아닌
    // '값'이 들어가면 true를 대신할 수 있다
    if(data){
        console.log(data);
    }

    // typeof를 사용하여 타입을 판단할 수 있다
    const str3 = "12";
    console.log(typeof str3);

    // ==, ===
    // js에서 ==은 값만 비교
    console.log("12" == 12);
    console.log(true == 1);
    console.log(false == 0);
    console.log(undefined == null);

    // ===은 값과 타입 모두 비교
    console.log("12" === 12);

    // 자바 : 정수 / 정수 == 정수
    // 자바 스크립트 : 정수 / 정수 == 정수 or 실수
    console.log(3 / 2);
    console.log(5 % 3);

    // 형변환
    const str4 = String(12);
    console.log(typeof str4);
    const num1 = Number(str4);
    console.log(typeof num1);

    // 문자열과 char는 공유
    // 홑따옴표('') 도 문자열
    console.log("a");
    console.log(typeof 'a');

    // 백틱도 문자열이다
    console.log(`a123`);
    // 백틱 사용시 문자열 포맷팅 가능
    console.log(`a123 ${str}`);

</script>

함수

화살표 함수 주로 사용

<script>

    // 함수 만드는 방법

    // 기본
    function add(a, b){
        return a + b;
    }

    // 익명 함수 사용
    const add1 = function(a,b){
        return a + b;
    }

    // 화살표 함수 ★
    //         (매개변수) => {기능}
    const add2 = (a, b) => {
        return a + b;
    }
    
    // 결과 코드가 한 줄이면 중괄호와 return 생략 가능 ★
    const add3 = (a, b) => a + b;
    console.log(add3(1, 5));

</script>

객체 생성

추천 방식 확인 필요

<script>

    // 객체 만드는 방법

    // 클래스 없는 인스턴스
    const obj = {
        // js에서 객체의 변수를 프로퍼티라고 한다
        // 변수명 : 값,
        name : "홍길동",
        age : 12,
        
        // 메소드 만드는 방법 추천 ★
        getName(){
            return this.name;
        },
        // 되도록 쓰지 않기
        // getname1 : function(){
        //     return this.name;
        // },
        // getname2 : () => this.name,
        
    };

    // 클래스
    class Cat{
        constructor(name, age){
            // js에서는
            // 생성자에서 this,~~를 사용해서
            // 초기화해주면 프로퍼티가 생성된다
            this.name = name;
            this.age = age;
        }

        getName(){
            return this.name;
        }
    }

    const cat = new Cat();
    console.log(cat.name);


</script>

for문

기본 for문

// 기본 for
for (let i = 0; i < intArray.length; i++) {
  const element = intArray[i];
  console.log(element);
}

for in

배열이나 객체의 key 값을 사용

// for in : 배열이나 객체의 key 값을 사용
for (const i in intArray) {
  console.log(intArray[i]);
}

const obj = {
  name: "홍길동",
  age: 12,
};

for (const key in obj) {
  console.log(key);
  console.log(obj[key]);
}
for (const key in intArray) {
  console.log(key);
  console.log(intArray[key]);
}

for of

배열의 value를 사용

for (const iterator of intArray) {
  console.log(iterator);
}

forEach()

매개변수로 함수를 받아 사용

intArray.forEach(function (value) {
    console.log(value);
});

intArray.forEach((value) => console.log(value));

  // 배열의 메소드
  // 매개변수가 필요한 만큼만 받아올 수 있다
  // 앞에서부터 순서대로 (index, array) 불가능
  // 리턴값이 없음.
intArray.forEach((value, index, array) => {
  console.log(value);
  console.log(index);
  console.log(array);
});

함수를 매개변수로 받는 메소드

<script>
    // 함수가 들어가는 메소드
    class Cat{
        constructor(name){
            this.name = name;
        }

        call(func){
            // 콜백 함수 : 함수의 매개변수로 들어가는 함수
            func(this.name);
        }
    }
    const cat = new Cat("야옹이");
    
  	// 함수 선언
    const hello = (value) => console.log(value + " 안녕?");
	
  	// 함수 넘기기
    cat.call(hello);
</script>