배열, 반복문, 함수, 객체에 관해

생활코딩 WEB2 - JavaScript 강의를 듣고 기억하고 싶은 내용을 정리했습니다. 약간 뒤죽박죽입니다.

(이전 게시물 코드에 이어서) 다크모드를 클릭했을때 모든 a 태그의 스타일 속성값을 수정하고 싶다면 반복문을 사용합니다. 기본적으로 아래와 같은 형식의 코드를 추가하면 됩니다.

var links = document.querySelectorAll('a'); // 모든 a 태그를 선택하고, 배열에 담는걸까요? 헷갈립니다.
var i = 0;
while(i<links.length){ // .length 는 해당 배열 요소의 갯수를 반환합니다. a 태그의 갯수가 얼마든 해당 태그의 수 만큼 반복문이 실행됩니다. 
	links[i].style.color='powderblue';
	i=i+1;
}

---

배열은 데이터에 순서를 부여해 저장하는 수납상자입니다. 대괄호 [ ] 를 사용해서 데이터를 담고 0, 1, 2 .. 순서대로 index 라는 순서가 부여됩니다.

// 이렇게 배열에 데이터를 담을 수 있고
var coworkers = ["egoing", "leezche"];

// 이렇게 데이터를 호출할 수 있습니다. 
coworkers[0]; // -> "egoing"

// 배열에 담긴 데이터의 갯수도 셀 수도 있고
coworkers.length; // 2

// push 메소드로 데이터를 추가할 수 있습니다.
coworkers.push('duru'); 

// push 처럼 배열의 데이터를 다루는 다양한 메소드가 있습니다.

여기서 배열의 갯수를 새는 length 속성은 반복문의 조건으로 사용합니다. 배열의 갯수를 정확히 알 수 없을 때, 그 갯수만큼 반복문을 돌며 어떤 코드를 실행해야 한다면 length 를 사용합니다.

var i = 0;  // 초기화
while( i < coworkers.length) {  // 조건
	document.write(coworkers[i]);
	i = i + 1;  // 증감
}
// 이렇게 반복문을 작성하면 배열 안의 모든 요소를 출력합니다. 

이런 맥락으로 모든 a 태그의 색을 바꾸어주는 반복문을 아래처럼 작성합니다.

var links = document.querySelectorAll('a'); // 배열?
var i = 0;
while(i<links.length){ 
	links[i].style.color='powderblue';
	i=i+1;
}

---

함수를 사용하면 복잡한 코드를 하나의 변수로 정의할 수 있습니다. 함수에서 입력에 해당하는 것을 parameter 매개변수 argument 인자 라고 하고, 출력을 return 리턴 이라고 합니다.

function sum (left, right) { // left, right가 매개변수
	document.write(left+right);
}
sum(2, 3); // -> 5 여기 들어가는 2, 3이 인자

---

나이트데이 버튼을 함수를 활용해서 리팩토링 해보면,

function nightDayHandler(self){
    var target = document.querySelector('body');
    if(self.value === 'night'){
      target.style.backgroundColor = 'black';
      target.style.color = 'white';
      self.value = 'day';
      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        alist[i].style.color = 'powderblue';
        i = i + 1;
      }
    } else {
      target.style.backgroundColor = 'white';
      target.style.color = 'black';
      self.value = 'night';
      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        alist[i].style.color = 'blue';
        i = i + 1;
      }
    }
  }

this 가 self 로 바뀌는 것을 주의합니다. 그리고 위 함수를 input 태그에 아래처럼 입력합니다. 여기서는 this 를 사용합니다.

<input id="night_day" type="button" value="night" onclick="
    nightDayHandler(this);
  ">

저 위의 식에서 중복되는 a 태그 색상 바꾸기 코드를 리팩토링 해본다면,

function setColor(color) {
  var alist = document.querySelectorAll('a');
  var i = 0;
  while(i < alist.length){
    alist[i].style.color = color;
    i = i + 1;
  }
}
function nightDayHandler(self){
  var target = document.querySelector('body');
  if(self.value === 'night'){
    target.style.backgroundColor = 'black';
    target.style.color = 'white';
    self.value = 'day';
    setColor('yellow');
  } else {
    target.style.backgroundColor = 'white';
    target.style.color = 'black';
    self.value = 'night';
    setColor('red');
  }
}

setColor 함수를 써서 해당 코드를 묶어줄 수 있습니다. 위 코드에 객체를 적용해보면, target 은 이름에서 body 를 연상할 수 없으니 연관된 함수와 변수를 그룹핑해서 객체로 바꾸어 줍니다. 바꾸면 아래처럼 호출할 수 있습니다.

Body.setColor
Body.setBackgroundColor

---

객체는 { } 중괄호로 데이터를 담고, 순서에 상관없이 key 와 value 값으로 데이터를 담습니다. 이 데이터를 프로퍼티 property 라고 합니다.

// 이렇게 선언하고,
var coworker = {
	programer="egoing",
	designer="leezche":
}

// 이렇게 호출합니다.
coworker.programer // 닷노테이션, 숫자, 띄어쓰기, 변수에 적용 안됩니다.
coworker['designer'] // 브라켓노테이션, 다 적용 됩니다.

// 객체 반복문은 아래처럼 쓸 수 있습니다.
for ( var key in coworker ) { 실행할 코드 } 

// 기존에 없던 key 값을 호출하고 value 를 대입하면 프로퍼티를 추가할 수 있습니다.
coworker.showAll = function(){}; 
// showAll 이라는 key 값을 가진 함수를 객체 coworker 에 담는다.

body 라는 변수에 key 가 setColor 이고 value 가 함수인 프로퍼티 하나를 담는다면,

var Body = {
	setColor: function (color) {
	document.querySelector('body').style.color = color;
	}
}

추가 데이터를 넣는다면 쉼표 , 로 구분합니다.

var Body = {
	setColor: function (color) {
	document.querySelector('body').style.color = color;
	},
	setBackgroundColor:function (color) {
	document.querySelector('body').style.backgroundColor = color;
	}
}

a 태그의 컬러를 바꿔주는 반복문 함수도 객체로 담아주면,

var LInks = {
	setColor:function(color){
		var alist = document.qeurySelectorAll('a');
		var i = 0;
		while(i < alist.length){
		alist[i].style.color = color;
		i = i + 1;
		}
	}
}

이렇게 객체로 정리한 함수들을 기존 코드에 사용하면 아래와 같습니다.

function nightDayHandler(self) {
	if(self.value === 'night') {
		Body.setBackgroundColor('black');
		Body.setColor('white');
		self.value = 'day';
		Links.setColor('white');
	} else {
		Body.setBackgroundColor('white');
		Body.setColor('black');
		self.value = 'night';
		Links.setColor('blue');
	}
}

// input 태그 는 아래처럼

<input id='night_day' type="button" value="night" onclick="nightDayHandler(this);">