Daye Blog

기술면접_JavaScript_08_09

기술면접_JavaScript_08_09


프론트엔드 개발자 입문 | Array

Contents

  1. 배열의 개념과 생성·추가·삭제
  2. 유용한 배열함수
  • 드림코딩 유투브 채널의 JavaScript 기초강의 내용을 바탕으로 정리하는 포스팅입니다.
  • 영상에서 언급되지 않은 내용이 포함되어 있음
  • Tutorial Video_08
  • Tutorial Video_09

:bell: 배열의 개념과 생성·추가·삭제

배열이란?
배열은 일반적으로 동일한 타입의 자료를 담는 자료구조 (동적언어인 JavaScript의 경우, 다양한 타입의 자료를 담을 수 있으나 권장되지 않음)

생성·추가·삭제

Click to view how to declaration·deletion·addition
/*1. declaration의 두 가지 방법*/
const array1 = new Array();
const array2 = [1,2];



/*2. index position*/
const fruits = ['apple','banana','pear']; 
console.log(fruits[0]); //apple출력 
console.log(fruits[fruits.length -1]); //pear출력 



/*3. Looping over an array의 세 가지 방법*/
const fruits = ['apple','banana','pear']; 
//for
fot (let i=0; i<fruits.length; i++){
  console.log(fruits[i])
}
//for of (배열이 가진 모든 값들이 블럭을 돌 때마다 value에 할당되며 출력)
for (let fruit of fruits){
  cosole.log(fruit);
}
//forEach (for문과 마찬가지로 반복적인 기능을 수행할 때 사용하며 전달한 콜백함수를 value마다 호출(parameter: value, index, array))
fruits.forEach(function (fruit, index, array) {
  console.log(fruit); //출력결과 : apple, banana, pear
  console.log('he'); //출력결과 : 세 개의 'he'출력 



/*4. Addition*/
const fruits = ['apple','banana','pear']; 
//push: add an item to the end
fruits.push('orange', 'strawberry')
//unshift: add an item to the beginning (slower than pop: add후 요소이동이 필요함으로)
fruits.unshift('orange', 'strawberry')
//splice: remove then add an item by index position (요소가 삭제된 자리에 value추가)
fruits.splice(1,2,'mango')



/*5. Deletion*/
//pop: remove an item from the end
fruits.pop('orange', 'strawberry')
//shift: remove an item from the beginning (slower than push: delete후 요소이동이 필요함으로)
fruits.shift('orange', 'strawberry')
//splice: remove an item by index position (parameter: start(몇 번째 index부터 지울건지), deleteCount(Optional이며 몇 개를 지울건지를 나타냄/지정하지 않을 경우, start이후 전체 index삭제))
fruits.splice(1,2)



/*6. Combine two arrays*/
const fruits1 = ['apple','banana','pear']; 
const fruits2 = ['lemon','cherry'];
const newFruits = fruits1.concat(fruits2);



/*7. Searching*/
const fruits = ['apple','banana','pear','apple']; 
console.log(fruits.indexOf('apple')); //value의 index searching
console.log(fruits.LastindexOf('apple')); //중복된value가 존재할 경우, 마지막의 index searching
console.log(fruits.includes('apple')); //array에 value포함여부 확인

Array data structure


:bell: 유용한 배열함수

Click to view Array APIs
/*1. Make a string out of an array*/
const fruits = ['apples', 'banana', 'orange'];
const result = fruits.join(); //optional: 괄호 안separator입력



/*2. Make an array out of a string*/
const fruits = ['apples', 'banana', 'orange'];
const result = fruits.split(,); //parameter: separator / optinal : 괄호 안 limit입력



/*3. Make this array look like this: [5,4,3,2,1]*/
const array = [1,2,3,4,5]
const result = array.reverse();



/*4. Make new array without the first two elements*/
const array = [1,2,3,4,5]
const result1 = array.splice(0,2); //기존 배열에서 0-2 index삭제
const result2 = array.slice(0.2) //기존 배열의 복사본에서 0-2 index삭제


/*-----------------------------------------------------------------------------------*/


class Student {
  constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}
const students = [
  new Student('A', 29, true, 45),
  new Student('B', 29, false, 80),
  new Student('C', 29, true, 90),
  new Student('D', 29, false, 66),
  new Student('E', 29, true, 88)
];


/*5. Find a student with the score 90*/
const result = students.find(function(student, index){
  console.log(student, index) //students에는 다섯개의 index가 포함되어 있으므로 다섯개 정보 출력
  return student.score === 90; //score가 90인 첫 번째 value출력
}); 
//위 코드를 Arrow function으로 작성
const result = student.find(student) => student.score ===90;



/*6. Make an array of enrolled students*/
const result = students.filter(function(student){
  return student.enrolled === true;  
});
//위 코드를 Arrow function으로 작성
const result = students.filter((student) => student.enrolled)



/*7. Make an array containing only the student's scores (reuslt should be [45, 80, 90, 66, 88])*/
const result = students.map((student) => student.score); 
//mapping: 배열 안 개별요소를 다른것으로 변환 (위 코드에서는 name,age,enrolled,score를 포함하고 있는 sutdent를 받아 student.score로 변환해준 것)



/*8. heck if there is a student with the score lower than 50*/
const result = student.some((student) => student.score < 50); //한 명이라도 50점 이하가 있다면 true
const result = student.every((student) => student.score < 50); //전체가 50점 이하라면 true



/*9. compute student's average score*/
const result = students.reduce((previous, current) => {
  return previous + current.score; 
},0) //0: initial value / reduce: 콜백함수는 배열안 모든 요소마다 호출되며 누적값을 출력
console.log(result/students.length);


Appendix

  • Callback함수
    정의 : 다른 함수에 매개변수로 넘겨준 함수로, 넘겨받은 함수는 때가 되면 나중에 호출
    용도 : 순차적으로 코드를 실행하고자 할 때에 사용
    예시 :
    document.querySelector('.button').addEventListener('click', function()) {
      console.log('버튼 클릭 시 실행되는 코드')
    } //function: 콜백함수 (addEventListener라는 함수의 파라미터에 들어가 있는 함수이므로)
    
    setTimeout(function(){
      console.log('1초 후 실행되는 코드')
    }, 1000) //setTimeout: n초 뒤 코드를 실행시키는 기본함수로 콜백함수로 실행됨(즉, setTimeout에 콜백함수를 사용하여 나중에 호출(called back))
    
기술면접_JavaScript_08_09
Prev post

기술면접_JavaScript_07

Next post

기술면접_JavaScript_10

기술면접_JavaScript_08_09

Get in touch

Avenco comes with a built-in contact form.