타입변환
-
명시적 강제 변환 : 의도적인 타입 변환
-
암시적 강제 변환: 표현식 평가 중 타입 변환
명시적 강제 변환
1.문자열로 변환
-
String() 함수 이용: new 키워드 없이 함수 호출 시 타입 변환 함수로 동작
-
toString() 메서드 이용
둘의 차이점? toString()은 null과 undefined에 사용 불가 → TypeError 발생
2. 숫자로변환
-
Number() 함수 이용: BigInt 타입을 제외한 나머지는 추상 연산 명세를 기준으로 변환
-
parseInt() 함수 이용 :
- 문자열만 대상으로 변환, 문자열이 아닌경우 해당 값을 toString추상 연산을 기준으로 문자열로 변환 후 사용
- ex) parseInt(a,b) → a: 변환할 문자, b: 기수 (기수 생략시 의도치 않은 결과가 나올 수 있음!)
3. Boolean으로 변환
-
Boolean()함수 이용
-
이중 부정 연산자( !! ) 이용
둘 다 같은 결과를 반환함 ( ToBoolean 추상 연산 규칙 적용)
암시적 강제 변환
1. 덧셈 연산자
- 문자열 + 숫자 → 문자로 변환하여 병합
- 피연산자 중 하나가 객체이며 문자열로 변환 가능한 경우: 문자열로 변환하여 연산
- 피연산자가 모두 문자열과 객체가 아닌경우 숫자로 변환하여 연산 ( 변환결과의 타입이 다 다른경우 TypeError)
2. 동등 연산자 (==)
암시적 강제변환을 허용하는 것이 특징
3. 비교 연산자
다른 타입 간의 비교 연산에서 암시적인 강제 변환을 막을 수 없음
4. 조건 표현식과 논리 연산자
모든 값은 boolean으로 변환되어 조건 표현식에서 평가 됨
함수
객체의 특별한 형태이며 statement로 구성된 몸체를 가진 하나의 실행 단위
함수 = 일급 객체, 다른 함수의 매개변수나 반환값으로도 사용 가능
콜백함수 = 함수가 다른 함수의 인자로 넘어가는 것
함수생성
1. 함수선언문
-
함수의 이름, 매개변수, 몸체로 구성
-
⭐ 함수의 이름이 반드시 정의되어야 한다.
-
특징: 호이스팅으로 인해 함수가 선언된 위치에서 코드의 최상단으로 끌어올려짐. 고로 함수가 선언 된 위치보다 상단에서 함수 호출 가능
2. 함수표현식
-
⭐ 함수이름은 선택 사항 → 이름 없는 함수 : 익명 함수 표현식
-
함수를 변수에 직접 할당
-
함수 이름이 있을때 : 기명함수표현식
- 기명 함수 표현식은 정의된 함수 몸체 안에서만 사용 가능. 외부에서 접근할 시 ReferenceError발생 → 재귀함수(recursive function)에서 많이 쓰임
-
호이스팅 X → 변수에 함수를 할당하기 전에 호출 불가
3. Function() 생성자 함수
const add = new Function('x', ‘y', 'return x+y’);Function 생성자 함수는 보안 및 성능 문제로 잘 쓰이지 않는다.
함수호출
함수 호출은 표현식이기 때문에 값으로 여겨지며, 결과 값을 지닐 수 있다.
return문이 명시되어 있지 않다면 호출의 결과 값은 undefined이다.
-
느슨한 타입을 가진 언어, JS, 특성 상 매개변수에 타입을 명시하지 않는다.
-
인자 개수도 검사하지 않는다. → 인자가 매개변수보다 많으면 무시되고, 적으면 undefined값으로 설정된다
-
매개변수 기본값을 설정 할 수 있다
-
화살표 함수를 제외한 모든 함수에서 arguments라는 객체를 사용할 수 있다.
- 나머지 매개변수로 arguments를 대체 할 수 있다. → 나머지 매개변수는 유사배열객체가 아닌 진짜 배열이다.
- 나머지 매개변수와 일반 매개변수를 같이 사용 할 수 있다. 나머지 매개변수는 마지막 매개변수여야 한다.
화살표 함수
-
항상 익명 함수이다.
-
function키워드를 생략한다
-
매개변수가 하나인 경우 ()를 생략할 수 있다
-
함수 몸체에서 statement가 하나인 경우 {}나 return키워드를 생략할 수 있다.
const ex1 = () => {
return 'hello';
}
//괄호 생략
const ex2 = name => {
return `hello ${name}`;
}
//{} 랑 return키워드 생략
const ex3 = name => `hello${name}`;
함수를 인자로 받는 경우 유용함.
arr.map(function(element, index){
return `${index}:${element}`;
});
//화살표 함수 이용
arr.map((element, index) => `${index}:${element}`);⚠️ arguments객체를 사용할 수 없다. → 나머지 매개변수 사용하여 대체
⚠️ 생성자 함수로 사용할 수 없다
- this를 바인딩하지 않는다
This
this는 읽기 전용 값이다
일반함수
-
전역 실행 컨텍스트에서의 this는 항상 전역 객체를 참조한다.
-
함수 호출 시에도 this의 값이 전역 객체를 참조한다. → this가 바인딩 되지 않은 경우 디폴트로 전역 객체를 참조하기 때문.
-
엄격모드(use strict지시문)을 사용하여 this의 값이 전역 객체를 참조하지 않게 할 수 있다
생성자 함수
-
new 키워드를 사용하여 함수를 생성자 함수로 동작 시킬 수 있다
-
생성자 함수를 호출하여 객체를 생성할 때에는 this바인딩이 일반 함수 호출과 다르게 동작한다
-
객체를 만들어 this에 바인딩한다.
-
this에 바인딩한 객체에 프로퍼치를 생성한다. → 생성된 객체는 생성자 함수의 prototype프로퍼티에 해당하는 객체를 prototype으로 설정한다.
-
this에 바인딩한 객체를 반환한다. (return을 명시하지 않아도 디폴트로 this에 바인딩한 객체가 반환된다)
메서드
객체의 프로퍼티인 함수
- 메서드 호출시 this는 해당 메서드를 소유하는 객체로 바인딩된다.
const obj = {
lang: 'javascript',
greeting() {
return `hello ${this.lang`};
}
}
console.log(obj.greeting()); // 'hello javascript'
const greeting = obj.greeting;
console.log(greeting()); // 'hello undefined'아래 처럼 호출 할 경우 this는 전역 객체를 참조하거나 strict mode에서는 undefined로 남는다.
명시적 바인딩
함수의 내장 메서드인 call(), apply(), bind()를 이용하여 this로 바인딩될 객체를 변경할 수 있다.
call()
this를 특정 객체에 바인딩하여 함수를 호출하는 역할
const obj = {
name: 'javascript'
};
function greeting() {
return `Hello ${this.name}`;
}
console.log(greeting.call(obj));
call(a, b)-
첫번째 인자 (a): this로 바인딩할 객체
-
a를 제외한 나머지 인자: 메서드를 통해 호출하는 함수에 전달할 인자
apply()
call()과 동일하지만 this로 바인딩할 객체를 제외한 나머지 전달 인자는 배열 형태로 전달
const obj = {
name: 'Lee'
};
function getUserInfo(age, country){
return `name: ${this.name}, age: ${age},
country: ${country}`;
}
console.log(getUserInfo.apply(obj,[20, 'Korea']));bind()
-
this바인딩을 영구적으로 변경함. (call()이나 apply()를 사용해도 this바인딩 변경 불가)
-
this를 바인딩하여 함수를 호출하는것이 아닌 새로운 함수를 반환한다.
⭐ 어디서 어떻게 호출되는지에 상관없이 this의 값을 고정하고 싶을때 사용
함수에 전달할 인자도 고정시킬 수 있음
렉시컬 this
-
동적으로 this를 바인딩하는 것이 아닌 함수를 선언하는 위치에 따라 this의 값이 결정된다.
-
화살표 함수의 this는 함수를 둘러싸고 있는 렉시컬 스코프에서 this의 값을 받아 사용한다.
-
렉시컬 this의 값은 변경되지 않는다
화살표 함수는 선언될 시점에서의 상위 스코프가 this로 바인딩된다
