기본기부터시작하는 IT생활

배열이란?

• 배열이란 여러개의 데이터를 한번에 저장하고 관리하게 편하게 해주는 기능이다. 배열을 왜 쓰는가 의문이 든다면 아래 예시가 있다.

let name1 = "홍길동";
let name2 = "코난";
let name3 = "나루토";
let name4 = "블리츠";

//위 코드를 배열을 사용하여 저장할경우 아래와 같이 간편하게 저장할 수 있다.

let array1 = ["홍길동", "코난", "나루토", "블리츠"];
const array2 = ["홍길동", "코난", "나루토", "블리츠"];

이처럼 다수의 데이터를 한번에 저장할 수 있기때문에 배열은 데이터를 관리,저장하기 편하다는 장점이 있다. 그렇다면 이제 배열에대해 자세히 알아보자.

배열의 선언

• 배열을 선언하는 법은 다른 변수를 선언하는 방법과 동일하다. 다만 한가지 다른점이 있다면 [](대괄호) 를 이용하여 할당을 해주어야한다는 점이다. 배열의 선언방식은 아래와 같다.

let (배열이름) = ["값"];
const (배열이름) = ["값"];


//예시 코드

let studentScore = [80,90,20,78];
const studentScore = [80,90,20,78];

이때 변수 선언을 위해서 var 을 사용해도 되지만 var의 불편한 점들때문에 let을 더 많이 사용한다. 이점 유의하자. 이제 배열의 선언방식을 알아봤으니 배열의 구조에대해 알아보자.

배열의 구조

• 배열의 구조는 일렬로 정렬되어 있는 책장이라고 생각하면 된다. 배열은 각 칸마다 하나의 값을 저장하고 0번부터 n번까지 번호를 매긴다. 직관적이해를 위해 아래의 사진을 그려왔다.

배열에 값을 할당하게 되면 왼쪽 0번부터 데이터가 저장되게 된다. 이후에 한칸씩 늘려가면 1번,2번...n번까지 배열에 데이터가 저장된다. 이러한 구조를 알아야 배열을 잘다룰 수 있다. 왜냐하면 배열은 주로 반복문을 통해 많이 다루게 되는데 이때 자신이 원하는 배열의 데이터값을 꺼내기 위해서 배열의 몇번째칸에 데이터가 들어가있는지 파악할 수 있어야한다. 그렇다면 이제 배열의 사용에대해 알아보자.

배열의 사용

• 배열을 사용하는데 있어 배열에서 제공하는 메소드가 있다. array 라는 이름으로 선언된 배열이 있을때 아래의 표는 이 배열로 사용할 수 있는 메소드의 종류이다.

array.length

• array.length 는 해당 배열의 길이를 제공하는 메소드이다. 

let name = ["원피스","나루토","코난","홍길동"];

console.log(name.length);  // 4 출력

위 코드에선 name 이라는 이름의 배열에 총 4개의 값이 들어가있으므로 .length 메소드를 호출했을때 4라는 값을 반환하게 된다. 이때 혼동하면 안되는 것이 배열의 길이는 4이지만 배열의 마지막 데이터인 "홍길동" 이 들어가있는 자리는 3번이다.  이 메소드는 반복문에서 해당 배열의 길이만큼 반복문을 실행시키는 조건문을 작성할때 많이 사용하게 될것이다. 이 외에도 많은곳에서 사용되는 메소드이다.

array.push()

• array.push()는 저장할 데이터를 추가하는 메소드이다. 이해를 돕기위해 비유를 하자면 "프링글스 통안에 감자칩을 집어넣는것" 라고 생각하면될것같다. 즉, 기존에 있던 데이터에 데이터를 추가하는것이고 이를 통해 배열의 길이도 증가한다. 

let name = ["루피","나미","샹디","조로"];
name.push("우솝");

console.log(name)  //  "루피 나미 샹디 조로 우솝" 출력

위 메소드를 사용하면서 주의해야할점은 배열의 길이가 늘어난다는 것이다. 즉, 처음 배열을 선언할때의 길이는 4이지만 name.push를 통해 "우솝" 이라는 값을 추가했을때 배열의 길이는 5가된다. 이점 유의하자.

array.pop

• array.pop() 메소드는 push 와는 반대로 마지막에 있는 데이터를 삭제하는 메소드이다. push에서 설명한 비유를 다시 가져와보면 pop 메소드는 "프링글스 통에서 감자칩을 꺼내먹는 것" 이다.

let name = ["루피", "나미","샹디","조로","우솝"];
name.pop();

console.log(name); // "루피 나미 샹디 조로" 출력

위 메소드를 사용할때 주의해야할 점은 가장 마지막에 있는 데이터가 삭제된다는 것이다. 우리가 프링글스를 먹을때 위에 있는것을 놔두고 맨 밑에 있는것을 꺼내먹지는 않듯이 pop 메소드도 맨위 즉, 가장 마지막 데이터인 "우솝" 이라는 데이터가 삭제된다. 이 메소드 역시 배열의 길이에 영향을 주니 알아두자.

array.includes

• array.includes 메소드는 입력된값이 배열안에 있는지 확인하는 메소드이다.

let name = ["루피", "나미","샹디","조로","우솝"];
let judge1 = name.includes("나미");
let judge2 = name.includes("쵸파");

console.log(judge1); // ture 출력
console.log(judge2); // flase 출력

설명을 위해 코드를 해석하자면 "name.includes("나미");" 이라는 코드는 name 이라는 배열안에 "나미" 라는 값이 들어가있는지 묻는 코드이다. 위 선언된 배열에 "나미" 라는 값이 있으므로 해당 메소드는 true 를 반환하고 이 반환된 값이  judge1 이라는 변수에 저장되는 것이다. 

즉, 배열에 "나미" 라는 값이 있으므로 judge1 이라는 변수에는 true가 저장되고 배열에 "쵸파" 라는 값이 없으므로 judge2 라는 변수에는 false 가 저장된것이다. 해당 메소드는 조건문과 합이 잘맞는다.

array.concat()

• array.concat() 메소드는 두개의 배열을 합치는 배열이다. 즉, 두개의 프링글스통을 합치는 것이다.

let partner = ["루피","나미","샹디","조로"];
let newPartner = ["쵸파","로빈","프랑키","브록"];

let newMember = partner.concat(newPartner)


console.log(newMember);//[
 				'루피',   '나미',
 				'샹디',   '조로',
 				'쵸파',   '로빈',
 				'프랑키', '브록'
			] 출력
console.log(newMember.length);	//8출력
console.log(newMember[4]);	//쵸파 출력

위 메소드를 사용하면서 주의 해야할점은 메소드를 사용한 배열을 기준으로 마지막으로 저장된 데이터 뒤로 데이터가 추가된다는 점이다. 위 코드를 예시로 설명하자면 위 코드에서는 partner.concat() 메소드를 사용하였다. 즉, partner 라는 배열을 기준으로 newPartner 라는 배열을 추가한것이다. 그렇기 때문에 partner에 마지막으로 저장된 값인 "조로" 뒤쪽으로 값이 저장된다. 그 증거로 newMember[4](newMember 라는 배열의 4번째 자리) 를 출력해봤을때 "쵸파" 라는 값이 출력된다. 

array.split()

• array.split() 메소드는 문자열을 입력된 값을 기준으로 분할해 배열로 변환해준다.

let email = "gomboy11@naver.com";
let userInfo = email.split("@");

console.log(userInfo); //[ 'gomboy11', 'naver.com' ] 출력

--------------------------------------------------------------------------

let word = "spring summer fall winter"
let season = word.split(" ");

console.log(season); //[ 'spring', 'summer', 'fall', 'winter' ] 출력

위 코드에서 email.split("@") 는 "@" 을 기준으로 해당 문자열을 분할해달라는 것이다. 그 결과 gomboy11@naver.com 이라는 문자열이 gomboy11 과 naver.com 로 분할되어 userInfo 라는 배열에 들어가게된것이다. 그 아래 예시는 " " 즉, 띄어쓰기를 기준으로 문자열을 분할한결과 4개의 단어가 sesaon 이라는 배열에 저장된것을 볼 수 있다. 

array.join

• array.join 메소드는 배열안에 있는 값들을 합쳐 문자열로 변환해주는 메소드이다.

let season = ["spring","summer","fall","winter"];

console.log(season.join(" ")); //spring summer fall winter  출력
console.log(season.join("-")); //spring-summer-fall-winter 출력

season.join(" ") 코드는 season 이라는 배열이 가지고 있는 값들 사이에 " "(띄어쓰기) 를 포함해서 합쳐달라는 것이다. 만일이를 지정하지 않으면 "," 이라는 값이 출력된다. 출력된 값은 위와 같다.

반댈로 season.join("-"); 이라는 코드는 값들 사이에 "-" 이라는 값을 추가하여 합쳐달라는 것이다. 결과는 위와 같다.