1.  자료형 변환

🐝  코틀린에서는 자료형이 다른 변수에 재할당하면 자동 형 변환이 되지 않고 자료형 불일치 오류 Type Mismatch 발생
        ➡️  의도하지 않게 자료형이 변하는 것을 방지하기 위한 것

fun main() {
    val a: Int = 1
    // val b: Double = a // 자료형 불일치 오류 발생. 자바와 차이점.
    // val c: Int = 1.1 // 자료형 불일치 오류 발생
}

 

    🍯  변수 a는 Int 형이므로 Double 형 변수 b에 다시 할당할 수 없음
    🍯  만일 자료형을 변환해 할당하고 싶다면 코틀린에서는 자료형 변환 메서드를 이용
            ex. Int ▶️ Double :  toDouble() 메서드를 이용

fun main() {
    val b: Double = a.toDouble()
    println("a=$a, b=$b") // a = 1, b = 1.0
}

자료형이 서로 다른 값을 연산하면, 자료형이 표현할 수 있는 범위가 큰 자료형으로 자동 형변환하여 연산
fun main() {

    val result = b + a
    println("result = $result") // result = 2.0

}

 


2.  기본형과 참조형의 비교 원리

🐝   자료형을 비교할 때는 단순히 값만 비교하는 방법 vs 참조 주소까지 비교하는 방법
🐝   단순히 값만 비교할 때는 이중 등호(==)를 사용하고, 참조 주소를 비교하려면 삼중 등호(===)를 사용

이중 등호는 참조와 상관없이 값이 동일하면 true를, 값이 다르면 false를 반환
삼중 등호값과 상관없이 참조가 동일하면 true를 반환, 값이 동일하더라도 참조 주소가 다르면 false를 반환

 

다음은 Int 형으로 선언한 변수 a, b에 128을 대입하고 이중 등호와 삼중 등호로 비교한 것
    비교 결과는 모두 true. 이 때 참조형으로 선언된 a와 b는 코틀린 컴파일러가 기본형으로 변환하여 저장
    즉, 여기서는 삼중 등호가 비교하는 값도 저장된 값인 128.
fun main() {

    val a: Int = 128
    val b: Int = 128
    println(a == b) // true
    println(a === b) // true

}

참조 주소가 달라지는 경우는 null을 허용한 변수
    null을 허용한 변수는 같은 값을 저장해도 이중 등호와 삼중 등호를 사용한 결과값이 다름 
fun main() {  

    val c: Int? = 128
    val d: Int? = 128
    println(c == d) // true
    println(c === d)  // false
    
}

3.  스마트 캐스트 알아보기

🐝  만약 어떤 값이 정수일 수도 있고, 실수일 수도 있는 경우에는 그때마다 자료형을 변환해도 되지만
     '스마트 캐스트'를 사용할 수 있음
🐝  스마트 캐스트 Smart Cast컴파일러가 자동으로 형 변환

    ⚡️  대표적으로 스마트 캐스트가 적용되는 자료형은 Number형이 있음
    ⚡️  Number형을 사용하면 숫자를 저장하기 위한 특수한 자료형 객체를 만듦
    ⚡️  Number형으로 정의된 변수에는 저장되는 값에 따라 정수형이나 실수형 등으로 자료형이 변환됨

fun main() {

    var test: Number = 12.2 // 12.2에 의해 test는 Float형으로 스마트 캐스트
    println("$test") // 12.2

    test = 12 // Int 형으로 스마트 캐스트
    println("$test") // 12

    test = 120L // Long형으로 스마트 캐스트
    println("$test") // 120

    test += 12.0f // Float형으로 스마트 캐스트
    println("$test") // 132.0
    
}

4.  자료형 검사하기

🐝  변수의 자료형을 알아낼떄는 is 키워드를 사용
🐝   is는 왼쪽 항의 변수가 오른쪽 항의 자료형과 같으면 true를, 아니면 false를 반환
🐝   is는 변수의 자료형을 검사한 다음 그 변수를 해당 자료형으로 변환하는 기능도 있음

   

    ⚡️ Any형을 사용하면 자료형을 결정하지 않은 채로 변수를 선언할 수 있음
    ⚡️ Any형은 코틀린의 최상위 기본 클래스로 어떤 자료형이라도 될 수 있는 특수한 자료형
    ⚡️ 이때 is를 사용하여 자료형을 검사하면 검사한 자료형으로 스마트 캐스트

fun main() {

    var num = 256

    if (num is Int) { // num의 자료형이 Int라면 실행.
        println(num) // 256
    } else if (num !is Int) {
        println("No an Int")
    }

    val x: Any
    x = "Hello"
    if (x is String) {
        println(x.length) // 5
    }
    /*
    변수 x는 Any형으로 선언. 그 후에 "Hello"라는 값을 대입. 아직 x의 자료형은 Any형.
    이후 if문으로 is로 x의 자료형을 검사할 때 String으로 스마트 캐스트되어 조건문이 실행.
     */

}

 


5.  묵시적 형변환

🐝  코틀린의 모든 클래스는 Any형이라는 슈퍼클래스(Superclass)를 가짐
🐝  Any는 자바의 최상위 클래스인 Object와 비슷하지만 서로 다른 유형
🐝  Any 형은 무엇이든 될 수 있기 때문에 언제든 필요한 자료형으로 자동변환할 수 있음
        ➡️  이것을 묵시적 변환이라고 함

fun main() {

    var a: Any = 1  // Any형 a는 1로 초기화 될 때 Int형이 됨.
    a = "one" // Int형이었던 a는 변경된 값에 의해 String이 됨.
    println("a: $a type: ${a.javaClass}") // 자바의 기본형을 출력하면 String이 나옴
    // 띄어씌기가 있으면 중괄호 생략 가능
    // a: one type: class java.lang.String

    checkArg("Hello") // x is String: Hello
    checkArg(5) // x is Int: 5
}

fun checkArg(x: Any) { // 인자를 Any형으로 받음
    if (x is String) {
        println("x is String: $x")
    }

    if (x is Int) {
        println("x is Int: $x")
    }

}

 

 

 

 

[ 내용 참고 : IT 학원 강의 ]


1.  코틀린의 특징

👩🏻‍🚀  안드로이드의 개발 환경은 Java 언어를 중심으로 확장되어 있는데, 새로운 개발 언어를 도입함

👩🏻‍🚀  Kotlin 코틀린은 2017년 안드로이드 공식 개발 언어로 지정
      ▶️ 구글이 코틀린을 안드로이드 공식 언어로 지정한 이유는 코틀린이 현대적인 언어로서 갖는 장점들 때문

👩🏻‍🚀  코틀린은 유명 IDE 제작사인 JetBrain이 만든 언어로, 같은 회사에서 만든 Intellij와 Android Studio IDE에서

       매우 잘 지원되는 언어


1) 코틀린의 장점


코틀린은 자바와 100% 상호 호환되면서도 더 현대적이고 간결 

      ▶️  자바와 코틀린 코드를 하나의 프로젝트에서 섞어서 사용할 수 있음
-  Null Pointer Exception이 발생할 수 있는 코드를 금지하고 Null에 대해 안전한 코드를 간결하게 표현 할 수 있도록 지원
'타입 추론'을 지원

      ▶️  정적 타입 지정 언어가 가진 정확성과 성능을 보장하면서도 동적 타입 언어와 같은 간결함을 유지할 수 있음
'람다 표현식'을 지원  ▶️  코틀린의 람다 표현식은 자바8부터 지원되는 람다 표현식보다 더 간결
'객체 지향' 프로그래밍과 '함수형' 프로그래밍 스타일을 모두 지원
-  코틀린의 '확장 함수'는 기존 클래스의 변경없이 클래스의 기능을 추가하는 것이 가능
-  코틀린은 이미 널리 쓰이는 '코드 패턴을 간결화할 수 있도록 설계'
      ▶️ 예를 들면 'getter', 'setter'를 묵시적으로 제공하고 자주 쓰이는 'Singleton 패턴'은 'object'로서 지원
-  코틀린의 함수는 '일급 객체'로서 다른 함수의 파라미터로 전달 가능하고 함수의 반환값을 함수 형태로 반환할 수 있어

    '높은 추상화'가 가능
-  코틀린은 '불변성을 보장하는 변수'와 '변경이 가능한 변수'를 언어 차원에서 분리
       ▶️  불변값을 갖는 변수의 사용은 '다중 쓰레드 애플리케이션 개발'에 보다 유용

 


2.  변수

👩🏻‍🚀  코틀린은 변수명을 먼저 쓰고, 콜론 : 을 쓴 후 자료형을 명시

👩🏻‍🚀  문맥상 추론이 가능하다면 자료명을 생략할 수 있음 ▶️ 코틀린의 형추론이라고 함

👩🏻‍🚀  변수명만 쓸 때는 자료형을 적어줘야 함

💡  val 변수명: 자료형 = 값
fun main() {

    val pi: Double = 3.14

    val name = "tom" // String 으로 형 추론.

    // val은 값을 변경할 수 없는 변수이므로 값을 재할당 하면 다음과 같이 컴파일 오류가 남
    // pi = 3.141593 // 오류 Val cannot be reassigned

    // 값을 변경하고 싶을 때는 var을 사용해야 됨. var로 정의된 변수는 값을 바꿀 수 있음
    var age = 21 // 형추론 Int
    println(age)  // 21
    age = 25 // 재할당
    println(age) // 25
}

 

1)  변수와 자료형


  👾  변수는 val, var 이라는 키워드를 이용하여 선언
        ⚡️  val로 변수를 선언하면 최초로 지정한 변수의 값으로 초기화하고 더 이상 바꿀 수 없는 '읽기 전용 변수'가 됨
        ⚡️  var로 변수를 선언하면 최초로 지정한 변수의 초깃값이 있더라도 '값을 바꿀 수 있음'

💡  변수를 선언한 예 :
       val username: String = "kildong"
       ➡️  변경되지 않는 변수 username이 String 자료형으로 선언되었고 "kildong"이 값으로 할당

 

  👾  코틀린은 자료형을 지정하지 않고 변수를 선언하면 변수에 할당된 값("kildong")을 보고 알아서 자료형을 지정할 수 있음

         ▶️  이것을 '자료형 추론'이라고 함
         ▶️  즉 username 변수에 "kildong"이라는 값만 할당해도 코틀린이 알아서 이 변수의 자료형을 String으로 지정
  👾  단 자료형을 지정하지 않은 변수는 반드시 자료형을 추론할 값을 지정해야 함
  👾  선언만 하고 초기화를 하지 않을 때는 반드시 자료형을 적어줘야 함

fun main() {
    val number = 10 // number 변수는 Int 형으로 추론
    var language = "Korean" // language 변수는 String으롤 추론.
    language = "English" // var 키워드로 선언한 변수는 값을 다시 할당할 수 있음
    // language = 10 // 파이썬처럼 다른 데이터 타입의 데이터는 저장할 수 없음.
    val secondNumber: Int = 20 // secondNumber 변수는 자료형을 Int로 명시적으로 지정.
    // secondNumber = 30 // val로 선언한 변수를 값을 다시 할당할 수 없음.

    println("number: $number") // 10
    println("language: $language") // English
    println("secondNumber: $secondNumber") // 20
}

 


3.  기본 자료형

👩🏻‍🚀  자료형은 크게 기본 자료형 primitive data type참조 자료형 reference data type으로 나누어 진다.
      ⚡️ 기본형은 순수하게 값을 저장하는 자료형이고 자바에서는 int, byte, boolean 등이 해당
      ⚡️ 참조형은 객체를 만들고 변수에는 객체의 참조값을 저장하고 자바에서는 String, Array 등이 해당

👩🏻‍🚀  코틀린의 자료형은 모두 참조형. 즉 모든 자료형이 객체 형태



(1) 정수 자료형  -  Byte, Short, Int, Long


   👾
  코틀린은 정수의 경우에는 숫자가 작아도 Int 형으로 추론 (기본값)

          ➡️  Byte나 Short 같은 작은 범위를 사용할 때는 자료형을 지정해야 함
 
   1)  Int : 정수


      📍  소수점이 없는 정수값을 지정할 때 사용
      📍  가독성을 높이기 위해 언더바(_)로 자릿수를 구분할 수 있음
      📍  다만, 언더바는 개발자가 읽기 쉽게 하기 위한 것으로 컴퓨터는 동일하게 인식

fun main() {    
    var intValue: Int
    intValue = 3
    intValue = 2_147_483_435
}

 


  2) Long : 정수


     📍  Int 보다 큰 범위의 정수를 저장할 수 있음
     📍  Double과 Float의 관계처럼 Int와 구분하기 위해서 숫자의 끝에 L을 붙여줌
     📍  Long 타입의 경우에는 설정한 글꼴에 따라 숫자가 1과 구분이 어려울 수 있기 때문에 대문자를 사용

fun main() {
    var longValue = 3_141592L
}

 


  3) Short와 Byte : 정수


    📍 정숫값을 저장할 때 사용하는데 입력할 수 있는 값의 크기가 Int보다 작음

fun main() {
    var shortValue: Short = 32_767
    var byteValue: Byte = 127
}

 


(2)  실수 자료형 - Double, Float


  👾  실수의 경우 자료형을 명시하지 않으면 Double 형이 됨 (기본값)

  👾  Float 형으로 지정하고 싶다면 값뒤에 F를 추가로 붙여줌

fun main() {
    val numFloat: Float = 100.0F // 자료형 생략 가능
    val numDouble: Double = 100.0 // 자료형 생략 가능
}


  1) Double : 실수 - 소수점이 있는 값을 저장할 때 사용

fun main() {
    var doubleValue: Double
    doubleValue = 3.141592
}


  2) Float : 실수


    📍 Double과 동일한 용도이지만 더 작은 범위의 숫자를 저장할 때 사용
    📍 Double과 구분하기 위해 Float의 경우 숫자 끝에 'F'를 붙여줌

fun main() {   
    var floatValue: Float
    floatValue = 3.141592F
}

 


(3) 문자 자료형


    👾  문자 자료형은 문자 하나를 표현하는 Char형과 문자열을 표현하는 String형으로 분류
    👾  Char 형은 문자를 작은 따옴표로 감싸고, String형은 문자열을 큰 따옴표로 감쌈

fun main() {
    val char: Char = 'a' // 자료형 생략 가능
    val string: String = "abc" // 자료형 생략 가능
}

(4) 논리 자료형


   👾  참, 거짓을 표현하는 true, false 를 사용하고 주로 조건 검사에 사용

fun main() {
    val isTrue: Boolean = true // 자료형 생략 가능
}

 


4.  상수  const

👩🏻‍🚀  상수는 주로 기준이 되는 변하지 않는 값을 입력해 둘 때 사용

👩🏻‍🚀  읽기 전용 변수인 val 앞에 const 키워드를 붙여서 만듦. 전역으로만 사용가능

💡  val과 같이 읽기 전용인 것은 동일하지만, 컴파일 시에 값이 결정되기 때문에 Int, Long과 같은 기본형과 문자열인 String만 입력할 수 있음
const val PI = 3.141592653589793

 

 

 

 

 

[ 내용 참고 : IT 학원 강의 ]


1.  이벤트 설정하기

🐝  이벤트 : 사이트에서 방문자가 취하는 모든 행위
         ▶️  모든 문서 객체는 생성되거나 클릭되거나 마우스를 위에 올리거 나 할 때 이벤트가 발생
🐝  이벤트 핸들러 (= 이벤트 리스너) : 이벤트가 발생했을 때 실행되는 코드 (함수)

 

(1) 이벤트 핸들러 등록 종류


  1) 이벤트 핸들러 어트리뷰트 방식

 

    👩🏻‍💻 이벤트 핸들러 어트리뷰트는 onclick과 같이 on 접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어져 있음
    👩🏻‍💻  주의할 점은 이벤트 핸들러 어트리뷰트 값으로 함수 참조가 아닌 함수 호출문 등의 문을 할당
           ➡️  이때 이벤트 핸들러 어트리뷰트 값은 사실 암묵적으로 생성될 이벤트 핸들러의 함수 몸체를 의미
           ➡️  하지만 HTML과 자바 스크립트는 관심사가 다르므로 혼재하는 것보다 분리하는 것이 좋음

<body>
    <button onclick="sayHi('Lee')">Click me!</button>
    <script>
        function sayHi(name) {
            console.log(`Hi! ${name}`); // Hi! Lee
        }
    </script>
</body>

 



  (2) 이벤트 핸들러 프로퍼티 방식

 

    👩🏻‍💻  window 객체와 Document, HTMLElement 타입의 DOM 노드 객체는 이벤트에 대응하는

          이벤트 핸들러 '프로퍼티'를 가지고 있음
    👩🏻‍💻  이벤트 핸들러 프로퍼티의 키는 on 접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어져 있음
    👩🏻‍💻  이벤트 핸들러 프로퍼티 방식은 이벤트 핸들러 어트리뷰트 방식의 HTML과 자바 스크립트가 뒤섞이는 문제를 해결할 수 있음
           ▶️ 하지만 이벤트 핸들러 프로퍼티에 하나의 이벤트 핸들러만 바인딩할 수 있다는 단점이 있음

<body>
    <button>Click me!</button>
    <script>
        const btn = document.querySelector('button');
        console.log(typeof btn); // object

        // 이벤트 핸들러 프로퍼티에 이벤트 핸들러 바인딩.
        // 첫 번째로 바인딩 된 이벤트 핸들러는 두 번째 바인딩된 이벤트 핸들러에 의해 재할당되어 실행되지 않음.
        btn.onclick = function () {
            console.log('button click 1');
        };

        btn.onclick = function () {
            console.log('button click 2');
        };
    </script>
</body>

 


 

  (3)  addEventListener 메서드 방식

 

문서 객체.addEventListener(이벤트 이름, 콜백 함수)
      ⚡️  첫 번째 매개변수에는 이벤트의 종류를 나타내는 문자열인 이벤트 타입을 전달
             ( 이 때 이벤트 핸들러 프로퍼티 방식과는 달리 on 접두사를 붙이지 않음 )
      ⚡️  두 번째 매개변수에는 이벤트 핸들러를 전달


     👩🏻‍💻  DOM Level 2에서 도입된 Event.prototype.addEventListener 메서드를 사용하여 이벤트 핸들러를 등록할 수 있음
     👩🏻‍💻  '이벤트 핸들러 어트리뷰트 방식'과 '이벤트 핸들러 프로퍼티 방식'은 DOM Level 0 부터 제공되던 방식

<body>
    <button>Click me!</button>
    <script>
        const btn = document.querySelector('button');

        btn.addEventListener('click', function () {
            console.log('button click 1');
        });  // 재활용 불가

        function btnClick () {
            console.log('button click 2');
        } // 재활용 가능

        btn.addEventListener('click', btnClick);

    </script>
</body>

이벤트 핸들러 프로퍼티 방식과 addEventListener 메서드 방식을 모두 사용하여 이벤트 핸들러를 등록하면?

 

    addEventListener 메서드 방식은 이벤트 핸들러 프로퍼티에 바인딩된 이벤트 핸들러에 아무 영향을 주지 않음
    따라서 버튼 요소에서 클릭 이벤트가 발생하면 2개의 이벤트 핸들러가 모두 호출

<body>
    <button>Click me!</button>
    <script>
        const btn = document.querySelector('button');
        
        // 이벤트 핸들러 프로퍼티 방식.
        btn.onclick = function () {
            console.log('[이벤트 핸들러 프로퍼티 방식] button click');
        }

        // addEventListener 메서드 방식.
        btn.addEventListener('click', function () {
            console.log('[addEventListner 메서드 방식] button click');
        });
    </script>

</body>

💫  addEventListener 메서드는 동일한 요소에서 발생한 동일한 이벤트에 대해 하나 이상의 이벤트 핸들러를 등록할 수 있음
<body>
<button>Click me!</button>
<script>
    const btn = document.querySelector('button');

    function btnClick () {
            console.log(`button click`);
    }

    btn.addEventListener('click', btnClick);
    btn.addEventListener('click', btnClick);

</script>
</body>

응용 예제
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>

        document.addEventListener('DOMContentLoaded', () => {
            const h1 = document.querySelector('h1');
            let counter = 0;

            h1.addEventListener('click', function (event) { 
            // h1 태그에 click 이벤트가 발생할 때 실행할 함수.
                counter++;
                h1.textContent = `클릭 횟수: ${counter}`;
            });
        });
    </script>
    <style>
        h1 { /* 클릭을 여러 번 했을 때 글자가 선택되는 것을 막기 위한 스타일. 드래그가 안됨 */
            user-select: none;
            cursor: pointer;
        }
    </style>

</head>
<body>
    <h1>클릭 횟수: 0</h1>
</body>


(2) 이벤트 핸들러 제거

 

문서 객체.removeEventListener(이벤트 이름, 콜백 함수)

 

  👩🏻‍💻  addEventListener 메서드로 등록한 이벤트 핸들러를 제거하려면

        EventTarget.prototype.removeEventListener() 메서드를 사용 
  👩🏻‍💻  removeEventListener 메서드에 전달할 인수는 addEventListener 메서드와 동일
  👩🏻‍💻  addEventListener 메서드에 전달한 인수와 removeEventListener 메서드에 전달한 인수가 일치하지 않으면
        이벤트 핸들러가 제거되지 않음  ➡️ 
익명함수를 이벤트 핸들러로 등록한 경우에는 제거할 수 없음
       ⚡️ 단, 기명 이벤트 핸들러 내부에서 removeEventListener 메서드를 호출하여 이벤트 핸들러를 제거하는 것은 가능
            (이때 이벤트 핸들러는 단 한 번만 호출)

<body>
    <button>Click me!</button>
    <script>
        const btn = document.querySelector('button');

        const handleClick = () => console.log('button click');

        // 이벤트 핸들러 등록
        btn.addEventListener('click', handleClick);

        // 이벤트 핸들러 제거
        btn.removeEventListener('click', handleClick, true); // 실패
        btn.removeEventListener('click', handleClick); // 성공
    </script>
</body>

기명 이벤트 핸들러 내부에서 removeEventListener 메서드를 호출하여 이벤트 핸들러를 제거
<body>
<button>Click me!</button>
<script>

    const btn = document.querySelector('button');

    btn.addEventListener('click', function foo() {
        console.log('button click');

        // 이벤트 핸들러를 제거. 따라서 이벤트 핸들러는 단 한 번만 호출.
        btn.removeEventListener('click', foo);
    });

</script>
</body>

 

프로퍼티 방식으로 이벤트 핸들러 등록한 경우 removeEventListener 메서드로 제거 불가

 

    💫  프로퍼티에 'null' 할당하여 제거

<body>
    <button>Click me!</button>
    <script>
        const btn = document.querySelector('button');
        const handleClick = () => console.log('button click');

        // 이벤트 핸들러 프로퍼티 방식으로 이벤트 핸들러 등록
        btn.onclick = handleClick;

        // removeEventListener 메서드로 이벤트 핸들러를 제거할 수 없음.
        btn.removeEventListener('click', handleClick);

        // 이벤트 핸들러 프로퍼티에 null을 할당하여 이벤트 핸들러를 제거.
        btn.onclick = null;
    </script>
</body>

예제

 

<body>
    <button id="changeBtn">배경색 변경</button>
    <button id="resetBtn">배경색 초기화</button>
    <script>
        const changeBtn = document.querySelector('#changeBtn');
        const resetBtn = document.querySelector('#resetBtn');

        let i = 0;

        const bodyTag = document.querySelector('body');
        const color = ['red', 'orange', 'yellow', 'blue'];
        const handleColor = () => {
            bodyTag.style.backgroundColor = color[i++ % color.length];
        }

        changeBtn.addEventListener('click', handleColor);
        resetBtn.addEventListener('click', () => {
            changeBtn.removeEventListener('click', handleColor);
            bodyTag.style.backgroundColor = '';
        })
    </script>
</body>

 


응용 예제
<head>
    <script>

        document.addEventListener('DOMContentLoaded', () => {
            const h1 = document.querySelector('h1');
            const btnConnect = document.getElementById('connect');
            const btnDisconnect = document.getElementById('disconnect');
            const p = document.querySelector('p');

            let counter = 0;
            let isConnect = false; // 이벤트를 여러 번 연결되지 않게

            const listener = (event) => { // 이벤트를 제거하려면 이벤트 리스너를 변수 또는 상수로 가지고 있어야 함.
                h1.textContent = `클릭 횟수: ${counter++}`;
            }

            btnConnect.addEventListener('click', function () {
                if (isConnect === false) {
                    // 1. h1에 이벤트 리스너 연결
                    h1.addEventListener('click', listener);

                    // 2. btnConnect 버튼 안 보이도록
                    this.style.display = 'none';
                    btnDisconnect.style.display = 'block';

                    // 3. p의 내용을 '이벤트 연결 상태 : 연결'로 변경
                    p.textContent = '이벤트 연결 상태: 연결';

                    isConnect = true;
                }
            });

            btnDisconnect.addEventListener('click', function () {
                if (isConnect === true) {
                    // 1. h1에 이벤트 리스너 해제
                    h1.removeEventListener('click', listener);

                    // 2. btnDisconnect 버튼 안 보이도록
                    btnConnect.style.display = 'block'
                    this.style.display = 'none';

                    // 3. p의 내용을 '이벤트 연결 상태 : 해제'로 변경
                    p.textContent = '이벤트 연결 상태: 해제';

                    isConnect = false;
                }
            })

        });
    </script>
    <style>
        h1 {
            user-select: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>클릭 횟수: 0</h1>
    <button id="connect">이벤트 연결</button>
    <button id="disconnect">이벤트 제거</button>
    <p>이벤트 연결 상태: 해제</p>
</body>

 

 

 

 

 

 

 

[ 내용참고 : IT 학원 강의 및 책 '혼자 공부하는 자바스크립트' ]


1.  변수 variable 란?

 

👩🏻‍💻  단 하나의 값을 저장할 수 있는 메모리 공간

       ex. int age = 25  ▶️ 변수 age를 선언하고 25로 초기화 한다.

 

변수 명명 규칙

 

     a.  예약어 사용 x

     b.  숫자로 시작 x

     c.  특수문자는 '_'와 '$'만 가능

     d.  클래스 이름 첫 글자는 항상 대문자, 변수와 메서드의 첫 글자는 항상 소문자

     e.  여러단어로 이루어진 경우 첫 글자만 대문자

     f.   상수의 이름은 모두 대문자

정수형 변수 타입 범위 크기
byte -128~127 1 byte, 8bit
short -32,768 ~ 32,767 2 byte, 16bit
int 2,147,483,648 ~ 2,147,483,6647 4 byte, 32bit
long -9,223,372,036,854,775,808 ~ 9,223,372,036,854,775,807 8 byte, 64bit

 

💡  float : 소수점 7자리
💡  double : 소수점 15자리

 


2.  변수 기본형  Primitive type

(1) 논리형 ; boolean - true, false 값만 가짐 (1byte)

public class BooleanExample {
	public static void main(String[] args) {
		// boolean 형은 두가지 값만 존재 : true, false
		boolean stop = false;
		if(stop) {
			System.out.println("중지합니다.");
		} else {
			System.out.println("시작합니다.");
		}
	}
}
// 출력결과 : 시작합니다.
 

 

(2) 문자형 'char' (2byte)

 

     📁  char단 하나의 문자만 저장, 여러 문자를 저장 할려면 String 사용
     📁  char''(작은 따옴표)로만 묶임
     📁  String클래스, ""(큰 따옴표)로만 묶어야 함

 
public class Etc0201 {
	public static void main(String[] args) {
		// 문자를 숫자로
		char ch = 'A'; // char ch = '\u0041';로 바꿔 써도 같다.
		int code = (int)ch; // ch에 저장된 값을 int형으로 변환하여 저장한다.
		System.out.println(ch); // A
		System.out.println(code); // 65
	}
}

 

(3) 정수형 byte / short / int / long

      - long 접미사 ; l or L

 


 

(4) 실수형 float / double

      - float 접미사 ; f ( 기본 타입이 double 이기 때문에 안 붙이면 에러남)

 


※  아스키코드 
   미국정보교환표준부호, 또는 줄여서 ASCII는 영문 알파벳을 사용하는 대표적인 문자 인코딩이다. 아스키는 컴퓨터와 통신 장비 
   를  비롯한 문자를 사용하는 많은 장치에서 사용되며, 대부분의 문자 인코딩이 아스키에 기초를 두고 있다.
(출처 ; 위키백과)

※  유니코드   
   전 세계의 거의 모든 문자에 고유 숫자를 부여한 문자 집합

 


💡 데이터 단위 (출처; 삼성반도체 사이트)

3.  상수 constant 와 리터럴 literal 

 

(1) 상수

형식 : final 데이터 타입 상수명 = 값;

 

  · 변수와 달리 한 번 값을 저장하면 다른 값으로 변경할 수 없다. 대문자로 선언

  · 변수 타입 앞에 'final' 붙이면 된다.

public class Exam003 {
	public static void main(String[] args) {
		int a =3;
		System.out.println(a); // 3
		a = 4;
		System.out.println(a); // 4
		
		final double PI = 3.14;
		// PI = 3.15; // 에러발생
		System.out.println(PI); // 3.14 이 문장만 봐도 PI가 상수인걸 할 수 있도록 대문자로 작성.
	}
}

 


 

(2)  리터럴

 

· 문자 리터럴 : 작은따옴표로 문자 하나를 표현한 것  ▶️  ''안에 하나의 문자가 있어야 함

· 문자열 리터럴 : 큰 따옴표로 감싼 두 문자 이상  ▶️  "" 안에 아무런 문자도 넣지 않는 것 ok

· 덧셈 연산자는 피연산자 중 어느 한 쪽이 String이면 나머지 한 쪽을 먼저 String으로 변환한 다음 두 String을 결합한다.

    * 왼쪽에서 오른쪽 방향으로 연산을 수행

 

char sample = '\'' = ''';

 

public class MyVar_06 {
	public static void main(String[] args) {
		/* 문자열 표현 */
		char single = '\''; 
		String db1Quote = "\"Hello\""; // 겹따옴표를 출력하려면 이렇게 한다.
	    String root = "c:\\";
	    
	    System.out.println(single); // '
	    System.out.println(db1Quote); // "Hello"
	    System.out.println(root); // c:\
	    
	    char single2 = '"';
	    String single3 = "'";
	    String db1Quote2 = "'Hello'";
	    //String db1Quote3 = 'Hello';  // 에러
	    
	    System.out.println(single2); // "
	    System.out.println(single3); // '
	    System.out.println(db1Quote2); // 'Hello'
	}
}

 


4.  문자열 연산

 

'+' 연산자의 두 가지 기능


    1) 피연산자가 숫자일 경우에는 덧셈 연산
    2) 피연산자 중 하나라도 문자열이면 나머지 피연산자도 문자열로 자동 변환되어서 문자열 결합 연산을 수행

public class MyVar_07 {
	public static void main(String[] args) {
		// 숫자 결합 연산
		int value = 10 + 2 + 8;
		System.out.println("value : " + value); // 20
		
		
		// 문자 결합 연산
		String str1 = 10 + 2 + "8";
		System.out.println("str1 : " + str1); // 128 :
		// 연산자는 왼쪽에서 오른쪽으로 순서대로 실행이 되기 때문에
		// 12 + "8" 이 됨 
		
		String str2 = 10 + "2" + 8;
		System.out.println("str2 : " + str2); // str2 : 1028
		
		String str3 = "10" + 2 + 8;
		System.out.println("str3 : " + str3); // str3 : 1028
		
		String str4 = "10" + (2 + 8);
		System.out.println("str4 : " + str4); // str4 : 1010

	}

}

 


문자열 연산 예제
public class MyVar_08 {
	public static void main(String[] args) {

		String a = 7 + " ";
		String b = " " + 7;
		String c = 7 + "";
		String d = "" + 7;
		String e = "" + "";
		String f = 7 + 7 + "";
		String g = "" + 7 + 7;
		
		System.out.println(a); // 7
		System.out.println(b); //  7
		System.out.println(c); // 7
		System.out.println(d); // 7
		System.out.println(e); 
		System.out.println(f); // 14
		System.out.println(g); // 77
	}
}

 

 

 

 

 

[내용 출처 : 자바의정석 및 학원강의]


1.  타이머 timer 함수  

🐰  특정 시간 이후에 콜백함수를 호출할 수 있는 함수

함수 이름 설명
setTimeout(함수, 시간) 특정 시간 후에 함수를 한 번 호출
setInterval(함수, 시간) 특정 시간마다 함수를 호출

 

<script>
    setTimeout(function () {
        console.log(`2초 후에 실행됩니다.`);
    }, 2 * 1000); // 시간의 기초단위는 밀리 초 단위.

    let count = 0;
    setInterval(() => {
        console.log(`2초마다 실행됩니다.(${count}번째)`);
        count++;
    }, 2 * 1000);
</script>

 


타이머 함수를 종료하고 싶은 경우

 

함수 이름 설명
clearTimeout(타이머_ID) setTimeout() 함수로 설정한 타이머를 제거
clearInterval(타이머_ID) setInterval() 함수로 설정한 타이머를 제거

 

🐰  타이머 ID는 setTimeout()과 setInterval() 함수를 호출할 때 리턴 값으로 나오는 숫자

<script>
    let count = 0;
    let id = setInterval(() => { // setInterval은 반환형이 있는 함수이기 때문에 변수에 저장 가능
        console.log(`1초마다 실행됩니다(${count}번째)`);
        count++;
    }, 1000);

    setTimeout(() => {
        console.log('타이머를 종료합니다.');
        clearInterval(id);
    }, 5 * 1000); // 5초후 종료
</script>

 


응용 문제 - 정지 & 시작버튼

 

<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #numb {
            width: 100vw;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 300px;
        }

        #box {
            display: flex;
            justify-content: center;
            align-content: center;
        }

        button {
            width: 50px;
            height: 20px;
            margin: 0 10px;
        }

    </style>

    <script>
        /* '정지' 버튼을 클릭하면 정지 */
        const rainbow = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
        let count = 1;
        const timer = function () {
            document.querySelector('div').innerHTML = String(count);
            document.querySelector('div').style.color = rainbow[count % rainbow.length];
            count++;
        };

        let id = setInterval(timer, 1000);

        const stopTimer = function () {
            clearInterval(id);
        };

        const reStart = function () {
            id = setInterval(timer, 1000);
        };
    </script>
</head>
<body>
    <div id="numb">0</div>
    <div id="box">
        <button onclick="stopTimer()">정지</button>
        <button onclick="reStart()">재시작</button>
    </div>
</body>

 

 


2.  기본 매개변수


🐰  매개 변수에 기본 값을 지정, 매개 변수가 들어오지 않는 경우에 기본 값으로 대체
🐰  기본 매개 변수와 일반 매개 변수를 섞어서 사용할 경우에는 기본 매개 변수가 오른쪽으로 가야됨

함수이름(매개변수, 매개변수=기본값, 매개변수=기본값)
<script>

  const earnings = function (name, wage = 8590, hours = 40) {
    console.log(`# ${name}님의 급여 정보`);
    console.log(`- 시급: ${wage}원`);
    console.log(`- 근무 시간: ${hours}시간`);
    console.log(`- 급여: ${wage * hours}원`);
    console.log('');
  }

  // 최저 임금으로 최대한 일하는 경우
  earnings('smith');

  // 시급 1만원으로 최대한 일하는 경우
  earnings('adam', 10000);

  // 시급 1만원으로 52시간 일한 경우
  earnings('tom', 10000, 52);
</script>


응용 문제
<script>
    // 년도를 인수로 전달하지 않은 경우에는 현재 년을 기본값으로 함.
    // 윤년을 확인하는 함수를 정의 - 정수 연도를 입력받아서 윤년의 여부를 불린형으로 반환.
    const isLeapYear = function (year = new Date().getFullYear()) {
        const isLeapYear = (year % 4 === 0) && (year % 100 !== 0) || (year % 400 === 0);
        return isLeapYear;
    }

    console.log(`올해는 윤년일까? === ${isLeapYear()}`); 
</script>

 


3.  즉시 호출 함수  Immediately-invoked function expression

(function () { })();


 🐰  선언과 동시에 함수가 실행되며 보통은 함수명 없이 사용하기 때문에 재호출이 안됨
 🐰  변수의 충돌을 막기 위해 사용. 재사용을 위해서 함수를 만드는게 아닌 변수의 충돌을 막기 위해 블록화를 하는 목적으로 사용

💡  자바 스크립트에서 선언적 함수보다 익명함수를 생성하고 바로 호출하는 패턴이 많은 이유 

 

       -  이름 충돌 방지
       -  다른 프로그램에 비해 자바 스크립트는 라이브러리를 많이 사용하고
           한 페이지에 사용하는 프로그램이 여러 개의 파일로 나누어져 있거나 여러 개로 분리되어 있어서
           다른 프로그래밍 언어보다 이름 충돌되는 경우가 많음
       -  익명함수를 사용해서 이름이 중복되는 함수를 만드는 것을 방지

<!-- 이름 충돌 문제 발생 -->
<!-- 다른 곳에서 가져온 자바스크립트 코드 -->
<script>
    let pi = 3.14;
    console.log(`파이 값은 ${pi}입니다.`);
</script>

<!-- 내가 만든 자바스크립트 코드 -->
<script> // Uncaught SyntaxError: Identifier 'pi' has already been declared
    let pi = 3.141592; // 중복 선언
    console.log(`파이 값은 ${pi}입니다.`);
</script>

<script>
    // 1. 재호출이 안되는 형태
    (function() {
        life();
    })();
    function life() {
        console.log(`즉시 실행 함수1`); // 즉시 실행 함수1
    }

    // 1) 익명함수처럼 보이니까 즉석 실행 함수를 변수에 저장한다면?
    let instant = (function() {
        console.log('즉시 실행 함수2'); // 즉시 실행 함수2
    })();
    console.log(typeof instant); // undefined. 변수에 할당되지는 않고 실행만 됨.
    // instant(); // Uncaught TypeError: instant is not a function

    // 2) 선언적 함수처럼 이름을 지정하면 재실행 되지 않을까?
    (function instant3rd () {
        console.log(`즉시 실행 함수3`);
    })();

    // instant3rd(); // Uncaught ReferenceError: instant3rd is not defined

    // 2. 재실행이 가능한 경우
    let instant4th;
    (instant4th = function() {
        console.log('즉시 실행 함수4'); // 즉시 실행 함수4
    })();
    console.log(typeof instant4th); // function
    instant4th(); // 즉시 실행 함수4
</script>

 

 


스코프 scope : 변수가 존재하는 범위   

 

   -  같은 단계의 스코프에서 동일한 이름의 변수가 있으면 충돌
   -  스코프 단계를 변경하는 방법은 중괄호를 사용해서 블록을 만들거나, 함수를 생성해서 블록을 만듦
   -  블록 내부에서 같은 이름으로 변수를 선언하면 변수가 외부 변수와 충돌하지 않고

       외부 변수를 가려서 내부 블록에서 선언한 변수만 볼 수 있음
   -  블록이 다른 경우 내부 변수가 외부 변수를 가리는 현상을 섀도잉 shadowing 이라고 함

💡  블록({}) 생성으로 이름 충돌 문제를 해결하는 방법은  구 브라우저나, var 키워드 사용하는 경우에는 사용할 수 없어서 대체재로 즉시 호출 함수를 사용
<script>
    let pi = 3.14;
    console.log(`파이 값은 ${pi}입니다.`); // 파이 값은 3.14입니다.

    // 블록을 사용한 스코프 생성
    {
        let pi = 3.141592; // 블록에서 선언한 변수는 블록 안에서만 사용 가능
        console.log(`파이 값은 ${pi}입니다.`); // 파이 값은 3.141592입니다. 블록에서 pi가 선언되지 않았다면 전역을 들고 옴.
    }

    console.log(`파이 값은 ${pi}입니다.`); // 파이 값은 3.14입니다.

    // 함수 블록을 사용한 스코프 생성
    function sample() {
        let pi = 3.141592;
        console.log(`파이 값은 ${pi}입니다.`);
    }
    sample(); // 파이 값은 3.141592입니다.
    console.log(`파이 값은 ${pi}입니다.`); // 파이 값은 3.14입니다.
</script>

 


var 에서 블럭 사용과 즉석 실행 함수
<script>
    var animal = 'dog';
    console.log(animal); // dog

    {
        var animal = 'cat';
        console.log(animal); // cat
    }
    console.log(animal); // cat. 블록에서 사용했지만 블록 밖에서 변수 사용이 됨

    var animal = 'dog';
    console.log(animal); // dog
    (function () {
        var animal = 'cat';
        console.log(animal); // cat
    })();

    console.log(animal); // dog. 즉시 호출 함수의 경우에는 함수 블럭 안에서만 변수의 범위가 제한 됨.
</script>

 


블록 사용으로 이름 충돌을 막을 수 없는 경우 즉시 호출 함수 사용
<!-- 다른 곳에서 가져온 자바스크립트 코드 -->
<script>
    let pi = 3.14;
    console.log(`파이 값은 ${pi}입니다.`); // 파이 값은 3.14입니다.
</script>

<!-- 내가 만든 자바스크립트 코드 -->
<script>
    /* 즉시 호출 함수를 사용해 변수 이름 충돌 문제를 해결 */
    (function () {
        let pi = 3.141592;
        console.log(`파이 값은 ${pi}입니다.`); // 파이 값은 3.141592입니다.
    })();
</script>

 


4.  엄격 모드  strict mode

🐰  'use strict' 문자열을 읽은 후 부터는 코드를 엄격하게 검사
🐰  초기의 자바 스크립트는 간단한 보조 프로그램을 만드는게 목적이라 어느 정도 오류가 있어도 정상적으로 작동.
      하지만 이후에 자바 스크립트의 사용이 활발해 지고, 규모가 있는 프로그램을 만들기 위해서는 코드의 오류를 엄격하게 검사를 해야돼서 엄격 모드 사용

      🥕  즉시 호출 함수를 만들고, 이 블록의 가장 윗쪽에 엄격 모드를 적용하는 경우가 많음
              ▶️  이렇게 하면 해당 블록 내부에서만 엄격 모드가 적용
 

 사용예:
    (function () {
        'use strict';
        문장;
        문장
     }) ();
<script>
    /* 변수를 선언하지 않아도 사용이 됨. */
    data = 10;
    console.log(data); // 10
</script>
<script>
    'use strict';
    data = 10; // Unresolved variable or type data
    console.log(data); // 10
</script>

 

 

 

 

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]


1.  재귀 함수

🐰  함수 정의문 내에서 작성한 코드로 함수를 다시 호출하는 것

<script>
    let num = 0;
    function testFnc() {
        // 재귀 함수 호출을 적용하여 1부터 10까지의 값을 출력
        num++;
        document.write(num, '<br>');

        if(num === 10) return; // num 값이 10이면 종료

        console.log(`${num} 번째 호출`); // 10번째는 출력 안됨
        testFnc(); // 재귀 함수 호출
    }
    testFnc();
</script>


2.  콜백 함수  callback function

🐰  매개 변수로 전달하는 함수. 자바 스크립트는 함수도 하나의 자료형이므로 매개변수로 전달 할 수 있음

🐰  매개변수를 통해 함수를 받고, 그 함수를 통해 결과값을 호출함

<script>
    function callThreeTimes (callback) { // 함수를 선언
        for (let i = 0; i < 3; i++) {
            callback(i);
        }
    }

    function print(i) {
        console.log(`${i}번째 함수 호출`);
    }

    // 함수를 호출.
    callThreeTimes(print); // 매개변수로 함수를 전달. 함수를 매개변수로 사용할 경우 ()는 제외
    /* 0번째 함수 호출
    1번째 함수 호출
    2번째 함수 호출
     */
</script>

 


 콜백함수와 익명함수 
<script>
    function callThreeTimes (callback) { // 함수를 선언
        for (let i = 0; i < 3; i++) {
            callback(i);
        }
    }

    // 함수를 호출. 다른 언어에서는 낯선 방법이나 자바 스크립트나 코틀린 같은 이벤트 기반을 프로그래밍에서는 자주 사용.
    callThreeTimes(function (i) {
        console.log(`${i}번째 함수 호출`);
    });
</script>

 


콜백함수를 활용하는 함수 : forEach() 메서드


    🥕  배열이 갖고 있는 함수(메서드)로써 단순하게 배열 내부 요소를 사용해서 콜백함수를 호출

/* 콜백함수 기본형 */
function (value, index, array) { } //  매개 변수가 다 필요하지 않음.
<script>
    const numbers = [273, 52, 103, 32, 57];

    numbers.forEach(function (value, index, array) {
        // 매개변수로 value, index, array를 갖는 콜백함수를 사용
        console.log(`${index}번째 요소 : ${value}`);
    });

    // 함수 선언한 후에 매개 변수로 넘겨도 됨
    const call = function (value, index, array) {
        // 매개변수로 value, index, array를 갖는 콜백함수를 사용
        console.log(`${index}번째 요소 : ${value}`);
    }
    numbers.forEach(call);

    numbers.forEach(function (v, i) { // 매개변수로 v, i만 사용
        console.log(`${i}번째 요소 : ${v}`);
    })

    numbers.forEach(function(item) { // 매개변수로 v만 사용
        console.log(`${item}`)
    })
</script>

 


콜백함수를 활용하는 함수 : map() 메서드

 

   🥕  콜백함수에서 리턴한 값들을 기반으로 새로운 배열을 만들고 리턴

<script>
    // 배열을 선언
    let numbers = [273, 52, 103, 32, 57];

    // 배열의 모든 값을 제곱
    let numbers2 = numbers.map(function (value, index, array) {
        return value * value;
    });
    console.log(numbers2); // (5) [74529, 2704, 10609, 1024, 3249]

    // 출력
    numbers2.forEach(console.log); // value, index, array 순서대로 출력
    /*
    74529 0 (5) [74529, 2704, 10609, 1024, 3249]
    2704 1 (5) [74529, 2704, 10609, 1024, 3249]
    10609 2 (5) [74529, 2704, 10609, 1024, 3249]
    1024 3 (5) [74529, 2704, 10609, 1024, 3249]
    3249 4 (5) [74529, 2704, 10609, 1024, 3249]
     */

    // for문을 이용해서 제곱 배열 생성
    let numbers3 = [];
    for (const item of numbers) {
        numbers3.push(item * item);
    }
    console.log(numbers3); // (5) [74529, 2704, 10609, 1024, 3249]
</script>

 


콜백함수를 활용하는 함수: filter()


    🥕  콜백함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만듦
           ➡️  콜백함수의 리턴 타입이 불 형 이어야 함

<script>
    const numbers = [11, 12, 13, 14, 15, 16];
    
    // 짝수만 추출
    const evenNumbers = numbers.filter(function (value) {
        return value % 2 === 0;
    });

    // 인덱스가 짝수만 추출
    const evenIndexs = numbers.filter(function (value, index) {
       return index % 2 === 0;
    });

    console.log(`원래 배열: ${numbers}`); // 원래 배열: 11,12,13,14,15,16
    console.log(`값이 짝수만 추출: ${evenNumbers}`); // 값이 짝수만 추출: 12,14,16
    console.log(`인덱스가 짝수만 추출: ${evenIndexs}`);  // 인덱스가 짝수만 추출: 11,13,15

    // 1의 자리가 3의 배수인 경우만 추출
    const evenNumbers2 = numbers.filter(function (value) {
        return (value % 10) % 3 === 0;
    });

    console.log(`1의 자리가 3의 배수: ${evenNumbers2}`); // 1의 자리가 3의 배수: 13,16
</script>

 


3.  화살표 함수  Arrow function


🐰  ES6에 추가된 내용으로 '=>'를 이용하여 함수를 간결하게 표현할 때 사용

    1) function 키워드를 생략
    2) 부등호 '='과 '>'를 합쳐서 코딩
    3) 항상 익명함수 형식으로 표현
    4) 단일 명령문일 경우 함수의 중괄호 {}와 return을 생략

 

 

Arrow function expressions - JavaScript | MDN

An arrow function expression is a compact alternative to a traditional function expression, with some semantic differences and deliberate limitations in usage:

developer.mozilla.org

<script>
    const doAddition1 = function (s1, s2) {
        return (s1 + s2) / 2;
    }
    console.log(doAddition1(2, 5)); // 3.5

    const doAddition2 = (s1, s2) => {
        return (s1 + s2) / 2;
    }
    console.log(doAddition2(2, 5)); // 3.5

    const doAddition3 = (s1, s2) => (s1 + s2) / 2;
    console.log(doAddition3(2, 5)); // 3.5
</script>


🐰  map(), filter() 함수처럼 단순한 형태의 콜백 함수를 쉽게 입력
🐰  function 키워드 대신 화살표(=>)를 사용

/* 기본형 */ 
(매개변수) => { }

 

💡  메소드 체이닝 : 메소드가 리턴하는 값을 기반으로 해서 메서드를 줄줄이 사용하는 것
<script>
    // 배열 선언
    let numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

    // numbers에서 2의 배수만 추출한 후, 제곱을 한 후에 로그에 출력.

    // 배열의 메소드를 연속적으로 사용. 메소드 체이닝.
    numbers.filter((value) => value % 2 === 0) // 2의 배수만 추출 / [0, 2, 4, 6, 8]
        .map((value) => value * value) // 제곱 추출 / [0 , 4, 6, 16, 36, 64]
        .forEach((value) => console.log(value)); // [0, 4, 16, 36, 64]
</script>

 

 

 

 

[ 내용 참고 : IT 학원 강의 ]

+ Recent posts