1. 기본 타입과 표준 메서드
자바스크립트는 숫자, 문자열, 불린 값에 대해 각 타입별로 호출 가능한 표준 메서드를 정의하고 있다.
하지만 기본 타입의 경우에는 객체가 아닌데 어떻게 객체를 호출할 수 있을까. 기본 타입들에 대해서 객체 형태로 메서드를 호출할 경우, 메서드 처리 순간 각 타입별 표준 메서드를 호출하고 끝나면 다시 기본값으로 복귀한다.
예시 1) toExponential() : 표준 숫자형 메서드, 숫자를 지수 형태의 문자열 변환
var num = 0.5;
console.log(num.toExponential(1)) //output: 5.0e-1예시 2) charAt() : 문자열에서 인자로 받은 위치에 있는 문자 반환
console.log(charAt(2)); //output: 's'POINT 기본 타입으로 정의된 것도, 정의된 표준 메서드들을 객체처럼 호출할 수 있다는 사실을 기억하자.
2. 연산자
자바스크립트 연산자 대부분은 다른 연산자들과 유사하기 때문에, 몇가지 주의할 연산자들에 대해서만 정리해보았다.
[1] typeof
피연산자의 타입을 문자열 형태로 리턴한다.
이때 유의해야할 점은 null과 배열이 Object라는 점, 함수는 function이라는 점을 유의하자.
var hello = "안녕하세요";
console.log(typeof(hello)); //output: string[2] 동등 연산자(==)와 일치 연산자(===)
값이 동일한지 확인하는데, 두 연산자를 모두 사용할 수 있다. 두 가지의 차이는 ===는 타입까지 체크를 한다는 점이다. 반면 ==는 타입이 다를 경우 타입 변환을 거친 다음 비교를 한다. 가급적 === 연산자로 비교하는 것이 좋다.
console.log(1 == '1'); //output: true
console.log(1 === '1'); //output: false[3] !! 연산자
!!의 역할은 피연산자를 blooean 값으로 변환하는 것이다.
console.log(!!0) //false
console.log(!!true) //true
console.log(!!false) //false
console.log(!!undefined) //false3. 함수 정의
자바스크립트에서 가장 중요한 개념 1순위는 당연히 함수이다. 자바스크립트에서 이러한 함수를 얼마나 제대로 이해하고 활용하느냐에 따라서 고급 자바스크립트 개발자로 거듭날 수 있다.
단순히 호출해서 결과값을 얻는 것에서 벗어나서 자바스크립트의 함수는 모듈화 처리나, 클로저, 객체 생성 등 자바스크립트의 근간이 되는 많은 기능을 제공하고 있다. 앞으로 살펴볼 개념은 다음과 같다.
- 함수 생성
- 함수 객체
- 다양한 함수 형태
- 함수 호출과 this
- 프로토타입과 프로토타입 체이닝
함수를 생성하는 방법은 3가지가 있다.
1. 함수 선언문 (function statement)
2. 함수 표현식 (function expression)
3. Function() 생성자 함수
[1] 함수 리터럴
자바스크립트에서는 함수도 일반 객체처럼 값으로 취급된다. 때문에 함수 리터럴을 이용해 함수를 생성할 수 있다. 리터럴 방식의 예시는 아래와 같다. 참고하면 된다.
function add (x,y) {
return x + y;
}- 함수 리터럴은 function 키워드로 시작한다.
- 함수명은 함수를 구분하는 식별자로 사용된다. 여기서 주목할 점은 함수 명은 선택 사항이다. 함수 명이 없는 함수를 익명 함수라고 한다.
- 매개변수 리스트는, 기존 다른 언어의 매개변수 형태와 거의 비슷하지만 타입을 기술하지 않는다는 차이가 있다.
- 함수 몸체는 함수가 실제 호출됐을 때 실행되는 코드 부분이다.
[2] 함수 선언문 방식으로 함수 생성하기
이 함수 선언문 방식은 앞에서 설명한 함수 리터럴 형태와 같다. 주의할 점은, 이 경우 반드시 함수명이 정의되어 있어야 한다는 것이다.
function add (x,y) {
return x + y;
}
console.log(add(3,4)); //output: 7[3] 함수 표현식 방식으로 함수 생성하기
함수는 하나의 값처럼 취급되기 때문에, 따라서 함수도 숫자나 문자열처럼 변수에 할당하는 것이 가능하다.
이러한 방식으로 함수 리터럴로 하나의 함수를 만들고, 여기서 생성된 함수를 변수에 할당하여 함수를 생성하는 것을 '함수 표현식'이라고 말한다.
var add = function(x,y) {
return x + y;
}
var plus = add;
console.log(add(3,4)); //output: 7
console.log(plus(3,4)); //output: 7add와 plus 함수 변수는 두 개의 인자를 더하는 동일한 익명 함수를 참조하는 결과가 나타난다. 이렇게 add안에 선언된 이름이 없는 함수를 '익명함수'라고 부른다. 반대로 함수 이름이 포함된 함수 표현식을 '기명 함수 표현식'이라고 한다. 그러나 이러한 기명 함수 표현식을 사용할 때는 주의할 점이 있다.
var add = function sum(x,y) {
return x + y;
}
console.log(add(3,4)); //output: 7
console.log(sum(3,4)); //error!! -> Uncaught ReferenceError: sum is not definedsum이 정의되어 있지 않다는 에러가 발생한다. 그렇다면 함수 선언문으로 정의한 add() 함수는 어떻게 함수 이름으로 함수 외부에서 호출이 가능할까? 위의 함수는 자바스크립트 엔진에 의해 다음과 같은 표현식의 형태로 변경된다.
var add = function add(x,y) {
return x + y;
}
POINT 함수 이름이 같게 변하므로, 함수 이름으로 함수가 호출되는 것처럼 보이지만 실제로는 add 함수 변수로 외부에서 호출이 가능하게 된 것이다.
- 주의할 점
일반적으로 자바스크립트 코드를 작성할 때, 함수 선언문 방식으로 선언된 함수의 경우에는 함수 끝에 세미클론(;)을 붙이지 않지만, 함수 표현식의 방식의 경우에는 세미클론을 붙이는 것을 적극 권장한다. (예상치 못한 에러가 발생할 수 있기 때문에)
[4] Function() 생성자 함수를 통한 함수 생성하기
자바스크립트 함수도 Function이라는 기본 내장 생성자 함수로부터 생성된 객체라고 볼 수 있다. 생성자 함수로 함수를 생성하는 방법은 다음과 같다. 하지만 이 방법은 잘 사용되지 않으므로 참고만 해도 된다.
var add = new Function('x', 'y', 'return x + y');
console.log(add(3,4)); //output: 7[5] 함수 호이스팅 ★
함수를 생성하는 3가지 방법을 살펴봤다. 이들 사이에는 동작 방식이 약간 차이가 있다. 그중 하나가 바로 '함수 호이스팅(function hoisting)'이다.
예제 1) 규칙 무시: 함수 선언문
add (2,3); //5
function add (x,y) {
return x + y;
}
add (3,4); //7위와 같은 경우 첫 번째 add 시점에서는 함수가 정의되지 않았음에도 불구하고 호출하는 것이 가능하다. 함수 선언문의 형태로 정의한 함수 유효 범위는 코드 맨 처음부터 시작한다는 것을 확인할 수 있다. 이것을 함수 호이스팅이라고 한다.
- 문제점 : 코드의 구조를 엉성하게 만들 수 있다는 지적, 이 문제를 해결하기 위해서 함수 표현식 사용을 권장하고 있다.
예제 2) 규칙 적용: 함수 표현식
add (2,3); // uncaght type error
var add = function (x,y) {
return x + y;
}
add (3,4); //7함수 표현식의 형태로 되어있어 호이스팅이 일어나지 않는다. 두 번째 ad와 같이 함수가 생성된 이후에 호출이 가능하다.
이러한 함수 호이스팅이 발생하는 원인은 자바스크립트의 변수 생성과 초기화의 작업이 분리돼서 진행되기 때문이다. 자세한 내용은 후에 다룰 예정이다.
