[Javascript] 자바스크립트 기초

캡틴판교님의 자바스크립트 기본 다지기 글을 참조하여 공부하며 끄적인 기록입니다.

 

자바스크립트 타입

<기본 타입>

1. Number - 실수

2. String - 문자열

3. Boolean 

4. undefined - 변수에 값이 할당되기 전 값이자 타입

5. null - 개발자가 의도적으로 할당하는 값. 타입은 Object으로 반환

 

<참조(객체) 타입>

1. Object

2. Array

3. Function

---

NaN?

정상적 값을 얻지 못할 때 발생하는 에러

예시) 프로퍼티명이 연산자 포함하여 에러

---

 

delete 연산자

객체 프로퍼티 삭제. 단, 객체 삭제 불가!

---

객체의 모든 연산은 참조 값으로 처리함

 

---

Array와 Object의 구분

---

delete, splice 연산자와 배열

---

typeof

var num = 10;
var str = "a";
var boolean = true;
var obj = {};
var undefined;
var nullValue = null;
var arr = [];
function func() {};

console.log(typeof num); // number
console.log(typeof str); // string
console.log(typeof boolean); // boolean
console.log(typeof obj); // object
console.log(typeof undefined); // undefined
console.log(typeof nullValue); // object (null 은 object)
console.log(typeof arr); // object (배열도 object)
console.log(typeof func); // function

---

함수 호이스팅

함수는 먼저 호출하고, 함수 정의는 나중에 할 수 있다.

 

예시 1

function hoisting() {
	hoistingText = "호이스팅";
	var hoistingText;
	console.log(hoistingText);
}
hoisting(); //호이스팅

↓ 1번에 대해 호이스팅으로 재해석된 코드

function hoisting() {
	var hoistingText;
	hoistingText = "호이스팅";
	console.log(hoistingText);
}

 

예시 2

function hoisting() {
	console.log("1 : " + hoistingText);
	var hoistingText = "호이스팅";
	console.log("2 : " + hoistingText);
}
hoisting(); 
//1 : undefined
//2 : 호이스팅

왜 1번 console log에 undefined가 뜰까?
↓ 2번에 대해 호이스팅으로 재해석된 코드

function hoisting()
{
	var hoistingText;
	console.log("1 : + hoistingText);
	hoistingText = "호이스팅";
	console.log("2 : + hoistingText);
}
hoisting();

호이스팅으로 var hoistingText 선언이 최상위로 올라온다. 

1번 console log는 선언만 한 변수이므로, undefined가 찍힌다.

---

내부 함수

---

생성자 함수

일반 객체 선언과는 달리, 여러 개의 객체를 찍어낼 수 있음

함수명 맨 앞 글자는 대문자! 

 

---

instanceof 활용 생성자 함수 구분

자바스크립트는 생성자 함수 형식이 별도로 없음. 기존 함수에 new만 붙여주면 생성자 함수 생성 가능

생성자 함수가 아닌데, new를 붙이는 경우를 대비하기 위해 하단의 기법 사용.

대부분의 오픈소스 라이브러리에서 사용하는 패턴

 

function Func(arg) {
	if(!(this instanceof arguments.callee))
	{
		return new Func(arg);
		this.value = arg || 0;
	}
}

var a = new Func(100);
var b = Func(200);

console.log(a.value) //1000
console.log(b.value) //2000

Func이라는 함수를 call하면, 생성자 함수를 만들어주기 위한 코드
대부분의 오픈소스 라이브러리에서 사용하는 패턴이다.

 

---

프로토타입 체이닝

해당 함수에 존재하지 않는 속성, 메서드를 부모 객체(프로토타입 객체)에서 찾음

obj의 프로토타입 객체가 Object인데 hasOwnProperty 메서드는 Object의 내장 메서드이다.
자바스크립트 모든 객체의 최상위 부모 객체는 Object 객체이므로!

 

var obj = {
	name : 'kea',
	printName : function() {
		console.log(this.name);
	}
};
obj.printName(); //kea
obj.hasOwnProperty('name'); //true
obj.hasOwnProperty('age'); //false

---

즉시 실행 함수

함수를 정의함과 동시에 바로 실행
함수를 다시 호출할 수 없다. 최초 한번 실행만 요구되는 초기화 코드에 적합.

 

기본형태
(function() {
	// statements
})()

 

※ 사용법

1. 기명 즉시 실행 함수 (두 예시는 동일)

 (function a(x) {
	console.log(x*x);
 })(2);
 
 (function a(x) {
	console.log(x*x);
 }(2));

2. 익명 즉시 실행 함수

 (function (x) {
	console.log(x*x);
 })(2);
 
 (function (x) {
	console.log(x*x);
 }(2)));

 

※ 변수에 즉시 실행 함수를 저장할 수도 있다.

함수를 변수 square에 저장하고, 바로 실행 가능
변수에 저장하였으므로 재호출이 가능하다.

 //즉시 실행 함수 변수에 저장하면서 실행
 (square = function (x) {
	console.log(x*x); //4
 })(2);
 //재호출
 square(3); //9

 

※ 변수에 즉시 실행 함수 리턴 값을 저장할 수도 있다.

 var square = (function (x) {
	return x*x;
 })(2);
 console.log(square); //4

---

Array.prototype.map()

배열 내의 모든 요소에 대해 주어진 함수를 호출한 결과를 모아, 새로운 배열 반환

arr(map(callback(currentValue[, index[, array]])[, thisArg])

예시 1

// definition
Array.prototype.myMap = function(callback) {
    arr = [];
    for (var i = 0; i < this.length; i++)
        arr.push(callback(this[i], i, this));
    return arr;
};

//tests
var arrs = ['dic tanin', 'boo radley', 'hans gruber'];
var numbers2 = [1, 4, 9];

var goodT = arrs.myMap(function(n) {
    return n;
});

var squareRoot = numbers2.myMap(function(num) {
    return Math.sqrt(num);
});

console.log(goodT); // [ 'dic tanin', 'boo radley', 'hans gruber' ]
console.log(squareRoot); // [ 1, 2, 3 ]

예시 2

const arrayTest = [1,2,3,4];
const mapTest = arrayTest.map(x => x * 2);
console.log(mapTest); //[2,4,6,8]

예시 3

var array = [{key:1, value:10},
             {key:2, value:20},
             {key:3, value:30}];

var reformattedArray = array.map(function(obj){
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});
//reformattedArray는 [{1:10}, {2:20}, {3:30}]

---

비동기 실행 방식의 이해

예시 1

console.log("1");
function exec() {
	setTimeout(function() {
		console.log("2");
	}, 3000);
	setTimeout(function() {
		console.log("3");
	}, 0);
	console.log("4");
	setTimeout(function () {
		console.log("5");
	}, 1000);
}
console.log(exec()); //1,4,3,5,2

예시 2

결과가 0,1,2,3,4가 아님에 주의
for문의 실행이 모두 끝난 후에, setTimeout의 콜백이 실행되기 때문에 5,5,5,5,5

var i;
for(i=0; i<5; i++) {
	setTimeout(function() {
		console.log(i); //5,5,5,5,5
	}, 1000);
}

---

arguments

함수 호출 시, 넘겨진 실제 인자 값을 가진 배열

* arguments는 index를 지니지만 배열이 아님에 주의 
  이러한 객체를 배열과 비슷한 객체(array-like object)라고 한다.

function add(a,b) {
	console.dir(arguments);
}
console.log(add(1)); // Arguments(1), 0:1
console.log(add(1, 2)); // Arguments(2), 0:1, 1:2
console.log(add(1, 2, 3)); // Arguments(3), 0:1, 1:2, 2:3

function sum() {
	for(var i=0, result=0; i<arguments.length; i++) {
		result += arguments[i];
	}
	result result;
}
console.log(sum(1,2,3)); //6
console.log(sum(1,2,3,4,5,6)); //21