⛹️♂️자바스크립트 타입
⛹️♂️기본타입
- Number : 실수, 부동소수점 64bit (double)
- String : 문자(열)
- Boolean : true, false
- undefined : 변수에 값이 할당되지 않았을 때 undefined로 할당, 타입이기도 함
- null : 의도적으로 할당하는 값, typeof 값이 object로 반환되기 때문에 ===로 확인해야한다.
⛹️♂️참조타입(객체타입)
- Object
- Array : 배열도 객체로 취급
- Function : 함수도 객체로 취급
⛹️♂️Delete 연산자
- 객체 프로퍼티를 삭제하는 기능, 객체는 삭제 불가능
var baskikball = { name: 'ik', nickname: 'durant' }; // console.log(foo.nickname); // durant delete foo.nickname; console.log(foo.nickname); // undefined console.log(foo); // {name: "ik"}
⛹️♂️Array, Object 구분
[]와 {}의 차이.
```javascript
var bkn = [];
var durant = {};
bkn.constructor.name; // "array"
durant.constructor.name; // "object"⛹️♂️배열에서의 delete & splice 연산자
- 배열에서 delete를 사용하면 요소의 값을 undefined로 변경하지만 해당요소 index를 지우진 않는다.
var arr = [1,2,3];
delete arr[1];
console.log(arr); // [1, undefined × 1, 3]- splice는 해당 요소 전체를 지운다.
var arr = [1, 2, 3];
arr.splice(1, 1);
console.log(arr); // [1, 3]⛹️♂️ ==연산자 vs ===연산자
- ==는 값을 비교한다. ==는 실행 시에 타입이 다를 경우 타입을 일치시켜 값을 비교한다.
- ===는 값 뿐만 아니라 타입까지 비교한다.
console.log(1 == '1'); // true
console.log(1 === '1'); // false⛹️♂️ 함수 호이스팅
add(2, 3); // add is not a function
var add = function (a, b) {
return a + b;
};
add(4, 5);
// 첫번째 줄의 실행결과는 add is not a function이다. javascript hoisting을 적용하여 코드 순서를 변경하면 아래처럼 실행이 된다.
var add;
add(2, 3);
add = function (a, b) {
return a + b;
};
add(4, 5);⛹️♂️ 내부함수
함수의 내부에 정의한 함수
function parent() {
var a = 10;
var b = 20;
function child() {
var b = 30;
console.log(a);
console.log(b);
}
child();
}
parent(); // 10, 30
child(); // child is not defined⛹️♂️ instanceof 를 활용한 생성자 함수 구분법
구문1
object instanceof constructor;- 매개변수
- object : 판별할 객체
- constructor : 판별 목표 함수
구문2
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
var mycar = new Car("Honda", "Accord", 1998);
var a = mycar instanceof Car; // returns true
var b = mycar instanceof Object; // returns true- 위의 코드는 car object타입과 그 object타입의 인스턴스 mycar를 생성한다.
instanceof 연산자는 mycar의 object가 타입 car와 타입 Object라는 것을 보여준다.
구문3
- javascript는 생성자 함수 형식이 별도로 필요없이 기존 함수에 new만 붙여주면 생성자 함수 생성이 가능하다. 따라서, 생성자 함수가 아닌데 new를 붙이는 경우를 대비해서 아래와 같은 기법을 사용할 수 있다.
- 대부분의 오픈소스 라이브러리에서 사용하는 패턴이다.
function Func(arg) {
// instanceof 로 생성자 함수임을 확인
if (!(this instanceof arguments.callee)) // 'this instanceof 함수명' 도 가능
return new Func(arg);
this.value = arg || 0;
}
var a = new Func(100);
var b = Func(200);
console.log(a.value);
console.log(b.value);⛹️♂️ prototype & constructor
function func() {
return true;
}
console.log(func.prototype); // {constructor: f}
console.log(func.prototype.constructor); // f func(){return true;};⛹️♂️ 프로토타입 체이닝
- 해당 함수에 존재하지 않는 속성, 메서드를 부모 객체(프로토타입)를 찾음
var obj = {
name: 'captain',
printName: function () {
console.log(this.name);
}
};
obj.printName(); // 'captain'
obj.hasOwnProperty('name'); // true
obj.hasOwnProperty('city'); // falseobj에서 사용한 printName()메서드는 obj에 선언이 되었기에 사용할 수 있다. 하지만 hasOwnProperty() 메서드는 선언되지도 않았는데 사용할 수 있다. 그 이유는 obj의 프로토타입 객체가 Object이고, Object에 내장된 메서드가 hasOwnProperty()이기 때문에, obj에서 프로토타입 객체의 hasOwnProperty()를 호출한다.
⛹️♂️ Object, String, Number 프로토타입 객체 메서드 재정의
- javascript에서 기본적으로 제공하는 Object, String, Number 등의 표준 객체에 사용자가 원하는 기능을 재정의하여 사용할 수 있다.
String.prototype.printText = function (text) {
console.log("Print this text out " + text);
};
var name = "captain";
name.printText('pangyo'); // 'Print this text out pangyo'⛹️♂️ 즉시 실행 함수
- 함수를 정의함과 동시에 바로 실행하는 함수이며 함수를 다시 호출할 수 없다는 특징이 있다.
- 최초 한 번의 실행만 요구되는 초기화 코드에 적합하다. jQuery와 같은 오픈소스 라이브러리들의 구조
(function (name) {
console.log('This is the immediate function : ' + name);
})('foo');⛹️♂️ 클로져
- 실행이 끝난 함수의 스코프를 참조할 수 있는 함수
function parent() {
var a = 'Parent is done';
function child() {
console.log(a);
}
return child;
}
var closure = parent();
closure();- 위 내부함수의 정의대로라면 parent의 내부함수인 child()는 외부에서 접근이 불가능하다. 하지만 return 값에 child를 넘김으로써 외부에서도 child를 호출할 수 있게된다. 따라서, child()에서 parent의 값을 참고하고 있다면, child()를 밖에서 호출함으로써 parent()의 변수에 접근이 가능하게된다. 이것이 클로저이다.
캡틴판교님의 블로그를 참고했습니다.
신입 프론트엔드 개발자