[부스트코스 서포터즈3기]Javascript제어문 -리팩토링 , 반복문예고

들어가기 전 

___________________________________________________

 

안녕하세요! :)

 

 

오랜만의 업로드라..  글 쓰는 게 많이 어색한 거 같아요 ㅠㅠ 

 

 

오늘 살펴볼것은 리팩터링 그리고 반복문 예고에 대해 살펴보도록 하겠습니다! 

 

 

리팩토링 

___________________________________________________

 

먼저 각 강의에 대한 학습 목표와 핵심 단어들을 살펴보겠습니다! 

 

리팩토링 학습목표 , 핵심 단어

 

먼저 리팩토링에 대해 먼저 살펴보겠습니다! 

 

 

리팩터링이란 비효율적인 코드를 효율적으로 만들어 가독성을 높이고 유지보수가 쉽도록 만드는 것을 의미합니다! 

 

 

조금 더 쉽게 이해를 하자면 코드를 작성할때 생각해야 하는 부분들을 살펴보면 해답을 간단히 찾을 수 있습니다.

 

 

코드를 작성하는 것에 있어

 

 

1. 가독성 

 

 

2. 간결성 (효율적인 ) 

 

 

이렇게 두 가지를 생각한다면 해당 리팩토리에 대한 내용을 쉽게 이해하실 수 있으실 거 같습니다. 

 

 

즉 , 해당 코드를 작성하는 것에 있어 반복되는 코드들을 계속하여 작성해주는 것이 아닌 간단하게 작성함으로써

 

 

조금 더 가독성을 높이고 , 효율적으로 만들 수 있게 됩니다.

 

 

리팩터링을 하는 것에 있어 2가지를 사용할 수 있는데 

 

 

1. 변수에 반복되는 값을 넣어 저장 후 , 해당 반복 구문에 변수 삽입 

 

 

2. 자기 자신을 가리키기 위한 this를 넣어줌으로써 자신의 값을 말하는 반복 구문에 this 삽입 

 

 

이렇게 두 가지가 가능합니다. 코드를 통해 한번 살펴보겠습니다 :) 

 

 

[출처]부스트코스-자바스크립트의 시작

 

해당 구문을 보시게 되면 조건문 속 지속하여 반복되는 코드들이 있음이 확인되십니까!? 

 

 

이렇게 코드 내에 반복되는 구문들을 변수 , this를 이용하여 쉽게 변경이 가능합니다! 

 

 

한번 직접 해보시고 답을 체크해 보시는 것을 권장드립니다 :) 

 

 

 

[출처]부스트코스 - 자바사크립트의 시작

 

직접 다시 작성하신 코드와 일치하신가요!?

 

 

해당 코드를 살펴보게 되면 target이라는 변수를 설정해 해당 변수에 반복되는 body 구문을 삽입하여 

 

 

반복되는 부분에 삽입하여 중복을 제거하였고, 

 

 

자기 자신을 가리키는 this를 이용하여 이전 구문에서 자기 자신의 값을 day 혹은 night으로 바꾸는 코드에

 

 

this를 삽입함으로써 중복을 제거하였습니다:) 

 

 

이렇게 리팩터링을 하게 되면 조금 더 간결하게 코드를 작성할 수 있다는 장점을 가지고 있습니다! 

 

 

반복문 예고 

___________________________________________________

 

 

다음은 다음 시간에 자세하게 살펴볼 반복문에 대한 예고 강의에 대해 소개드리겠습니다 :) 

 

 

먼저 해당 강의 학습목표 , 핵심 단어에 대해 살펴보겠습니다!

 

해당 강의에서는 반복문에 대해 간단히 어떤 것인지를 이야기해주었습니다! 

 

 

반복문에 대해 간단히 설명을 드린다면

 

 

반복문이란 해당 조건을 만족한다면 같은 작업을 반복적으로 실행해주는 문법을 의미합니다! 

 

 

코드를 통해 간단하게 살펴보겠습니다! 

 

 

[출처]부스트코스 - 자바스크립트의 시작

해당 코드를 살펴보시면 while을 이용한 반복문이 있는 것을 확인하실 수 있습니다! 

 

 

C언어나 다른 언어들에 대해 공부하셨던 분들이라면 굉장히 익숙하지만 그렇지 않다면 생소한 문법입니다 ㅠ

 

 

간단히 위 코드에 있는 while문을 해석한다면 다음과 같습니다.

 

 

i 가 links.length(링크 변수의 길이 ) 미만까지 해당 반복문을 실행해라  <-- 이해하셨나요!? 하하...

 

 

다음 반복문 파트에서 제대로 살펴볼 것이기 때문에 이번 파트에서는 다음 하나만 기억해주시면 됩니다.

 

 

* 반복문은 해당 조건을 만족한다면 같은 작업을 반복적으로 실행해주는구나! 

 

 

다음과 같이 이해해 주시면 될 거 같습니다! 

 

 

 

생각해보기 

___________________________________________________

 

 

해당 두 개의 강의에 대한 생각 해보기! 한번 살펴보겠습니다!.

 

 

리팩토링 생각해보기

반복문 예고 생각해보기

 

 

한번 고민해보시고 직접 작성 후 스크롤을 내려주세요 :) 

 

 

 

 

 

 

 

 

 

 

 

 

리팩토링 생각해보기 정답

 

반복문 예고 정답 

 

리팩터링 부분의 경우 똑같이 작성하셨을거라 생각되며 , 반복문의 경우에는 설명하는것이 다를거 같단 생각이 듭니다:) 

 

 

자신만의 방법으로 이해하셨다면 클리어! 

 

 

마치며

___________________________________________________

 

지금까지 리팩토링 , 반복문 예고에 대해 살펴보았습니다!

 

 

어떠셨나요!? 

 

 

점점 새로운 내용들을 배우고 있는 거 같아 재밌는 것 같습니다.

 

 

또한 학과 공부를 하며 배워놓았던 C언어가 이렇게 다양한 언어에서도 기초가 될 줄은...

 

 

다음은 배열 그리고 반복문에 대해 살펴보겠습니다:) 

 

 

제가 작성하는 모든 내용은 부스트 코스의 자바스크립트 시작에서 배운 내용을 바탕으로 작성됩니다! 

 

 

www.boostcourse.org/cs124

자바스크립트의 시작