Code Refactoring. 코드 리펙토링.
이전의 코드와 동일한 기능을 수행하지만, 더욱 효율적으로 구성하는 것
이것에 중요한 역할을 하는 것이 바로 위의 ‘함수’ 이다.
Object. 객체.
코드가 많이진다 > 정리를 위해 함수를 사용한다 > 함수가 많아지면 > 함수와 연관된 변수들이 많아진다 > 복잡도의 한계에 똑같이 도달 > 이러한 한계 상황에서 서로 연관된 함수와 서로 연관된 변수들을 같은 이름으로 그룹핑해서 정리하기 위한 도구이다.
당장에 1줄 밖에 안되는 코드이고, 그 의미가 명확하여 함수로 변환하는 것이 큰 의미가 없을 경우도 있지만,
그 의미가 불명확하거나, 시간이 지나면 그 의미가 무엇이었는지 파악하기 어려워 질 것이 예상될 경우에는 함수를 통해서 그 로직에 이름을 부여하는 것도 좋은 방법이 될 수 있다.
! 만약 function 이름이 중복되어 선언될 경우 가장 나중에 있는 function이 이전의 function들에 덮어쓰기되어 실행된다.
아래는 함수를 이용하여 1차로 리펙토링 한 코드의 일부이다.
function nightDayHandler(self) {
let target = document.querySelector('body');
if (self.value === 'night') {
bodySetBackgroundColor('black');
bodySetColor('white')
linksSetColor('brown')
self.value = 'day';
} else {
bodySetBackgroundColor('white');
bodySetColor('black')
linksSetColor('powderblue')
self.value = 'night';
}
}여기에서 더 나아가 아래와 같이 Body와 Links를 객체화 하여 정리할 수 있다.
💡 이는 윈도우의 폴더와 비슷한 느낌이며, 객체라는 개념을 알게 되고 나면 이전에 써오던 document.querySelector 를 보았을때 이는 document라는 객체 안에 있는 querySelector라는 메소드로 구성된 코드라는 것을 알 수 있다 ! function nightDayHandler(self) {
let target = document.querySelector('body');
if (self.value === 'night') {
Body.SetBackgroundColor('black');
Body.SetColor('white')
Links.SetColor('brown')
self.value = 'day';
} else {
Body.SetBackgroundColor('white');
Body.SetColor('black')
Links.SetColor('powderblue')
self.value = 'night';
}
}array와 object의 비교
array의 경우, 정보는 순서(index)를 가지는 값으로 저장이 된다
그렇다면 순서 없이 정보를 저장할 수 있는 방법은? 이것이 객체이다.
그렇지만 아무런 체계 없이 무작위로 데이터를 집어넣는 것이 아니라 (이것은 수납이 아닌 쓰레기통과 같다) 특정한 ‘이름’ 을 부여하여 정리한다. 즉, 각각 이름이 있는 수납함이다.
객체를 만들기 위해서는, 먼저 객체의 이름을 선언을 하고 (let) 객체를 담는 컨테이너 코드를 입력해야 한다 (object literal) 이때 기호는 중괄호 {} 를 사용한다. ( array의 경우 대괄호 [] )
let coworkers = {
"programmer":"egoing"
"designer":"leezche"
};위에 기입하였듯, 객체를 선언하는데 있어서 배열처럼 나열하는 것이 아니라 각각 이름표를 붙여주어야 한다(예시의 programmer,designer 와 같은)
아래는 간단하게, 객체를 html 위에 작성하는 예시이다
let coworkers = {
"programmer": "egoing",
"designer": "leezche"
};
document.write("programmer : " + coworkers.programmer + " <br>");
document.write("designer : " + coworkers.designer + " <br>");
coworkers.bookkeeper = "duru";
document.write("bookkeeper : " + coworkers.bookkeeper + " <br>");
coworkers["data scientist"] = "taeho"; // 띄어쓰기를 하며 배열에 값을 추가하는 방법
document.write("data scientist : " + coworkers["data scientist"] + " <br>");object & iteration
생성된 객체에 어떠한 데이터가 있는지를 모조리 가져와야 하는 경우.
즉, 반복문을 써야하는 경우가 있다. (iteration)
for (let key in coworkers) { // coworkers 안의 key 값을 가져오는 반복문
document.write(key + '<br>') // case 1
document.write(coworkers[key] + '<br>') // case 2
document.write(key + ' : ' + coworkers[key] + '<br>') // case 3
}이때, key 값은 array의 index와 비슷한 개념이다. (순서성의 유무에 따른 단어 차이)
각 case 별로 출력값은 다르다.
property & method
object에 소속된 변수의 값으로 함수를 지정할 수 있고
object에 소속된 함수를 만들 수 있다. 이것이 바로 method 이다
object에 소속된 변수를 property 라고 한다.
coworkers.showAll = function () { // method를 만드는 방법
for (let key in this) {
document.write(key + ' : ' + coworkers[key] + '<br>')
}
}마치며..
아직 내 수준에는 javascript는 배우면 배울수록 헷갈리고 어려운 언어같다.
그렇기에 도전욕 또한 생기고 말이다. 처음부터 완벽하게 개념을 숙지할 순 없겠지만,
어느정도 숙지한 뒤 얼른 JS를 사용하여 제대로된 포트폴리오를 만들고 싶다
ES6로 코딩을 접하고, 보강을 ES5 기준 내용으로 하다보니
사용하는 문법에 차이가 있어 개념이 혼재되어 있는 상태이다
(let 으로 배웠지만 var가 사용 되는 등..)
물론, 이전의 방식과 요즘의 방식을 모두 알고 있는 것이 나쁠것은 없겠지만
개인적으로 배우는 단계에서는 어느 하나의 기준을 잡고 배우고 싶다는 생각이 있다.
그래서 지금 보강용으로 듣고있는 ES5기준의 강의에서는 ‘ 아 이런 개념들이 있구나 ‘ 정도로 짚고
가볍게 넘어가고 있다!
때문에, 보강용 강의를 모두 수강하고 나면 ES5와 ES6의 차이점에 대해 확실히 공부를 하고
원래 수강하던 코딩알려주는 누나의 JS강의를 재수강 해봐야 할 것 같다!
