[ JavaScript ] 자바스크립트 기본 ④

[ 배열 ]

 

배열은 객체와 함수처럼 Non-Primitive Data Type에 해당한다.

* Non-Primitive Data Type : 여러 개의 고정되지 않는 동적 공간을 사용하여 한번에 여러 개의 값을 가질 수 있다.

 

배열 : 순서있는 요소들의 집합, 여러 개의 항목이 들어있는 리스트

 

1. 배열 생성하기

 

let arr1 =  new Array();

let arr2 = []; // 배열 리터럴

 

배열은 객체와 마찬가지로 []안에 들어가는 값이 아무 자료형이나 들어가도 상관이 없다.

 

let arr = [ 1, "@", true, null, undefined, {}, [], function(){} ];

console.log(arr); // [ 1, '@', true, null, undefined, {}, [], [Function (anonymous)] ]

 

2. 배열 요소 접근하기

 

배열은 데이터가 위치한 순서인 index가 존재하기 때문에 index를 통해 각각의 값에 접근할 수 있다.

 

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

console.log(arr[0]); // 1
console.log(arr[2]); // 3
console.log(arr[4]); // 5

 

3. 배열에 요소 추가하기

 

배열에 값을 추가할 때는 push 함수를 사용하면 된다. 

push : 배열의 가장 마지막에 원소를 추가해준다. ( 자료형 상관 없음 )

 

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

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

arr.push(6)

console.log(arr); // [ 1, 2, 3, 4, 5, 6 ]

 

4. 배열 길이를 확인하기

 

배열 자체도 객체로 이루어져있기 때문에 프로퍼티인 length를 점 표기법을 통해 배열의 길이를 구할 수 있다. 

 

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

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

 

---

[ 반복문 ]

 

반복문 : 특정 명령을 반복해서 수행할 수 있도록 도와주는 문법

 

for( 초기식; 조건식; 연산식 ){
	// 반복 수행할 명령
}

 

초기식 : 반복의 주체를 선언

조건식 : 조건을 만족할 때만 실행이 되도록 조건을 명시

연산식 : 반복이 한번 수행될 때마다 실행될 연산

 

1. 조건식에 만족하는 반복문

 

for( let i = 0; i < 5; i++ ){
    console.log(i);
}

// 0
// 1
// 2
// 3
// 4

 

2. 배열 순회하기

 

const arr = ['a', 'b', 'c'];

for( let i = 0; i < arr.length; i++ ){
    console.log(arr[i]);
}

// a
// b
// c

 

3. 객체 순회하기

 

Object의 keys 함수는 ()안에 들어있는 객체의 key 값들을 리스트의 형태로 반환해준다.

 

let person = {
    name : "2chaechae",
    age : 25,
    major : "SW"
};

const personKeys = Object.keys(person);
console.log(personKeys) // [ 'name', 'age', 'major' ]

for( let i = 0; i < personKeys.length; i++ ){
    console.log( person[personKeys[i]] );
}

// 2chaechae
// 25
// SW

 

Object의 values 함수를 사용하여 ()안에 들어있는 value 값들을 리스트의 형태로 반환할 수 있다.

 

const personValues = Object.values(person);

for( let i = 0; i < personValues.length; i++ ){
    console.log(personValues[i]);
}

// 2chaechae
// 25
// SW

 

---

[ 배열 내장 함수 ]

 

내장 함수는 객체의 메소드와 똑같은 것이다. 자바스크립트의 자료형은 모두 객체로 이루어져 있기 때문에 객체에 바로 메소드를 사용하는 형태로 작성하면 된다.

 

1. 배열 순회 함수 foreach()

 

foreach는 배열의 모든 요소를 한번씩 순회해주는 내장함수이다. 하나하나 요소를 foreach 메소드 안에 전달되는
콜백함수에 한번씩 파라미터로 전달을 해서 순회 작업을 해준다.

 

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

for( let i=0; i < arr.length; i++ ){
    console.log(arr[i]);
}

arr.forEach((elm) => console.log(elm));

arr.forEach( function (elm) {
    console.log(elm);
});

// 1
// 2
// 3
// 4

 

arr 배열에 foreach라는 배열의 내장함수를 사용하게 되면 내장함수에 전달되는 콜백함수를 arr 배열의 각각의 요소에 대해서 실행한다. elm는 배열의 요소인 1,2,3,4를 한번씩 순서대로 전달받게 된다.

 

---

2. 배열 내장 함수 map()

 

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

const arr2 = [];

arr.forEach((elm) =>
    arr2.push(elm * 2) 
);

console.log(arr2); // [ 2, 4, 6, 8 ]

 

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

const arr2 = arr.map((elm)=>{
    return elm * 2;
})

console.log(arr2); //[ 2, 4, 6, 8 ]

 

map 함수는 배열의 모든 요소에 우리가 원하는 프로그램을 수행할 수 있다.

 

map은 배열의 원본 요소를 순회함과 동시에 연산을 수행함으로써 리턴되는 값들만을 따로 배열에 추려내 새로운 배열을 반환할 수 있게끔 해주는 함수이다.

 

---

3. 배열 내장 함수 includes()

 

 includes 함수는 주어진 배열에서 전달받은 인자와 일치하는 값이 있는지 확인하는 함수이다. 값과 자료형을 모두 비교하기 때문에 ===를 이용해서 값을 찾는다. 즉, 주어진 배열에서 인자로 받은 값이 존재하는지 존재안하는지를 Boolean 형식으로 리턴해준다. 

 

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

let number = "3";

arr.forEach((elm)=>{
    if( elm == number ){
        console.log(true); // true
    }
})

console.log( arr.includes(number)); // false

 

* in 연산자와 includes 함수의 차이

in은 연산자고 includes는 함수이다. in은 객체안에 프로퍼티가 존재하는지 체크해주는 연산자이고 includes는 배열 안에 인자로 전달되는 값이 존재하는지 체크해주는 함수이다.

 

---

4. 배열 내장 함수 indexOf()

 

indexOf 함수는 인자로 전달되는 값이 배열에 존재하는지에 대한 여부 뿐만 아니라 몇번째 index에 존재하는지 체크해서 index를 반환한다.

 

즉, indexOf 함수는 주어진 배열에서 전달받은 인자와 일치하는 값의 index를 반환하는 함수이다. 만약에 주어진 값과 배열  안에 있는 값 중 일치하는 것이 하나도 없을 경우에는 -1을 반환한다. 

 

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

let number1 = "3";
let number2 = 3

console.log( arr.indexOf(number1) ); // -1
console.log( arr.indexOf(number2) ); // 2

 

---

5. 객체 배열 내장 함수 findIndex()

 

배열 안에 객체가 포함되어 있다면 includes나 indexOf 함수를 사용하기 어렵다. 

 

객체 배열에 findIndex()를 사용하면 원하는 객체가 몇번째 index인지 알 수 있다.

 

findIndex()의 파라미터로는 콜백 함수를 전달해주면 된다. 콜백 함수는 각각의 요소들에 대해서 모두 순회를 하면서 사용하게 되기 때문에 element를 전달해주면 된다. 객체 배열에는 요소 하나하나가 모두 객체이다.

 

const arr = [
    { color : "red"},
    { color : "blue"},
    { color : "black"},
    { color : "green"}
];

console.log(arr.findIndex((elm)=>elm.color === "blue")); // 1

console.log(arr.findIndex((elm)=>
    { return elm.color === "green"
})); // 3

 

배열에 findIndex()를 사용하면 콜백 함수를 전달해서 콜백 함수가 true를 반환하는 첫번째 index를 반환한다.

 

만약 객체 배열안에 일치하는 객체 요소가 2개 이상 존재할 경우 가장 먼저 일치하는 요소의 index를 뱐환한다.

 

* 화살표 함수를 사용할 때 {}를 작성하게 되면 반드시 return을 함께 작성해야한다. return을 생략하면 {}도 생략.

 

---

6. 객체 배열 내장 함수 find()

 

배열에서 찾고자 하는 값에 직접적으로 접근하고 싶을 경우에는 find()를 사용하면 된다.

 

find()는 index를 리턴하는 것이 아니라 조건에 일치하는 요소를 바로 리턴해준다. 

 

const arr = [
    { color : "red"},
    { color : "blue"},
    { color : "black"},
    { color : "green"}
];

console.log(arr[arr.findIndex((elm)=>
    { return elm.color === "green"
})]); // { color: 'green' }

const idx = arr.findIndex((elm)=>elm.color === "blue");

console.log(arr[idx]); //{ color: 'blue' }

 

const arr = [
    { color : "red"},
    { color : "blue"},
    { color : "black"},
    { color : "green"}
];

const idx = arr.find((elm)=>elm.color === "blue");

console.log(idx); // { color: 'blue' }

 

---

7. 배열 필터링 내장 함수 filter()

 

filter()는 전달된 콜백 함수가 true를 반환하는 모든 요소를 배열로 반환해준다.
즉, 객체 배열 중 조건에 일치하는 객체만 반환해준다. 

 

const arr = [
    { num : 1, color : "red"},
    { num : 2, color : "blue"},
    { num : 3, color : "black"},
    { num : 4, color : "green"},
    { num : 5, color : "black"}
];

const idx = arr.filter((elm)=>elm.color === "black");

console.log(idx); //[ { num: 3, color: 'black' }, { num: 5, color: 'black' } ]

 

---

8. 배열을 잘라주는 내장 함수 slice()

 

slice( begin, end )는 end-1까지 배열을 잘라서 새로운 배열로 반환한다.

 

const arr = [
    { num : 1, color : "red"},
    { num : 2, color : "blue"},
    { num : 3, color : "black"},
    { num : 4, color : "green"},
    { num : 5, color : "black"}
];

console.log( arr.slice(0,2) ); // [ { num: 1, color: 'red' }, { num: 2, color: 'blue' } ]

 

---

9. 배열을 붙여주는 내장 함수 concat()

 

concat()은 첫번째 명시해준 배열 뒤로 concat()의 파라미터로 전달한 두번째 명시된 배열을 붙여 하나의 배열로 리턴해준다. 

 

const arr1 = [
    { num : 1, color : "red"},
    { num : 2, color : "blue"}
];

const arr2 = [
    { num : 3, color : "black"},
    { num : 4, color : "green"},
    { num : 5, color : "yellow"}
]

console.log( arr1.concat(arr2) );

// [
//     { num: 1, color: 'red' },
//     { num: 2, color: 'blue' },
//     { num: 3, color: 'black' },
//     { num: 4, color: 'green' },
//     { num: 5, color: 'yellow' }
// ]

 

---

10. 배열 정렬 내장 함수 sort()

 

sort()는 원본 배열을 순서대로 정렬해준다. 

 

let chars = [ "딩", "깅", "닝" ];

chars.sort();

console.log(chars); // [ '깅', '닝', '딩' ]

 

sort()는 숫자 배열일 경우 배열을 숫자를 기준으로 정렬하는 것이 아니라 문자열을 기준으로 정렬하기 때문에 숫자 순서대로 정렬이 되지 않는다. 

 

let numbers = [ 109,35445,12 ];

numbers.sort();

console.log(numbers); // [ 109, 12, 35445 ]

 

---

11. 배열의 모든 요소를 문자열 형태로 합치는 내장 함수 join

 

join()을 통해 배열에 존재하는 요소들을 문자열 형태로 하나로 합쳐 사용할 수 있다.

 

join() 안에 아무 것도 써주지 않으면 디폴트로 ,를 사용해 연결이 된다. 즉 원하고자 하는 문자열 형태가 있다면  join() 안에 전달하는 구분자를 명시해줘야한다.

 

const arr = ["2chaechae", "블로그", "입니다", "안녕하세여"];

console.log(arr.join()); // 2chaechae,블로그,입니다,안녕하세여
console.log(arr.join(" ")); // 2chaechae 블로그 입니다 안녕하세여