- 배열(Array)
이름과 인덱스로 참조되는 정렬된 값의 집합 (자료구조)
배열을 구성하는 각각의 값을 '배열 요소'라고 하며, 배열에서의 위치를 가리키는 숫자를 '인덱스'라고 한다.
- 배열 선언
let 배열명;
- 배열 초기화
배열명 = [요소1, 요소2, 요소3,...];
// 예시
let arr;
arr = [100,200,300];
let arr = [100,200,300];
- 배열 객체로 생성
let 배열명 = new Array(요소1, 요소2, ...)
- 자바 스크립트 배열의 특징
1) 배열 요소의 타입이 고정되어 있지 않다.
let arr =[1, 1.4, '안녕', true];
2) 배열 요소의 인덱스가 연속적이지 않아도 된다.
let arr;
arr [0] = 1;
arr [1] = 2;
arr [4] = 5;
** 인덱스 2,3은 undefined
- Array 객체의 함수
| 함수명 | 의미 |
| push() | 배열의 요소를 추가한다. |
| pop() | 배열의 마지막 주소에 있는 값을 제거한다. |
| shift() | 배열의 첫번째 주소에 있는 값을 제거한다. |
| concat() | 두 개의 배열을 합친다. |
| join() | 배열 요소 사이에 원하는 문자를 삽입한다. |
| reverse() | 배열을 역순으로 재배치 |
| sort() | 배열을 오름차순으로 정렬한다. |
배열 메소드 사용해보기!
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열</title>
<script defer src = "./4_배열.js"></script>
</head>
<body>
</body>
</html>
// 배열 선언
const arr = [1, 'apple','김사과',20, '서울', '잠자기']
// 배열인덱스와 상관없이 출력
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);
console.log(arr[4]);
console.log(arr[5]);
console.log(arr[6]);
// 배열길이 출력
console.log(arr.length)
// 6번 인덱스 건너뛰고 7번인덱스에 값 대입
arr[7] = 'a형'
console.log(arr.length)
for(let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
노란색 부분까지가 arr의 인덱스를 하나씩 찍은 부분이며 마지막 arr [6]은 타입이나 값이 들어가지 않았기 때문에 undefined가 출력되는 것을 확인할 수 있다.
그리고 length라고 적힌 부분은 6은 7번 인덱스에 'a형'을 배열에 넣기 전이고 8은 'a형'을 7번 인덱스에 넣은 후이다.
undefined가 배열의 마지막 요소이면 길이 반환에 들어가지 않지만, 사이에 껴있으면 길이 반환에 들어가는 것을 확인할 수 있다.
하늘색 부분은 for문으로 arr 배열을 출력한 것이다.
console.log('push 함수')
arr.push('여자');
console.log(arr);
console.log('shift 함수');
arr.shift();
console.log(arr);
console.log('concat 함수')
const sub = ['ISTJ', '물병자리'];
const arr_concat = arr.concat(sub);
console.log(arr_concat);
console.log('join 함수')
const arr_join = arr.join('🍎');
console.log(arr_join);
console.log(typeof arr_join);
console.log('sort함수')
const arr2 = ['a','z','c','f','r'];
arr2.sort();
console.log(arr2);
arr2.reverse();
console.log(arr2);
- 배열을 이용한 반복
-for in 문
변수에 배열의 인덱스 또는 객체의 key가 저장된다.
for (변수 in 객체) {
객체의 property 개수만큼 반복할 실행문;
..
}
- for of 문
변수에 배열의 value 또는 객체의 value가 저장된다.
for(변수 of 객체) {
객체의 property 개수만큼 반복할 실행문;
..
}
- forEach문
forEach문은 배열에서만 사용이 가능하다.
// 예시
let arr = [100,200,300]
배열명.forEach(function(변수1, 변수2, 변수3){
배열의 요소 개수만큼 반복할 실행문;
...
});
변수1 : 값(value) 100 -> 200 -> 300
변수2 : 번호(index) 0 -> 1 -> 2
변수3 : 배열 객체 [100,200,300] -> [100,200,300] -> [100,200,300]
for문으로 위의 arr 배열 출력하기!
console.log('for in 문')
for(let i in arr) {
// 인덱스값
console.log(`i : ${i}, arr[i]: ${arr[i]}`);
}
console.log('-----------------')
console.log('for of 문')
for(let i of arr) {
console.log(`i : ${i}`);
}
console.log('-----------------')
console.log('forEach 문')
arr.forEach(function(v, i, arr) {
console.log(`v : ${v}, i : ${i}, arr : ${arr}`)
})
- 사용자 정의 함수 (function)
하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록이다.
필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다.
(코드를 재활용 가능)
1) 함수 선언식
function 함수명 (매개변수1, 매개변수2, ...) {
함수가 호출되었을 때 실행할 문장;
...
return 값;
}
함수명(값1, 값2, ...);
2) 함수 표현식
let 변수명 = function(매개변수1, 매개변수2,...) {
함수가 호출되었을 때 실행할 문장;
...
return 값;
}
변수명(값1, 값2, ...);
✔ 호이스팅 (Hoisting)
인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.
호이 스팅의 대상이 되는 것은 var와 함수 선언식이다. var는 선언과 초기화를 동시에 진행하여 자바스크립트 내부적으로 선언과 동시에 undefined로 초기화한다.
함수 선언식의 경우 선언, 초기화, 할당을 모두 동시에 진행하고, 따라서 할당 전에 호출해도 undefined가 아니라 함수 내용을 리턴한다.
따라서 호이스팅은 코드 실행 전 이미 변수, 함수에 대한 선언이 저장되어 있기 때문에 선언문보다 참조 및 호출이 먼저 나와도 동작이 가능한 것을 의미한다.
- 나머지 매개변수
생략 접두사 (...)를 사용하여 특정 위치의 인수부터 마지막 인수까지 한 번에 저장할 수 있다.
function 함수명 (매개변수1, ...매개변수2){
함수가 호출되었을 때 실행할 문장;
...
return 값;
}
함수명(값1, 값2, 값3, 값4, 값5);
- 디폴트 매개변수
매개변수의 값을 정하지 않으면 기본값을 변수에 저장할 수 있다.
function 함수명 (매개변수1 = 값1, 매개변수2 = 값2, ..) {
함수가 호출되었을 때 실행할 문장;
...
return 값;
}
함수명();
함수명(값1, 값2);
함수 사용해보기!
함수. js
function func1() {
console.log('함수 선언식');
console.log('func1() 호출');
}
const func2 = function() {
console.log('함수 표현식')
console.log('func2() 호출');
}
func1();
func2();
console.log('------------------')
console.log()
function func3(num) {
console.log('매개변수가 있는 함수 선언식')
console.log(`전달 받은 매개변수의 값 : ${num}`);
}
func3(10);
func3('apple');
func3(true);
console.log('------------------')
console.log()
함수 선언식과 함수 표현식, 매개변수가 있는 경우 출력 결과이다.
function func5(x1, ...x2) {
console.log('나머지 매개변수')
console.log(`x1의 값 : ${x1}`)
console.log(`x2의 값 : ${x2}`)
for(let i in x2) {
console.log(`i의 값 : ${i}, x2[i] : ${x2[i]}`)
}
}
func5 (30,50,60,70,40,50,100)
console.log('------------------');
console.log();
function func7 ( num1 = 1, num2 = 1) {
console.log('디폴트 매개변수')
console.log(`num1의 값: ${num1}, num2의 값 : ${num2}`);
console.log(`${num1} * ${num2} = ${num1 * num2}`);
}
func7(8,6);
func7();
console.log('------------------');
console.log();
(function(){
console.log('익명함수')
console.log('함수를 만들고 바로 호출합니다..')
})();
나머지 매개변수, 디폴트 매개변수, 익명 함수의 결과이다.
'국비 > JavaScript' 카테고리의 다른 글
| DAY 04 : history 객체, navigator객체, DOM, 노드, 정규 표현식 (0) | 2022.11.14 |
|---|---|
| DAY 03 - 1 : 화살표 함수, 객체, 상속 (0) | 2022.11.14 |
| DAY 02 - 1 : 대화상자, 연산자, 제어문(조건문, 반복문) (0) | 2022.11.07 |
| DAY 01 : JavaScript, 변수, 데이터타입, 형변환, .. (0) | 2022.11.06 |