자바스크립트 프로그램은 함수에서 모든 것을 처리.
함수는 비트를 옮기고 연산을 수행하기 위해 변수와 연산자를 사용.
코드의 가독성을 높이고 복잡도를 낮추려면 기본 포맷을 정한 후 변수, 함수, 연산자 사용법을 정해야 함.
4.1 변수 선언
- 변수는 var 문을 이용하여 선언.
- 자바스크립트에서 var는 스크립트 어느 곳에나 올 수 있고 또 여러 번 사용 가능.
- 모든 변수 선언은 변수가 선언된 위치와 상관없이 함수의 최상단으로 끌어올려진다.
-> 이것을 호이스트(hoist)라고 한다.
-> 이로 인해 개발자들이 코드를 잘못 이해하는 일이 종종 발생.
- for문에서도 변수 선언은 호이스팅(hoisting) 된다는 사실을 잘 인지하지 못하는 경우 발생.
- 변수 선언을 하면 함수 최상단으로 변수가 끌어올려 지므로 어디에 선언하는지에 관계 없이 최상단에 변수를 선언하는 것과 같다.
- 이러한 이유로 자바스크립트에서는 변수를 함수 이곳 저곳에 선언하지 않고 최상단에 한꺼번에 선언하는 스타일을 가장 많이 사용.
4.2 함수 선언
- 함수 선언도 변수 선언처럼 자바스크립트 엔진에 의해 끌어올려진다
-> 따라서 함수가 선언되기 전에 먼저 사용가능.
- 자바스크립트 엔진이 해석하는 방법대로 코드를 작성해야 하므로 함수를 사용하기 전에 반드시 먼저 선언할 것을 권장.
4.3 함수 호출문에 공백 넣기
- 일반적으로 함수 호출문은 복합문과 쉽게 구분할 수 있도록 함수명과 괄호 사이에 아무런 공백도 입력하지 않는 스타일을 권장
ex) //좋은 예 doSomethind(item); //나쁜 예: 복합문 처럼 보임. doSomething (item); //복합문. while (item) { //실행할 코드 } |
4.4 함수 선언하고 바로 호출하기
- 자바스크립트에서는 함수 이름이 없는 익명 함수를 선언할 수 있다.
- 선언한 익명함수를 변수나 프로퍼티에 대입할 수 도 있다.
var doSomething = function() { //함수 본문 }; |
- 익명 함수는 선언과 동시에 호출할 수 있고 또 그 반환값을 변수에 할당하는 것도 가능.
- 익명 함수 선언문 끝에 괄호를 열고 닫으면 바로 호출 가능.
var value = functnio() { // 함수 본문 return { message: "Hi" } }(); - 함수가 선언과 동시에 호출되었기 떄문에 변수 value에는 함수가 아닌 객체가 할당됨. - 이 패턴은 변수에 익명 함수를 할당하는 것과 상당히 유사해 보이는 문제점 발생. - 명확하게 하려면 함수 앞뒤에 괄호를 추가. |
4.4.1 strict 모드
- ECMAScript5부터 자바스크립트 문장을 해석하고 실행할 때 실수를 줄이기 위해 strict 모드가 도입.
- strict 모드를 적용하려면 프라그마(자바스크립트 전처리기에 내리는 명령)를 추가
-> "use strict"
- 단순 문자열로 보이지만 ECMAScript5 자바스크립트 엔진은 이 코드를 만나면 strict 모드를 위한 전환 명령어로 인식.
- 이 프라그마는 전역으로 사용 가능하며 함수 내부에서만 유효하도록 지역적으로도 사용 가능.
- 일반적으로 전역으로 사용하는 것은 지양.
4.5 동등 연산자
- 자바스크립트에서 사용할 때 타입 강제 변환이 일어나 다루기 까다롭다.
- 주로 ==와 != 연산자를 사용할 떄 타입 강제 변환이 일어남.
-> 서로 다른 데이터 타입을 비교할 때 타입을 강제 변환. 같은 데이터 타입을 비교할 떄는 변환하지 않는다.
- null과 undefinded는 ECMAScript 표준에 따르면 같은 값으로 판단
- 타입이 강제 변환되는 ==와 != 사용대진 === 와 !==를 사용하는 것이 좋음.
- =-==와 !== 연산자는 타입 강제 변환없이 비교 연산을 수행.
4.6 eval()
- eval()은 문자열로 된 자바스크립트 코드를 실행하는 함수.
eval("alert('Hi!')"); var count = 10; var number = eval("5 + count"); |
- eval() 함수 외에도 문자열로 된 자바스크립트 코드를 실행하는 방법이 존재.
- function 생성자, setTimeout(), setInterval()을 통해 자바스크립트 문자열을 실행 가능.
var myFunc = new Functino("alert('Hi!')"); setTimeout("document.body.style.background='red'", 50); setInterval("document.title = 'It is now '" + (new Data()), 1000); |
- 특별한 case가 아니면 eval(), setTimeout, setInterval 사용을 금하자.
4.7 기본 래퍼 타입
- 기본 래퍼 타입은 String, Boolean, Number 세가지가 존재.
- 각 타입은 전역 범위를 갖는 생성자가 존재하고 기본 데이터 타입에 해당하는 객체가 존재.
- 기본 래퍼 타입은 다음 예제처럼 기본 데ㅣ터 타입을 객체처럼 사용할 수 있다.
var name = "Nicholas" console.log(name.toUpperCase()); - 변수 name은 객체가 아니고 기본 데이터 타입인 문자열 이지만 마치 객체인 것 처럼 toUpperCase() 메서드 사용 가능. - 자바스크립트 엔진에서 String타입으로 새로운 인스턴스를 우리도 모르게 생성하기 떄문이다. |
- 구글 자바스크립트 스타일 가이드에서는 기본 래퍼 타입을 직접 사용하는 것을 금지.
'JavaScript > Maintainable JavaScript' 카테고리의 다른 글
| Chapter3. JavaScript 문장과 표현식 (0) | 2016.09.06 |
|---|---|
| Chapter2. Javascript 주석 (0) | 2016.09.06 |
| Chapter1. JavaScript 기본 포맷 (0) | 2016.09.03 |
| Part1. 스타일 가이드 라인 (0) | 2016.09.03 |
| Maintainable JavaScript 시작. (0) | 2016.09.03 |