JS 배열, function함수

 

 

 

•  배열

      1. 대괄호 [ ]를 이용해서 각 배열 요소를 묶는다.
      2. 서로 다른 타입(숫자, 문자열, 논리값 등)을 하나의 배열에 저장할 수 있다.
      3. 인덱스는 0부터 시작한다.
      4. 배열의 길이는 length 속성으로 확인할 수 있다.

 

 

 <div id="box1"></div>

  <script>

    // 배열의 선언 및 초기화

    var array = [ 100, 1.5, 'Hello World', true ];

    // 일반 for문

    for(let i = 0; i < array.length; i++){  

      document.getElementById('box1').innerHTML += (array[ i ] + '&nbsp;&nbsp') ;  ←HTML공백넣기

    }

    // for in문 (배열에서 인덱스를 가져오는 방식의 반복문)

    for(let i in array){

      document.getElementById('box1').innerHTML += (array[ i ] + '&nbsp;&nbsp') ;

    }

  </script>

 

결과

 

 <div id="box2"></div>

 

  <script>

    var array = [ 'google.png','naver.png', 'daum.png', 'coupang.png' ];

    var str = '';

    for(let i = 0; i < array.length; i++){

      str += '<img src="../../assets/image/' + array[ i ] + '"width="100px">';

    }

    document.getElementById('box2').innerHTML = str;

  </script>

 

결과

 

 

 <div id="box3"></div>

  <script>

     box3 문서 객체

    var box3 = document.getElementById('box3');

     배열 선언(비어 있는 배열)

    var array = [];

     추가

     1. push(요소)    : 마지막 요소로 추가하기

     2. unshift(요소) : 첫번째 요소로 추가하기

    array.push('제육볶음');

    array.push('짬뽕');

    array.unshift('짜장');

    array.unshift('된장찌개');

    for(let i = 0; i < array.length; i++){

      box3.innerHTML += array[i] + '<br>';

    }

     삭제

     1. pop()   : 마지막 요소 삭제하기

     2. shift() : 첫번째 요소 삭제하기

    array.pop();

    array.shift();

    for(let i = 0; i < array.length; i++){

      box3.innerHTML += array[i] + '<br>';

    }

     수정

     1. splice(수정을 시작할 인덱스, 삭제할 요소의 개수, [추가할 요소1, 추가할 요소2,...])

     마지막 요소로 '계란찜' 추가

    array.splice(array.length, 0, '계란찜');

     두번째 요소를 '순댓국' 수정하기

    array.splice(1, 1, '순댓국'); // 인덱스 1의 요소부터 1개를 지우고, '순댓국' 넣기

     첫번째 요소를 삭제

    array.splice(0, 1); // 인덱스 0부터 1개 요소 지우기

    for(let i = 0; i < array.length; i++){

      box3.innerHTML += array[i] + '<br>';

    }

  </script>

 

결과

 

 

• 선언 함수

      1. 함수의 이름이 있다.
      2. 함수 정의(함수를 만드는 것)와 함수 호출(함수를 사용하는 것)로 구분한다.
      3. 함수 정의 형식
        function 메소드명([매개변수]){
          함수 본문
          return 반환값;
        }
      4. 함수 호출 형식
        함수명([인수]);

 

     함수 호출

      myFunc1();

     함수 정의 (호이스팅 대상이므로 언제나 먼저 처리된다.)

    function myFunc1(){

      alert('myFunc1 실행');

    }

 

결과

•  익명 함수

      1. 함수의 이름이 없다.
      2. 호이스팅 대상이 아니다. (함수의 정의를 반드시 먼저 해야 한다.)
      3. 함수 정의 형식
          1)
          function([매개변수]){
            함수 본문
            return 반환값;
          }
          2) 화살표 익명 함수
           ([매개변수])=>{
            함수 본문
            return 반환값
           } 
      4. 함수 호출 형식
          1) 함수를 변수에 저장히기
            (1) 일반 익명 함수
             var 함수명 = function(){
              }
             함수명();
            (2) 화살표 익명 함수
             var 함수명 = ()=>{
            }
            함수명();
        2) 자기 호출 (함수 정의와 함수 호출이 동시에 진행되는 방식)
             (1) 일반 익명 함수 
                (function(){
                })();
             (2) 화살표 익명 함수
                (()=>{
                 })();
           (3) 이벤트 리스너로 등록하기
                (1) 일반 익명 함수
                 문서객체.addEventListener('이벤트', function(){
                  })
                (2) 화살표 익명 함수
                  문서객체.addEventListener('이벤트', ()=>{
                  });

 

 

    ① 함수를 변수에 저장히기

    var myFunc2 = function(){

      console.log('myfunc2 실행');

    }

    myFunc2();

     ② 자기 호출

    (function(){

      console.log('자기호출 실행');

    })();

     ③ 이벤트 리스너로 등록하기

    document.addEventListener('dblclick', function(){

      console.log('이벤트 리스너 실행');

    });

결과