728x90
배열
- 배열은 리스트와 비슷한 객체로서 순회와 변형 작업을 수행하는 메서드를 갖는다.
- 인덱스의 순서로 해당 값에 접근할 수 있다.
- 사람은 1부터 숫자를 세지만 배열은 0부터 숫자를 세기 때문에 인덱스는 " 0 ~ 배열의 길이 - 1 "의 값을 가진다.
- 다른 언어(C, C++, C# 등)에서는 배열이 list 타입이 있는데 자바스크립트에서는 Arr타입이 있고 사용자가 편하게 접근하기 위해서 조금 허술한 부분이 있다.
💡 Javascript의 배열은 객체이다.
- Javascript안에서 배열은 메서드를 사용할 수 있다.
- Javascript에서의 배열은 다른 언어와는 달리 배열의 요소를 위한 각각의 메모리 공간은 동일한 크기를 갖지 않아도 되며 연속적으로 이어져 있지 않을 수도 있다.
이중 배열
- 배열안에 배열이 있는 것이다.
let a = [[1,2,3],[4,5,6],[7,8,9]];
console.log(a[0]); // a[0] === [1,2,3]
console.log(a[0][0]); // a[0][0] === 1 ([1,2,3]의 0번 인덱스인 1이 나온다.)
//삼중, 사중으로 배열을 사용할수는 있지만 보통 이중배열까지만 사용한다.length
- 문자열의 코드 유닛 수를 반환한다.
- 문자열의 길이나, 배열의 길이를 알 수 있다.
- 문자열의 length
- 배열의 length
//문자열의 길이를 구할 수 있는 length 문법
"문자열의 길이를 구해주세요".length;
//변수에 문자열을 대입하여 변수를 이용해 구할 수도 있다.
let a = "문자열의 길이를 구해주세요";
a.length;
- 배열의 인덱스를 접근할 때에는 length를 이용하여 접근하는 것이 효과적이다.
- 배열의 인덱스를 length가 아닌 특정 숫자로 작성을 하게 되면 길이가 변경되는 상황에서 동적으로 변경사항을 저장할 수 없기 때문에 결과 값에 오류가 발생하게 된다.
- 배열의 인덱스를 length로 설정하게 되면 키 값으로 배열의 길이 -1 만큼을 가져오게 되므로 해당 상황에서는 정상적으로 배열의 인덱스 만큼 반복시킬 수 있다.
let b = [1,2,3,4,5,6,7];
for (let i = 0; i < 4; i++) {
// 배열의 인덱스 값을 4로 지정하여, b[0], b[1], b[2], b[3], b[4] 까지의
// 값만 불러와지며 a[5],a[6] 값은 확인할 수 없다.
console.log(b[i]);
}
// 배열의 인덱스는 길이보다 -1 이므로 조건식에 "i < array.length"로 부등호는 항상 길이보다 작아야한다.
for (let i = 0; i < b.length; i++) { // 배열의 인덱스 값이 적용되는 대로 불러와져 동적으로 인덱스 값을 받아올 수 있다.
console.log(b[i]);
}배열 값 추가 & 삭제
배열 요소 추가
- Array.push( );
- 배열의 끝에 요소를 추가
var arr = ['a', 'b', 'c'];
// arr = ['a', 'b', 'c', 'd']
arr.push('d');
- Array.unshift( );
- 배열의 앞쪽에 요소를 추가
var arr = ['a', 'b', 'c'];
// arr = ['d', 'a', 'b', 'c']
arr.unshift('d');
- Array.splice( );
- 원하는 위치에 하나 이상의 요소를 추가
- array.splice("위치", 0, ["요소1", "요소2" ... ])
var arr = ['a', 'b', 'c'];
// arr = ['a', 'b', 'd', 'c']
arr.splice(2, 0, 'd'); // index 2 ('c')의 위치에 요소를 추가
// arr = ['a', 'b', 'd', 'c', 'e', 'f']
arr.splice(4, 0, 'e', 'f'); // index 4의 위치에 2개의 요소를 추가
배열 요소 삭제
- Array.pop( );
- 배열의 마지막 요소를 제거한다.
- array.pop( ); 실행 시 변수에 대입을 하게 되면 삭제된 값이 변수에 저장하게 된다.
let a = ['a', 'b', 'c', 'e', 'f'];
// a = ['a', 'b', 'c', 'e']
a.pop(); // 배열의 마지막 요소를 제거
// a = ['a', 'b', 'c']
let b = a.pop(); // 제거한 요소를 반환 받을 수 있음
// b = 'e'
- Array.shift( );
- 배열의 첫 번째 요소를 제거한다.
- array.shift( ); 실행 시 변수에 대입을 하게 되면 삭제된 값이 변수에 저장하게 된다.
let a = ['a', 'b', 'c', 'e', 'f'];
// a = ['b', 'c', 'e', 'f']
a.shift(); // 배열의 첫번째 요소를 제거
// a = ['c', 'e', 'f']
let b = a.shift(); // 제거한 요소를 반환 받을 수 있음
// b = 'b'
- Array.splice( );
- 배열의 원하는 위치에서 하나 이상의 요소를 제거할 수 있다.
- 배열의 요소를 제거한 후, 해당 위치에 값을 추가할 수 있다.
- array.splie( ); 실행 시 변수에 대입을 하게 되면 삭제된 값이 변수에 저장하게 된다.
let a = ['a', 'b', 'c', 'e', 'f'];
// a = ['a', 'b', 'e', 'f']
a.splice(2, 1); // index 2 부터 1개의 요소('c')를 제거
// a = ['a', 'f']
a.splice(1, 2); // index 1 부터 2개의 요소('b', 'e')를 제거
// a = ['a']
removed = a.splice(1, 1); // 제거한 요소를 반환 받을 수 있음
// removed = 'f'
// a = ['가', '나', '다']
a.splice(0, 1, '가', '나', '다'); //요소를 제거하고 제거한 요소 자리에 새로운 요소를 추가할 수 있음
- Array.delet( );
- 배열의 인덱스로 값을 삭제할 수 있다. 값은 삭제되지만 요소는 그대로 남아있게 된다.
let a = ['a', 'b', 'c', 'e', 'f'];
// a = ["a", undefined, "c", "e", "f"]
delete a[1]; // delete로 배열을 삭제할 경우 요소는 그대로 존재하며 값만 삭제 됨
함수를 사용하지 않고 배열의 길이를 동적으로 변경하는 방법
let a = ['a', 'b', 'c'];
// a = ['a', 'b', 'c', 'e'];
a[a.length] = 'e'; // 배열의 끝에 요소를 추가
// a = ['a', 'b', 'c']
a.length = a.length - 1; // 배열의 크기를 하나 줄인다
// a = ["a", "b", "c", undefined, undefined, "g"]
a[5] = 'g'; // index 5 에 요소를 추가, 빈요소([3],[4])는 undefined익명함수
- 자바스크립트에서 익명 함수는 함수명 대신 변수명에 함수 코드를 저장하는 구현 방식이다.
- 일반 함수와 비교하면, 함수의 이름이 존재하지 않는다.
- 재사용하지 않는, 한 번만 사용할 함수를 위한 개념으로 함수의 이름을 따로 갖지 않는다.
- 리터럴 방식으로 변수에 담겨 사용하는 함수이다.
const obj = { // const: 한 번 선언하면 값을 변경할 수 없다. 재선언이 불가하다. 상수의 값
a : "나는 객체.", // a는 키, "나는 객체."는 값.
push : function(num){ // 익명함수 : 이름이 없는 함수이다.
console.log("나는 obj 객체 안에 push 라는 키값에 있는 함수야.");
console.log(num + "를 매개변수로 받았어");
}
}
console.log(obj.a); // 상수형 변수 obj의 키a의 값을 노출한다.
obj.push(2); // obj에 속한 함수의 매개변수 num에 2값을 대입하여 function 실행문을 동작시킨다.배열의 메서드
메서드?
메서드(method)는 객체 지향 프로그래밍에서 객체와 관련된 서브 루틴 (또는 함수)이자 클래스가 갖고 있는 기능이다.
indexOf
- 호출한 string 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환한다.
- 일치하는 값이 없으면 '-1'을 반환한다.
- 구조: 배열명.indexOf(찾고자하는 배열의 값) => 입력한 값의 인덱스를 알려준다.
let a = [1,2,3,4,5];
let return1 = a.indexOf(4); // return은 변수명으로 사용할 수 없다.
console.log(return1); // 결과 : 3
let arr = ["사과","딸기","포도","딸기"];
let return2 = arr.indexOf("딸기");
console.log(return2); // 결과 : 1, indexOf는 일치하는 첫 번째 값만 반환하기 때문에 인덱스 3의 값은 반환하지 않는다.find
- 검색할 때 사용하는 함수
- 배열을 순환하면서 조건에 맞는 요소를 찾는 순간, 순환을 멈추고 즉시 값을 반환한다.
- 조건에 만족하는 첫 번째 배열요소를 반환한다.
- 매개변수로 함수를 전달받는다.
- 배열의 값에서 조건과 일치하는 값이 없으면 'undefined'처리 된다.
let arr = ["사과","딸기","포도"];
let return4 = arr.find(function(item){ //익명함수 작성
// 배열 arr의 값이 매겨변수 item에 순서대로 들어온다.
console.log(item);
return item === "딸기"; // find함수에서 return 값이 true의 값이 반환되면 해당 값을 반환해준다. 순서대로 값이 불러와지고 값을 내보내면 함수가 종료된다.
});
console.log(return4); // 값: 딸기findIndex
- 주어진 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환한다.
let arr = {"사과","딸기","포도"};
let return5 = arr.findIndex(function(i){
return i === "딸기";
})
console.log(return5); //값: 1. (딸기의 인덱스 값인 1이 결과로 나온 것이다.)filter
- 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.
- 검색 창 알고리즘을 구현할 때 사용할 것으로 예상된다.
- 원하는 값을 모두 찾아서 반환해준다.
let arr2 = ["이사과","김딸기","이포도"]
let return6 = arr2.filter(function(u){
return u[0] === "이"; // 결과: ['이사과', '이포도'] => 배열 u 에서 인덱스0에 "이"가 속한 값을 반환
})
console.log(return6);map
- 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.
let arr2 = ["이사과","김딸기","이포도"]
let return7 = arr2.map(function(i){
console.log(i);
// return i;
return i[0] === "이"; // 반환 값들을 배열의 형태로 반환해준다.
})
// 반환값을 배열의 길이만큼 채워서 반환
console.log(return7); // 결과: [true, false, true].
arr3 = [1,2,3,4,5];
let return8 = arr3.map(i => i * 2); // i는 arr3의 모든 각각의 요소. 각각의 요소에 x2의 식을 넣어준다.
console.log(return8);let arr = [1,2,3,4];
arr.map(function(i){ // map에는 매개변수를 2개 이상 전달할 수 있다.
console.log(i);
})
arr.map(function(i,v){ // map(함수(값, 인덱스, 배열){})
console.log(i);
console.log(v); // i의 인덱스를 표현
})forEach
- 배열을 순회하는 여러 방법 중 하나이다.
- map() 메서드와 거의 비슷하지만 차이점은 따로 return 하는 값이 없다는 점이다.
- map()의 경우에는 반환하는 값이 새로운 배열의 형태로 반환된다.
- 해당 배열을 반복시켜서 작업해야 할 경우에 용이하게 사용된다.
- 배열의 길이만큼 반복하면서 결과값이 나온다. 값을 바로 사용할 수 있으며, 매개변수의 값을 순차적으로 뽑아준다.
- for문을 돌리지 않아도 forEach로 사용이 가능하다.
let arr2 = ["이사과","김딸기","이포도"]
arr2.forEach(function(i){
console.log(i); // 결과값: '이사과', '김딸기, '이포도' 가 순차적으로 출력된다.
})
// 같은 작업을 하는 for문
for (let i = 0; i < arr2.length; i++) {
//이전에는 증가하는 값을 배열의 인덱스로 줘서 값을 확인했었다.
console.log(arr2[i]);
}join
- 배열을 문자열로 변경시켜준다.
- join의 매개변수에서 전달한 문자열로 배열에 들어있는 값들을 구분해준다.
let arr2 = ["이사과","김딸기","이포도"]
console.log(arr2.join(",")); //결과값: 이사과,김딸기,이포도
split
- 매개변수로 문자열에서 구분지을 텍스트를 전달해준다.
- 예) 문자열: " 컴퓨터@마우스@키보드" 매개변수: "@" 결과값: ['컴퓨터', '마우스', '키보드']
- 문자열을 배열로 변경시켜준다.
let str = "김,이,박,최";
let str2 = "사과/딸기/바나나/메론";
// split 값을 받는 변수 spl 생성하여 console.log로 표현
let spl = str.split(",");
console.log(spl); // 결과값: ['김', '이', '박', '최']
//console.log에 변수 str2이 split되도록 적용.
console.log(str2.split("/")); // 결과값: ['사과', '딸기', '바나나', '메론']
문자열의 메서드
indexOf
- 배열은 아니지만 문자열도 배열과 동일하게 인덱스 값의 접근이 가능하다.
더보기
# 배열의 indexOf와 동일한 속성을 가진다.
- 호출한 string 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환한다.
- 일치하는 값이 없으면 '-1'을 반환한다.
- 구조: 배열명.indexOf(찾고자하는 배열의 값) => 입력한 값의 인덱스를 알려준다.
let str = "가나다라마바사";
console.log(str.indexOf("다")); //결과값: 2length
<상단의 배열 부분에 나온 설명이다. 추후에 찾아보기 용이하게 문자열 부분에 한 번 더 기재>
- 문자열의 코드 유닛 수를 반환한다.
- 문자열의 길이나, 배열의 길이를 알 수 있다.
- 문자열의 length
- 배열의 length
//문자열의 길이를 구할 수 있는 length 문법
"문자열의 길이를 구해주세요".length;
//변수에 문자열을 대입하여 변수를 이용해 구할 수도 있다.
let a = "문자열의 길이를 구해주세요";
a.length;
slice
- 문자열을 잘라주는 역할을 한다.
- 매개변수를 2개 전달해야 한다.
- slice(시작지점 인덱스, 끝지점 인덱스)
let str = "가나다라마바사";
console.log(str.slice(1,6)); //결과값: 나다라마바split
// 문자열 함수 split
let str = "가나다라마 바 사";
console.log(str.split("")); // 구분을 정해주지 않으면 모든 문자열을 한자 한자 잘라서 배열의 형태로 변경해준다.
// 결과값: ['가', '나', '다', '라', '마', ' ', '바', ' ', '사']
console.log(str.split("다")); // 매개변수로 전달한 값을 잘라내고 배열의 형태로 변경해준다.
// 결과값: ['가나', '라마 바 사']
console.log(str.split(" ")); // 공백을 넣으면 공백이 지워지고 모든 문자열이 합쳐져 하나의 배열이 만들어진다.
// 결과값: ['가나다라마', '바', '사']대소문자 변경 함수 toUpperCase & toLowerCase
//문자열 함수 중 대소문자 변경 함수
let str2 = "abcdefg";
let str3 = "QWERTYU";
//toUpperCase: 대문자로 변경하는 함수
console.log(str2.toUpperCase()); // 결과값: ABCDEFG
//toLowerCase: 소문자로 변경하는 함수
console.log(str3.toLowerCase()); // 결과값: qwertyu👩🏫코드예시_로또 추첨 기계.js
// 로또 추첨기계 만들어보자
// 로또 번호들이 들어갈 로또 박스
let lottoNum = [];
// 추첨 결과를 담을 변수
let res = [];
/* 작업 순서
1. 로또는 겹치는 숫자가 없어야한다.
2. 숫자가 6개
3. 나온 숫자들의 결과를 노출
*/
/* 행 44 ~ 51 까지의 "추첨 전 세팅" 함수와 동일한 동작을 하는 구문
// 로또의 번호를 모두 뽑아놓고 가져다 사용하자
for (let i = 1; i <= 45; i++) { //1~45번 까지 반복
// 1~45까지의 숫자를 배열에 담아준다.
lottoNum.push(i);
console.log(lottoNum);
}
*/
/* 행 52~ 70까지의 "로또추첨 실행" 함수와 동일한 동작을 하는 구문
for (let i = 0; i < 6; i++) {
// 0~44까지의 랜덤한 숫자를 뽑고 인덱스로 사용.
let rndIndex = Math.floor(Math.random() * lottoNum.length) //floor: 값의 소숫점 단위를 버린다. 예) 값: 5.7 floor의 값: 5
let number = lottoNum[rndIndex]; // 랜덤으로 뽑은인덱스를 가지고 lottoNum배열에 인덱스로 전달해서 number라는 변수에 담아놓자 (사용하기 위해서)
// 램덤한 값이 또 나오지 않게 하기 위해서
//배열에서 값을 제거하려면 어떻게 해야할까?
//배열의 메소드 splice 함수를 사용하면 된다.
//시작점(인덱스), 그 시작점으로 부터 몇 개를 제거할 것인지를 매개변수로 저달
lottoNum.splice(rndIndex,1); //인덱스에 해당하는 값 하나만 제거. 해당 배열에서 값이 제거되면 길이가 줄어들기 때문에 랜덤값을 구하는 과정에서도
// lottoNum.length 길이 값이 줄어들기 때문에 정상적으로 작동한다.
res.push(number); //결과값을 담아둔다.
}
*/
// 추첨 전에 세팅작업
function lottoInit(){
lottoNum = []; //배열 초기화. 배열의 값을 추가하는 작업은 초기화를 해야하는지 확인을 꼭 하고 작업을 진행해야 한다.
for (let i = 1; i <= 45; i++) { //1~45번 까지 반복
// 1~45까지의 숫자를 배열에 담아준다.
lottoNum.push(i);
}
console.log("Init함수 실행 lotto세팅 끝"+lottoNum);
}
//로또 추첨 실행 함수
function lottoPlay(){
res = []; //배열 초기화. 초기화 하지 않으면 해당 함수를 두 번 이상 돌렸을 때 이전 값이 누적되어 노출되기 때문이다.
for (let i = 0; i < 6; i++) {
// 0~44까지의 랜덤한 숫자를 뽑고 인덱스로 사용.
let rndIndex = Math.floor(Math.random() * lottoNum.length) //floor: 값의 소숫점 단위를 버린다. 예) 값: 5.7 floor의 값: 5
let number = lottoNum[rndIndex]; // 랜덤으로 뽑은 인덱스를 가지고 lottoNum배열에 인덱스로 전달해서 number라는 변수에 담아놓자 (사용하기 위해서)
// 램덤한 값이 또 나오지 않게 하기 위해서 배열에서 값을 제거하려면 어떻게 해야할까?
// 배열의 메소드 splice 함수를 사용하면 된다.
// 시작점(인덱스), 그 시작점으로 부터 몇 개를 제거할 것인지를 매개변수로 저달
lottoNum.splice(rndIndex,1); // 인덱스에 해당하는 값 하나만 제거. 해당 배열에서 값이 제거되면 길이가 줄어들기 때문에 랜덤값을 구하는 과정에서도
// lottoNum.length 길이 값이 줄어들기 때문에 정상적으로 작동한다.
res.push(number); // 결과값을 담아둔다.
}
}
function main(){
//로또 세팅하고(함수실행문)
lottoInit();
//로또 추첨하자(함수실행문)
lottoPlay();
console.log("로또 결과는? "+res);
}
// 함수 초기화나 play같은 위의 코드처럼 단위별로 기능을 정리해두었을때 단위별로 버그가 없는지 단위 테스트가 가능하다.
// 단위별 기능 오류가 없게 되면 통합 테스트 진행할 수 있다. (전체적 기능이 오류가 없는지)
//전체 기능이 들어있는 함수를 만들고 함수가 실행될 때 마다 해당 기능이 동작할 수 있게 재사용성을 높일 수 있다.
main();
main(); // 이전 동작과는 전혀 다른 숫자들이 랜덤으로 선택되어 표기된다.
// 이렇게 단위 통합으로 작업을 정리해두는 습관을 길러야한다.
더보기
- 배열이란?
- Javascript의 배열은 객체이다.
- 배열 요소 추가 & 삭제
- 익명함수
- indexOf
- find
- map
728x90
