자바스크립트 학습 22일차

# 자바스크립트 학습

# Array 인스턴스 생성

## new Array()

• new Array() 생성자 함수를 호출하면 Array 인스턴스 생성, 반환
• Array 인스턴스 or Array 오브젝트 배열 생성 기준

파라미터에 따라 배열 생성 기준이 다르다.
파라미터를 작성하지 않으면 빈 배열이 반환된다.
파라미터에 작성한 순서대로 엘리먼트에 설정된다.
new Array(3)처럼 파라미터에 숫자를 작성하면 3개의 엘리먼트를 생성한다.

• 파라미터를 작성하지 않을경우 빈 배열 반환 예

var obj = new Array();
log(typeof obj);
log(obj.length);

=>
object
0

• 파라미터에 작성한 순서대로 엘리먼트에 설정 예

var one = new Array(10, 20);
log(one);

var two = new Array([30, 40]);
log(two);

=>
[10, 20]
[[30, 40]]

• 파라미터에 숫자를 작성하면 숫자만큼의 엘리먼트 생성 예

var obj = new Array(3);
log(obj);

=>
[undefined, undefined, undefined]

## Array()

• Array 인스턴스를 생성, 반환
• new Array()와 생성 방법 및 기능 같음
• 인스턴스 생성 논리

new Array()는 new 인스턴스에서 생성자 함수를 호출하여 인스턴스를 생성

Array()는 직접 생성자 함수를 호출하여 인스턴스 생성

## length 프로퍼티

• 배열 [1, 2, 3]에서 length의 값은 3, Array 오브젝트에 {length: 3}의 형태로 설정된다.
• 처음 인덱스는 0, 마지막 인덱스는 2이다.

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

=>
3

• length 프로퍼티는 열거/삭제는 할 수 없지만, 변경은 가능하다.
• length의 값을 변경하면 배열의 엘리먼트 수가 변경된다.

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

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

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

=>
[1, 2]

length 가 3에서 2로 줄어들면서 기존에 있던 뒤의 엘리먼트가 삭제된다.

 

# 엘리먼트 추가, 삭제 메커니즘

## 엘리먼트 추가

• 배열에 엘리먼트를 추가하는 방법

삽입할 위치에 인덱스 지정

표현식으로 인덱스 지정

• 삽입할 위치에 인덱스 지정 예

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

=>
[1, 2, undefined, undefined, 5]

• 표현식으로 인덱스 지정 예

var value = [1, 2];
value[value.length + 2] = 5;
lgo(value);

=>
[1, 2, undefined, undefined, 5]

## delete 연산자

구분	데이터(값)
object	매치 대상
프로퍼티	삭제할 프로퍼티 이름
인덱스	배열의 인덱스
반환	삭제 성공 시 true / 실패 시 false

• var 변수는 삭제가 불가능하다.

var value = 123;
log(delete value);

=>
false

var 변수를 삭제할 수 없다.

• 글로벌 변수는 삭제 가능하다.

value = "글로벌 변수";
log(delete value);

try {
	log(value);
} catch {
	log("존재하지 않음");
};

=>
true
존재하지 않음

• 프로퍼티의 삭제 : {name: value} 삭제 방법

삭제할 프로퍼티 이름 작성
ES5 에서 삭제 불가 설정 가능

var book = {title: "책"};
log(delete book.title);
log(book.title);

=>
true
undefined

var book = {title: "책"};
log(delete book);

sports = {item: "축구"};
log(delete sports);

=>
false
true

• 인덱스로 배열의 엘리먼트 삭제

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

=>
true
4

삭제는 해도 length가 변경되진 않는다.

## 배열 엘리먼트 삭제 메커니즘

• 삭제된 인덱스에 undefined를 설정한다. ( 이는 엘리먼트 삭제 시 앞으로 하나씩 당겨서 엘리먼트를 이동하면 처리 시간이 걸리기 때문에 엘리먼트 삭제 시 undefined를 설정 )

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

for ( var k = 0; k < value.length; k++ ) {
	log(value[k]);
};

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

• 배열을 읽을 때 제외시켜야 한다.

 

# 엘리먼트 삽입, 첨부

## unshift()

구분	데이터(값)
data	기준
파라미터	[tiem1 [, tiem2 [, ...]]]opt
반환	추가 후의 length

• 0번 인덱스에 파라미터 값을 삽입
• 배열에 있던 엘리먼트는 뒤로 이동

var value = [1, 2];
value.unshift(345, 67);
log(value);

=>
[345, 67, 1, 2]

## push()

구분	데이터(값)
data	첨부 기준
파라미터	[tiem1 [, tiem2 [, ...]]]opt
반환	첨부 후의 length

• 배열 끝에 파라미터 값을 첨부

var value = [1, 2];
value.push(345, 67);
log(value);

=>
[1, 2, 345, 67]

## concat()

구분	데이터(값)
data	연결 기준
파라미터	[tiem1 [, tiem2 [, ...]]]opt
반환	연결 결과

• 배열에 파라미터 값을 연결하여 반환한다.

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

=>
[1, 2, 3, 4]

• 파라미터가 1차원 배열이면 값만 반영

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

=>
[1, 2, 3, 4]