728x90
728x90

이번에는 모던 자바스크립트 입문 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

 

 

728x90
728x90
블로그 이미지

coding-restaurant

코딩 맛집에 방문해주셔서 감사합니다.

,

v