JavaScript + a | Basics (2)

Soojong Kim·2021년 6월 13일

배열(Array)

Array는 object(객체)의 종류 중 하나로 object 자료형이다.
Array는 배열 혹은 리스트(List)라고도 불린다. 데이터를 순차적으로 담도록 도와준다.

배열의 정의 및 특징

배열을 사용하면 많은 변수를 생성하지 않고, 하나의 변수에 모든 데이터를 가지고 있을 수 있다. 배열을 사용할 때는 [ ] Bracket 을 사용한다.
길이를 알고싶으면? 배열.length를 이용한다.
안에 값을 조회하려면? 배열.[순서번호]로 접근한다.
새로운 값을 추가하고 싶다면? 배열.push(값)을 이용한다.

배열의 index

배열의 요소는 순서(index)를 가지고 있다. index는 0부터 시작이다.
let anything = ["서울", 1992, ["하나", "둘", 3]];
"서울"은 String형이고 index가 0이다. Number형인 1992는 index가 1, Array형인 ["하나", "둘",3]은 index가 2이다.

let productNames = ['농구공', '축구공']; // array 자료형 []
let productIds = [10, 20]; // array안에는 모든 자료형을 넣을 수 있다.
let productNestArray = [[0, 1, 2], [3, 4, 5]] // array안에 array도 가능

// productNames의 길이를 알고 싶다면?
let length = productNames.length

// productNames의 첫번째 인자의 값을 접근하고 싶다면?
let firstValue = productNames[0]; 
let secondValue = productNames[1];

// productNames에 새로운 값을 추가하고 싶다면?
productNames[2] = '노션 글'; // array의 3번째에 값을 넣는다.
productNames.push('노션 글'); // array의 마지막에 '노션 글' 값을 넣는다.

JavaScript 변수 내부에 무언가를 이용하려고 할 때 . 혹은 [ ] 를 이용한다.

1. 아래 조건을 읽고 이행해주세요.

getElement 함수안에 arr 변수를 선언했습니다.

arr 변수는 배열을 할당했고요, 배열에는 다양한 데이터 타입의 요소가 들어있네요!

배열이 담긴 arr 변수에 접근하여 getElement 함수가 "array" 라는 문자열을 return 할 수 있도록 해주세요.

2. addFirstAndLast 함수를 작성해주세요.

addFirstAndLast 함수에 주어진 인자 myArray는 숫자 값으로만 이루어진 array 입니다.

addFirstAndLast 함수에 주어진 인자 myArray 의 첫번째 element와 마지막 element의 값을 더한 값을 리턴해주세요.

만일 myArray에 한 개의 요소만 있다면 해당 요소의 값을 리턴해 주시고 요소가 없는 비어있는 array라면 0을 리턴해주세요.
// 1.
function getElement() {
  let arr = [3, [4, ["array", 9], 2+3], [0]];
  return arr[1][1][0];
}
// 2.
function addFirstAndLast (myArray) {
  if (myArray.length === 1) {
  return myArray[0];
} else if (myArray.length === 0) {
  return 0;
  }
let firstElement = myArray[0];
let lastElement = myArray[myArray.length -1];
let total = firstElement + lastElement;
return total;
}
for문(반복문)

반복문은 적혀진 코드를 반복적으로 실행시켜 준다.
첫 번째 구문 : 처음 변수를 선언한다.
두 번째 구문 : 해당 연산 결과가 false가 될 때까지 코드를 반복시킨다.
세 번째 구문 : i를 1씩 증가시킨다.

// 기본 반복문
// 첫 번째 변수를 선언하고
// 두 번째 조건이 false가 되기 전까지 코드 실행
// 세 번째 i++ 는 i를 1씩 더해라
for (let i = 0; i < 10; i++) {
  console.log("김개발"); // 총 10번 호출 
}
for (반복조건) {
  // 반복조건이 맞으면 실행할 코드
}

for 문에서 사용 되는 변수 i는 안에서 사용이 가능하다. 안에 코드가 실행될 때 몇 번째 호출되고 있는지 알기 위해 사용

for (let i = 0; i < 10; i++) {
  let text = (i + 1) + '번째 호출입니다'; // i는 0부터 9까지 순차적으로 들어감
  console.log(text);
}

반복문 내부의 조건문

const home = "서울";
const cities = ["서울", "대전", "대구", "인천", "춘천"];

for (let i = 0; i <= 5; i++) {
  if (cities[i] === home) {
    console.log("아, " + cities[i] + "사시는군요!");
  }
}

// Array를 활용한 반복문
let products = ['농구공', '축구공'];
for (let i = 0; i < products.length; i++) {
  let name = products[i]; // i는 0, 1이 차례대로 들어간다. array의 1번째, 2번째 값을 가져온다.
	console.log(name);
}

반복문의 다양한 활용

for (let i = 2; i < 10; i = i + 2)

i는 2부터 증가하여 10보다 작을 때까지 2씩 증가시키면서 for문을 돌린다.
i가 2, 4, 6, 8 으로 2씩 증가하며 for 문을 총 4번 반복```

for (let i = 10; i > 7; i--)

i는 10부터 시작하여 7보다 클때까지 1씩 감소하면서 코드를 실행한다.
i가 10, 9, 8으로 1씩 감소하여 총 3번 반복

findSmallestElement 함수를 구현해 주세요.

findSmallestElement 의 arr 인자는 숫자 값으로만 이루어진 배열입니다.

arr 의 값들 중 가장 작은 값을 리턴 해주세요.

만일 arr 가 비어있으면 0을 리턴 해주세요.

예를 들어, 다음과 같은 배열이 인자(input)으로 들어왔다면 1이 리턴 되어야 합니다.
[20, 200, 23, 1, 3, 9]
  function findSmallestElement(arr) {
  if(arr.length === 0) {
    return 0;
  } else {
    let min = arr[0]
    for ( i = 0; i < arr.length; i++) {
      if (min > arr[i]) {
        min = arr[i];
      } 
    }return min;
  } 
}

배열 조작하기

요소추가

push / unshift 메소드

let cities = [];
cities.push("서울", "인천");
cities.unshift("인천");

push() , unshift() 메소드는 배열에 요소를 추가해주는 함수이다.

push는 배열의 마지막 부분, 꼬리!

unshift는 배열의 앞 부분, 머리!

pop은 배열의 뒷 부분을 잘라냄

divideArrayInHalf 함수를 다음과 같이 구현해주세요.
divideArrayInHalf 함수는 array를 인자로 받습니다. 이 array는 숫자 값으로 만 구성되어 있으며 총 5개의 요소(element)들로 구성되어 있습니다.

divideArrayInHalf 함수는 인자로 들어온 array 로 부터 새롭게 구성된 배열 result 을 리턴합니다.

array 요소들 중 10과 같거나 작은 값의 요소들은 result의 맨 앞으로, 10보다 큰 값의 요소들은 result의 맨 뒤로 재구성된 배열을 리턴 해주세요.

재구성이 되는 순서는 array의 맨 뒤 요소부터 맨 앞 요소까지 입니다. 즉, 배열의 뒷 요소 부터 재구성을 진행해주세요.
예를 들어, 인자로 들어오는 array가 다음과 같을 때,
[1, 20, 10, 5, 100]
result 배열이 만들어 지는 순서는 다음과 같습니다.
[100]

[5, 100]

[10, 5, 100]

[10, 5, 100, 20]
[1, 10, 5, 100, 20]
따라서 아래와 같은 result가 리턴 되어야 합니다.
[1, 10, 5, 100, 20]
function divideArrayInHalf(arr) {
  let result = [];
  for (let i = arr.length; i >= 0; i--) {
  if (arr[i] <= 10 ) {
  result.unshift(arr[i])
} else if (arr[i] > 10) {
  result.push(arr[i])  
    }
  }
  return result;
}

String

문자길이

배열의 길이는 length 속성으로 알 수 있다.
문자인 String형도 length라는 속성으로 길이를 확인할 수 있다.

let phoneNumber = "01012345678";

console.log(phoneNumber);
console.log(phoneNumber.length);

문자열 찾기

indexOf 메소드는 문자열에 특정 문자열이 들어있는지 확인하고, 만약 있다면 몇 번째 순서에 해당하는 문자열인지 알려준다. 해당 문자열이 없다면 -1을 반환한다.

let info = "JavaScript는 프로래밍 언어이다.";
let firstChar = info.indexOf("프로래밍"); 

console.log(info, firstChar);

if (firstChar !== -1) { 
  info = info.slice(0, firstChar) + "프로그래밍" + info.slice(firstChar+4, info.length); 
}

console.log(info);

slice 메소드는 이름 그대로, 텍스트를 잘라주는 함수이다.
slice(잘릴 시작위치, 잘릴 끝위치)

그 후 sliceCityFromAddress 함수를 구현해 주세요.

sliceCityFromAddress 함수는 address 를 인자로 받습니다.

address 는 주소를 나타내는 string 입니다.

주어진 주소가 어느 도시 인지를 찾아 해당 주소에서 도시 부분만 삭제한 새로운 주소를 리턴해 주세요.

도시는 무조건 "시" 로 끝납니다. 예를 들어, "서울시".

"도" 와 "시" 는 주소에 한번 밖에 포함되어 있지 않습니다.

예를 들어, 다음과 같은 주소가 주어졌다면;
function sliceCityFromAddress (address) {
  let province = address.indexOf("도");
  let city = address.indexOf("시");
  if (province !== -1 && city !== -1) {
    return address.slice(0, province+1) + address.slice(city+1);
} else if( province == -1 && city !== -1) {
  return address.slice(city + 2);
} else {
  return address;
  }
}

String <-> Number

자바스크립트는 텍스트로 표현된 숫자는 숫자로 바꿔서 계산을 해야한다.
Number 함수를 사용해 String형에서 Number형으로 전환 가능하다.
var birthYearInput = "2000";
console.log(typeof birthYearInput);
var numberBirthYear = Number(birthYearInput);
console.log(typeof numberBirthYear);
// 반대로 Number형에서 String형으로 변환해야 할 때는 
var numberAsNumber = 1234; 
var numberAsString = numberAsNumber.toString();
nationalPensionRemainingYearCount 함수를 구현해주세요.

우리나라는 국민연금을 만 65세 부터 받을 수 있습니다.

nationalPensionRemainingYearCount 는 age_string 이라는 input을 받습니다.

age_string 은 나이 값인데 string형 값으로 되어 있습니다.

주어진 나이부터 몇년이 지나야 국민연금을 받을수 있는지 리턴 해주세요.
function nationalPensionRemainingYearCount(age_string) {
  let age = Number(age_string)
  let pension = 65 - age;
  return '앞으로 ' + pension + '년 ' + '남으셨습니다';
}
날짜와 시간

날짜 객체를 호출하면 쉽게 시간과 날짜를 얻을 수 있다.
날짜 객체를 생성할 때는 다음과 같이 new 연산자와 Date 생성자를 쓴다.
let rightNow = new Date();
console.log(rightNow);

Date 객체로 현재 시간을 가져온 후, Date 객체가 가지고 있는 함수로 각 날짜, 시간의 값을 가져올 수 있다.
let rightNow = new Date();
let year = rightNow.getFullYear();
let month = rightNow.getMonth()+1;
let date = rightNow.getDate();
let day = rightNow.getDay();
let currentHour = rightNow.getHours();
let currentMin = rightNow.getMinutes();
getMonth 메서드는 현재 달보다 1 작은 값을 반환!

getTime

let rightNow = new Date();
let time = rightNow.getTime();

getTime은 1970년 1월1일 기준으로 반환된 숫자로 비교연산을 통해 언제가 더 과거인지 판단이 가능하다. 값이 더 작아야 과거이다!

특정 날짜의 Date

let date1 = new Date('December 17, 2019 03:24:00');
let date2 = new Date('2019-12-17T03:24:00');
let date3 = new Date(2019, 5, 1);

미국을 비롯해 전세계 대부분의 나라들이 생일을 기준으로 나이를 계산 합니다. 쉽게 말해 미국은 태어나자마자 0살이고 생일을 지나야 비로소 한 살이 됩니다. 반면에 한국은 태어나자마자 1살이고 연도가 바뀔 때마다 한 살씩 먹습니다.
예를 들어 미국에서는 1995년 9월 12일에 태어났으면 1995년 9월 12일에는 0살이고 1996년 9월 12일이 되야 1살이 됩니다. 그에 비해 한국에서는 1995년 9월 12일에 태어나자마자 1살이고 1996년 1월 1일에 2살이 됩니다.
1살 차이도 크게 생각하는 우리나라 고유의 문화에 비롯한 계산법이 아닌가 추측해 봅니다. 미국이나 다른 나라가 사용하는 나이 계산법은 우리나라에서는 만 나이 라고 하죠.

앞서 말한 만으로 계산한 나이를 구하는 함수인 getWesternAge 함수를 구현해 봅시다.

이 함수는 birthday 라는 인자를 받습니다.

이 birthday 는 Date 객체 입니다. birthday 라는 인자를 넣었을 때, 현재를 기준으로 만으로 계산한 나이를 리턴 해주세요.

birthday 는 string이 아닌 Date 객체라는 걸 명심하세요 :)
function getWesternAge(birthday) {
  let rightNow = new Date();
  let age = rightNow.getFullYear() - birthday.getFullYear();
  // 현재 연도에서 생일 연도를 뺀 값을 age 로 한다.
  let thisMonth = rightNow.getMonth();
  let thisDate = rightNow.getDate();
  let birthMonth = birthday.getMonth();
  let birthDate = birthday.getDate();
    if (birthMonth < thisMonth) {
    return age;
    } else { (thisMonth < birthMonth)
    return age -1;
    }
    if (thisDate > birthDate) { 
    return age;
    } else {
    return age -1;
    }
} 

Number

round, ceil, floor

round는 반올림 메소드
ceil은 올림 메소드
floor 내림 메소드

랜덤함수

let randomNumber = Math.random();
console.log(randomNumber);

이 랜덤수에서 원하는 범위의 랜덤수를 설정할 수 있다.

let randomNumber = Math.random();
console.log(Math.floor(randomNumber*10));

소수자리는 내림함수를 사용하여 0~ 10 사이의 랜덤수를 구할 수 있다.

최소(min), 최대값(max)을 받아 그 사이의 랜덤수를 return 하는 함수를 구현해주세요.

함수는 짧지만, 이번에는 수학의 뇌를 조금 써야 하는 assignment 입니다. 🙌

앞으로 랜덤함수를 쓸 일이 정말 많습니다.

그런데 Math.random() 으로는 내가 원하는 범위의 랜덤수를 얻을 수가 없습니다.

항상 0.0000000000000000에서 0.9999999999999999 사이 값만 return 해주기 때문이죠.
function getRandomNumber (min, max) {
 return Math.floor(Math.random() * (max - min + 1)) + min;
}
// 

Object (2)

객체 규칙

property 이름은 중복될 수 없다.

property 이름과 property값 사이에 :(콜론) 으로 구분한다.

Property 를 추가 할 때는 ,(쉼표) 를 붙여준다.

property 값은 어느 type이나 가능하다.

객체의 property 값을 접근하고 싶을 때는

마침표(.)연산자를 사용하여 객체명은 왼쪽, property명은 오른쪽에 위치한다.
대괄호([ ] )를 사용하여, 접근하려는 객체명은 왼쪽, property 명은 쌍따옴표("")와 함께 대괄호 안에 작성한다.

let myObj = {
  property1: "hello",
  property2: [1, 2, 3, 4, 5],
  property3: {
    childproperty: "haha" 
}  
};

let name = "property";
console.log(myObj[name + "1"]);
console.log(myObj[name + "2"]);
console.log(myObj[name + "3"]);
console.log(myObj[name + "3"]["childproperty"]);

console.log(myObj.property1);
console.log(myObj.property2);
console.log(myObj.property3);
console.log(myObj.property3.childproperty);

객체를 정의한 후에 property 값을 수정할 수 있다!

let name = "property1";

myObj[name] = ["hi", "hello"];

console.log(myObj); // 결과: ['hi', 'hello']

문자열이 배열로 바뀌는 걸 확인할 수 있다.

지난시간에 언급한 요소에 접근하는 방법은 index를 사용해서 접근할 수 있다.

getData 함수를 구현해주세요!

**getData 함수는 세 개의 배열을 인자로 받습니다.**

salesArr : 날짜별 판매량

ex) [["20190401", 34], ["20190402", 23], ["20190403", 29]]

reviewArr : 날짜별 리뷰수

ex) [["20190328", 3], ["20190401", 0], ["20190403", 1]]

likeArr : 날짜별 좋아요수

ex) [["20190328", 98], ["20190401", 102], ["20190403", 125]]

다음 요구사항을 충족하는 객체를 만들어서 return 해주세요.

리턴되는 객체는 아래와 같이 3개의 property를 가집니다.

sumAmount : 총 판매량

sumReview : 총 리뷰개수

sumLike : 총 좋아요수
function getData(salesArr, reviewArr, likeArr) {
  let sumAmount = 0;
  let sumReview = 0;
  let sumLike = 0;
  for(let i in salesArr) {
    sumAmount += salesArr[i][1];
}
  for(let i in reviewArr) {
    sumReview += reviewArr[i][1];
}
  for(let i in likeArr) {
    sumLike += likeArr[i][1];
  }
  let objData = {
  sumAmount: sumAmount,
  sumReview: sumReview,
  sumLike: sumLike
};
  return objData;
}

Soojong Kim

이전 포스트

JavaScript + a | Basics

다음 포스트

JavaScript + a | Basics (2)

배열(Array)

배열의 정의 및 특징

배열의 index

1. 아래 조건을 읽고 이행해주세요.

2. `addFirstAndLast` 함수를 작성해주세요.

for문(반복문)

반복문 내부의 조건문

반복문의 다양한 활용

findSmallestElement 함수를 구현해 주세요.

배열 조작하기

요소추가

push / unshift 메소드

divideArrayInHalf 함수를 다음과 같이 구현해주세요.

String

문자길이

문자열 찾기

그 후 sliceCityFromAddress 함수를 구현해 주세요.

String <-> Number

nationalPensionRemainingYearCount 함수를 구현해주세요.

날짜와 시간

getTime

특정 날짜의 Date

앞서 말한 만으로 계산한 나이를 구하는 함수인 getWesternAge 함수를 구현해 봅시다.

Number

round, ceil, floor

랜덤함수

최소(min), 최대값(max)을 받아 그 사이의 랜덤수를 return 하는 함수를 구현해주세요.

Object (2)

getData 함수를 구현해주세요!

JavaScript + a | Basics

JavaScript + a | Basics (3)

0개의 댓글

JavaScript + a | Basics (2)

배열(Array)

배열의 정의 및 특징

배열의 index

1. 아래 조건을 읽고 이행해주세요.

2. addFirstAndLast 함수를 작성해주세요.

for문(반복문)

반복문 내부의 조건문

반복문의 다양한 활용

findSmallestElement 함수를 구현해 주세요.

배열 조작하기

요소추가

push / unshift 메소드

divideArrayInHalf 함수를 다음과 같이 구현해주세요.

String

문자길이

문자열 찾기

그 후 sliceCityFromAddress 함수를 구현해 주세요.

String <-> Number

nationalPensionRemainingYearCount 함수를 구현해주세요.

날짜와 시간

getTime

특정 날짜의 Date

앞서 말한 만으로 계산한 나이를 구하는 함수인 getWesternAge 함수를 구현해 봅시다.

Number

round, ceil, floor

랜덤함수

최소(min), 최대값(max)을 받아 그 사이의 랜덤수를 return 하는 함수를 구현해주세요.

Object (2)

getData 함수를 구현해주세요!

JavaScript + a | Basics

JavaScript + a | Basics (3)

0개의 댓글

2. `addFirstAndLast` 함수를 작성해주세요.