[1주차] JavaScript Origin

필자는 원래 개발일지에 영혼을 갈아 넣는 스타일이었다.

그래야만 미래의 내가 그것들을 보고 공부를 하거나, 오류를 수정하거나 할 테니까..

하지만 막상 취업을 하고 나니 이전처럼 블로그에 열과 성을 쏟기에는 물리적으로 불가능하더라..

그래서 뭔가 성의가 없어 보여도 이해 바란다.

내일도 출근해야 해..

마음 같아서는 모든 내용을 A부터 Z까지 다 다루고 싶지만, 반드시 기억해야 할 핵심만 짚고 넘어가겠다.

 

---

1. No more Legacy Type!

 

"PHP는 스크립트류 언어 중에서도 가장 레거시한 스타일이다."

여러분은 이전에 Legacy라는 단어를 들어본 적 있는가?

필자는 개발자 라이프를 시작하고 나서 처음 접해봤다.

하지만 이제는 하루에도 몇 번이나 쓰는 용어가 되었다.

특히나 Java Script (이하 JS)는 레거시 함을 철저하게 지양하는 언어라고 할 수 있지.

속된 말로 싸가지가 없다.

이번 시간에는 그 특유의 싹퉁바가지를 한 번 파헤쳐 보고자 한다.

시간 없으니까 바로 소스코드부터 살펴보자.

 

fruit_list.map((value) => {
    if(value == "딸기") {count += 1;}
    console.log(count);
});

아직은 뭐가 뭔지 잘 모르겠지?

거두절미하고 요 녀석은 map 함수라고 한다.

변수 뒤에 점을 찍어서 소환하는 식이지.

오케이, 다음..

 

let fruit_list = ['사과','감','감','배','포도','포도','딸기',
'포도','감','수박','딸기']

let count = 0;
for (let i = 0; i < fruit_list.length; i++) {
	let fruit = fruit_list[i];
	if (fruit == '딸기') {
		count += 1;
	}
}
console.log(count);

요 놈은 모든 언어에서 구멍동서처럼 사용되는 for문이다.

어려울 것 없잖아?

결론부터 말하자면 윗 단과 아랫단은 완벽하게 같은 결과를 출력해낸다.

어떤 결과냐면..

fruit_list 배열에서 딸기의 개수를 알아보고 싶은 거지.

당연히 정수 2가 출력되어야겠지?

 

let count = 0;
for (let i = 0; i < fruit_list.length; i++) {
	let fruit = fruit_list[i];
	if (fruit == '딸기') {
		count += 1;
	}
}


let count = 0;

fruit_list.map((value) => {
    if(value == "딸기") {count += 1;}
    console.log(count);
});

대조해가면서 보기 쉽게 레거시 스타일과 모던 스타일을 함께 가져왔다.

싸가지 없는 건 사실이지만 코드가 굉장히 간결해진 것 또한 부정할 수 없다.

뿐만이랴? 가독성만 놓고 보자면 모던 스타일이 훨씬 보기 좋다.

보기 좋은 코드는 생각 외로 굉장히 중요한 요소이다.

특히 협업에 있어서는 더 말해봤자 입만 아프지.

 

---

개소리를 장황하게 늘어뜨려놓기 좋아하는 필자라면 이런 말은 서두에서 했어야 정상이지만..

우리는 지금 JS를 공부하려는 게 아니다.

궁극적인 목표는 Application을 만들기 위한 첫걸음으로 JS 문법을 대략적이나마 훑어보고 있는 것이다.

그래.. 앱 말이야 앱!

그 앱을 구현하기 위한 서버사이드 언어로 JS를 선택한 것뿐이지..

특히 NodeJS 프레임워크를 이용해서 말이다.

필자가 고른 것 아니다..

이번 '앱 개발 종합반' 수업 커리큘럼이 그렇게 짜여 있어..

현재 PHP를 커리어로 정한 필자로서는 공부량만 늘어난 셈이다.