코린이[코딩 어린이]

new String과 String

기본형의 형태를 알아보는 연산자 : typeof

객체에 대해 어떤 객체인지 확인하는 연산자 : instanceof

instanceof연산자는 typeof와는 달리 이항 연산자로 인자를 2개 받으며, 왼쪽에 받는 인자가 오른쪽에 받는 인자의 인스턴스인지 확인하고, 결과로 true 또는 false를 반환한다.

즉, 변수가 해당 클래스의 인스턴스인지 확인한느 키워드이다.

new를 통한 객체 생성

<script>
   function Person(name, blog) {
       this.name = name;
       this.blog = blog;
   }
   var unikys = new Person("unikys", "https://shiro21.tistory.com");
 
   console.log(unikys instanceof Person); // true
   console.log(typeof unikys); // object
</script>

instanceof의 연산결과로 unikys객체가 생성자인 Person을 통해서 생성되었고, Person은 object를 확장하고 있다는 것을 확인할 수 있다.

그리고 typeof의 결과로는 object를 반환한다는 것을 확인할 수 있다. 

이렇게 두 연산자의 동작은 유사해 보이지만 차이가 있다.

instanceof연산자는 기본형에 대해 동작하지 않는다는 점이다.

기본적인 instanceof 결과

<script>
   console.log(true instanceof Boolean); // false
   console.log(true instanceof Object); // false
 
   console.log([0, 1] instanceof Array); // true
   console.log({name:"shiro"} instanceof Object); // true
 
   var color1 = new String("red");
   var color2 = "red";
 
   console.log(color1 == color2); // true
   console.log(color1 instanceof String); // true
   console.log(color2 instanceof String); // false
   console.log(color2 instanceof Object); // false
 
   console.log(color1 === color2); // false
   console.log(color1.constructor === String); // true
   console.log(color2.constructor === String); // true
</script>

true or false같은 값은 기본형이기 때문에 Boolean객체의 instanceof가 false로 나타난다.

하지만 [ ]처럼 배열을 생성하는 표현식은 내부적으로 new Array()와 같은 동작을 하게 되므로 instanceof Array가 true이다.

String관련 객체와 기본형을 봤을때 ==로 비교하면 true이다. 

그런데 new String()으로 생성한 문자열은 instanceof String이 true지만, 그냥 큰따옴표로 생성한 문자열은 false다. 이것으로 문자열이 같은지 ==연산자로 비교하면 true로 서로 같은 값이라는 결과가 나오지만, 내부적으로 보면 서로 다르다는 것을 알 수 있다.

그래서 ===연산자로 비교를 하면 false를 반환한다.

==연산자는 두 피연산자가 다른 형태일 때 대부분 비교를 위해 형변환이 일어나서 같은 값으로 판단하지만, ===연산자는 형변환이 일어나지 않는 엄격한 비교를 수행하여 다른 값으로 판단하기 때문이다.

따라서, color1은 String의 인스턴스이고, color2는 기본형이므로 서로가 다르다는 결과를 알 수 있다.

자바스크립트의 변수

자바스크립트는 객체를 기반으로 이루어진 언어이다. 기본형 변수들을 제외하면 모든 객체는 Object를 확장하는 형태를 취하며, 모든 함수는 내부적으로 Object를 사용하고 있다. 따라서 자바스크립트에서 변수는 함수를 포함한 모든 종류의 객체를 자유롭게 받아서 처리할 수 있다.

자바스크립트의 기본형

• Number(숫자)
• String(문자)
• Boolean(이진 값)
• undefined
• null
• symbol

연산자 typeof

• typeof

typeof란 ?

특정 변수가 어떤 형태인지 확인하는 연산자. 입력값 하나를 받는 단항 연산자로, 함수가 아니라서 괄호 없이 사용된다.

EX : typeof myVariable;

표현식에 따른 변수형

<script>
    console.log(typeof 3); // number
    console.log(typeof "string"); // string
    console.log(typeof {}); // object
    console.log(typeof []); // object
    console.log(typeof function() {});  // function
    console.log(typeof null); // object
</script>

typeof연산자가 값을 구하는 순서

:: typeof 연산자 문법 = typeof 단항표현식

1. val은 typeof연산자에 입력된 단항표현식의 값
2. 만약 val의 종류가 레퍼런스(Reference)라면
   a. 만약 val의 레퍼런스를 참조할 수 없으면 'undefined'반환
3. val값을 실제 값 또는 참조하는 값으로 설정

클로저 실제 활용 예

:: 클로저를 가장 많이 사용하는 것은 자바스크립트 라이브러리나 모듈에서 private으로 나의 변수를 보호하고 싶을 때나 static변수를 이용하고 싶을 때이다. 그리고 일상적으로 콜백 함수에 추가적인 값들을 넘겨줘서 활용하거나 처음에 초기화했던 값을 계속 유지하고 싶을 때도 유용하게 사용할 수 있다.

아래 코드는 div에 버튼이 눌릴때마다 다른 내용을 추가하는 코드이다.

:: Add div를 누르면 text가 적혀있는 div가 생성되고 Add img를 누르면 이미지가 추가된다.

<div id="wrapper">
    <button data-cb="1">Add div</button>
    <button data-cb="2">Add img</button>
    <button data-cb="delete">Clear</button>
    Adding below...<br />
    <div id="appendDiv"></div>
</div>

<script>
    (function() {
        var appendDiv = document.getElementById("appendDiv");
        document.getElementById("wrapper").addEventListener("click", append);

        function append(e) {
            var target = e.target || e.srcElement || event.srcElement;
            var callbackFunction = callback[target.getAttribute("data-cb")];

            if(callback[target.getAttribute("data-cb")] !== undefined) {
                appendDiv.appendChild(callbackFunction());
            }
        };
        var callback = {
            "1": (function() {
                var div = document.createElement("div");
                div.innerHTML = "Adding new div";
                return function() {
                    return div.cloneNode(true);
                }
            }()),
            "2": (function() {
                var img = document.createElement("img");
                img.src="https://blog.kakaocdn.net/dna/dZtolT/btryJh3q8bc/AAAAAAAAAAAAAAAAAAAAAEf6AotcjC2-sZUo3ZBpReFYxTqq4dLXk8Jp036Vcqbe/tfile.svg?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1767193199&allow_ip=&allow_referer=&signature=Io7hlLMN0XmbcTAOnqkX5iG%2FnjM%3D";
                return function() {
                    return img.cloneNode(true);
                }
            }()),
            "delete": function() {
                appendDiv.innerHTML = "";
                return document.createTextNode("Cleared");
            }
        };
    }());
</script>

클로저를 활용한 부분들

var appendDiv = document.getElementById("appendDiv");

appendDiv를 미리 가져와서 한번의 초기화만으로 이후 함수들이 계속 접근이 가능하게 해준다.

var div = document.createElement("div");

var img = document.createElement("img");

각 콜백 함수들이 추가할 HTML엘리먼트를 만들어준다.

위 코드에서 어떤 버튼이 눌리는지는 DOM에 입력된 data-*속성을 이용해서 어떤 콜백 함수를 호출할지 결정해준다. 각 콜백 함수의 상위 클로저에서는 자바스크립트로 노드를 만들어뒀다가 콜백 함수가 호출되면 해당 노드를 복사해 appendDiv에 지속해서 추가하는 방식으로 동작한다.

이렇게 최초 초기화된 고정적인 값이나 변수를 자주 이용하는 경우, 클로저를 통해 최초 초기화해두고 콜백 함수에서 지속해서 참조하는 것이 퍼포먼스상 유리하게 작용할 수 있으며, 객체의 속성이 자유롭고 쉬운 자바스크립트에서는 이러한 디자인 패턴이 효율적이다.

위 코드에서 참고하고 활용할 수 있는 예들

• 클로저로 한 번만 DOM을 탐색하고 appendDiv를 계속 보관하여 활용하기
• div, img등 노드/템플릿을 자바스크립트로 만들어두고 필요할 때마다 복제 생성하여 활용하기
• 하나의 div에만 이벤트 핸들러를 설정하여 관리할 수 있는 이벤트 델리게이션 패턴
• 이벤트가 발생한 대상 엘리먼트를 크로스 브라우저에서 가져오기
• callback변수를 활용하여 대상에 따라 동적으로 콜백 함수 호출하기
• HTML5의 스펙에 맞는 사용자 정의 data-속성 사용하기

클로저 이해하기

클로저의 기본적인 예

<script>
    // 클로저의 기본적인 예
    function sum(base) {
        var inClosure = base;

        return function(adder) {
            return inClosure + adder;
        };
    };
    
    var fiveAdder = sum(5); // 5 and return function
    console.log(fiveAdder.toString());
    fiveAdder(3); // inClsure(5) + adder(3) = 8
    var threeAdder = sum(3); // 3 and return function
    console.log(threeAdder.toString());
</script>

위 소스에서도 함수 안에 다른 함수를 선언하고 외부에서 내부 함수를 사용하는 클로저의 특징을 확인할 수 있다.

외부에서 sum()함수를 호출하면 파라미터 base를 통해 넘어온 값은 inClosure변수에 저장된다. 그리고 내부 함수에서 inClosure변수를 참조한다.

var fiveAdder = sum(5);

선언되는 부분부터 보면, var fiveAdder를 통해 sum()함수가 호출되고 sum()함수의 파라미터인 base는 5로 넘어와서 inClsure변수도 5로 설정된다. 그리고 inClosure변수를 참조하는 내부 함수를 반환하여 fiveAdder에 저장한다.

이제부터 fiveAdder를 통해 함수를 호출하게 되면 스코프 체인을 따르게 된다.

그리고 나중에 fiveAdder를 통해 함수를 호출하게 되면 fiverAdder가 레퍼런스를 가지고 스코프 체인을 사용하게 되는 것이다.

fiveAdder(3);

이제 fiveAdder(3)이 호출되면, 위에 스코프 체인에서 inClosure는 5를 갖고, 내부함수의 파라미터 adder로 들어온 값에 3을 더하여 8이라는 값이 계산된다.

var threeAdder = sum(3);

다음으로 threeAdder를 호출하면 새로운 스코프 체인을 생성한다.

이처럼 같은 함수를 통해 받은 값은 각각의 함수가 생성되어, fiveAdder, threeAdder로 호출하는 스코프 체인이 만들어진다.

이처럼 클로저를 통해 각 함수는 자기만의 고유한 값을 보유하고 스코프 체인을 유지하면서 그 체인 안에 있는 모든 변수의 값들을 유지한다.

한가지 추가해보면, fiveAdder와 threeAdder변수의 형태는 아래처럼 서로 같다.

하지만 형태 이외에, fiveAdder !== threeAdder로 두개의 변수는 같지 않다. sum()함수를 호출할 때마다 같은 모양의 함수들이 새롭게 나오지만, 두 함수가 할당받은 스코프 체인, 숨겨져 있는 클로저가 다르기 때문이다.

다음은 setInterval()함수를 통한 클로저의 발생이다.

<button id="btnToggle">Toggle</button>
<div id="divPending">Pending</div>

<script>
    // setInterval() 함수를 통한 클로저 발생
    (function() {
        var pendingInterval = false,
        div = document.getElementById("divPending"),
        btn = document.getElementById("btnToggle");

        function startPending() {
            if(div.innerHTML.length > 13) {
                div.innerHTML = "Pending";
            }

            div.innerHTML += ".";
        };
        btn.addEventListener("click", function() {
            if(!pendingInterval) {
                pendingInterval = setInterval(startPending, 500);
            } else {
                clearInterval(pendingInterval);
                pendingInterval = false;
            }
        });
    }());
</script>

위 소스를 실행하면 아래와 같은 화면이 나온다. Toggle버튼을 클릭하면 “Pending”뒤에 “.”을 하나씩 추가하다가 일정 개수가 넘으면 다시 초기화하는 방식으로 동작한다.

var pendingInterval = false,
div = document.getElementById("divPending"),
btn = document.getElementById("btnToggle");

위 변수들은 내부에서만 접근 할 수 있도록 private변수로 선언했다. 그리고 startPending()함수 안에 있을 법한 divPending을 가져오는 부분을 상위 스코프에 미리 가져다 놓음으로써, 매번 <div>를 getElementById로 탐색해서 가져오지 않도록 했다.

아래는 클로저가 발생한 부분들이다.

if(div.innerHTML.length > 13) {
   div.innerHTML = "Pending";
}

if문에서 상위 스코프 div변수를 참조하는 부분과

pendingInterval = setInterval(startPending, 500);

setInterval()함수에서 첫번째 인자로 startPending함수를 사용하는 부분이다.

이런 경우를 보면, 함수 안에 함수가 있어서 내부에 있는 함수가 반환되지 않고 이벤트 콜백함수로 호출될 때도 클로저가 발생하는 것을 알 수 있다.

클로저(Closure)란 ?

클로저는 특정 함수가 참조하는 변수들이 선언된 렉시컬 스코프(Lexical Scope)는 계속 유지되는데, 그 함수와 스코프를 묶어서 클로저라 한다.

:: 렉시컬 스코프(Lexical Scope) : 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정하는 것이다. 중요한 점은 함수의 호출이 아닌 함수의 선언에 따라 결정된다는 점이다.

<script>

   var num = 1;
   function a() {
       var num = 10;
       b();
   }
 
   function b() {
       console.log(`num : ${num}`);
   }
 
   a(); // 1
   b(); // 1

</scrip>

이렇게 출력되는 이유는 함수의 호출로 상위 스코프가 결정된 것이 아니라 함수의 선언에 따라 상위 스코프가 결정되었기 때문이다. 즉 a, b모두 1을 출력한 것으로 볼 때 b함수가 전역을 가리키고 있다는 것을 알 수 있다.

<script>

   var name = 'Hello World'; // 전역변수
 
   function c() {
       var name = 'New World'; // 지역변수
       // secondName()은 내부함수이며, 클로저이다.
       function secondName() {
           // 부모함수에서 선언된 변수를 사용한다.
           console.log(`name : ${name}`); // New World
       }
       secondName();
   }
   
   c();

</script>

c();는 지역변수 name, secondName()함수를 생성한다. secondName()함수는 c()안에 정의된 내부 함수이며, c() 함수 내부에서만 사용이 가능하다.

최종정리

<script>
 
   // 클로저의 예
   function outer() {
       var count = 0;
       var inner = function() {
           return ++count;
       };
       return inner;
   }
   var increase = outer();
 
   console.log(increase()); // 1
   console.log(increase()); // 2
 
</script>

:: 정리

1. count변수는 outer()함수의 로컬 변수다.따라서 원칙적으로는 outer()함수 내부에서만 접근이 가능하다.

2. outer()함수 내부에 다시 함수를 하나 선언하여 inner변수에 할당했다.

3. inner변수에 할당한 함수는 outer()함수의 로컬 변수인 count에 접근하여 1만큼 증가시키고 이 값을 반환한다.

4. outer()함수의 반환값으로 inner변수를 지정하면서 함수 정의를 마친다.

각각의 div를 클릭했을 때 어떤 div를 클릭했는지 알려주는 소스

문제점

<div id="div0">Click0</div>
<div id="div1">Click1</div>
<div id="div2">Click2</div>

<script>

    var len = 3;

    // i는 모두 3이 출력된다.
    for(var i = 0; i < len; i++) {
        document.getElementById("div" + i).addEventListener("click", function() {
            alert("You Clicked div #" + i);
            console.log(i);
        }, false);
    }
    
</script>

문제점 : Click0, Click1, Click2중 어떤것을 클릭해도 "You Clicked div #3이 나오는 현상

이유 : 9번째줄에 콜백 함수는 5번줄에 선언된 변수에 접근할 수 있는 스코프를 생성하게 된다.

이후 div에 클릭 이벤트가 발생해서 콜백 함수가 호출될 때도 클릭에 설정한 이벤트 핸들러의 콜백 함수는 5번 줄의 변수들에 계속 접근할 수 있는 스코프를 갖게된다.

이것은 for-loop를 통해서 각각 div에 순서대로 클릭 이벤트 핸들러를 부여할 때 i가 0~3까지 증가한 뒤, 이후 for-loop가 끝나고 나서도 계속 유지된다. 따라서 나중에 10번줄의 alert()함수가 호출될 때 변수 i의 값은 이미 for-loop가 끝난 후의 값인 3으로 출력된다.

for-loop가 돌 때는 별도의 스코프가 생성되지 않고 i는 글로벌 스코프에 존재한다.

그러다 addEventListener()로 콜백 함수를 설정할 때 익명 함수가 선언되면서 스코프가 생성되어 스코프 체인을 만들게 된다.

function을 이용한 문제해결

<div id="div0">Click</div>
<div id="div1">Click</div>
<div id="div2">Click</div>

<script>

    var len = 3;
    
    // function을 이용한 문제해결
    function setDivClick(index) {
        document.getElementById("div" + index).addEventListener("click", function() {
            console.log(index);
            alert("You Clicked div #" + index);
        }, false);
    }

    // var i, len = 3;
    for(var i = 0; i < len; i++) {
        setDivClick(i);
        console.log(i);
    }

</script>

closure를 활용한 문제해결

<div id="div0">Click</div>
<div id="div1">Click</div>
<div id="div2">Click</div>

<script>

    // closure를 활용한 문제해결
    for(var i = 0; i < len; i++) {
        document.getElementById("div" + i).addEventListener("click", (function(index) {
            return function() {
                alert("You Clicked div#" + index);
            };
        }(i)), false);
    }

</script>

예외처리란 ?

프로그램이 실행되는 동안 문제가 발생하면 프로그램이 자동으로 중단된다. 이때 프로그램이 대처할 수 있게 처리하는 것을 예외 처리라고 한다.

- 프로그램 실행 중 발생하는 오류 : 예외(Exception)

- 프로그래밍 언어의 문법적인 오류로 인해 프로그램이 실행되기 전에 발생하는 오류 : 에러(error)

try catch finally

try {

} catch() {

} finally {

}

try 구문 안에서 예외가 발생하면 이를 catch 구문에서 처리한다. finally 구문은 필수 사항은 아니며, 예외 발생 여부와 상관없이 수행해야 하는 작업이 있을 때 사용한다.

:: try catch 예제

willExcept 자체가 존재하지 않는데, willExcept의 byeBye() 메서드를 사용한다. willExcept 객체도 없고 byeBye() 메서드도 존재하지 않는다. ( 예외처리를 알아보기 위한 강제 예외 )

<script>
    try {
        willExcept.byeBye();
    } catch(exception) {

    }

</script>

try 구문 안에서 예외가 발생하면 더 이상 try 구문을 진행하지 않고 catch 구문을 실행시킨다.

:: catch구문

아래 코드는 willExcept.byeBye()를 실행하려는 순간에 예외가 발생해 catch 구문을 실행한다.

그러므로 alert('try 구문 종료'); 는 실행되지 않고 '예외처리'만 실행된다.

<script>
    try {
        willExcept.byeBye();
        alert('try 구문 종료');
    } catch(exception) {
    	alert('예외처리');
    }
</script>

:: finally구문

<script>
    try {
        willExcept.byeBye();
    } catch(exception) {
    	alert('예외처리');
    } finally {
    	alert('무조건 발생');
    }
</script>

try에서 예외가 발생하고, catch 구문이 실행된다. try에서 예외가 발생을 하거나 말거나 상관없이 finally 구문은 실행된다.

그러므로 '예외처리', '무조건 발생' 두가지 다 실행된다.

<input type="text" id="input_event" />


<script>
        input_event.addEventListener('keydown', () => {
            console.log('keyDown');
        });

        input_event.addEventListener('keyup', () => {
            console.log('keyUp');
        });

        input_event.addEventListener('keypress', () => {
            console.log('keyPress');
        });
</script>

1. keydown

 - 키보드를 눌렀을때 가장 먼저 실행된다.

 - 키보드를 길게 누르고 있으면 연속적으로 실행된다.

2. keypress

 - 키보드를 눌렀을때 두번째로 실행된다.

 - 키보드를 누르고 있으면 연속적으로 실행된다.

3. keyup

 - 키보드에서 손을 뗄 때 한번만 실행된다.

 - 키보드를 누르고 있을때는 실행되지 않는다.

:: ctrl, alt, shift, esc키 등은 keypress에서는 작동하지 않으며, keydown과 keyup에서만 작동한다.

:: keyCode값

: keydown, keyup에서 q = 81이며, keypress에서 q = 113번으로 번호가 다르다.

: 하지만 대문자로 쓰면 번호가 같아진다. keydown, keyup, keypress에서 Q = 81

:: **keydown과 keypress는 이전에 누른 값을 가지고 있으며, keyup은 현재 누른 값을 가지고 있다.

:: (Error) FireFox에서 keyCode가 먹히지 않는 부분

    <input type="text" id="input_event" />

    <script>
        input_event.addEventListener('keydown', () => {
            // Chrome
            console.log(event.keyCode);
            
            // FireFox
            console.log(event.which);
        });

        input_event.addEventListener('keyup', () => {
            // Chrome
            console.log(event.keyCode);
            
            // FireFox
            console.log(event.which);
        });

        input_event.addEventListener('keypress', () => {
            // Chrome
            console.log(event.keyCode);
            
            // FireFox
            console.log(event.which);
        });
    </script>

3항 연산자를 사용할 경우

let code = event.keyCode ? event.keyCode : event.which;

if문을 사용할 경우

let code;

if(event.keyCode === undefined || event.keyCode === null) {
    code = event.which;
} else {
    code = event.keyCode;
}

BODY 구성

<body>
    <h1>Header 1</h1>
    <h1 id="target">Header 2</h1>
    <h1>Header 3</h1>
    
    <script>
        $(document).ready(function() {
            $('#target').css('color', 'orange');
        });
    </script>
</body>

HTML웹 표전에 따르면 id속성은 HTML페이지 내에서 유일한 값을 가져야 한다. 즉, 위 구성에서 id속성으로 target은 무조건 한개만 존재해야 합니다. ( 실제 실행에서는 2개 이상이어도 문제는 없습니다. )

h1태그 중 id속성이 target인 문서 객체 선택하기

<script>
    $(document).ready(function() {
        $('h1#target').css('color', 'orange');
    });
</script>

클래스 선택자

<body>
    <h1 class="item">Header</h1>
    <h1 class="item select">Header 1</h1>
    <h1 class="item">Header 2</h1>
</body>

<script>
    $(document).ready(function() {
        $('.item').css('color', orange');
        $('h1.item').css('background', 'red');
    });
</script>

두 class속성이 모두 있는 문서 객체만 적용하기

<script>
    $(document).ready(function() {
        $('.item.select').css('color', 'orange');
    });
</script>

현재 body태그에서 두 class속성이 모두 있는 문서 객체는 두번째 위치한 h1태그 이므로, 두번째 h1태그에만 스타일이 적용이 됩니다.

1. 전개 연산자를 활용한 배열 합치기 ( Spread Operator(...) )

전개 연산자를 사용한 배열 병합

<script>
    const arrayA = [1, 2, 3, 4, 5];
    const arrayB = [52, 273, 99, 100, 101];
    
    const newArray = [...arrayA, ...arrayB];
    
    console.log(newArray); // [ 1, 2, 3, 4, 5, 52, 273, 99, 100, 101 ]
    
</script>

전개 연사자를 사용한 배열 병합 2

<script>
    const originalArray = [52, 273, 55, 45];
    
    const newArrayA = [1, 2, 3, 4, 5, ...originalArray];
    const newArrayB = [...originalArray, 1, 2, 3, 4, 5];
    
    console.log(newArrayA); // [ 1, 2, 3, 4, 5, 52, 273, 55, 45 ]
    console.log(newArrayB); // [ 52, 273, 55, 45, 1, 2, 3, 4, 5 ]
    
</script>

...originalArray처럼 전개연산자는 originalArray의 원소들을 쪼개어 개별요소로 리턴합니다.

2. .push()를 사용한 배열 합치기

<script>
    const array1 = [1, 2, 3, 4, 5];
    const array2 = [6, 7, 8, 9, 0];
    
    array1.push(array2);
    
    console.log(array1.length); // 6
    console.log(array1[5]); // [ 6, 7, 8, 9, 0 ]

</script>

.psh()를 사용하여 배열을 합치면 파라미터로 전달된 배열을 하나의 원소로 처리가 됩니다.

그러므로, 합쳐진 array1의 length는 10이 아닌 6이 되고, array1[5]의 원소는 [ 6, 7, 8, 9, 0 ]이 출력됩니다.

3. 전개 연산자와 .push()를 활용한 배열 합치기

<script>
    const array1 = [1, 2, 3, 4, 5];
    const array2 = [6, 7, 8, 9, 0];
    
    array1.push(...array2);
    
    console.log(array1.length); // 10
    console.log(array1[5]); // 6

</script>

전개 연사자는 배열의 원소들을 쪼개어 개별요소로 리턴한다고 했습니다.

그렇기 때문에 2번처럼 하나의 원소가 아닌 개별원소로 처리가 됩니다.

그러므로, array1의 length는 10이 되며, array1[5]의 원소는 6이 출력됩니다.

4. .concat()을 사용한 배열 합치기

<script>
    const array1 = [1, 2, 3];
    const newArray = array1.concat('a', 'b', ['c', 'd'], 'e');
    
    console.log(newArray.length); // 8
    console.log(newArray); // [ 1, 2, 3, 'a', 'b', 'c', 'd', 'e' ]
    
</script>

.concat()은 array1과 전달받은 파라미터들을 합쳐서 새로운 배열을 생성하여 리턴합니다.

이 때, 파라미터가 배열일 경우 배열 안의 원소들을 뽑아서 새로운 배열에 추가합니다.

그러므로, [ 'c', 'd' ] 배열이 하나의 원소로 취급되지 않아서 newArray.length가 7이 아닌 8이 됩니다.