Chapter4. 변수, 함수, 연산자

자바스크립트 프로그램은 함수에서 모든 것을 처리.

함수는 비트를 옮기고 연산을 수행하기 위해 변수와 연산자를 사용.

코드의 가독성을 높이고 복잡도를 낮추려면 기본 포맷을 정한 후 변수, 함수, 연산자 사용법을 정해야 함.

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타입으로 새로운 인스턴스를 우리도 모르게 생성하기 떄문이다.

  - 구글 자바스크립트 스타일 가이드에서는 기본 래퍼 타입을 직접 사용하는 것을 금지.