[12/8] DAY4 자바스크립트 공부

4일 차 진도

 

 

 

 

 

배열

순서가 있는 요소들의 집합. 여러 개의 항목들이 모여 있는 리스트

 

 

 

 

 

배열 생성법

 

1. 생성자

let arr = new Array(); // []

let array1 = new Array1(1,2,3); // [1,2,3]
let array2 = new Array2(3); // [undefined,undefined,undefined]

 

배열 생성자에 값을 할당 때는 특정 요소를 넣으려면 여러 개의 값을 넣으면 되고,  원하는 크기의 공간을 할당하려면  원하는 공간의 크기를 괄호 안에 작성해 주면 된다.

 

 

 

2. 배열 리터럴

let arr = []; // []

let array1 = [1,2,3] // [1,2,3]
let array2 = [3] // [3]

 

배열 리터럴을 통해 배열을 생성하고, 배열에 값을 넣게 되면 그 값이 순서대로 배열 요소로 저장되게 된다.

 

객체 프로퍼티와 마찬가지로 타입에 상관없이 모든 값을 넣을 수 있다.

 

 

 

 

 

배열 요소 접근

 

배열은 순서가 있는 요소들의 집합. 객체와 다르게, 데이터를 구분하는 key값이 존재하지 않는다. 데이터가 위치한 순서인 index를 통해 배열 요소에 접근할 수 있다.

 

let arr = [1, “hello”, null];

console.log(arr[0]); // 1
console.log(arr[1]); // hello
console.log(arr[2]); // null

배열 인덱스에 맞는 배열 요소들이 알맞게 순서대로 출력

 

 

 

 

 

배열 요소 추가

 

1. push 메서드

let arr = [1, “hello”, null];

arr.push(4);

console.log(arr); // [1, “hello”, null, 4]

push는 배열 이름 뒤에 작성되며, push의 인수로 전달된 값이 배열의 맨 마지막 요소로 추가된다.

 

 

 

2. unshift 메서드

let arr = [1, “hello”, null];

arr.unshift(0);

console.log(arr); // [0, 1, “hello”, null]

 

 unshift 메서드는 배열 요소의 가장 앞쪽에 특정 값을 추가할 때 사용한다.

 

 

 

 

 

배열 요소 수정

 

배열은 인덱스로 배열 요소에 직접 접근해서 수정 가능하다.

let arr = [1, “hello”, null];

arr[0] = 5;
arr[2] = undefined;

console.log(arr); // [5, “hello”, undefined]

 

객체와 마찬가지로 const로 선언된 배열도 수정 가능하다. 배열 요소를 수정할 뿐, 배열 자체를 수정하는 것이 아니기 때문!

 

 

 

 

 

배열 요소 삭제

 

1. pop 메서드

let arr = [1, “hello”, null];

arr.pop();

console.log(arr); // [1, “hello”]

 

맨 마지막 요소인 null이 삭제된 것을 확인할 수 있다.

 

 

 

2. shift 메서드

let arr = [1, “hello”, null];

arr.shift();

console.log(arr); // [“hello”,null]

 

가장 앞에 있는 요소인 1이 삭제된 것을 확인할 수 있다

 

 

 

 

 

배열의 길이 

let arr = [1, “hello”, null];

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

 

length를 사용하면 배열 요소의 개수를 알 수 있다.

 

 

 

 

 

 

반복문

특정 작업을 반복적으로 수행할 때 사용

 

1. for문

for(let i = 1; i < 6; i++){
	console.log(i);
}

i의 초기값을 1로 할당한다. 그리고 i가 6보다 작다는 조건에 부합하면, for문에 속한 코드를 실행하고 이후 증감식 i++을 통해 i의 값을 2로 올린다.  조건을 벗어날 때까지 반복한다.

 

 

 

2. while문

let i = 1;

while(i<6){
	console.log(i);
	i++
}

특정 조건이 참이라면 해당 코드를 반복 수행

 

 

 

 

 

for문을 이용해 모든 배열 요소에 접근

let arr = [1,2,3,4,5];
	for(let i = 0; i < arr.length; i++){
	console.log(arr[i]);
}

 

1부터 5까지 모든 배열 요소가 순서대로 출력된다. 만약 객체 프로퍼티를 반복문으로 순회하기 위해서는, 배열의 형태로 변경해야 한다.

 

 

 

 

 

객체를 배열로 변경

 

1. Object.keys

매개변수로 받은 객체의 key들을 모두 찾아 배열의 형태로 반환함

 

let person = {
    name : “이용진”,
    age : 24,
    height : 179,
};

console.log(Object.keys(person)); // [“name”, “age”, “height”]

 

key값들이 배열의 형태로 반환되는 것을 확인할 수 있다.

 

 

 

let person = {
    name : “이용진”,
    age : 24,
    height : 179,
};

let newArray = Object.keys(person);

for(let i = 0; i<newArray.length; i++){
    let nowKey = newArray[i];
    console.log(`key: ${nowKey}, value: ${person[nowKey]}`
}

 

newArray라는 변수에 person 객체의 키 값들을 모아놨기에, 이를 활용해서 객체의 프로퍼티 값을 모두 출력할 수 있다.

 

 

 

2. Object.values

매개변수로 받은 객체의 value들을 모두 찾아 배열의 형태로 반환

 

let person = {
    name : “이용진”,
    age : 24,
    height : 180,
};

console.log(Object.values(person)); // [“이용진”,24,179]

 

value값들이 배열의 형태로 반환되는 것을 확인할 수 있다.

 

 

let person = {
    name : “이용진”,
    age : 24,
    height : 179,
};

let newArray = Object.values(person);

for(let i = 0; i<newArray.length; i++){
    console.log(`value: ${newArray[i]}`
}

 

Object.values를 이용하면, newArray라는 변수에 바로 객체 프로퍼티의 값들이 저장되기 때문에 key값을 알 필요 없이 바로 객체 프로퍼티의 값들을 출력할 수 있다~

 

 

 

3. Object.entries

매개변수로 받은 객체의 key와 value쌍을 배열에 담아 다시 배열의 형태로 반환

 

let person = {
    name : “이용진”,
    age : 24,
    height : 180,
};

console.log(Object.entries(person)); // [ [ 'name', '이용진' ], [ 'age', 24 ], [ 'height', 180 ] ]

let person = {
    name : "이용진",
    age : 24,
    height : 179,
};

let newArray = Object.entries(person);

for(let i = 0; i<newArray.length; i++){
    console.log(`key: ${newArray[i][0]}, value: ${newArray[i][1]}`)
};

 

 

 

 

 

추가적인 반복문 

 

1. for of

배열의 모든 요소에 접근해야 할 때 사용 

 

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

for(let i of arr){
    console.log(i);  
}

 

1~5가 순서대로 출력된다

 

 

 

2. for in 

주로 객체에서 사용되며 , for문과 다르게 객체의 모든 프로퍼티들을 바로 순회할 수 있도록 도와준다.

 

let person = {
    name : "이용진",
    age : 24,
    height : 179,
};

for (let key in person){
	console.log(`key : ${key}, value : ${person[key]}`)
}

 

 

 

 

[4일 차 QUIZ]

4일 차 QUIZ

 

 

 

4일 차 QUIZ 정답