배열 (Array)
-
변수에는 데이터가 오직 한 개만 저장된다. 하지만 만약 데이터를 여러 개 저장하고
싶다면 배열로 한 번에 묶어 저장할 수 있다. -
배열 안에 데이터를 여러 개 저장하게 되면 데이터의 첫 번째 순서부터 인덱스번호를 부여받는다.
-
인덱스 번호는 데이터의 순서를 의미하며 0부터 시작하여 마지막 데이터까지 오름차순으로 인덱스번호가 부여된다.
-
배열안에는 다양한 데이터 형식을 넣을 수 있다. 예를 들어 문자형, 숫자형, 논리형 데이터들이 있다.
[기본형]
- var 변수명 = new Array();
변수명[0] = 값;
변수명[1] = 값;
변수명[2] = 값;
: 배열객체를 먼저 생성한 후 한 개씩 데이터를 넣는 방식.
가독성이 좋지 않아 잘 쓰지 않는 방식이다.
- var 변수명 = new Array(값1, 값2, 값3...);
: 배열객체를 생성하여 ()안에 값을 나열하는 방식.
잘 쓰이지 않는 방식
- ★★★
var 변수명 = [값1, 값2, 값3...];
: []은 곧 배열을 의미한다. 가장 많이 사용되는 방식.
- var 변수명 = new Array();
배열 객체에 저장된 데이터 불러오기 ★
- 배열 객체에 여러 개의 데이터가 저장되어 있고, 이 중에서 필요한 데이터가 있다면 꺼내쓸 수 있다. 데이터를 불러오는 기본형은 아래와 같다.
[기본형]
(참조)변수명[인덱스 번호];
배열객체의 메서드와 속성(property)
- join(연결문자)★
: 배열 객체의 데이터를 연결 문자 기준으로 1개의 문자형 데이터로 반환한다.
- reverse()★
: 배열 객체의 데이터 순서를 거꾸로 바꾼 후 반환한다.
- sort()★
: 배열 객체의 데이터를 오름차순으로 정렬한다.
- slice(시작 인덱스번호, 끝 인덱스번호)
: 배열 객체의 데이터 중 원하는 인덱스 구간만큼 잘라서 배열객체로 반환한다.
이때 시작 인덱스번호부터 끝 인덱스 번호의 앞의 데이터까지만 잘라서 반환한다.
즉, slice(0, 3)이라고 하면 0번부터 2번까지의 데이터만 잘라 반환한다.
- splice(시작 인덱스, 데이터 갯수, 새로 넣을 데이터)
: 배열 객체에서 시작 인덱스부터 지정한 데이터 갯수만큼 삭제하고 그 자리에 새로운 데이터를 넣을 때 사용한다.
- concat(배열1, 배열2)
: 2개의 배열 객체를 하나로 합쳐 반환한다.
- pop()
: 배열에 저장된 데이터 중 마지막 인덱스에 있는 데이터를 삭제한다.
- push(new data)
: 배열에 저장된 데이터 중 마지막 인덱스에 새 데이터를 삽입한다.
- shift()
: 배열에 저장된 데이터 중 첫 번째 인덱스(0번)에 있는 데이터를 삭제한다.
- unshift(new data)
: 배열에 첫 번째 위치에 새 데이터를 삽입한다.
- length()★
: 배열에 저장된 데이터의 총 개수를 반환한다.
- forEach(함수)★
: 배열에 저장된 데이터나 요소의 갯수만큼 반복하면서 (함수)를 실행하여 자바스크립트 코드를 실행할때 사용한다. 기존배열을 변화시키지 않고 새롭게 배열을 반환한다.
- filter(함수)
: 배열에 저장된 데이터의 갯수만큼 반복 실행하며 조건에 부합하는 데이터만 필터링할때 사용한다.
- find(함수)
: 배열에 저장된 데이터의 갯수만큼 반복 실행하며 배열안에 해당 데이터가 있으면 특정
자바스크립트를 실행하거나 해당 데이터를 반환한다.
문자열 객체 (String)
-
문자열 객체는 문자형 데이터를 객체로 취급하는 것으로, 자바스크립트에서 가장 많이 사용한다.
-
변수에 문자형 데이터를 넣으면 첫 번째 글자부터 인덱스 번호를 0번을 부여받는다.
-
이때 문자 사이에 공백이 있어도 공백 또한 데이터이기 때문에 인덱스 번호를 부여받는다.
[기본형]
- var 참조변수 = new String('문자형 데이터');
- var 참조변수 = '문자형 데이터'
문자열 객체의 메서드와 속성
- charAt(index)
: 문자열에서 인덱스 번호에 해당하는 문자를 반환한다.
- indexOf('찾을 문자')★
: 문자열 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의
인덱스 번호를 반환한다. 만약 찾는 문자가 없다면 -1을 반환한다.
- lastIndexOf('찾을 문자')
: 문자열의 오른쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의
인덱스 번호를 반환한다. 만약 찾는 문자가 없다면 -1을 반환한다.
- match('찾을 문자')
: 문자열의 오른쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는
'문자'를 반환한다. 만약 찾는 문자가 없다면 null을 반환한다.
- replace('바꿀 문자', '새 문자')
: 문자열 왼쪽부터 바꿀 문자를 찾아 제일 먼저 찾은 문자를 새 문자로 치환한다.
- search('찾을 문자')
: 문자열 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의
'인덱스 번호'를 반환한다. 만약 일치하는 문자가 없으면 아무것도 반환하지 않는다. (잘 사용 x)
- slice(a, b)★
: a개의 문자를 자르고 b번째 이후에 문자를 자른 후 남은 문자를 반환한다.
인덱스 번호 자리에 -(마이너스)를 쓸 수 있는데, -는 문자열의 가장 마지막번째
글자부터 세서 왼쪽으로 올라온다.
- substring(a, b)★
: a 인덱스부터 b인덱스 이전 구간의 문자를 반환한다.
인덱스 번호 자리에 -(마이너스)를 쓸 수 있는데, -는 인덱스번호 a의 앞 글자부터
-숫자 갯수 만큼 잘라서 반환한다.
- substr(a, 문자 개수)
: 문자열에 a인덱스부터 지정한 문자 개수만큼 문자열을 반환한다.
- split('문자')★
: 지정한 문자를 기준으로 문자 데이터를 나누어 배열에 저장하여 반환한다.
- toLowerCase()
: 문자열에서 영문 대문자를 모두 소문자로 변환한다.
- toUpperCase()
: 문자열에서 영문 소문자를 모두 대문자로 변환한다.
- length
: 문자열에서 문자의 총 갯수를 반환한다.
- concat('새로운 문자')
: 문자열에 새로운 문자를 결합한다.
- charCodeAt(index)
: 문자열 index에 해당하는 아스키 코드값을 반환한다.
- fromCharCode(아스키 코드 값)
: 아스키 코드값에 해당하는 문자를 반환한다.
- trim()
: 문자열 앞 또는 뒤에 공백 문자열을 제거한다.
특수 기호 표시하기
-
문자열에는 종종 이스케이프 문자나 특수문자가 포함된다.
-
이스케이프 문자란, 화면에는 표시되지 않지만 줄 바꿈이나 탭처럽 문서에서 기능을 수행하는 문자를 의미한다.
-
특수문자를 표시하려면
\(￦:백슬래쉬) 다음에 기호를 입력한다.[이스케이프 문자 기본형]
\ddd(d는 숫자) : 8진수\xddd : 16진수\\:\백슬래쉬를 표현한다.\' : '를 문자로 화면에 표현한다.\" : "를 문자로 하면에 표현한다.\b : 백스페이스 문자\n : 줄바꿈\t : 탭 문자(들여쓰기)
템플릿 리터럴로 문자열 연결하기★
-
템플릿 리터럴은 문자열과 변수, 식을 섞어서 하나의 문자열을 만드는 표현 형식이다.
-
템플릿 리터럴 이전에는 문자 연결 연산자인 +를 이요하여 식이나 변수를 연결했다.
-
하지만 문자 연결 연산자는 더하기로도 쓰기 때문에 예상하지 못하는 결과가 나타날때가 많아 현재는 템플릿 리터럴을 쓰기를 권장하고 있다.
-
템플릿 리터럴은 `(백틱)을 이용하여 문자열을 만든다.
-
템플릿 리터럴을 이용하여 변수에 들어있는 값을 쏙 집어넣는 것을 '데이터 바인딩'이라고 표현한다.
[기본형]
`${태그 또는 띄어쓰기, 이스케이프문자 등}
