5.12 poiemaweb 자바스크립트 공부 //복습필요

 

5.12 js-poiemaweb 복습

 

1. 변수

 

 

변수는 값을 저장하고 그 저장된 값을 참조하기 위해 사용한다

변수는 위치를 기억하는 저장소이다.

위치란 메모리 상의 주소를 의미한다.

변수를 선언할 때는 var 키워드를 사용한다.

 

var x; // 변수의 선언

x = 6; //정수값의 할당

 

1-2 값

 

var str = 'Hello world';

위 예젠느 str이라는 이름의 변수를 선어한고 문자열 리터럴

'Hello world'를 값으로 할당하였다.

 

데이터 타입 - 프로그래밍 언어에서 사용할 수 있는 값의 종류

변수 - 값이 저장된 메모리 공간의 주소를 가리키는 식별자

리터럴 - 소스코드 안에서 직접 만들어 낸 상수 값 자체를 말하며 값을 구성하는 최소 단위

 

자바스트립의 모든 값은 데이터 타입을 갖는다.

*원시타입

-number

-string

-boolean

-null

-undefined

-symbol

 

*객체타입

-object

 

자바스트립트는 C나 Java와는 다르게 변수를 선언할 때

타입을 미리 지정하지 않는다. 동적으로 결정된다.

 

1-3 연산자

 

피연산자의 타입은 반드시 일치할 필요는 없다.

JS에서 암묵적 타입 강제 변환을 통해 연산을 수행한다.

 

var foo = 1 + '10'; // '110'

var bar = 1 * '10'; // 10

 

1-4 키워드

키워드는 수행할 동작을 규정한 것이다.

 

1-5 주석

주석은 작성된 코드의 의미를 설명하기 위해 사용한다

한줄 주석은 // 여러줄 주석은 /* */ 로 사용한다.

 

1-6 문

프로그램은 컴퓨터에 의해 단계별로 수행될 명령들의 집합이다.

문은 일반적으로 위에서 아래로 순서대로 실행된다.

실행 순서는 조건문이나 반복문의 사용으로 제어할 수 있다.

이를 흐름제어라 한다.

 

1-7 표현식

표현식은 하나의 값으로 평가된다. 값, 변수, 객체의 프로퍼티,

배열의 호소, 함수호출, 메소드호출, 피연산자와 연산자의 조합은

모두 표현식이며 하나의 값으로 평가된다.

 

1-8 함수

함수란 어떤 작업을 수행하기 위해 필요한 문들의 집합

function () { return }

 

동일한 작업을 반복적으로 수행해야 한다면 미리 정의된 함수를

재사용하는 것이 효율적이다. 재사용이라는 측면에서 매우 유용하다.

 

1-9 객체

JS는 객체 기반의 스트립트 언어이며 거의 모든 것이 객체이다.

객체는 키와 값으로 구성된 집합이다.

객체는 데이터를 의미하는 프로퍼티와 게이터를 참조하고 조작할 수 있는 동작을 의미하는 메소드로 구성된 집합이다.

객체는 데이터와 그 데이터에 관련되는 동작을 모두 포함할 수 있기 때문에 데이터와 동작을 하나의 단위로 구조화 할 수 있어 유용하다.

 

1-10 배열

배열은 1개의 변수에 여러 개의 값을 순차적으로 저장될 때 사용한다.

 

2. 연산자

 

2-1 표현식과 연산자

 

값은 다양한 방법으로 생성할 수 있다. - 표현식을 뜻 함

표현식은 리터럴, 식별자, 연산자, 함수 호출 등의 조합을 말한다

표현식은 평가되어 하나의 값을 만든다.

 

//리터럴 표현식

10

 

//식별자 표현식

sum

 

// 연산자 표현식

10 + 20

 

//함수/메소드 호출 표현식

square()

 

표현식은 평가되어 결국 하나의 값이 되므로 표현식과 같은 동등한 관계, 동치다.

 

2-2 문과 표현식

문은 자바스트립트 엔진에게 내리는 명령이다.

// 변수 선언문

var x;

 

// 할당문

x = 5;

 

// 함수 선언문

function foo () {}

 

// 조건문

if (x>5) {,,,}

 

//반복문

for(var i = 0; i < 10; i++) {...}

 

문은 리터럴, 연산자, 표현식, 키워드 등으로 구성되며 세미클론으로 끝나야한다

 

// 선언문

var x = 5 * 10; //표현식 x = 5 * 10를 포함하는 값이다

 

// 할당문

x = 100; //이 자체가 표현식이지만 완전한 문이기도 하다

 

위 예제의 선언문은 표현식이 아닌 문이다.

다시 말해 값으로 평가될 수 없다. 따라서 선언문은 값처럼 사용할 수 없다.

 

vaf foo = var x = 5*10;

이에 반해 할당문은 그 자체가 표현식이다. 할당문은 표현식인 문이다.

 

var foo = x = 100;

할당문을 값처럼변수에 할당 했다.

 

2-3 연산자

연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 연산 등을

수행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자라 한다.

 

2-4 산술연산자

+, -, *, /, % 가 있다.

 

++앞, 뒤로 붙음에 따라 선대입 후증가, 선증가 후대입으로 나뉜다.

--

+

- 양수, 음수의 값이 바뀐다.

 

비교연산자

비교연산자는 좌항과 우항의 피연산자를 비교하여 불리언 값을 변환한다.

if 문이나 for문과 같은 조건식에서 주로 쓰인다.

== 동등비교

=== 일치비교

!= 부등비교

!== 불일치 비교

 

대소 관계 비교 연산자

대소 관계 비교 연산자는 피연산자의 크기를 비교하여 불리언 값을 반환한다

x>y x가 y보다 크다

x<y x가 y보다 작다

x>=y x가 y보다 같거나 크다

x<=y x가 y보다 같거나 작다

 

삼항조건 연산자

조건식 ? 조건식이 true일때 반환하는 값 : 조건식이 false일때 반환할 값

 

논리연산자

우항과 좌항의 피연산자를 논리 연산한다.

|| or

&& and

! 부정

 

쉼표 연산자

왼쪽 피연산자부터 차례대로 피연산자를 평가하고

마지막 피연산자 평가가 끝나면 마지막 피연산자의 평가 결과를 반환한다

 

typeof 연산자

7가지 문자열 중 하나를 반환한다.

주의해야할 부분은 null값을 연산해 보면 object를 반환한다는 것이다.

null타입을 확일 할 때 일치 연산자를 사용하도록 한다

 

3. 제어문

제어문은 주어진 조건에 따라 코드 블록을 조건문 하거나 반복문 할 때 사용한다

 

3-1 블록문

블록문은 0개 이상의 문들을 중괄호로 묶은 것으로 블록이라 부른다

 

//블록문

{

var foo = 10;

console.loh(foo);

}

 

// 제어문

var x = 0;

while (x < 10) {

x++;

}

console.log(x); // 10

 

//함수 선언문

function sum(x, y) {

return x + y;

}

console.log(sum(1,2)); // 3

 

3-2 조건문

조건문은 주어진 조건식의 평가 결과에 따라 코드 블록의 실행을 결정한다

자바스트립트는 if...else문과 switch문을 제공한다

 

if..else 문

조건식의 평가결과, 즉 논리나 참, 거짓에 딸라 실행할 코드 블록을 결정한다

 

if (조건식) {

//조건식이 참이면 이 코드 블록이 실행

}

else

{

//조건식이 거짓이면 이 코드 블록이 실행

}

 

조건식을 추가 하고 싶으면 else if 문을 사용한다

 

if (조건식) {

//조건식 1이 참이면 이 코드 블록이 실행

}

else if

{

//조건식 2이 참이면 이 코드 블록이 실행

}

else

{

조건식 1, 2가 거짓이면 이 코드 블록이 실행

}

 

만약 코드 블록 내의 문이 하나뿐이라면 중괄호를 생략할 수 있다.

 

3-2 switch 문

 

switch (표현식) {

case 표현식1:

switch 문의 표현식과 표현식1이 일치하면 실행될 문;

break;

case 표현식2:

switch 문의 표현식과 표현식2이 일치하면 실행될 문;

break;

default:

switch문의 표현식과 길치하는 표현식을 갖는 case 문이 없을 때 실행될 문;

}

 

if...else문은 불리언 값으로 표현되지만 switch문의 표현식은 문자열, 숫자 값인 경우가 많다

다양한 상황에 따라 실행할 코드 블록을 결정할 때 사용한다

 

3-3 반복문

반복문은 주어진 조건식의 평가 결과가 참인 경우 코드 블럭을 실행한다

 

for문은 조건식이 거짓으로 판별될 때까지 코드 블록을 반복 실행한다.

 

for (초기화식; 조건식; 증감식) {

조건식이 참인 경우 반복 실행될 문;

}

 

for (;; ) { } //무한루프

 

while 문

주어진 조건식의 평가 결과가 참이면 코드 블록을 계속해서 ㅏㅂㄴ복 실행한다

 

var count = 0;

 

while (count < 3) {

console.log(count);

count++;

} //0 1 2

 

조건식의 평가 결과가 언제나 참이면 무한루프가 된다.

 

탈출하기 위해서는 탈출 조건을 if 문에 부여하고 break 문으로 코드 블럭을 탈출한다

 

var count = 0;

 

while (count < 3) {

console.log(count);

count++;

if (count === 3) break; //count가 3이 되면 탈출

}

 

do...while 문은 코드 블록을 실행하고 조건식을 평가한다. 따라서 무조건 한 번 이상은 실행된다.

 

var count = 0;

 

do {

counsole.log(count);

count++;

}

while (count < 3 ); // 0 1 2

 

break 문

swith문과 while문에서 살펴보았듯이 코드블록을 탈출한다. 레이블 문, 반복문, 또는 switch문의 코드 블록을 탈출한다.

이 외에 break문을 사용하면 문법에러가 발생한다.

 

레이블 문이랑 식별자가 붙은 문을 말한다

foo: console.log('foo');

 

중첩된 for문을 외부러 탈출할 때 레이블 문은 유용하지만

그 외의 경우 레이블 문은 일반적으로 권장하지 않는다.

흐름이 복잡해지고 가독성이 나빠지고, 오류 발생 가능성이 높다

 

coutinue 문

반복문의 코드 블록 실행을 현 지점에서 중단하고

반복문의 증감식으로 이동한다

 

4. 객체

자바스트립트는 객체기반의 스크립트 언어이며 거의 모든것이 객체이다

원시타입을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다.

 

객체는 키(key)와 값(value)으로 구성된 프로퍼티들(property)의 집합니다.

프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값이 함수일 경우

일반함수와 구분하기 위해 메소드라 부른다.

 

프로퍼티는 프로퍼티 키와 프로퍼티 값으로 구성된다.

프로퍼티 키로 식별할 수 있다.

 

프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 symbol 값

프로퍼티 값 : 모든 값

 

4-1 객체 생성 방법

프로토타입 기반 객체 지향 언어로서 클래스라는 개념이 없고 별도의 객체 생성 방법이 존재한다

 

객체리터럴

가장 일반적인 객체 생성 방식이다. 클래스 기반 객체 지향 언어와 비교할 때 매우 간편하게 객체를 생성할 수 있다.

중과호 { } 를 사용하여 객체를 생성하는데 { } 내에 1개 이상의 프로퍼티를 기술하면 해당 프로퍼티가 추가된 객체를 생성할 수 있다.

{ } 내에 아무것도 기술하지 않으면 빈 객체가 생성된다.

 

var emptyObject = { };

console.log(typeof emptyObject); // object

 

var person = {

name: 'Lee',

gender: 'male',

satHello: function () {

console.log('Hi! My name is ' + thie.name);

}

};

 

console. log(typeof person); // object

console.log(person); // {name: "Lee", gender: "male", sayHello: f}

 

person.sayHello(); // Hi my name is Lee

 

4-2 객체 프로퍼티 접근

프토퍼티키는 일반적으로 문자열을 지정한다 암묵적으로 타입이 변환되어 문자열이 된다.

프로퍼티 키는 문자열이므로 따움표를 사용한다.

유용한 이름이 아닌 경우, 반드시 따옴표를 사용하여야 한다.

 

예약어를 프로퍼티 키로 사용하여도 에러가 예상치 못하게 발생할 수 있기 때문에 프로퍼티 키로 사용해서는 안된다.

 

프로퍼티 값 읽기

마침법 표기법과 대괄호 표기법이 있다.

프로퍼티 키가 유효한 자바스크립트 이름이고 예약어가 아닌 경우 프로퍼티 값은 마침법 표기법, 대괄호 표기법 모두 사용할 수 있다.

유효하지 않거나, 예약어인 경우 대괄호 표기법으로 읽어야 한다.

대괄호 표기법을 사용할 경우 프로퍼티 이름은 반듸 문자열이여야 한다.

 

객체에 존재하지 않는 프로퍼티를 참조하면 undefined를 반환한다.

 

프로퍼티 값 갱신

객체가 소유하고 있는 프로퍼티에 새로운 값을 할당하면 프로퍼티 값은 갱신된다.

 

var person = {

'first-name': 'Ung-mo',

'last-name': 'Lee',

gender: 'male',

};

 

person['first-name'] = 'Kim';

console.log(person['first-name'] ); // 'Kim'

 

프로퍼티 동적 생성

객체가 소유하고 있지 않은 프로퍼티 키에 값을 할당하면

주어진 키와 값으로 프로퍼티를 생성하여 객체에 추가한다

 

프로퍼티 삭제

delete연산자를 사용하여 삭제할 수 있다. 이때 피연산자는 프로퍼티 키여야 한다.

 

for-in 문

객체에 포함된 모든 프로퍼티에 애해 루프를 수행할 수 있따.

 

for (var prop in person) {

console.log(prop + ': ' + person[prop]);

}

 

for-in문은 객체의 문자열 키를 순회하기 위한 문법이다. 배열에는 사용하지 않는 것이 좋다

1. 객체의 경우 순서가 보장되지 않는다.

2. 배열 요소들만을 순회하지 않는다.

 

단점을 보완하기 위해 ES6에서 for-of문이 추가되었다.

 

5. 함수

함수란 어떤 작업을 수행하기 위해 필요한 문들의 집합을 정의한 코드 블록이다.

//함수의 정의

function square(number) {

return number * number;

}

여러번 호출 할 수 있다.

 

function square(number) {

return number * number;

}

 

squaer(2); // 4;

 

동일한 작업을 반복적으로 수행해야 한다면 미리 정의된 함수를 재사용하는 것이 효율적이다

어떤 작업을 수행하는 문들의 집합을 정의하여 코드의 재사용에 목적이 있다. 이러한 일반적인 기능 이외에

객체 생성, 객체의 행위 정의, 정보은닉, 클로저, 모듈화 등의 기능을 수행할 수 있다.

자바스크립트의 함수는 객체이다.

 

함수 정의

 

함수를 정의하면 3가지가 있다

함수 선언문

함수 표현식

function 생성자 함수

 

함수선언문 방식으로 정의한 함수는 function 키워드와 이하의 내용으로 구성된다

 

함수명 : 함수 선언문의 경우, 함수명은 생략할 수 없다. 함수명은 함수 몸체에서 자신을 재귀적 호출하거나 디버거가 해당 함수를 구분할 수 있는 식별자이다

 

매개변수 목록 : 0개 이상의 목록으로 괄호로 감싸고 콤마로 분리한다. 함수 몸체 내에서 매개변수의 타입체크가 필요할 수 있다.

 

함수 몸체 : 함수가 호출되었을 때 실행되는 문들의 집합니다. 중괄호로 문들을 감싸고 return 문으로 겨로가값을 반환 할 수 있다. 이를 반환값이라고 한다.

 

 

함수표현식

함수는 일급 객체이므로 아래와 같은 특징이 있다.

 

1. 무명의 리터럴로 표현이 가능하다

2. 변수나 자료 구조에 저장할 수 있다.

3. 함수의 파라미터로 전달할 수 있다.

4. 반환값으로 사용할 수 있다.

 

함수의 일급객체 특성을 이용하여 함수 리터럴 방식으로 함수를 정의하고 변수에 할당할 수 있는데

이러한 방식을 함수 표현식이라고 한다.

 

함수 선언문으로 정의한 함수 square()를 함수 표현식으로 정의하면 아래와 같다.

 

함수표현식 방식으로 정의한 함수는 함수명을 생략할 수 있따. 익명함수라고 한다.

 

// 기명 함수 표현식(named function expression)

var foo = function multiply(a, b) {

return a * b;

};

 

// 익명 함수 표현식(anonymous function expression)

var bar = function(a, b) {

return a * b;

};

 

console.log(foo(10, 5)); // 50

console.log(multiply(10, 5)); // Uncaught ReferenceError: multiply is not defined

 

함수는 일급객체이기 때문에 변수에 할당할 수 있는데 이 변수는 함수명이 아니라 할당된 함수를 가리키는

참조값을 저장하게 된다. 함수 호출시 함수명이 아니라 함수를 가리키는 변수명을 사용해야 한다

 

var foo = function(a, b) {

return a * b;

};

 

var bar = foo;

console.log(foo(10, 10)); // 100

console.log(bar(10, 10)); //100

 

변수 bar와 변수 foo는 동일한 익명 함수의 참조값을 갖는다

 

함수가 할당된 변수를 사용해 함수를 호출하지 않고 기명 함수의 함수명을 사용해

호출하게 되면 에러가 발생한다. 이는 함수표현식에서 사용한 함수명은 외부 코드에서 접근 불가능하기 때문이다

함수명은 함수 몸체에서 자신을 재귀적 호출하거나 자바스크립트 디버거가 해당 함수를 구분할 수 있는 식별자의 역할을 한다

 

함수 선언문으로 정의한 함수 squaer의 경우, 함수명으로 호출할 수 있는데 아래와 같이 형태가 변경되었기 때문이다

 

var square = function squaer(number) {

return nmber *nmber;

};

함수명과 함수 참조값을 가진 변수명이 일치하므로 함수명으로 호출되는 듯 보이지만

사실은 변수명으로 호출된 것이다.

 

결국 함수 선언문도 함수 표현식과 동일하게 함수 리터럴 방식으로 정의되는 것이다.

 

5-4 매개변수

함수의 작업 실행을 위해 추가적인 정보가 필요할 경우, 매개변수를 지정한다 매개변수는 함수 내에서 변수와 동일하게 동작한다

 

매개변수 vs 인자

매개변수는 함수 내에서 변수와 동일하게 메모리 공간을 확보하며 함수에 전달한 인수는 매개변수에 할당된다 만약 인수를 전달하지

않으면 매개변수는 undefined로 초기화 된다.

 

var foo = function (p1, p2) {

console.log(p1, p2);

};

 

foo(1); // 1 undefined

 

5-5 반환값

함수는 자신을 호출한 코드에게 수행한 결과를 반환 할 수 있다.

이때 반한된 값을 반환값이라고 한다

 

return키워드는 함수를 호출한 코드에게 값을 반환할 때 사용한다

함수는 배열등을 이용하여 한 번에 여러개의 값을 리턴할 수 있다.

함수는 반환을 생략할 수 있는데 암묵적으로 undefined를 반환

해석기는 return 키워드를 만나면 함수의 실행을 중단한 후, 함수를 호출한 코드로 되돌아간다

return키워드 이후 다른 구문이 존재하면 그 구문은 실행되지 않는다.

 

 

6. string 레퍼 객체

원시 타입인 문자열을 다룰 때 유용한 프로퍼티와 메소드를 제공하는 레퍼객체이다

문자열을 값으로 가지고 있다면 string객체의 별도 생성없이 string 객체의 프로퍼티와 메소드를 사용할 수 있다

 

원시타입인 wrapper 객체의 메소드를 사용할 수 있는 이유는 원시타입으로 프로퍼티나 메소드를 호출할 때 원시타입과

연간된 wrapper 객체로 일시적으로 변환되어 프로토 타입 객체를 고유하게 되기 때문이다.

 

const str = 'Hello world!';

console.log(str.toUppercase()); // 'HELLO WORLD!'

 

6-1 string property

 

string.length

문자열 내의 문자 개수를 반환한다.

const str1 = 'Hello';

console.log(str1.length); // 5

 

6-2 string method

객체의 모든 메소드는 언제나 새로운 문자열을 반환한다 문자열은 변경 불가능한 원시 값이기 때문이다

 

string.prototype.charat:string

인수로 전달한 index를 사용하여 index에 해당하는 위치의 문자를 반환한다

문자열 범위를 벗어난 경우 빈문자열을 반환한다

 

const str = 'Hello';

 

console.log(str.charAt(0)); // H

console.log(str.charAt(1)); // e

console.log(str.charAt(2)); // l

console.log(str.charAt(3)); // l

console.log(str.charAt(4)); // o

// 지정한 index가 범위(0 ~ str.length-1)를 벗어난 경우 빈문자열을 반환한다.

console.log(str.charAt(5)); // ''

 

string.prototype.concat:string

인수로 전달한 1개 이상의 문자열과 연결하여 새로운 문자열을 반환한다.

 

concat 메소드를 사용하는 것보다는 +, +=할당 연산자를 사용하는 것이 성능상 유리하다

console.log('Hello '.concat('Lee')); // Hello Lee

 

string.prototupe.indexOf:number

인수로 전달한 문자 또는 문자열을 대상 문자열에서 검색하여 처음 발견된 곳의 index를 반환한다

발견하지 못하면 -1을 반환

 

 

lastindexOf:number

인수로 전달한 문자 또는 문자열을 대상 문자열에서 검색하여 마지막으로 발견된 곳의

index를 반환한다. 발견하지 못하면 -1반환

 

2번째 인수가 전달되면 검색 시작위치를 fromIndex으로 이동하여 역방향으로 검색시작

 

 

replace

첫 번째 인수로 전달한 문자열 검색하여 두번째 인수로 전달한 문자열로 대체한다

검색된 문자열이 여럿 존재할 경우 첫번째로 검색된 문자열만 대체된다

 

const str = 'Hello world';

 

// 첫번째로 검색된 문자열만 대체하여 새로운 문자열을 반환한다.

console.log(str.replace('world', 'Lee')); // Hello Lee

 

// 특수한 교체 패턴을 사용할 수 있다. ($& => 검색된 문자열)

console.log(str.replace('world', '<strong>$&</strong>')); // Hello <strong>world</strong>

 

split

첫번째 인수로 전달한 문자열 또는 정규표현식을 대상 문자열에서 검색하여

문자열을 구분한 후 분리된 각 문자열을 이루어진 배열을 반환한다

원본 문자열은 변경되지 않는다

 

const str = 'How are you doing?';

 

// 공백으로 구분(단어로 구분)하여 배열로 반환한다

console.log(str.split(' ')); // [ 'How', 'are', 'you', 'doing?' ]

 

// 정규 표현식

console.log(str.split(/\s/)); // [ 'How', 'are', 'you', 'doing?' ]

 

// 인수가 없는 경우, 대상 문자열 전체를 단일 요소로 하는 배열을 반환한다.

console.log(str.split()); // [ 'How are you doing?' ]

 

// 각 문자를 모두 분리한다

console.log(str.split('')); // [ 'H','o','w',' ','a','r','e',' ','y','o','u',' ','d','o','i','n','g','?' ]

 

// 공백으로 구분하여 배열로 반환한다. 단 요소수는 3개까지만 허용한다

console.log(str.split(' ', 3)); // [ 'How', 'are', 'you' ]

 

// 'o'으로 구분하여 배열로 반환한다.

console.log(str.split('o')); // [ 'H', 'w are y', 'u d', 'ing?' ]

 

substring - 어려움 이해 안됨.

첫번째 인수로 전달한 start인덱스에 해당하는 문자부터 두번째 인자에 전달된 end 인덱스에 해당하는

문자의 바로 이전 문자까지를 모두 반환한다.

첫번째 인수 > 두번째 인수 : 두 인수는 교환된다.

두번째 인수가 생략된 경우 : 해당 문자열의 끝까지 반환한다.

인수 < 0 또는 NaN인 경우 : 0으로 취급된다.

인수 > 문자열의 길이(str.length) : 인수는 문자열의 길이(str.length)으로 취급된다.

 

slice

substring과 동일한다. slice는 음수의 인수를 전달 할 수 있다.

 

toLowerCase

모든 문자를 소문자로 변경한다

 

toUpperCase

모든 문자를 대문자로 변경한다

 

trim

대상 문자열 양쪽 끝에 있는 공백문자를 제거한 문자열을 반환한다.

 

repeat

인수로 전달한 숫자만큼 반복해 새로운 문자열을 반환한다.

count가 0이면 빈 문자열 반환

음수면 RangeError를 발생

 

includes

인수로 전달한 문자열이 포함되어 있는지를 검사하고 결과를 불리언 값으로 반환한다

두번째 인수는 옵션으로 검색할 위치를 나타내는 정수이다

 

7. 배열

 

배열은 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다

배열은 Array 생성자로 생성된 Array타입의 객체이며 프로토타입 객체는 Array.prototype이다.

 

7-1 배열의 생성

배열리터럴

0새 이사으이 값을 쉽포로 군분하여 대괄호로 묶는다

첫번째 값은 인덱스 0으로 읽을 수 있다. 존재하지 않는 용소에 접근하면 undefined를 반환한다

 

배열리터럴은 객체 리터럴과 달리 프로퍼티 명이 없고 각 요소에 값만이 존재한다

 

7-2 Array() 생성자 함수

배열은 일반적으로 배열 리터럴 방식으로 생성하지만 배열 리터럴 방식도 결국 내장 함수로 배열을 생성하는 것을 단순화 시킨 것이다

 

7-3 배열 요소의 추가와 삭제

 

추가 -

const arr = [];

console.log(arr[0]); // undefined

 

arr[1] = 1;

arr[3] = 3;

 

console.log(arr); // (4) [empty, 1, empty, 3]

console.log(arr.lenth); // 4

 

삭제 -

delete 연산자를 사용할 수 있다.

해당 요소를 완전히 삭제하여 length에도 반영하기 위해서는 Array.prototype.splice 메소드를 사용

 

const numbersArr = ['zero', 'one', 'two', 'three'];

 

// 요소의 값만 삭제된다

delete numbersArr[2]; // (4) ["zero", "one", empty, "three"]

console.log(numbersArr);

 

// 요소 값만이 아니라 요소를 완전히 삭제한다

// splice(시작 인덱스, 삭제할 요소수)

numbersArr.splice(2, 1); // (3) ["zero", "one", "three"]

console.log(numbersArr);

 

7-4 배열의 순회

for..in문을 사용한다 배열 역시 객체이므로 for..in문을 사용할 수 있다.

하지만 적합하지 않기에 forEach메소드,for문,for..of문을 사용하는 것이 좋다

 

7-5 Array Property

length프로퍼티는 요소의 개수를 나타낸다 따라서 length 프로퍼티의 값은 양의 정수이며 2*32승-1미만이다

const arr = [1, 2, 3, 4, 5];

console.log(arr.length); // 5

 

arr[4294967294] = 100;

console.log(arr.length); // 4294967295

console.log(arr); // (4294967295) [1, 2, 3, 4, 5, empty × 4294967289, 100]

 

arr[4294967295] = 1000;

console.log(arr.length); // 4294967295

console.log(arr); // (4294967295) [1, 2, 3, 4, 5, empty × 4294967289, 100, 4294967295: 1000]

 

주의점은 배열요소개수와 length프로퍼티의 값이 반드시 일치하지 않는다

length프로퍼티의 값은 가장 큰 인덱스에 1을 더한 것과 같다

 

7-6 Array Method

메소드는 this(원본배열)를 변경한다

메소드는 this(원본배열)를 변경하지 않는다

 

Array.isArray(arg: any): boolean

주어진 인수가 배열이면 true, 배열이 아니면 false 반환

 

Array.from

유사배열객체 또는 이터러블객체를 변환하여 새로운 배열 생성

// 문자열은 이터러블이다.

const arr1 = Array.from('Hello');

console.log(arr1); // [ 'H', 'e', 'l', 'l', 'o' ]

 

// 유사 배열 객체를 새로운 배열을 변환하여 반환한다.

const arr2 = Array.from({ length: 2, 0: 'a', 1: 'b' });

console.log(arr2); // [ 'a', 'b' ]

 

Array.of

전달된 인수를 요소로 갖는 배열을 생성한다

// 전달된 인수가 1개이고 숫자이더라도 인수를 요소로 갖는 배열을 생성한다.

const arr1 = Array.of(1);

console.log(arr1); // // [1]

 

const arr2 = Array.of(1, 2, 3);

console.log(arr2); // [1, 2, 3]

 

const arr3 = Array.of('string');

console.log(arr3); // 'string'

 

indexOf

인수로 전달된 요소를 검색하여 인덱스를 반환

배열에 요소가 존재하는지 여부를 확인할 때 유용하다

 

concat

인수로 전달된 값들을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환한다

인수로 전달한 값이 배열인 경우, 배열을 해체하여 새로운 배열의 요소로 추가한다

원본 배열은 변경되지 않는다

 

join

모든 요소를 문자열로 변환한 후, 인수로 전달 받은 구분자로 연결한 문자열을 반환한다

구분자는 생략가능하며 기본 구분자는 , 다.

 

push

배열의 마지막에 요소로 추가한 변경된 length값을 반환한다

 

push 와 concat은 유사하게 동작하지만

push는 원본 배열을 직접 변경하고 concat은 원본 배열을 변경하지 않고 새로운 배열을 반환한다

 

pop

마지막 요소를 제거하고 제거한 요소를 반환한다

원본 배열이 빈 배열이면 undefined를 반환한다

 

pop 메소드와 push 메소드를 사용하면 스택을 쉽게 구현할 수 있다.

 

스택(stack)은 데이터를 마지막에 밀어 넣고, 마지막에 밀어 넣은 데이터를 먼저 꺼내는 후입 선출(LIFO - Last In First Out) 방식의 자료 구조이다. 스택은 언제나 가장 마지막에 밀어 넣은 최신 데이터를 취득한다. 스택에 데이터를 밀어 넣는 것을 푸시(push)라 하고 스택에서 데이터를 꺼내는 것을 팝(pop)이라고 한다.

 

reverse

배열 요소의 순서르 반대로 변경한다

 

shift

첫 요소를 제거하고 제거한 요소를 반환한다

 

slice(start = 0, end=this.length) 객체의 slice처럼 어렵다

인자로 지정된 배열의 부분을 복사하여 반환한다

첫번째 매개변수 start에 해당하는 인덱스를 갖는 요소부터

매개변수 end에 해당하는 인덱스를 가진 요소 전까지 복사된다

 

start : 복사를 시작할 인덱스 음수인 경우 배열의 끝에서 인덱스를 나타낸다

end : 옵션이며 기본값은 length값이다

 

slice메소드에 인자를 전달하지 않으면 원본 배열의 복사본을 생성하여 반환한다

 

splice(start: number, deleteCount=this.length-start, …items: )

기존의 배열의 요소를 제거하고 새로운 요소를 추가한다 배열 중간에 새로운 요소를 추가할 때도 사용

 

start : 배열에서의 시작 위치이다. start 만을 지정하면 배열의 start부터 모든 요소를 제거한다.

deleteCount : 시작 위치(start)부터 제거할 요소의 수이다. deleteCount가 0인 경우, 아무런 요소도 제거되지 않는다. (옵션)

items : 삭제한 위치에 추가될 요소들이다. 만약 아무런 요소도 지정하지 않을 경우, 삭제만 한다. (옵션)