New 병아리 개발자

# 자바스크립트 학습

# true, false 를 반환하는 메소드

## every()

• forEach() 메소드 처럼 시맨틱 접근을 한다.
• 배열의 엘리먼트를 하나씩 읽어가면서 flase를 반환할 때까지 콜백 함수를 호출한다.
• 즉, false를 반환하지 않으면 true를 반환한다.

var value = [20, 10, 30, 40];
var fn = function(el, index, all) {
	log(el);
    return el > 15;
};

var result = value.every(fn);
log("결과:", result);

=>
20
10
결과:flase

• false가 되는 조건이 배열의 앞에 있을 때 효율성이 높다.

## some()

• every() 메소드 처럼 시맨틱 접근을 한다.
• 단, true를 반환할 때까지 콜백 함수를 호출한다. 즉, true가 반환되면 반복이 종료된다.
• true를 반환하지 않으면 false를 반환한다.true가 되는 조건이 배열의 앞에 있을 때 효율성이 높다.

var value = [10, 20, 30, 40];
var fn = function(el, index, all) {
	log(el);
    return el > 15;
};
var result = value.some(fn);
log("결과:", result);

=>
10
20
결과:true

# 필터, 매핑

## filter()

• forEach() 메소드 처럼 시맨틱 접근을 한다.
• 배열의 엘리먼트를 하나씩 읽어가면서 콜백 함수에서 true를 반환하면 현재 읽은 엘리먼트를 반환한다.
• 조건에 맞는 엘리먼트를 추려낼 때 유용하다.

var value = [10, 20, 30, 40];
var fn = function(el, index, all) {
    return el > 15;
};
var result = value.filter(fn);
log("결과:", result);

=>
[20, 30, 40]

true가 하나도 없으면 빈 배열 반환.

## map()

• forEach() 메소드 처럼 시맨틱 접근을 한다.
• 배열의 엘리먼트를 하나씩 읽어가면서 콜백 함수에서 반환한 값을 새로운 배열에 첨부하여 반환한다.

var value = [10, 20, 30, 40];
var fn = function(el, index, all) {
    return el + this.add;
};
var point = {add: 100};
var result = value.map(fn, point);
log(result);

=>
[110, 120, 130]

# 반환 값을 파라미터 값으로 사용

## reduce()

• forEach() 메소드처럼 시맨틱 접근
• 배열 끝까지 콜백 함수를 호출한다. 파라미터 작성 여부에 따라 처리가 다르다.
• 콜백 함수만 작성한 경우(즉, 파라미터를 하나만 작성한 경우)

var value = [1, 3, 5, 7];
var fn = function(prev, curr, index, all) {
    log(prev + "," + curr);
    return prev + curr;
};
var result = value.reduce(fn);
log("결과:", result);

=>
1,3
4,5
9,7
결과:16

*reduce() 콜백 함수만 작성한 경우(즉, 파라미터를 하나만 작성한 경우)
처음 콜백 함수를 호출할 때
인덱스[0]의 값을 직전 값에 설정
인덱스[1]의 값을 현재 값에 설정
인덱스에 1을 설정

두 번째로 콜백 함수를 호출할 때
콜백 함수에서 반환된 값을 직전 값에 설정
인덱스[2]의 값을 현재 값에 설정

• 두 번째 파라미터를 작성한 경우

var value = [1, 3, 5];
var fn = function(prev, curr, index, all) {
    log(prev + "," + curr);
    return prev + curr;
};
var result = value.reduce(fn, 7);
log("반환:", result);

=>
7,1
8,3
11,5
반환:16

*reduce() 두 번째 파라미터를 작성한 경우
처음 콜백 함수를 호출할 때
두 번째 파라미터 값을 직전 값에 설정
인덱스[0]의 값을 현재 값에 설정
인덱스에 0을 설정

두 번째로 콜백 함수를 호출할 때
콜백 함수에서 반환된 값을 직전 값에 설정
인덱스[1]의 값을 현재 값에 설정

## reduceRight()

• reduce()와 처리 방법이 같다.
• 단, 배열 끝에서 앞으로 하나씩 읽어가면서 콜백 함수를 호출, 콜백 함수에서 반환한 값을 반환한다.

var value = [1, 3, 5];
var fn = function(prev, curr, index, all) {
    log(prev + "," + curr);
    return prev + curr;
};
var result = value.reduceRight(fn);
log("반환:", result);

=>
7,5
12,3
15,1
반환:16

# Boolean 오브젝트

## Boolean 오브젝트

• 빌트인 오브젝트, true와 false로 처리한다.
• 값이 있으면 true로 인식
• false 인식의 기준

undefined
null
NaN
빈 문자열
숫자 타입 0

• 숫자 값 변환의 기준

true를 1, false를 0으로 변환한다.

## Boolean 프로퍼티 리스트

## new Boolean()

• Boolean 인스턴스를 생성
• 파라미터 값을 true 또는 false로 변환하여 프리미티브 값으로 설정한다.

var value = [undefined, null, NaN, 0, ""];
for (var k = 0; k < value.length; k++) {
	var obj = new Boolean(value[k]);
    log(obj + 1);
};

=>
1
1
1
1
1

• 문자열이면서 값이 있으면 true로 변환한다.

var value = [12, "1", "0", "false"];
for (var k = 0; k < value.length; k++) {
	var obj = new Boolean(value[k]);
    log(obj + 1);
};

=>
2
2
2
2

## Boolean()

• Boolean 값으로 변환
• 인스턴스를 생성하지 않고 true 또는 false로 변환한다.

var value = [12, "1", "0", "false"];
for (var k = 0; k < value.length; k++) {
	log(Boolean(value[k]) + 1);
};

=>
2
2
2
2

## toString()

• data 위치의 true, false를 문자열로 변환 (즉, "true", "false"로 변환)

## valueOf()

• Boolean 인스턴스의 프리미티브 값 반환 (즉, true 또는 false 반환)

var obj = new Boolean(3);
log(obj.valueOf());

=>
true

# 자바스크립트 학습

# 콜백 함수를 가진 Array 메소드

## forEach()

• 배열의 엘리먼트를 하나식 읽어 가면서 콜백 함수를 호출한다.
• 호출 할때 마다 콜백함수의 파라미터로 엘리먼트 값, 인덱스, 배열 전체 값을 넘겨준다.

var list = ["A", "B", "C"];
list.forEach(function(el, index, all) {
	log(el + ":" + index + ":" + all);
});

=>
A:0:A, B, C
B:1:A, B, C
C:2:A, B, C

엘리먼트 수 만큼 콜백 함수 호출,
호출 할때 마다 엘리먼트 값, 인덱스, 배열 전체 값을 콜백 함수의 파라미터로 넘겨준다.

• break, continue 사용 불가능 / throw는 사용 가능
• 콜백 함수 분리(독립성)

var list = ["A", "B", "C"];
var fn = function (el, index, all) {
	log(el + ":" + index + ":" + all);
};

list.forEach(fn);

=>
A:0:A, B, C
B:1:A, B, C
C:2:A, B, C

콜백 함수가 독립적으로 움직임
중복 최소화

• this로 오브젝트 참조

var list [1, 2];
var fn = function (el, index, all) {
	log(el + this.ten);
};

list.forEach(fn, {ten: 10});

=>
11
12

this로 오브젝트 참조
this.ten의 값은 10
함수 안에서 값(데이터)를 사용하는 방법
	- 파라미터, 변수, this로 참조, 함수 호출(반환값)
콜백 함수의 완전한 독립성을 보장!!

# for()와 forEach()의 차이

## forEach()

• forEach()를 시작할 때 반복 범위를 결정
• 엘리먼트를 추가하더라도 처리하지 않는다.

var list = [1, 2, 3];
var fn = function(el, index, all) {
	if(index === 0) {
    	list.push("AB");
    };
    log(el);
};

list.forEach(fn);

=>
1
2
3

배열을 처음 읽었을 때 즉, index가 0 일때 배열 끝에 "AB"를 첨부
이렇게 반복하는 도중 배열에 엘리먼트를 추가하면 처리하지 않는다.

• 현재 인덱스보다 큰 인덱스의 값을 변경하면 변경된 값을 사용한다. (현재 인덱스보다 작은 인덱스의 값을 변경하면 처리하지 않는다.)

var list = [1, 2, 3];
var fn = function(el, index, all) {
	if(index === 0) {
    	list[2] = 345;
    };
    log(el);
};

list.forEach(fn);

=>
1
2
345

index가 0 일때 2번 인덱스의 값을 345로 변경
변경된 값 사용

• 현재 인덱스보다 큰 인덱스의 엘리먼트를 삭제하면 배열에서 삭제되므로 반복에서 제외된다. 추가는 처리하지 않지만, 삭제는 반영

var list = [1, 2, 3];
var fn = function(el, index, all) {
	if(index === 0) {
    	delete list[2];
    };
    log(el);
};

list.forEach(fn);

=>
1
2

## for() 와 forEach()의 차이

• forEach()는 시맨틱 접근으로 처음부터 끝까지 반복한다는 시맨틱, 반복 중간에 끝나지 않는다는 시맨틱. 시맨틱을 갖고 있으므로 소스 코드의 가독성이 향상된다.
• for()는 함수 코드를 읽어야 알 수 있다. (break, continue로 다른 처리 할 수 있으므로)
• forEach()는 반복만 하며 콜백 함수에서 기능처리, 콜백 함수에서 this 사용이 가능하다.
• forEach()는 인덱스가 0부터 시작한다. for()와 같이 인덱스 증가 값을 조정할 수 없다. 뒤에서 앞으로 읽을 수도 없음, 이것도 시맨틱 접근

# 자바스크립트 학습

# sort(분류)

## sort()

• 엘리먼트 값을 승순으로 정렬

var value = [4, 2, 3, 1];
log(value.sort();

=>
[1, 2, 3, 4]

• 정렬 기준은 엘리먼트 값의 Unicode 순서이다. 
• Unicode의 코드 포인트가 작으면 앞에 오고, 크면 뒤에 온다.

var value = ["A1", "A01", "B2", "B02"];
log(value.sort());

=>
[A01, A1, B02, B2]

왼쪽에서 오른쪽으로 문자 하나씩 비교하여 정렬
A01과 A가 같으므로 다음 문자 비교
0과 1을 비교하게 되며 0이 1보다 코드 포인트가 앞에 있어 앞에 정렬

• 주의 : sort 대상 배열도 정렬된다.

var value = [4, 2, 3, 1];
log(value.sort());
log(value);

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

• 값이 undefined이면 끝으로 이동한다.

var value = [ , , 1, 2];
log(value.sort());

=>
[1, 2, undefined, undefined]

## sort() 와 Unicode

• 숫자에 해당하는 Unicode의 code point로 정렬

var value = [101, 26, 7, 1234];
log(value.sort());

=>
[101, 1234, 26, 7]

사람이 생각하는 일반적인 정렬은 7, 26, 101, 1234
코드 포인트로 비교하여 sort하기 때문에 사람이 생각하는 것과는 다른 결과가 나온다.

사람이 생각하는 일반적인 정렬로 sort 하기 위해서는
sort()의 파라미터에 콜백함수를 작성하고 콜백함수와 같이 정렬해야 한다.

# sort 알고리즘

## sort()

• sort 알고리즘

var value = [101, 26, 7, 1234];
value.sort(function(one, two){
	return one - two;
});
log(value);

=>
[7, 26, 101, 1234]

sort() 파라미터에 콜백함수 지정
콜백함수를 호출하면서 파라미터 값으로 101, 26 넘기면,
one(101)-two(26) 진행, 결과는 양수
반환 값이 0보다 크면 배열에서 값의 위치를 바꿈
값이 0보다 작거나 같으면 배열에서 값의 위치를 바꾸지 않음
다시 처음으로 돌아가 바뀌는 것이 없을 때까지 반복

## reverse()

• 배열의 엘리먼트 위치를 역순으로 바꾼다.
• 엘리먼트 값이 아닌 인덱스 기준, 이때 대상 배열도 바뀐다.

var value = [1, 3, 7, 5];
log(value.reverse());

=>
[5, 7, 3, 1]

# Array 오브젝트(ES5)

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

## isArray()

• 체크 대상이 배열이면 true, 아니면 false 반환
• isArray()는 함수이다.

log(Array.isArray([1, 2]));	// isArray()는 함수이므로
log(Array.isArray(123));	// Array.isArray() 형태로 호출

=>
true
false

• isArray() 함수가 필요한 이유

log(typeof {a: 1});
log(typeof [1, 2]);
log(typeof null);

=>
object
object
object

typeof 연산자로 배열 여부 체크 불가능 하므로
배열 여부 체크를 위해 Array.isArray() 사용

# index 처리 메서드

## indexOf()

• 파라미터 값과 같은 엘리먼트의 인덱스를 반환
• 왼쪽에서 오른쪽으로 검색하며, 값이 같은 엘리먼트가 있으면 검색 종료

var value = [1, 2, 5, 2, 5];
log(value.indexOf(5));

=>
2

배열의 왼쪽부터 5를 검색
2번 인덱스에 5가 있으므로 2를 반환

• 값의 체크는 데이터 타입까지 체크한다.

var value = [1, 2, 5, 2, 5];
log(value.indexOf("5"));

=>
-1
배열의 왼쪽부터 "5"를 검색
2번과 4번 인덱스에 5가 있지만 타입이 다르다.
같은 값이 없으면 -1을 반환

• 두 번째 파라미터의 인덱스부터 검색

var value = [1, 2, 5, 2, 5];
log(value.indexOf(5, 3));

=>
4

3번 인덱스부터 5를 검색
2번 인덱스에 5가 있지만, 3번 인덱스부터 검색하므로 4가 반환된다.

• String과 Array의 indexOf() 차이

log("ABCBC".indexOf("C", -2));

var list = ["A", "B", "C", "D", "C"];
log(list.indexOf("C", -2));

=>
2
4

두 번째 파라미터에 음수를 작성했을 때 검색 방법이 다르다.
String 오브젝트는 2번째 파라미터에 음수를 작성하면 0으로 간주하여 처음부터 검색
Array 오브젝트는 2번째 파라미터에 음수를 작성하면 음수에 length를 더해서 시작 인덱스로 사용

## lastIndexOf()

• 파라미터 값과 같은 엘리먼트의 마지막 인덱스 반환(뒤에서 앞으로 검색한다는 표현이 더 맞음)
• 다른 처리 방법은 indexOf() 와 같다.

var value = [1, 2, 5, 2, 5];
log(value.lastIndexOf(5));

=>
4

# 자바스크립트 학습

# 엘리먼트 복사

## slice()

• 배열의 일부를 복사하여 배열로 반환한다.
• 첫 번째 파라미터의 인덱스부터, 두 번째 파라미터의 인덱스 직전까지 반환한다.

var origin = [1, 2, 3, 4, 5];
var result = origin.slice(1, 3);
log(result);
log(origin);

=>
[2, 3]
[1, 2, 3, 4, 5]

• true, false를 숫자로 변환한다.

var value = [1, 2, 3, 4, 5];
log(value.slice(true, 3));
log(value.slice(false, 3));

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

• 첫 번째 파라미터만 작성한 경우

log([1, 2, 3, 4, 5].slice(2));

=>
[3, 4, 5]

• 첫 번째 파라미터 값이 클 경우

var([1, 2, 3, 4, 5].slice(4, 3));

=>
[]

• 파라미터에 음수를 작성한 경우

var value = [1, 2, 3, 4, 5];
log(value.slice(-4, -2));

=>
[2, 3]

# 엘리먼트 값을 문자열로 변환

## join()

• 엘리먼트와 분리자를 하나식 결합하여 문자열로 연결한다.

[0] 인덱스, 분리자, [1] 인덱스, 분리자 .. 의 형태로

• 마지막 엘리먼트는 분리자를 연결하지 않는다.

var value = [1, 2, 3];
var result = value.join("##");
log(result);
log(typeof result);

=>
1##2##3
string

• 파라미터를 작성하지 않으면 콤마로 분리한다.

var value = [1, 2, 3];
var result = value.join();
log(result);

=>
1, 2, 3

• 파라미터에 빈 문자열 작성

var value = [1, 2, 3];
var result = value.join("");
log(result);

=>
123

엘리먼트 값만 연결하여 반환.
사용 빈도수가 높다.
<table>을 만들 때 주로 사용

## toString()

• 배열의 엘리먼트 값을 문자열로 연결한다.
• 콤마로 엘리먼트를 구분한다.

var result = ["A", "B", "C"].toString();
log(result);
log(["가"], ["다"]].toString());

=>
A, B, C
가, 다

## toLocaleString()

• 엘리먼트 값을 지역화 문자로 변환한다.
• 문자열을 콤마로 연결하여 반환한다.

var value = [12.34, 56];
log(value.toLocaleString("zh-Hans-CN-u-nu-hanidec"));

=>
一二.三四, 五六

# 엘리먼트 삭제

## shift()

• 배열의 첫 번째 엘리먼트를 삭제한다.
• 삭제한 엘리먼트 값이 undefined로 남지 않고 완전히 삭제된다.
• length의 값이 하나 줄어 든다.

var value = [1, 2, 34];
log(value.shift());
log(value);

=>
1
[2, 34[

• 빈 배열이면 undefined가 반환 된다.

var result = [].shift();
log(result);

=>
undefined

## pop()

• 배열의 마지막 엘리먼트를 삭제한다.
• 삭제한 엘리먼트 값이 undefined로 남지 않고 완전히 삭제된다.
• length 값이 하나 줄어 든다.

var value = [1, 2, 34];
log(value.pop());
log(value);

=>
34
[1, 2]

• 빈 배열이면 undefined를 반환한다.

var result = [].pop();
log(result);

=>
undefined

## splice()

• 엘리먼트를 삭제하고 삭제한 엘리먼트를 반환한다.

var value = [1, 2, 3, 4, 5];
log(value.splice(1, 3));
log(value);

=>
[2, 3, 4]
[1, 5]

• 삭제한 위치에 세 번째 파라미터를 삽입한다.

var value = [1, 2, 3, 4, 5];
log(value.splice(1, 3, "A", "B"));
log(value);

=>
[2, 3, 4]
[1, A, B, 5]

• 파라미터를 작성하지 않으면 삭제하지 않는다.

var value = [1, 2, 3, 4, 5];
log(value.splice());
log(value);

=>
[]
[1, 2, 3, 4, 5]