21.4.13

커피 내리는 그냥 사람·2021년 4월 13일
JavaScriptTILWeCode기업협업위코드
0

기업협업 인턴십

목록 보기
2/16

Javascript 기본기 잡기

1. array

1. 기본기

function addFirstAndLast(myArray) {
  if (myArray.length >= 2){
  return myArray[0] + myArray[myArray.length-1]
  }
  // 파이썬과 달리 [-1] 바로 못 씀
  if (myArray.length === 1){
    return myArray[0]
  }else{
    return 0
  }
}

2. 조작

  • push : 배열의 마지막 부분, 꼬리 부분에 요소추가

  • unshift : 배열의 앞부분, 머리 부분에 요소추가

  • pop : 마지막 요소가 제거되면서 마지막 요소값 반환(파이썬과 유사)

  • 응용 예제

function divideArrayInHalf(array) {
  let result = [];
  let len = array.length-1
  for (let i =len; i>=0; i--){
    let x = array[i];
    if (x>10){
      result.push(x)
    }else{
      result.unshift(x)
    }
  }
  return result;
}

잘 안 풀렸던 이유 : 숫자를 뒤에서부터 넣어도 되는데 꼭 앞에서부터 넣으려고 했음.(pust를 먼저 써도 됨)

2. for

for (반복조건) {
   // 반복조건이 맞으면 실행할 코드
}

좋은 예시

function findSmallestElement(arr) {
  // your code here
  if(arr.length === 0) {
    return 0; 
    //빈 배열이면 0을 리턴
  } else { 
    let min = arr[0];
    // 임의의 최소값
    for (i = 0 ; i < arr.length; i++) {
      if (arr[i] < min ) {
        min = arr[i];
      } 
    } return min;  
  }
  
}

파이썬과 비슷했는데 For문 위치 때문에 헷갈렸다.

3. 데이터 타입

✔️ 기본 자료형 (Primitive) 인 여섯 가지 데이터 타입

  • String (문자열)

  • Number (숫자)

  • Boolean (true/false)

  • Undefined

  • Null

  • Symbol (ECMAScript 6 에 추가됨)
    ✔️ 별도로 Object(객체) 도 있음

  • python print(type()) 과 같은 것 :
    -> typeof ~

✔️ true 로 변환되는 값

  • 문자열 : 비어 있지 않은 모든 문자열
  • 숫자 : 0 이 아닌 모든 숫자
  • 객체: 모든 객체 ({ }, [ ] 포함)

✔️ false 로 변환되는 값

  • 문자열 : " " (빈문자열)
  • 숫자 : 0, NaN
  • 객체 : null
  • undefined : 정의되지 않은 함수, 변수 선언만 하고 값을 할당하지 않은 것

✔️ 객체(Object)

  • kye + value
const person = {
    name : "wecode",
    age : 30,
    skills : ['HTML', 'CSS', 'Javascript'] 
}

1. string 관련

  • 대문자 / 소문자 : toUpperCase() / toLowerCase()
  • 좋은 예시
let info = "JavaScript는 프로래밍 언어이다.";
let firstChar = info.indexOf("프로래밍");
console.log(info, firstChar);
// 12 
 
if (firstChar !== -1) { 
  info = info.slice(0, firstChar) + "프로그래밍" + info.slice(firstChar+4, info.length); 
}
 
console.log(info);
// 오타 수정
  • slice(잘릴 시작위치, 잘릴 끝위치)
  • 좋은 예제
function sliceCityFromAddress(address) {
  let first = address.indexOf(" ");
  // 빈 문자열
  let si = address.indexOf("시");
  // 시를 기준으로 나눔

  if (first < si){
    let firstLetter = address.slice(0, first);
    // 시 앞으로 쓸 내용들
    return sentence = firstLetter + address.slice(si+1, address.length)
  }else{
    return sentence = address.slice(si+2, address.length)
    // 시 뒤로 쓸 내용들
  }
}

2. string / number 간 전환

자바스크립트의 특징 : 데이터 타입에 신경 쓰지 않는다.

number -> string

var numberAsNumber = 1234; 
var numberAsString = numberAsNumber.toString();
// 숫자를 스트링로 바꾸기
var tt = 2
tt += "";
alert(typeof tt);   // Result : string

// 스트링을 숫자로 바꾸기
tt = "2"
tt *1= 1;
alert(typeof tt);    // Result : number

그 외에도 연산형으로 바꿀 수 있다.

  • 좋은 예제(문자로 들어오는 국민연금 숫자로 바꿔서 if 조건문)
function nationalPensionRemainingYearCount(age_string) {
  // Your code here
  let age = age_string*1;
  
  return "앞으로 "+ (65-age)+ "년 남으셨습니다"
}

4. 날짜와 시간 : date 객체


0. now

var rightNow = new Date();
console.log(rightNow);

  1. getMonth 메서드는, 현재 달보다 1 작은 값을 반환

  2. getTime 메서드로 날짜의 밀리초 표현을 반환

  3. 특정 날짜 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);
  1. 만나이 구하기
function getWesternAge(birthday) {
  const today = new Date()
  let age = today.getFullYear() - birthday.getFullYear();
  const month = today.getMonth() - birthday.getMonth();
  if (month < 0 || (month === 0 && today.getDate()<birthDate.getDate())){
    age--;
    // 생일 여부에 따라 만나이 정하는 공식
  }
  return age
  }

5. Number :

<주로 사용하는 top3>

  1. Math.round : 반올림

  2. Math.ceil : 올림

  3. Math.floor : 내림

  • 랜덤함수 : Math.random() : 랜덤 값 제공, 범위 설정 가능

  • 그 외 필요 함수는 구글링 통해 찾아볼 것

  • 좋은 예제

function getRandomNumber (min, max) {
  return Math.floor((Math.random() * (max - min + 1)) + min);
}
// 최대값 최소값 사이!

6. object

1. 기본 개념

  • 선배기수 블로그 참고하여 얻은 답. 일단 풀이도 풀이지만 어느 개념인지 파악하는 것이 중요.
function getData(salesArr,reviewArr,likeArr){
    sumAmount = 0;
    sumReview = 0;
    sumLike = 0;
	// 초기값 설정
  
    for (let i = 0; i < salesArr.length; i++){
      sumAmount += salesArr[i][1];
      // 프로퍼티 접근법(대괄호)
    }
    for (let i = 0; i < reviewArr.length; i++){
      sumReview += reviewArr[i][1];
    }
    for (let i = 0; i < likeArr.length; i++){
      sumLike += likeArr[i][1];
    }
	// 반복문으로 각각 필요한 프로퍼티 값 저장
    let objects = {
      sumAmount : sumAmount,
      sumReview : sumReview,
      sumLike : sumLike
    }
    return objects
	// 객체 선언
}
salesArr1 = [["20190401", 34], ["20190402", 23], ["20190403", 29]];
reviewArr1 = [["20190328", 3], ["20190401", 0], ["20190403", 1]];
likeArr1 = [["20190328", 98], ["20190401", 102], ["20190403", 125]];

getData(salesArr1, reviewArr1, likeArr1);
// 실제 예시 및 출력

2. 응용 : Object.~

  • 키 이용 안 하고 한 번에 값으로 접근하는 방법
const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}
 
Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']

(반복문 통한 뽑아내기)

const keys = Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']
 
for (let i = 0; i < keys.length; i++) {
  const key = keys[i] // 각각의 키
  const value = obj[key] // 각각의 키에 해당하는 각각의 값
  console.log(value)
}

(메소드 이용)

const values = Object.values(obj)
// values === ['melon', 4350, 16500, true]
 
const entries = Object.entries(obj)
 
/*
entries === [
  ['name', 'melon'],
  ['weight', 4350],
  ['price', 16500],
  ['isFresh', true]
]
*/
const getExamResult = (scores, requiredClasses) => {
  const result = {};
  let obj = {
    'A+': 4.5,
    'A': 4,
    'B+': 3.5,
    'B': 3,
    'C+': 2.5,
    'C': 2,
    'D+': 1.5,
    'D': 1,
    'F': 0
  };
  // 먼저 점수 정의
  for (let i = 0; i < requiredClasses.length; i ++){
    let key = requiredClasses[i]
    result[key] = 0;
    // result의 키로 과목 입력(일단 0점으로)
  }
  
  for (let j in scores){
    let grade = scores[j];
    result[j] = obj[grade]
    // grade는 스코어의 value(숫자 점수)
    // result의 value는 obj의 value로(과목 + 숫자 점수)
  }
  
  return result;
}

7. scope : 변수의 범위

  • 파이썬과 유사(전역변수 / 지역변수)
    swith?
    if 문과 유사해 보이지만 차이점 있음
  • 차이점 : case와 break와 함께 쓰이며 특정 케이스에 맞으면 나오고, 브레이크에 걸리면 나온다. if, else처럼 boolean으로 판단하는 것이 아니라 다양한 상황에 따라 실행할 코드 블록을 결정할 때 사용
    참고 블로그1
    참고 블로그2
let a = 3;

switch (a) {
  case 4:
    alert('계산이 맞습니다!');
    break;

  case 3: // (*) 두 case문을 묶음
  case 5:
    alert('계산이 틀립니다!');
    alert("수학 수업을 다시 들어보는걸 권유 드립니다.");
    break;

  default:
    alert('계산 결과가 이상하네요.');
}
  • 조건 값에 따라 적용되며 그 어느 것도 아닐 경우 디폴트(맨 마지막 통상)
  • 조건이 맞아 브레이크 만나면 그 이후는 비교하지 않으며 스위치 종료

8. class : OOP

  • 전반적인 느낌 파이썬과 거의 동일(생성자, 인스턴스, 메서드)
class MyMath {
  constructor(num1, num2){
    this.num1 = num1;
    this.num2 = num2;
  }

  getNumber() {
    return [this.num1, this.num2]
  }

  add() {
    return this.num1 + this.num2
  }

  substract() {
    return this.num1 - this.num2
  }

  multiply() {
    return this.num1 * this.num2
  } 

}

9. array methods(함수의 종류)

  • callback 함수로 사용할 때 많이 사용
  • callback? : 인자로 전달되는 함수
  • array function 에서 array 반복문으로 사용되는

    Array.map()
    Array.forEach()

1. array.map()

  • map? : 배열을 반복시켜주는 것(배열을 받아서 새로운 배열로 리턴)
  • map 앞에는 배열만 올 수 있다.
    [1, 2, 3, 4] -> [2, 4, 6, 8]..
  • 파이썬 매핑과 비슷한 개념
const squares = arr.map(function (x) { 
  return x * x;
});

"Array 타입의 데이터를 요소 갯수 만큼 반복합니다.

반복할 때마다 실행할 함수를 parameter로 전달합니다.

그러면 이 callback 함수에서 array의 요소를 인자(x)로 받습니다.

해당 요소를 수정하고 싶은대로 로직을 구현하고 return해주면,

해당 index의 요소가 return 된 값으로 치환됩니다."

2. array.forEach()

  • for 대신 사용하는 반복문(파이썬 for 개념이랑 비슷)
  • 결과값에 변화를 줄 때
  • map과 차이 : "forEach함수 자체가 return 하는 것도 아무것도 없다."
  • forEach도 함수이므로 중간에 반복문 탈출하려면return 하면 됨.

3. 좋은 예제

  • 문제랑 이론이랑 잘 맞는지 모르겠다. 일단 블로그 자료 첨부한다.
const moreThan100 = nums => {
  let arr = nums.map(
    i => {if(i<100){
      return false;
    }
    return true;
    }
  )
  return arr;
}

const formatDate = dates => {
  let str = dates.map(function(arr){
    let date = arr.split('-');
    return `${date[0]}년 ${date[1]}월 ${date[2]}일`;
}
  )
  return str;
}
  • 정규표현식 비슷한게 들어간 것 같고 파이썬에서 본 split...?이 자바스크립트에서도 쓰이는구나~ 하고 알았다.

10. DOM

"DOM (Document Object Model)

DOM(돔)이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델입니다. JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있습니다. DOM은 HTML인 웹페이지와 스크립팅언어(JavaScript)를 서로 잇는 역할입니다."

profile
커피 내리는 그냥 사람
커피 내리고 향 맡는거 좋아해요. 이것 저것 공부합니다.
이전 포스트

협업 1일차

다음 포스트

NestJS with NomadCoder

0개의 댓글