이번에는 모던 자바스크립트 입문 4장 내용을 요약하였습니다.
객체 리터럴
객체
-
원시 타입을 제외한 모든 값
-
가장 중요한 데이터 타입
-
객체 리터럴과 생성자(함수)로 생성
-
이름(프로퍼티 이름이나 키라고 부름)과 값을 한 쌍으로 묶은 데이터를 여러 개 모은 것 => 객체의 프로퍼티
-
데이터 여러개를 하나로 모은 복합 데이터로 연관 배열, 사전이라고도 부름
객체 리터럴로 객체 생성하기
-
객체 리터럴 : { } 안의 부분
-
객체 리터럴을 변수 card에 대입하고 있는 예시
-
프로퍼티 이름과 프로퍼티 값은 콜론(:)을 사용해서 구분
-
각각의 프로퍼티들은 쉼표로 구분
-
프로퍼티 이름은 모든 식별자와 문자열 리터럴 (빈 문자열도 가능)을 사용
var card = { suit : "하트", rank : "A" };
-
프로퍼티 값에는 모든 데이터 타입의 값과 표현식 대입 가능
-
변수에 대입된 객체 안의 프로퍼티 값을 읽고 쓸 때 : 마침표연산자(.)나 대괄호연산자( [ ] )를 사용
card.suit // 하트
card["rank"] // A
card.color // undefined
var obj = {};
console.log(obj); //Object{}
-
마침표 연산자 : 문자열이 아님. 프로퍼티 이름(식별자)만 사용 가능
-
대괄호 연산자 : 문자열로 채워짐. 프로퍼티 이름이나 문자열을 반환하는 표현식 사용 가능
-
객체에 없는 프로퍼티를 읽으려고 시도 : undefined
-
선언되지 않은 변수를 읽으려고 시도 : 참조 오류 발생
-
객체 리터럴 안에 프로퍼티가 없으면 빈 객체 생성
프로퍼티 추가와 삭제
-
프로퍼티 추가 : 없는 프로퍼티 이름에 값을 대입
-
프로퍼티 삭제 : delete 연산자 사용
- Java, C++과 다르게 실행 중 객체의 프로퍼티를 자유롭게 추가, 삭제 가능
card.value = 14;
console.log(card); // Object {suit: "하트", rank: "A", value: 14 }
in 연산자로 프로퍼티 존재 확인
-
in 연산자 : 객체에 특정 프로퍼티 존재 여부 확인
-
프로퍼티가 객체에 포함 : true, 아니면 false
-
in 연산자의 조사 대상 : 그 객체가 가진 프로퍼티와 객체가 상속받은 모든 프로퍼티라는 것을 주의
-
card는 Object 객체를 상속받아 toString 프로퍼티가 card에 있다고 조회됨
var card = { suit: "하트", rank: "A" } ;
console.log("suit" in card); //true
console.log("toString" in card); //true
객체 리터럴 예제
-
객체의 프로퍼티 값으로 객체를 대입할 수 있다.
-
마침표 뒤에 프로퍼티 이름을 연결해서 표현한다.
var circle = {
center: { x: 1.0, y: 2.0 }, // 원의 중점
radius: 2.5 // 반지름
};
circle.center.x // 1.0
메서드
-
프로퍼티에 저장된 값의 타입이 함수인 프로퍼티
객체는 참조 타입
-
생성된 객체는 메모리의 영역을 한 덩어리로 차지한다.
-
객체 타입의 값을 변수에 대입하면, 그 변수에 객체의 참조(메모리에서의 위치정보)가 저장.
-
즉 그 변수는 객체를 참조하고 있다 (객체 개념은 다른 글에서 잘 설명했기에 넘어가겠음)
함수의 기초
함수
-
일련의 처리를 하나로 모아 언제든 호출할 수 있도록 만들어 둔 것
-
입력 값(인수)을 받으면 출력 값(반환값)으로 함수 값을 반환
-
입력을 받은 후 함수 안의 프로그램에서 특정 작업 수행
함수 선언문으로 함수 정의
-
function 키워드를 사용해서 정의
-
소괄호 안의 x : 인수
-
중괄호 안 : 함수 실행 후 작업할 부분
-
return 문 다음에 줄바꿈 문자를 자동으로 인식하므로 넣지 말 것
- return 문이 실행되면 제어권이 함수를 호출한 코드로 되돌아가고 함수의 반환값은 return문에 지정된 값이 된다.
function square(x) { return x * x; }
함수 이름
-
변수 이름과 함수이름은 모든 식별자를 함수 이름으로 사용할 수 있다.
-
일반적으로 동사나 동사로 시작하는 단어로 만든다.
함수 호출
-
함수 호출은 함수 이름 뒤에 소괄호를 인수로 묶어 입력
-
return 문이 실행되면 제어권이 함수를 호출한 코드로 되돌아가고 함수의 반환값은 return문에 지정된 값이 된다.
-
인수 (argument) : 함수를 호출할 때 전달하는 값
-
인자 (parameter) : 함수 정의문의 인수
square(3) // 9
인수
-
함수는 인수를 여러 개 받을 수 있고 인수와 인수를 쉼표로 구분한다.
-
인수를 받지 않는 함수 정의도 가능 : 인수와 return문이 없다
-
return문이 실행되지 않은 상태에서 제어권이 함수를 호출한 코드로 되돌아가면 함수의 반환값 : undefined
var bark = function() { console.log("BB");};
bark();
console.log(bark());
함수의 실행 흐름
-
호출한 코드에 있는 인수가 함수 정의문의 인자에 대입
-
함수 정의문의 중괄호 안에 작성된 프로그램이 순차적으로 실행
-
return 문이 실행되면 호출 코드로 돌아간다. return 문의 값은 함수의 반환값.
-
return 문이 실행되지 않은 상태로 마지막 문장이 실행되면 호출한 코드로 돌아간 후 undefined가 함수의 반환값이 된다
함수 선언문의 끌어올림
-
JS 엔진은 변수 선언문처럼 함수 선언문을 프로그램의 첫머리로 끌어올림
-
즉, 함수 선언문은 프로그램 어디에서도 작성 가능
console.log(square(5)); //25
function square(x) { return x * x ; }
값으로서의 함수
-
함수는 객체
-
함수 선언문으로 함수를 선언하면 함수이름을 변수 이름으로 한 변수와 함수 객체가 만들어지고 그 변수에 함수 객체의 참조가 저장
-
변수 값을 다른 변수에 할당하면 그 변수 이름으로 함수 실행 가능
-
함수를 다른 함수의 인수로 넘길 수도 있음 (8장)
참조에 의한 호출과 값에 의한 호출
-
함수는 1) 원시 값을 인수로 넘겼을 때, 2) 객체를 인수로 넘겼을 때 다르게 동작
원시 값을 인수로 넘겼을 때
function add1(x) { return x = x+1; }
var a = 3;
var b = add1(a);
console.log("a=" + a + ", b=" + b); //a=3, b=4
-
함수 호출 시 변수 a의 복사본이 인자 x에 할당
-
값의 전달 : 인수에 원시 값을 넘기면 그 값 자체가 인자에 전달
-
변수 a와 x는 다른 영역의 메모리에 위치한 별개의 변수여서 x값이 변경되도 a값은 그대로 (값의 복사본을 대입)
객체를 인수로 넘겼을 때
function add1(p) { p.x = p.x + 1; p.y = p.y + 1; return p; }
var a = { x:3, y:4 };
var b = add1(a);
console.log(a, b); // Object {x=4, y=5} Object {x=4, y=5}
-
함수 호출 시 변수 a의 복사본이 인자 p에 할당 (원시 값을 인수로 넘겼을 때와 동일)
-
참조 전달 : 변수 a에 객체 { x:3, y:4 } 의 참조가 저장되어 있으며 이 참조 값을 인자 p에 대입
-
참조 값 : 인수를 객체로 넘겼을 때 전달되는 값
-
인자 p와 변수 a는 같은 객체를 참조한다.
-
함수의 인수로 객체를 넘기면 함수 내에서 원래 객체를 바꿀 수 있다.
-
인수가 여러 개일 때의 문제점 : 인수의 순서 헷갈림, 인수 개수를 바꾸면 함수의 호출 방법이 바뀐다.
인수 여러 개를 객체의 프로퍼티에 담아서 함수에 넘기기
function setBallProperties(x, y, vx, vy, radius) { ... }
setBallProperties(0, 0, 10, 15, 5);
var parameters = {
x:0,
y:0,
vx:10,
vy:15,
radius:5
};
function setBallProperties(params) { ... }
setBallProperties(parameters);
-
함수 내에서 프로퍼티를 읽는 코드는 params.vx 처럼 표현
-
전달하는 인수 추가 시에도 프로퍼티만 추가
변수의 유효 범위 (Scope)
-
변수에 접근할 수 있는 범위
-
유효 범위를 결정하는 방법 : 1) 프로그램 구문만으로 정하는 어휘적 범위(lexical scope), 2)프로그램 실행 중 정하는 동적 범위(dynamic scope)
-
대다수 프로그래밍언어와 JS는 어휘적 범위를 사용
-
JS 변수는 변수의 유효범위에 따라 전역변수, 지역 변수로 나뉨
-
전역 변수 : 함수 바깥에서 선언된 변수. 유효 범위 : 전체 프로그램
-
지역 변수 : 함수 내에서 선언된 변수와 함수 인자. 유효 범위 : 변수가 선언된 함수 내부
- 함수 바깥에서 지역 변수를 읽으려고 시도하면 참조 오류가 발생
-
변수에 유효 범위가 있는 이유 : 프로그램의 다른 부분에서 동명인 변수의 충돌을 막기 위해서
-
그러나, 전역변수 이름과 지역변수 이름과 같으면 변수 충돌, 전역변수를 숨기고 지역변수를 사용
-
함수 중간에서 변수를 선언해도 함수 처음에서 선언된 것처럼 다른 문장보다 먼저 생성
-
함수 외, 내에서 변수를 선언하지 않은 상태에서 값을 대입하면 전역 변수로 선언
블록 유효 범위 : let과 const
-
ES6부터 추가된 변수 선언자로 블록 유효범위를 갖는 변수를 선언
-
블록 유효 범위 : 중괄호 { } 안에서만 유효
-
let : 변수 선언
-
const : 상수 선언 (한 번만 할당)
let 선언자
-
사용법은 var 문과 같으며 변수의 유효범위가 가장 큰 차이점
-
동일 변수명일 경우 중괄호 내에서는 중괄호 내부 변수가 유효
-
유효범위가 중괄호 안인 변수는 바깥에서 읽으려 시도하면 참조 오류가 발생한다.
-
var 문과 달리 let 선언 변수는 끌어올리지 않는다.
-
let 문으로 동일 이름 변수를 선언하면 문법 오류 발생
let x;
let x; // Uncaught SyntaxError
const 선언자
-
한 번만 할당할 수 있는 블록 유효 범위의 변수(상수) 선언
-
let과 유사하나 반드시 초기화해야한다는 특징이 있다.
-
선언 변수에 다시 대입을 시도하면 타입 오류 발생. 상수값은 수정하지 못한다.
-
상수 값이 객체거나 배열일 경우 프로퍼티/프로퍼티 값을 수정할 수 있다.
const c = 2;
c = 5; // Uncaught TypeError
const origin = { x:1, y:2 };
origin.x = 3;
console.log(origin); // Object { x:3, y:2 }
함수 리터럴로 함수 정의하기
-
함수 리터럴 : 이름이 없는 함수, 익명 함수, 무명 함수. function(x) { ... } 부분이다.
-
함수 선언문에서는 끝에 세미콜론을 붙일 필요가 없지만 함수 리터럴 사용 시 끝에 세미콜론을 반드시 붙인다.
-
함수 선언문과 함수 리터럴로 정의한 함수의 사용법은 같다. square(5);
-
함수 리터럴, 함수 선언문 모두 내부적으로 square 변수에 함수 객체의 참조를 저장
var square = function(x) { return x*x; };
-
JS 엔진이 함수 선언문으로 정의한 함수는 끌어올리지만 함수리터럴로 정의한 함수는 끌어올리지 않는다
-
함수 리터럴로 정의한 익명 함수는 변수 할당 후에 square라는 이름을 갖게 되고, 그 이름으로 호출 가능
-
따라서 함수 미정의 상태에서 함수를 사용하면 타입 오류 발생
console.log(square(3)); // Uncaught TypeError: square is not a function
var square = function(x) { return x*x; };
-
익명 함수 코드는 디버거에 모두 anonymous function이라고 표시되므로 함수를 구별할 수 없는 단점
-
익명 함수에도 이름을 붙이면 확인 할 수 있으나 코드에서 sq라는 이름은 함수 내에서만 유효
-
함수 바깥에서 sq 이름으로 호출할 수 없음
var square = function sq(x) { return x*x; };
객체의 메서드
-
메서드 : 객체의 프로퍼티 중 함수 객체의 참조를 값으로 담고 있는 것
-
메서드 정의 : 프로퍼티 값으로 함수 리터럴을 대입
-
함수 객체 안 this는 그 함수를 메서드로 가지고 있는 객체, 아래에서는 circle
-
this.radius 는 circle.radius와 같다
-
메서드는 일반 함수처럼 소괄호를 붙여서 실행
-
메서드도 프로퍼티의 일종이어서 나중에 추가 가능
-
메서드는 일반적으로 메서드가 속한 객체의 내부 데이터 (프로퍼티 값) 상태를 바꾸는 용도로 사용
var circle = {
center: { x:1.0, y:2.0 }, // 원의 중심점 표현 객체
radius: 2.5, // 원의 반지름
area: function(){ // 원의 넓이 메서드
return Math.PI * this.radius * this.radius;
}
};
console.log(circle.area()); //19.634954084936208
-
객체 지향 언어에서는 데이터와 스 상태를 바꾸는 메서드를 하나로 묶는 용으로 객체를 사용
-
메서드는 외부 호출에 반응하여 내부 데이터(프로퍼티값)의 상태를 바꾼다.
-
객체 지향 프로그래밍 : 객체를 기본 부품으로 삼아 프로그램을 만들어 가는 기법
메서드는 프로퍼티
-
C++, JAVA 등의 객체지향언어에서는 객체 안의 데이터와 메서드를 별개로 다룬다.
-
그러나 JS의 메서드는 함수를 값으로 가진 프로퍼티
-
프로퍼티 값의 데이터 타입만 다를 뿐 객체 안의 데이터와 메서드는 모두 프로퍼티이다.
-
JS의 프로퍼티 : 객체 내부의 데이터와 메서드를 모두 뜻한다.
-
그래서 객체의 프로퍼티 목록을 열거하면 프로퍼티 값의 데이터 타입에 관계없이 모든 프로퍼티를 열거하는 것
- 프로퍼티와 함수를 구분하는 상태에서의 프로퍼티 : 함수를 값으로 가지지 않은 프로퍼티, 메서드는 함수를 값으로 가진 프로퍼티로 구분해서 사용
함수를 활용하면 얻을 수 있는 장점
1. 재사용할 수 있다
2. 만든 프로그램을 이해하기 쉽다
3. 프로그램 수정이 간단해진다.
생성자
-
생성자를 사용하면 이름이 같은 메서드와 프로퍼티를 가진 객체 여러 개를 효율적으로 생성할 수 있다.
-
자바 등은 같은 프로퍼티를 갖는 객체를 여러 개 생성하는 수단으로 클래스를 제공한다.
-
JS는 클래스 대신 생성자 함수로 객체를 생성한다.
-
생성자로 객체를 생성할 때는 new 연산자를 사용한다.
function Card(suit, rank) { // Card 객체
this.suit = suit;
this.rank = rank;
}
// Card 생성자로 생성한 객체 :
var card = new Card("하트", "A");
// suit 프로퍼티, rank 프로퍼티에 값이 저장된 객체가 생성되고
// 객체의 참조가 변수 card에 할당된다.
console.log(card); // Card {suit: "하트", rank: "A"}
-
생성자 : new 연산자로 객체를 생성할 것을 기대하고 만든 함수
-
생성자 이름은 관례적으로 파스칼 표기법 (첫 글자 대문자)을 사용
-
생성자 내에서 this.프로퍼티 이름에 값을 대입하며 그 이름을 가진 프로퍼티에 값이 할당된 객체가 생성된다.
-
this는 생성자가 생성하는 객체를 가리킨다.
-
생성자의 인스턴스 : 생성자와 new 연산자로 생성한 객체
-
인스턴스 : 클래스로 생성한 실체
-
클래스 : 객체를 실체로 만들기 위한 설계도
-
생성자 자체가 함수 객체라는 실체이며, 생성자로 생성한 객체는 인스턴스가 아니나 생성자가 클래스처럼 객체를 생성하므로 인스턴스로 부름
-
역할 : 객체를 생성하고 초기화
// 생성자 Card를 이용해서 객체를 생성하고 변수 여러 개에 저장하는 예
var card1 = new Card("하트", "A");
var card2 = new Card("클럽", "K");
var card3 = new Card("스페이드", "2");
-
생성자를 사용하면 이름은 같지만 프로퍼티 값이 다른 객체(인스턴스) 여러개를 간단히 생성
- 생성자는 함수이므로 프로퍼티에 값을 대입할 수 있고, 함수처럼 다양한 처리를 할 수도 있다.
- 응용 : 객체를 생성할 때 초기화 작업을 병행
메서드를 가진 객체를 생성하는 생성자
-
생성자에서 this.프로퍼티 이름에 함수의 참조를 대입하면 메서드를 정의한다.
-
메서드 함수 안의 this : 생성될 인스턴스를 가리킨다. 그 값은 인스턴스의 프로퍼티
내장객체
-
내장객체 : JS에 있는, 처음부터 사용할 수 있는 빌트인 오브젝트
-
내장객체는 프로그래밍 언어의 뼈대를 구성
ES5에서 사용할 수 있는 내장 생성자
생성자 이름 | 생성되는 객체 |
Object | 일반 객체 |
String | 문자열 객체 |
Number | 숫자 객체 |
Boolean | 논리값 객체 |
Array | 배열 |
Date | 날짜와 시간을 다루는 객체 (var now = new Date(); now.getFullYear();) |
Function | 함수 객체 (var square = new Function("x", "return x*x"); |
RegExp | 정규 표현식 객체 |
Error | 오류 객체 |
EvalError | eval() 함수와 관련된 오류를 표현하는 객체 |
InternalError | 자바스크립트 내부에서 발생한 오류를 표현하는 객체 |
RangeError | 값이 허용 범위를 넘었을 때 발생한 오류를 표현하는 객체 |
ReferenceError | 없는 변수를 참조할 때 발생한 오류를 표현하는 객체 |
SyntaxError | 잘못된 문법일 때 발생한 오류를 표현하는 객체 |
TypeError | 기대한 타입의 값이 아닐때 발생한 오류를 표현하는 객체 |
URIError | 잘못된 URI를 만났을 때 발생한 오류를 표현하는 객체 |
ES6에서 사용할 수 있는 내장 생성자
생성자 이름 | 생성되는 객체 |
Symbol | 심벌을 생성 |
Int8Array8 | 부호가 있는 8비트 정수 배열을 생성 |
Uint8Array8 | 부호가 없는 8비트 정수 배열을 생성 |
Int16Array16 | 부호가 있는 16비트 정수 배열을 생성 |
Uint16Array16 | 부호가 없는 16비트 정수 배열을 생성 |
Int32Array32 | 부호가 있는 32비트 정수 배열을 생성 |
Uint32Array32 | 부호가 없는 32비트 정수 배열을 생성 |
Float32Array32 | 32비트 부동소수점 배열을 생성 |
Float64Array64 | 64비트 부동소수점 배열을 생성 |
ArrayBuffer | 고정 길이 이진 데이터 버퍼를 생성 |
DataView | ArrayBuffer 데이터를 읽고 쓸 수 있는 수단 제공 |
Promise | 처리 지연 및 비동기 처리를 관리 수단 제공 |
Generator | 제너레이터 함수를 다룰 수 있는 수단 제공 |
GeneratorFunction | 제너레이터 함수 생성 |
Proxy | 객체의 기본적인 동작을 재정의하는 기능 제공 |
Map | key/value 맵 생성 |
Set | 중복을 허용하지 않는 데이터 집합 생성 |
WeakMap | 약한 참조를 유지하는 key/value 맵 생성 |
WeakSet | 약한 참조를 유지하는 고유한 데이터 집합 생성 |
기타 내장 객체
내장 객체 | 설명 |
전역 객체 | 프로그램 어디에서나 사용 가능한 객체 |
JSON | JSON 처리 기능 제공 |
Math | 수학적 함수와 상수 제공 |
Reflect | 프로그램의 흐름을 가로채는 기능 제공 (ES6) |
전역 객체
-
전역 객체의 프로퍼티는 프로그램 어디에서나 사용가능
-
JS 인터프리터가 시작될 때나 웹브라우저가 새페이지를 읽을 때마다 새 전역 객체가 생성되고 아래 표와 같은 프로퍼티를 갖게 된다.
-
클라이언트 측 JS에서는 Window 객체가 전역 객체
- Window 객체 : 아래 표의 프로퍼티와 웹브라우저 고유의 다양한 프로퍼티가 있다. 궁금하면 콘솔에 console.dir(window)를 찍어보자.
분류 | 프로퍼티 |
전역 프로퍼티 | undefined, NaN, Infinity |
생성자 | Object(), String(), Number() ... |
전역 함수 | parseInt(), parseFloat(), isNan() ... |
내장 객체 | Math, JSON, Reflect |
자바스크립트 객체 분류
JS 객체는 네이티브객체, 호스트객체, 사용자 정의 객체로 나누어진다.
네이티브 객체
-
ECMAScript 사양에 정의된 객체
-
내장 생성자로 생성된 객체(Object, String, Number, Boolean, Array, Function) 와 JSON, Math, Reflect 등
호스트 객체
-
ECMAScript에 정의되어 있지 않지만 JS 실행환경에 정의된 객체
-
브래우저 객체, Dom 객체, Ajax용 XMLHttpRequest 객체, HTML5의 각종 API 등
-
클라이언트 측 JS에 정의된 호스트 객체
사용자 정의 객체
-
사용자가 정의한 JS 코드를 실행한 결과 생성된 객체
배열의 기초
배열 리터럴로 생성하기
var evens = [ 2, 4, 6, 8 ];
-
배열 리터럴 : 쉼표로 구분한 값을 대괄호로 묶어서 표현
-
배열 요소 : 배열 값 하나
-
인덱스 (요소 번호) : 배열 요소를 왼쪽부터 순서대로 0부터 순서를 매긴 것.
-
JS의 배열은 객체 타입
-
배열을 변수에 대입하면 배열의 참조가 변수에 저장
- 변수의 요소에는 모든 타입의 값 가능
var empty = [ ]; // 빈 배열 만들기
var a = [2, , 4]; // 리터럴 요소의 값을 생략하면 그 요소는 미생성
length 프로퍼티
-
배열 길이 : 배열의 lenght 프로퍼티는 배열요소의 최대 인덱스값 + 1이랑 같음
-
C,Java에서는 배열길이가 배열요소의 개수지만 JS는 아닐 수도 있다.
- length 프로퍼티에 배열의 길이보다 큰 정수를 대입하면 새로운 요소가 추가되지 않고 length 프로퍼티 값만 바뀐다
var a = ["A", "B"];
a.length = 1;
console.log(a); //["A"]
var a = ["A", "B"];
a.length = 1;
console.log(a); //(3) ["A", "B", empty]
Array 생성자로 생성하기
var evens = new Array(2, 4, 6, 8);
var empty = new Array(); // 빈 배열
var various = new Array(3.14, "pi", true, {x:1, y:2}, [2,4,6,8]);
console.log(evens);
console.log(empty);
console.log(various);
-
Array 생성자의 인수가 양의 정수 한 개일 때, 인수는 배열 길이를 뜻한다.
-
Array 생성자의 인수가 음수이면 오류 발생
var x = new Array(3);
console.log(x);
var y = new Array(-3);
console.log(y);
-
특정 인덱스의 요소는 대괄호 연산자를 사용해서 읽고 쓴다. (evens[2])
-
배열 요소 하나는 변수 하나로 사용 가능
배열은 객체
-
C, Java 의 배열 요소는 메모리의 연속된 공간에 차례대로 배치되어, 인덱스를 지정하면 인덱스가 가리키는 요소를 빠르게 읽고 쓸 수 있다.
-
JS의 배열은 Array 객체로 C, Java와 다르다.
-
객체로 배열의 기능을 가상으로 흉내낸 것으로 배열의 인덱스를 문자열로 변환해서 그것을 프로퍼티로 사용한다.
-
배열에 대괄호 연산자를 사용하는 것은 객체에 대괄호 연산자를 사용하는 것과 마찬가지
-
배열의 요소 번호로 숫자값 대신 문자열 사용도 가능
-
객체에 없는 프로퍼티 (없는 배열 요소)를 읽으려고 시도하면 undefined가 반환
-
ES6부터 TypedArray 객체 추가 : 이 배열 요소는 C, Java처럼 메모리의 연속된 공간에 차례대로 배치되어 배열요소를 빠르게 읽고 쓸 수 있다.
배열 요소의 추가와 삭제
-
없는 배열 요소에 값을 대입하면 새로운 요소가 추가된다.
-
push 메서드를 사용하면 요소를 배열 끝에 추가한다.
-
delete 메서드는 특정 배열 요소를 삭제한다. (배열 요소를 삭제해도 length 프로퍼티 값은 그대로며 삭제한 요소만 사라져서 undefined가 된다.)
var a = ["A", "B", "C"];
delete a[1];
console.log(a);
희소 배열
희소 배열 (length=5) | 일반 배열 (length=4) | ||
0 | "A" | 0 | "A" |
1 | "B" | 1 | "B" |
2 | "C" | 2 | "C" |
4 | "E" | 3 | "D" |
배열 요소가 있는 지 확인하는 방법 = 객체의 프로퍼티가 있는 지 확인하는 방법
for/in 문이나 hasOwnProperty 메서드를 사용해 확인한다.
for(var i in a) console.log(i); // 0,1,2,4
a.hasOwnProperty("3"); //false
'Javascript' 카테고리의 다른 글
자바스크립트 브라우저 버전 감지(navigator.userAgent) (0) | 2020.04.16 |
---|---|
문서의 DOM이 모두 로드된 후 실행하기 (로딩의 순서) (1) | 2020.04.14 |
모던 자바스크립트 입문 : 3. 변수와 값 (0) | 2020.04.04 |
모던 자바스크립트 입문 : 2. 프로그램의 작성법과 실행법 (0) | 2020.04.04 |
모던 자바스크립트 입문 : 1. 자바스크립트 개요 (0) | 2020.04.04 |