New 병아리 개발자

# 자바스크립트 학습

# 함수의 형태

• 함수 선언문

Function Declaration

Function getBook(book) {코드}

• 함수 표현식

Function Expression

var getBook = function(book) {코드}

## 함수 선언문

• 함수 선언문의 형태

function getBook(title) {
	return title;	// 함수 코드
};

var result = getBook("JS책");
log(result);

=>
JS책

function 키워드, 함수 이름, 블록{} 은 필수!!!
(파라미터, 함수 코드는 선택이다.)

함수 이름을생성한 function 오브젝트의 이름으로 사용한다.

## 함수 표현식

• 함수 표현식 형태

var getBook = function(title) {
	return title;
};

var result = getBook("JS첵");
log(result);

=>
JS책

var getBook = function inside(value) {
	if (value === 102) {
    	return value;
    };
    log(value);
    return inside(value + 1);
};

getBook(100);

# 함수 호출

## call()

• 호출할 함수.call(파라미터);

function getTotal(one, two) {
	return one + two;
};

var result = getTotal.call(this, 10, 20);
log(result);

=>
30

call() 시 첫번째 파라미터는 파라미터 값으로 넘어가지 않음
첫번째 파라미터는 호출된 함수에서 this로 참조할 오브젝트이다.
one에 10, two에 20 담겨져 30 출력


var value = {one: 10, two: 20};
function getTotal() {
	return this.one + this.two;
};

var result = getTotal.call(value);
log(result);

=>
30

일반적으로 this사용 하나 다른 오브젝트도 작성 가능하다.

## apply()

• 호출할 함수.call(파라미터, [파라미터]);

function getTotal(one, two) {
	return one + two;
};

var result = getTotal.apply(this, [10, 20]);
log(result);

=>
30

apply() 의 경우 두번째 파라미터를 배열로 작성

• 파라미터 수가 유동적일 때 사용한다. 
• 두 번째 파라미터에 배열을 사용한다.
• call(), apply()의 부가적인 목적은, 첫 번째 파라미터에 호출된 함수에서 this로 참조할 오브젝트를 사용하는 것이다. 

## toString()

• 모든 빌트인 오브젝트에 toString()이 있지만, 오브젝트마다 반환되는 형태가 다르다.
• function 오브젝트의 toString()은 함수 코드를 문자열로 반환한다.

var getBook = function() {
	return 100 + 23;
};

var result = getBook.toString();
log(result);

=>
function(){ return 100 + 23; }

# Argument 오브젝트

## 아큐먼트 오브젝트

• 함수가 호출되어 자바스크립트 엔진이 함수 안으로 이동했을 때 arguments 이름으로 생성되는 오브젝트이다.
• 함수를 호출한 곳에서 넘겨 준 값을 순서대로 저장한다.
• 호출된 함수에 파라미터를 작성한 경우 호출된 함수의 파라미터에도 값을 설정하고, 아규먼트 오브젝트에도 저장한다.

function getTotal(one) {
	return one + arguments[1] + arguments[2];
};

var result = getTotal(10, 20, 30);
log(result);

=>
60

• apply()와 아규먼트 오브젝트

function getTotal(one) {
	return one + arguments[1] + arguments[2];
};

var result = getTotal.apply(this, [10, 20, 30]);
log(retult);

=>
60

apply()의 두 번째 파라미터가 배열, 파라미터 값이 유동적이다.
이때 arguments를 사용, 유동적인 파라미터 수에 대응할 수 있다.

# 자바스크립트 학습

# 프로퍼티 처리 메소드

## hasOwnProperty()

• 인스턴스에 파라미터 이름이 존재하면 true 반환, 존재하지 않으면 false를 반환한다.

var obj = {value: 123};
var own = obj.hasOwnProperty("value");
log(own);

=>
true

var obj = {value: undefined};
var own = obj.hasOwnProperty("value");
log(own);

=>
true

undefined가 값이지만 false로 인식된다.
하지만 값은 체크하지 않고 존재여부만 체크하므로 true 반환

• 자신이 만든것이 아닌 상속받은 프로퍼티(다른 오브젝트에서 만든 프로퍼티)이면 false를 반환한다.

var obj = {};
var own = obj.hasOwnProperty("hasOwnProperty");
log(own);

=>
false

hasOwnProperty()는 자신이 만든 것이 아닌 빌트인 Object 오브젝트에 있는 것

## propertyIsEnumerable()

• 오브젝트에서 프로퍼티를 열거할 수 있으면 true 반환, 없으면 false를 반환한다.

1. 열거 가능
var obj = {sports: "축구"};
log(obj.propertyIsEnumerable("sports"));

=>
true


2. 열거 불 가능
var obj = {sports: "축구"};
Object.defineProperty(obj, "sports", {
	enumberable: false	// 열거 불가능 설정
});
log(obj.propertyIsEnumberable("sports"));

for(var name in obj) {
	log(name)
}

=>
false

# Object와 prototype

## 빌트인 Object의 특징

• 인스턴스를 만들 수 있는 모든 빌트인 오브젝트의 __proto__에 Object.prototype의 6개 메소드가 설정된다. 빌트인 오브젝트로 만든 모든 인스턴스에도 위 6개 메소드가 존재한다.

## isPrototypeOf()

• 파라미터에 작성한 오브젝트에 object 위치에 작성한 prototype이 존재하면 true, 존재하지 않으면 false를 반환한다.

var numObj = new Number(123);
log(Object.prototype.isPrototypeOf(numObj));

=>
true

## toString()

• 인스턴스 타입을 문자열로 표시한다.

var point = {book: "책"};
log(point.toString());

var obj = new Number(123);
log(Object.prototype.toString.call(obj));

=>
[object Object]
[object Number]

• 오브젝트에 toString()이 있으면 toString()이 호출되고, 없으면 Object의 toString()이 호출된다.

## toLocaleString()

• 지역화 문자 변환 메소드를 대체하여 호출한다.
• Array, Number, Date 오브젝트의 toLocaleString() 메소드가 먼저 호출된다.

log(1234.56.toLocaleString());
log("4567.89".toLocaleString());

=>
1,234,56
4567.89

String.prototype.toLocaleString()이 없으므로 Object.prototype.toLocaleString() 메소드가 호출된다.

# Function 오브젝트

## 빌트인 Function 오브젝트의 프로퍼티 리스트

## new Function()

• Function 인스턴스를 생성한다.
• 파라미터에 문자열로 함수의 파라미터와 함수 코드를 작성한다.

var obj = new Function("book", "return book;");
obj("JS 책");

• 파라미터 수에 따라 인스턴스 생성 기준이 다르다.
• 파라미터를 2개 이상 작성한 경우

마지막 파라미터에 함수에서 실행할 함수 코드를 작성한다.
이를 제외한 나머지 파라미터는 함수의 파라미터가 된다.

var obj = new Function("one", "two", "return one + two");
log(obj(100, 200));

=>
300

• 파라미터를 하나만 작성한 경우

함수에서 실행할 함수 코드를 작성한다.
즉, 파라미터가 없는 것

var obj = new Function("return 1 + 2;");
log(obj());

=>
3

• 파라미터를 작성하지 않으면, 함수 코드가 없는 Function 인스턴스를 생성한다.

## Function()

• Function 인스턴스를 생성한다.
• 처리 방법과 파라미터 작성이 new Function()과 같다.
• 단지 new 연산자를 사용하지 않은 것이다.

# 함수 생명 주기

## 함수의 분류

• function 분류

빌트인 Function 오브젝트

function 오브젝트

function 인스턴스(new 연산자 사용)

• function 오브젝트 생성 방법

function 키워드 사용하여 아래와 같이 함수 정의
	function getbook(title) {return title};

그러면 자바스크립트 엔진이 function 키워드를 만나면 
이름이 getBook인 function 오브젝트를 생성한다.

## 함수의 생명 주기

• 함수 호출

function getBook(title) {
	return title;
};

var result = getBook("JS북");
log(result);

=>
JS북

getBook("JS"); 함수를 호출하면서 파라미터 값을 넘겨 준다.
이때 함수 코드가 실행,
자바스크립트의 엔진 컨트롤이 함수의 처음으로 이동한다.
파라미터 이름에 넘겨 받은 파라미터 값을 매핑
함수 코드 실행
return 작성에 관계없이 반환 값을 갖고 함수를 호출한 곳으로 돌아간다.

• 이러한 일련의 과정을 함수 생명 주기라고 한다.

## length 프로퍼티

• 함수의 파라미터 수가 생성되는 function 오브젝트에 설정된다.

function add(one, two) {
	return one + two;
};
log(add.length);

=>
2

• 함수를 호출한 곳에서 보낸 파라미터 수가 아니다.

function add(one, two) {
	return one + two;
};

add(1, 2, 3, 4);
log(add.length);

=>
2

one에 1이 설정, two에 2가 설정된다.

• 자바스크립트의 경우 호출하는 함수의 파라미터 수, 호출 받는 함수의 파라미터 수가 같지 않아도 된다. 또한, 파라미터 값의 타입이 같지 않아도 된다.

# 자바스크립트 학습

# Object 오브젝트

## 자바스크립트의 오브젝트

• 자바스크립트의 오브젝트는 , 빌트인 오브젝트 (Built-in Object), 빌트인 오브젝트 (Native Object), 호스트 오브젝트 (Host Object)로 구분한다.
• 빌트인 오브젝트 : 사전에 만드러 놓은 오브젝트로 빌트인 Number 오브젝트, 빌트인 String 오브젝트 등이 있다.
• 네이티브 오브젝트 : 자바스크립트 스펙에 정의된 오브젝트이다. 빌트인 오브젝트에 포함되며, 여기에 자바스크립트를 실행 할 때 만드는 오브젝트가 있다. (자바스크립트를 실행 할 때 만드는 오브젝트 : Argument 오브젝트)
• 호스트 오브젝트 : 빌트인, 네이티브 오브젝트를 제외한 오브젝트이다. (window 오브젝트, DOM 오브젝트가 있다.) 자바스크립트 호스트 환경에서 브라우저의 모든 요소 기술을 연결하고 융합하며 이를 제어한다.

var node = document.querySelector("div");
log(node.nodeName);

=>
DIV

• (DOM 오브젝트는 주로 마우스 클릭에 대한 인식과 관련)

## 오브젝트와 인스턴스

• 오브젝트 : new 연산자를 사용하지 않고, 빌트인 오브젝트로 만든 오브젝트를 지칭한다.

var abc = new Object();
var obj = {};

=>
abc, obj 모두 인스턴스를 생성
하지만 abc의 경우 new 연산자를 사용하여 abc 인스턴스라고 부른다.
obj의 경우는 new 연산자를 사용하지 않았으므로 obj 오브젝트라고 부른다.

# 빌트인 Object 프로퍼티 (ES3)

## 프로퍼티 리스트 (ES3)

# Object 인스턴스 생성

## new Object()

• new 연산자로 Object() 생성자 함수를 호출하면 인스턴스를 생성하여 반환한다.
• 파라미터의 데이터 타입에 따라서 생성할 인스턴스 타입이 결정된다.

var newNum = new Number(123);
web.log(typeof newNum);
web.log(newNum + 100);

=>
object
223


var newObj = new Object(123);
web.log(typeof newObj);
web.log(newObj + 100);

=>
object
223

new Object는 파라미터의 값에 따라 인스턴스 타입이 결정된다.
new Object의 파라미터 값이 String 이면 String 인스턴스가 생성된다.

• 파라미터의 값이 undefined, null이면 빈 Object 인스턴스를 반환한다.

var newObj = new Object();
web.log(newObj);

=>
{}

파라미터를 작성하지 않을경우 undefined를 작성한 것과 같으므로,
값을 갖지 않은 Object 인스턴스를 생성하게 된다.

## Object()

• Object() 함수는 Object 인스턴스를 생성한다. (new 연산자를 사용하지 않은 것 뿐)
• 파라미터에는 {name:value} 형태로 작성한다.

var obj = Object({name: "JS책"});
log(obj);

var emptyObj = Object();
log(emptyObj);

=>
{name: JS책}
{}

## Object 생성 방법

var abc = {};

var abc = Object()

=>
위 두개는 동일하다.
즉, var abc = {} 실행 시 Object 인스턴스가 생성된다.

• {} (중괄호) 표기는 오브젝트 리터럴(Literal) 이라고 부른다.

var obj = Object({name: "Value"});
log(obj);
log(obj instanceof Object);

=>
{name: value}
true

• Object() 와 Object 리터럴{} 모두 Object 인스턴스를 생성한다. 그래서 Object()를 사용하지 않고, 간단하게 {}를 사용한다.

## valueOf()

• data 위치에 작성한 Object 인스턴스의 프리미티브 값을 반환한다.

var obj = {key: "value"};
log(obj.valueOf());

=>
{key: value}

# 빌트인 오브젝트의 구조

## 빌트인 오브젝트 구조

• 오브젝트 이름 : Object, String, Number 등등..
• 오브젝트.prototype

1. prototype은 인스턴스를 생성하는 기준이다. 

2. prototype이 있으면 인스턴스 생성이 가능하고, 없으면 생성할 수 없다. 

3. prototype은 프로퍼티를 연결하는 오브젝트이다. (오브젝트.prototype)

• 오브젝트.prototype.constructor : 오브젝트 생성자
• 오브젝트.prototype.method : 메소드 이름과 함수 작성

# 함수와 메소드

## 함수와 메소드 연결

• 함수의 경우 오브젝트에 연결한다.

Object.create()

• 메소드는 오브젝트의 prototype에 연결한다.

Object.prototype.toString()

## 함수와 메소드 호출

• 함수 호출 방법

Object.create();

log(Object.create);
log(Object.prototype.create);

=>
function create() { [native code] }
undefined

해당 함수가 존재하면 함수가 출력,
없으면 undefined 출력

• 메소드 호출 방법

Object.prototype.toString()

으로 호출 하거나

또는 아래와 같이 인스턴스를 생성하여 호출한다.

log(Object.prototype.toString);

var obj = {};
log(obj.toString);

=>
function toString() { [native code] }
function toString() { [native code] }

• 함수와 메소드를 구분해야 하는 이유

1. 자바스크립트 코드 작성 방법이 다르기 때문이다.

2. 함수는 파라미터에 값을 작성하고, 메소드는 메소드 앞에 값을 작성하기 때문이다.
log(String.fromCharCode(40, 65));

=>
1A

## 메소드와 메서드

• 국립국어원 표준국어대사전에서 메소드는 검색되고 메서드는 검색되지 않는다.
• 메소드는 프로그램과 관련지어 설명하고 있다.
• 그러므로 되도록이면 메소드로 사용. 그렇다고 해서 메서드가 틀린건 아님(메소드의 발음 기호가 메서드)

# 자바스크립트 학습

# 문자열 추출

## substring()

• 파라미터의 시작 인덱스부터 끝 인덱스 직전까지 반환한다.

var value = "01234567";
log(value.substring(2, 5));	// 2번 인덱스 ~ 5번 인덱스 직전까지 반환

=>
234

• 두 번째 파라미터를 작성하지 않으면, 반환 대상의 끝까지 반환한다. (파라미터를 모두 작성하지 않으면 처음 ~ 끝까지 모두 반환한다.

var value = "01234567";
log(value.substring(5));
log(value.substring());

=>
567
01234567

• 이외에 다양한 추출 조건으로 추출 가능하다.

var value = "01234567";
log(value.substring(5, 20));

=>
567	

두 번째 파라미터 값이 전체 length 보다 크면, 전체 문자열 length 사용
따라서 시작 인덱스 ~ 끝까지 반환한다.


var value = "01234567";
log(value.substring(-7, 2));	// 파라미터 값이 '음수'이면 0으로 간주한다.
log(value.substring(5, 1));		// 첫 번째 파라미터의 값이 두 번째보다 크면 파라미터 값을 바꿔서 처리
								// value.substring(1, 5)
log(value.substring(5, "A"));	// NaN는 0으로 간주한다.

=>
01
1234
01234

## substr()

• 파라미터의 시작 인덱스부터 지정한 문자의 수를 반환한다.

var value = "01234567";
log(value.substr(0, 3));	// 0번 인덱스부터 3개 반환

=>
012

• 첫 번째 파라미터 값이 '음수'일 경우 length에서 파라미터 값을 더해 시작 인덱스로 사용한다.

var value = "01234567";
log(value.substr(-3, 3));

=>
567

• 두 번째 파라미터를 작성하지 않으면 양수 무한대로 간주한다.

var value = "01234567";
log(value.substr(4));
log(value.substr());

=>
4567
01234567

## slice()

• 파라미터의 시작 인덱스부터 끝 인덱스 직전까지 반환한다.

var value = "01234567";
log(value.slice(1, 4));  // 1번 인덱스 부터 4번 인덱스 직전까지
log(value.slice(false, 4));  // false, undefined, null, 빈 문자열은 0으로 간주한다.

=>
123
0123

• 첫 번째 파라미터 값을 작성하지 않거나, NaN이면 0으로 간주한다.

var value = "01234567";
log(value.slice("A"));
log(value.slice());

=>
01234567
01234567

• 두 번째 파라미터를 작성하지 안흥면 length를 사용한다.

var value = "01234567";
log(value.slice(5));
log(value.slice(5, 3));

=>
567
""

• 값이 '음수'일 경우 length에 더해서 사용한다.

var value = "01234567";
log(value.slice(4, -2));
log(value.slice(-5, -2));
log(value.slice(-2, -5));


=>
45
345
""

# 정규 표현식을 사용하는 함수

## match()

• 정규 표현식이란 문자열을 패턴으로 매치한다. (패턴(pattern)의 형태 : ^, $, *, + 등)
• 매치 결과를 배열로 반환한다.
• 매치 대상에 정규 표현식의 패턴을 적용하여 매치하고 매치 결과를 반환한다.

var value = "Sports";
log(value.match(/s/));  // /s/는 정규 표현식으로 소문자 s를 매치 > 배열로 반환
log(value.match("spo"));  // 매치 되지 않으므로 null 반환

=>
[s]
null

• 문자열 작성 가능, 엔진이 정규 표현식으로 변환하여 매치한다.

## replace()

• 매치 결과를 파라미터에 작성한 값으로 대체하여 반환한다.
• 두 번째 파라미터에 함수를 작성하면 먼저 함수를 실행하고 함수에서 반환한 값으로 대체한다.

var value = "abcabc";
log(value.replace("a", "바꿈"));	// 첫 문자가 매치되면 바꿈
log(value.replace(/a/, "바꿈"));	// /a/는 처음 하나만 바꿈

function change() {
	return "함수";
};

log(value.replace(/a/, change());

=>
바꿈bcabc
바꿈bcabc
함수bcabc

## search()

• 검색 대상을 정규 표현식으로 검색하고, 처음 매치된 첫 번째 인덱스를 반환한다.
• 매치되지 않으면 -1을 반환한다.

var value = "cbacba";
log(value.search(/a/));
log(value.search("K"));

=>
2
-1

## split()

• 분리 대상을 분리자로 분리하여 배열로 반환한다.

log("12_34_56".split("_"));  // "_"를 분리자로 사용

=>
[12, 34, 56]

• 분리자를 작성하지 않은 경우

var value = "123";
log(value.split(""));  // "" (빈문자열) 작성 시 문자를 하나씩 반환
log(value.split());  // 분리자를 작성하지 않으면, 원본을 배열로 반환

=>
[1, 2, 3]
[123]

"" 과 파라미터를 작성하지 않은 것은 다른것이다.

• 두 번째 파라미터에 반환 수를 작성한다.

var value = "12_34_56_78";
log(value.split("_", 3));  // "_"로 분리 후 3개만 반환

value = "123";
log(value.split("A"));  // 매치되지 분리자가 없는 경우, 분리 대상 전체를 배열로 반환

=>
[12, 34, 56]
[123]

# Unicode 관련 함수

## charCodeAt()

• 인덱스 번째의 문자를 유니코드의 코드 포인트 값으로 변환하여 반환한다.
• 인덱스가 문자의 길이보다 크면 NaN을 반환한다.

var value = "1Aa가";

for ( var k = 0; k < value.length; k++ ) {  // 4번 반복
	log(value.charCodeAt(k));
};

log(value.charCodeAt(12));

=>
49  // 0번째인 1을 유니코드의 코드 포인트 값인 49 반환
65	// A는 65
97	// a는 97
44032	// 가 44032
NaN	// 12번째 인덱스는 존재하지 않으므로 NaN

## fromCharcode(0

• 파라미터의 유니코드를 문자열로 변환하고 연결하여 반환한다.
• 작성하지 않으면 빈 문자열을 반환한다.
• data 위치에 String 오브젝트를 작성 변환 대상 값을 작성하지 않는다.
• String.fromCharCode() 형태

log(String.fromCharCode(49, 65, 97, 44032));

=>
1Aa가

## localeCompare()

• 값을 비교하여 위치를 나타내는 값으로 반환한다.
• 위치 값 : 1(앞), 0(같음), -1(뒤)
• 이때 Unicode의 코드 포인트 값으로 비교한다. 

var value = "나";
log(value.localeCompare("가"));	// "가"는 "나"보다 앞에 존재 = 1
log(value.localeCompare("나"));	// "나"의 코드 포인트 값 동일 = 0
log(value.localeCompare("다"));	// "다"는 "나"보다 뒤에 존재 = -1

=>
1
0
-1