데이터
const arr1 = [21, 54, 31]
const arr2 = [74, 63, 26]
const obj1 = {
title: '제목1',
content: '내용1',
createdAt: new Date(2022, 1, 31),
updatedAt: new Date(2023, 4, 7),
}
const obj2 = {
title: '제목2',
content: '내용2',
createdAt: new Date(2022, 3, 11),
updatedAt: new Date(2023, 6, 2),
}문제1
arr1 과 arr2를 합치기
답: [21, 54, 31, 74, 63, 26]
비고: Array.prototype.concat()
Array 인스턴스의 concat() 메서드는 두 개 이상의 배열을 병합하는 데 사용됩니다. 이 메서드는 기존 배열을 변경하지 않고, 새 배열을 반환합니다.
풀이
const arr1 = [21, 54, 31]
const arr2 = [74, 63, 26]
const obj1 = {
title: '제목1',
content: '내용1',
createdAt: new Date(2022, 1, 31),
updatedAt: new Date(2023, 4, 7),
}
const obj2 = {
title: '제목2',
content: '내용2',
createdAt: new Date(2022, 3, 11),
updatedAt: new Date(2023, 6, 2),
}
arr3 = arr1.concat(arr2)
console.log(arr3)문제2
arr1 의 1번 인덱스와 obj2의 content 항목을 합치기
답:54내용2
비고: array의 인덱스를 가져오는데는 []를 사용. 순서는 0부터 셈. 오브젝트의 value를 가져오려면 obj2.key 이런식으로 치면 value가 따라옴.
풀이
const arr1 = [21, 54, 31]
const arr2 = [74, 63, 26]
const obj1 = {
title: '제목1',
content: '내용1',
createdAt: new Date(2022, 1, 31),
updatedAt: new Date(2023, 4, 7),
}
const obj2 = {
title: '제목2',
content: '내용2',
createdAt: new Date(2022, 3, 11),
updatedAt: new Date(2023, 6, 2),
}
console.log(arr1[1]+obj2.content);문제3
obj1의 content를 obj2의 title 값으로 바꾸기
답: obj1 출력 시,
{
title: '제목1',
content: '제목2',
createdAt: new Date(2022, 1, 31),
updatedAt: new Date(2023, 4, 7),
}
비고: = 은 오른쪽 데이터를 왼쪽에 집어 넣는다는 의미임. obj2의 title key의 value를 obj1의 content라는 key에 집어넣고 출력함.
풀이
const arr1 = [21, 54, 31]
const arr2 = [74, 63, 26]
const obj1 = {
title: '제목1',
content: '내용1',
createdAt: new Date(2022, 1, 31),
updatedAt: new Date(2023, 4, 7),
}
const obj2 = {
title: '제목2',
content: '내용2',
createdAt: new Date(2022, 3, 11),
updatedAt: new Date(2023, 6, 2),
}
obj1.content = obj2.title
console.log(obj1)문제4
arr2를 순서대로 출력하기
답:
74
63
26
비고: for 루프를 사용해서 배열 arr2를 순회함. 루프 변수 i는 0에서 시작하여 arr2의 길이보다 작을 때 까지 1씩 증가함.
for 루프를 시작함.-> i라는 변수를 0으로 초기화하고, arr2의 배열의 길이보다 작을 때 까지 반복함.(.length:문자열이나 배열의 속성(property), arr2.length는 배열의 길이를 나타냄. 3개의 요소를 가지고 있으므로 arr2.length는 3이 됨)-> i를 1씩 증가시킴(i++ === i=i+1)
for문
for([초기문]; [조건문]; [증감문])
문장
*초기문 : 보통 1이나 반복문 카운터로 초기설정이 됨. 구문으로 표현하거나 변수(let)으로 선언되기도 함.
*조건문 : 조건을 검사함. 조건문이 참이라면 그 반복문이 실행됨, 조건이 거짓이라면 for문은 종결. 조건문이 생략되면 참이라고 추청
*증감문이 존재하면 실행되고 조건문으로 돌아감예시
for (let i=0; i <3; i++) alert(i)
// begin을 실행함
let i = 0
// condition이 truthy이면 → body를 실행한 후, step을 실행함
if (i < 3) { alert(i); i++ }
// condition이 truthy이면 → body를 실행한 후, step을 실행함
if (i < 3) { alert(i); i++ }
// condition이 truthy이면 → body를 실행한 후, step을 실행함
if (i < 3) { alert(i); i++ }
// i == 3이므로 반복문 종료
풀이
const arr1 = [21, 54, 31]
const arr2 = [74, 63, 26]
for (i=0; i<arr2.length; i++) {
console.log(arr2[i])
}
더 간단하게
for (num of arr2) {
console.log(num)
}문제5
arr1과 arr2를 index 별로 합친 값을 출력하기
답:
95
117
57
비고:
1.arr1, arr2 변수선언, 값을 바꿔줌. 정수를 담고있는 배열
2.for 루프를 시작함. i라는 변수를 0으로 초기화하고 i가 arr1의 배열의 길이보다 작을 때 까지 반복됨
3. 각 루프에서 arr1[i], arr2[i] 를 더한 값을 콘솔에 출력함. i는 현재 루프에서의 인덱스를 나타냄.
풀이
const arr1 = [21, 54, 31]
const arr2 = [74, 63, 26]
for ( i=0; i < arr1.length; i++){
console.log(arr1[i] + arr2[i])
}
문제6
arr1과 arr2를 index별로 문자열로 합친 값을 출력하기
답:
2174
5463
3126
비고 :
1.반복문을 시작함. i를 0으로 초기화하고, arr1의 길이보다 작은 동안 반복함.
2. 현재 반복중인 인덱스 'i'에 대한 'arr1'의 요소와 'arr2'의 요소를 문자열로 변환하여 이여붙여 콘솔에 출력.
풀이
const arr1 = [21, 54, 31]
const arr2 = [74, 63, 26]
for (i=0; i<arr1.length; i++) {
console.log(arr1[i] + '' + arr2[i])
}
더 명확하게
for (i=0; i<arr1.length; i++) {
console.log(String(arr1[i]) + String(arr2[i]))
}문제7
빈 배열을 만들고, 'apple' 이라는 값을 가진 500개 요소를 담은 뒤 출력해주세요
답: [생략]
비고 :
1. for 루프를 시작함. 'let i=0'은 루프변수 'i'를 0으로 초기화 함
2. i< 500 은 루프를 반복할 조건문을 설정함. 'i'가 500보다 작을 때 까지 루프가 실행됨
3. 'i++'는 각 루프의 끝에서 'i'를 1 씩 증가시킴.
4. 루프 내부에서는 'arr3' 배열에 'apple'을 추가시킴.
풀이
const arr3 = [];
for (let i = 0; i < 500; i++) {
arr3.push('apple');
}
console.log(arr3);
이렇게 계산하는편이 연산량이 적음
const arr = new Array(500).fill('apple')
console.log(arr)문제8
arr1에서 40을 초과하는 요소를 찾아서 출력해주세요
답: 54
비고 :
1. for 루프 내에서 if 문 삽입
2. 루프 내부에서 현재 인덱스 'i'에 해당하는 arr1의 요소가 40을 초과하는지 확인하는 조건문 실행
3. 조건이 참이면 console.log(arr1[i])를 통해 요소를 콘솔에 출력.
풀이
const arr1 = [21, 54, 31]
const arr2 = [74, 63, 26]
for (let i = 0; i<arr1.length; i++){
if ( arr1[i] > 40 ) {
console.log(arr1[i])
}
}
더 명확함
arr1.filter((value) => {
if (value > 40) {
console.log(value)
}
})
문제9
arr1에서 40을 초과하는 요소의 index 값을 찾아서 출력해주세요
답: 1
비고 :
1. for 루프 시작
2. i가 arr1의 길이보다 작을 때 까지 계속 실행시킴. i++ 로 i를 1 씩 증가시킴.
3. 루프 내부에서 현재 인덱스 i에 해당하는 arr1의 요소가 40을 초과하는지 확인하는 조건문 실행.
4. 조건이 참이면 console.log(i)를 통해 해당 인덱스 i를 출력.
풀이
const arr1 = [21, 54, 31]
const arr2 = [74, 63, 26]
for ( i = 0; i < arr1.length; i++) {
if ( arr1[i] > 40){
console.log(i)
}
}
더 명확합니다
arr1.filter((value, index) => {
if (value > 40) {
console.log(index)
}
})문제10
arr2에서 37이 포함되어있는지 확인 하여 boolean으로 출력해주세요
답: false
비고:
1. 루프 내부에서 현재 인덱스 i에 해당하는 arr2의 요소가 37과 일치하는지 확인하는 조건문 실행.
2. 조건이 참이면 console.log(boolean(arr2[i])를 통해 해당 인덱스의 i 값을 boolean으로 변환하여 콘솔에 출력함.
풀이
const arr1 = [21, 54, 31];
const arr2 = [74, 63, 26];
for (let i = 0; i < arr2.length; i++) {
if (arr2[i] === 37) {
console.log(Boolean(arr2[i]));
}
}
포함 여부니 전체순회하지 않는 find가 훨씬 빠름
console.log(arr2.find((value) => value === 37) !== undefined ? true : false)문제11
arr1을 정렬해서 출력해주세요
답: [ 21, 31, 54 ]
비고:
1. 배열의 sort() 함수 : 해당 배열 내의 값들이 오름차순 정렬. 함수는 원래 배열 내에 값들을 재배치하며 정렬한 배열을 다시 반환.
*sort()함수는 정렬하기 전 배열 내의 값을 내부적으로 문자열로 변환함.
풀이
const arr1 = [21, 54, 31];
const arr2 = [74, 63, 26];
console.log(arr1.sort())문제12
arr2 앞에 89를 추가해서 출력해주세요
답: [ 89, 74, 63, 26 ]
비고 :
1. 메서드 체이닝 : 두개의 배열을 합칠 수 있음. push, apply
2. unshift 함수 사용. 배열 첫 번째 위치에 요소 추가.
3. ... 을 사용
*전개연산자(...)
전개 연산자(...)는 배열이나 문자열과 같은 이터러블(iterable)을 전개하여 각 요소를 분리하거나 묶을 때 사용됩니다. 배열의 각 요소를 개별적으로 추출하거나, 여러 요소를 합칠 때 유용합니다.
전개연산자로 배열 합치기
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]
전개연산자로 배열에 요소 추가
const arr1 = [1, 2, 3];
const newArr = [...arr1, 4, 5, 6];
console.log(newArr); // [1, 2, 3, 4, 5, 6]전개연산자로 함수에 인수 전달
const arr = [1, 2, 3];
const sum = (a, b, c) => a + b + c;
const result = sum(...arr);
console.log(result); // 6전개연산자로 배열 복사
const original = [1, 2, 3];
const copy = [...original];
풀이
1. ... 사용
const arr2 = [89, ...[74, 63, 26]];
console.log(arr2);
2. 메서드 체이닝 사용
const arr1 = [21, 54, 31];
const arr2 = [74, 63, 26];
const arr3 = [89];
arr3.push.apply(arr3, arr2);
console.log(arr3);
3. unshift 사용
const arr1 = [21, 54, 31];
const arr2 = [74, 63, 26];
const arr3 = [89];
arr3.unshift(...arr2);
console.log(arr3);
unshift 쓰는게 제일 명확하고 간결함
arr1.unshift(83)
console.log(arr1)문제13
obj1과 obj2를 key 별로 출력해주세요
답:
title
제목1
제목2
content
내용1
내용2
createdAt
2022-01-31T15:00:00.000Z
2022-03-11T15:00:00.000Z
updatedAt
2023-04-07T15:00:00.000Z
2023-06-02T15:00:00.000Z
비고 :
풀이
const arr1 = [21, 54, 31]
const arr2 = [74, 63, 26]
const obj1 = {
title: '제목1',
content: '내용1',
createdAt: new Date(2022, 1, 31),
updatedAt: new Date(2023, 4, 7),
}
const obj2 = {
title: '제목2',
content: '내용2',
createdAt: new Date(2022, 3, 11),
updatedAt: new Date(2023, 6, 2),
}
Object.keys(obj1).forEach(key => {
console.log(key)
console.log(obj1[key])
console.log(obj2[key])
})
ArrowFunction 쓰지 않고 풀어 쓴 것
const keys = Object.keys(obj1);
for (let i = 0; i < keys.length; i++) {
const key = keys[i];
console.log(key);
console.log(obj1[key]);
console.log(obj2[key]);
}문제14
obj1을 순회하면서 index 값과 함꼐 출력해주세요
답:
0
title
제목1
1
content
내용1
2
createdAt
2022-01-31T15:00:00.000Z
3
updatedAt
2023-04-07T15:00:00.000Z
비고:
풀이
const objectIndexKeys = Object.keys(obj1.title)
for (i = 0; i < objectIndexKeys.length; i++){
console.log(i)
const key = objectIndexKeys[i]
console.log(key)
console.log(obj1[key])
}
ArrowFunction
const objectIndexKeys = Object.keys(obj1);
objectIndexKeys.forEach((key, i) => {
console.log(i);
console.log(key);
console.log(obj1[key]);
});
문제15
obj2를 순회하면서 값만 출력해주세요
답:
제목2
내용2
2022-03-11T15:00:00.000Z
2023-06-02T15:00:00.000Z
비고 :
풀이
const objectValue = Object.values(obj2)
for ( i = 0; i < objectValue.length; i++){
console.log(objectValue[i])
}
ArrowFunction
Object.values(obj2).forEach((value) => { console.log(value)})