[JavaScript] 생활코딩 WEB2 - JavaScript 18~23

 

 

 

리팩토링 중복의 제거

 

 

리팩토링 : 코딩을 하고 나면 비효율적인 코드를 효율적으로 만들어서 가독성을 높이고 유지보수에 편리하도록 개선하는 작업.

 

 

 

documnet.querySelector('#night_day') 를 -> this 로 바꿔줌으로써 훨씬 간결하고 깔끔한 태그로 정리 되었다.

 

 

 

 

 

 

document.querySelector('body') -> var target = document.querySelector('body') 코드를 추가해준 뒤,

기존 자리에 target으로 넣어주면 훨씬 간결해진 것을 확인할 수 있다.

 

-> 코드의 양이 줄었고, target으로 되어있는 부분은 'body' 부분만 바뀌는 경우, target이 전부 바뀔 수 있다.

 

 

 

---

 

 

 

배열

:Array

 

 

 

 

배열은 대괄호부터 시작해서 대괄호로 끝난다 [], 값과 값 사이는 콤마(,)로 구분해준다.

var (coworkers) = 변수

 

coworkers라는 변수에 = ["egoing","leezche"] 배열이라고 하는 데이터 타입이 담긴 것.

-> 새로운 수납상자를 집에 갖다 놓으면서 그 안에 물건을 넣어둔 것과 같은 이치.

 

 

 

서랍에 넣어둔 물건을 꺼내려면(get)

document.write(coworkers)라는 변수의 0번째 값 -> egoing

-> index 0번은 egoing

 

 

 

 

들어있는 값이 몇 개인지 세려면

document.write(coworkers.length); -> 유동적으로 바뀔 수 있음.

 

 

 

 

데이터를 끝에 추가 하려면

coworkers.push('duru');

coworkers.push('taeho');

 

-> push이외에 데이터 값을 추가하는 명령어는 여러 개가 있다.

구글링 : javascript array add data

검색을 습관화하여 억지로 머릿속에 우겨넣지 말자.

 

 

 

완성된 예제 코드;

 

 

 

---

 

 

 

반복문

: 순서대로 실행되는 프로그램의 실행 순서의 흐름을 if, 조건문과 함께 제어하는 제어문.

: 언제 종료될 것인지 잘 지정하는 것이 중요하다.

 

 

while(true) {}인 경우 {}안의 코드들이 false가 되기 전까지 반복적으로 실행된다.(무한)

false일 경우, 그 때 끝나면서 while문 바깥 코드들이 실행된다.

 

 

순서대로 천천히 본다면,

var(변수) i의 처음 값은 0,

while 괄호 안의 값은 i의 값이 3보다 작을 경우까지만 true,

i=0이라는 변수가 있으나 반복문 끝에 i=i+1을 넣어줬으니 코드가 반복하여 실행될 수록 1씩 늘어난다.

i의 값이 3보다 커지는 경우 while 괄호 안의 값이 false가 되므로 반복이 종료되고, {}의 바깥 코드가 실행이 된다.

 

 

 

 

---

 

 

배열과 반복문

 

 

 

서로 연관된 데이터들을 자바스크립트에서 담는 것 - 배열

그 배열에 담겨있는 데이터를 순차적으로 꺼내서 <li>태그로 만들어주는 것 - 반복문

 

 

coworkers[ i ] -> 배열에서 데이터를 가져올 때 대괄호를 넣고 그 안에 가지고 오고싶은 데이터의 인덱스 값을 넣어주면 된다. [ i ]

 

 

원소가 바뀌면 undefined (값이 없다)가 뜬다.

coworkers.length 를 넣어줌으로써 탄력적으로 로직이 변할 수 있게 한다.

 

배열 - 순서대로 서로 연관된 데이터를 잘 정리하는 것

반복문 - 순서대로 그 배열에 담겨 있는 데이터를 하나씩 꺼내서 자동화된 처리를 할 수 있는 문법.

 

 

 

---

배열과 반복문의 활용

 

 

document.querySelectorAll('a') -> 배열

var alist라는 변수에 담고 실행하면 0번째 a태그를 확인할 수 있다 (1도 마찬가지)

 

alist[i]; -> 반복문이 실행될때마다 a 태그를 하나하나 가져올 수 있다.

 

반복문을 사용해서 많은 일을 손쉽게 할 수 있다.

컴퓨터는 연관된 데이터를 배열의 형태로 우리에게 돌려준다.