Javascript 02

Array

"서울", "대전"과 같은 배열의 값 하나하나를 Element(요소)라고 부른다.

배열의 요소는 순서(index)를 가지고 있으며, 특징은 0부터 시작한다는 것이다.

1) push, unshift 함수

let cities = [];
cities.push("경주", "전주");
cities.unshift("인천");

push와 unshift 함수는 요소를 추가해주는 기능이 있다.
push는 array의 마지막 부분, unshift는 array의 맨 앞 부분에 요소를 추가한다.

2) pop 함수

반대로 요소를 제거할 수도 있다.
pop 함수를 사용하면 마지막 요소가 제거되고, 마지막 요소의 값을 반환한다.

3) length 속성

for (var i = 0; i < cities.length; i++) {
   if (cities[i] === home) {
     alert("아, 여기 사시는군요");
   }
}

4) Array.map()

map 메서드는 배열을 반복해주는데,
callback 함수에서 return한 값으로 매(each) 요소를 수정해준다.

map 메서드의 return값은 수정된 값으로 다시 생성된 배열이다.

const squares = arr.map(function (x) { 
  return x * x;
});

Array 타입의 데이터를 요소 갯수 만큼 반복한다.
반복할 때마다 실행할 함수를 parameter로 전달한다.
그러면 이 callback 함수에서 array의 요소를 인자(x)로 받는다.

해당 요소를 수정하고 싶은대로 로직을 구현하고 return해주면,
해당 index의 요소가 return 된 값으로 치환된다.

5) Array.forEach()

forEach는 for 대신 사용하는 반복문이다.
map과의 큰 차이는 forEach 함수 자체가 return 하는 것도 아무것도 없다는 것이다.
그냥 forEach 함수를 탈출하고 싶을 때 return을 사용하면 된다.

map은 요소가 수정된 새로운 배열이 return 되었다면,
forEach는 아무것도 return하는 것이 없다.

그래서 forEach로 전달되는 callback 함수에서도 return하는 것이 없다.
forEach는 단지 for문 대신 사용하는 반복 method이다.

let startWithNames = [];
let names = ['a', 'ab', 'cbb', 'ada'];

names.forEach(el => {   
  if (el.startsWith('a')) {     
    startWithNames.push(el);   
  } 
});

let hasC = false;
let arr = ['a', 'b', 'c', 'd'];

arr.forEach(el => {
  if (el === 'c') {
    hasC = true;
    return;
  }
});

forEach도 함수이므로, 중간에 반복문을 탈출하고 싶으면 return; 을 해주면 된다.

만약 forEach에서 현재 index를 알고 싶으면 두 번째 인자로 받을 수 있다.

let idxOfC = -1;
let arr = ['a', 'b', 'c', 'd'];

arr.forEach((el, idx) => {
  if (el === 'c') {
    idxOfC = idx;
    return;
  }
});

for문

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

• i는 2부터 시작하여 10보다 작을 때까지 2씩 증가하면서 for문을 돌린다.

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

• i는 10부터 시작하여 7보다 클 때까지 1씩 감소하면서 for문을 돌린다.

Data Type

1) typeof 연산자
typeof 연산자를 적용하면 다음 문자열 중 하나를 반환합니다.
"undefined": 정의되지 않은 변수
"boolean"
"string"
"number"
"object": 함수를 제외한 객체 또는 "object"
"function"

String

1) toUpperCase() / toLowerCase()

let lastName = 'Yeri Kim';
let upperLastName = lastName.toUpperCase();
let lowerLastName = lastName.toLowerCase();
console.log(lastName);
console.log(upperLastName);
console.log(lowerLastName);

2) length

if (phoneNumber.length !== 10 &&  phoneNumber.length !== 11) {
  alert("폰번호 제대로 입력하셨나요?");
}

3) indexOf() 함수
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);

• firstChar이 -1이 아니면("프로래밍" 문구가 있다면) if문을 실행한다.

4) slice() 함수
slice(잘릴 시작위치, 잘릴 끝위치)
slice는 말 그대로 텍스트를 잘라주는 함수이며, 첫 번째 값은 0이다.
잘릴 끝위치는 해당 문자는 포함하지 않고 그 직전에서 끊어준다.

5) Number()
6) .toString()

날짜와 시간

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();

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

getTime method는 날짜의 밀리초 표현을 반환할 수 있다.
이 함수를 통해 반환된 숫자로 비교연산을 통해 언제가 더 과거인지 판단할 수 있다. (값이 더 작으면 과거)

Number

Number의 수학 계산을 위해서는 JavaScript에서 제공하는 Math 객체를 사용합니다.
1) Math.rouund() 반올림 함수
2) Math.ceil() 올림 함수
3) Math.floor() 내림 함수
4) Math.random() 랜덤 숫자 함수 (0.0000000000000000 ~ 0.9999999999999999)

Object

객체는 이름과 값으로 구성된 프로퍼티들의 집합이라고 할 수 있다.

해당 객체의 프로퍼티 값에 접근하고 싶을 때는 마침표(.) 연산자를 사용하며, 대괄호([])와 쌍따옴표("")로 접근하는 방법도 있다.

객체는 키(key)-값(value) 쌍으로된 데이터의 모음으로써 순서가 뒤바껴도 아무 상관이 없다.
배열처럼 순서대로 index로 접근하는게 아니라 키로 접근하기 때문이다.

1. Object.keys()
   Object.keys 메소드는 어떤 객체가 가지고 있는 키들의 목록을 배열로 리턴하는 메소드이다.
   객체의 내장 메소드가 아니라 객체 생성자인 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)
}

Object.values 는 객체의 키가 아닌 값으로 이루어진 배열을 리턴한다.

Object.entries 는 객체의 키와 값의 쌍으로 이루어진 길이 2짜리 배열로 이루어진, 배열을 리턴한다.

const values = Object.values(obj)
// values === ['melon', 4350, 16500, true]

const entries = Object.entries(obj)

/*
entries === [
  ['name', 'melon'],
  ['weight', 4350],
  ['price', 16500],
  ['isFresh', true]
]
*/

2) for-in

for (let i in arr) {
  console.log(i)
  console.log(arr[i])
}

for-in 문은 배열뿐 아니라 객체에서도 작동한다.

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

for (let key in obj) {
  const value = obj[key]

  console.log(key)
  console.log(value)
}

Scope

1) Block
block이란 중괄호({}, curly brace)로 감싸진 것을 block이라고 한다.

function hi() {
  return 'i am block';
}

{}(block)내부에서 변수가 정의되면 변수는 오로지 {}(block)내부에서만 사용할 수 있으며, 이를 local(지역) 변수라고 부른다.
2) Global(전역) Scope
block밖인 global scope에서 만든 변수를 global variable(전역변수)라고 한다.
코드 어디서든 접근이 가능하며 변수값을 확인할 수 있다.
하지만 global scope를 남용하게 되면 차후 해당 변수가 어디에서 왜 필요한 지, 어떻게 값이 수정될 지 알 수 없어진다.
때문에 block scope로 최대한 변수 정의하여 좋은 scoping 습관을 들여야 한다.

Class

let ray = {  
  name: 'Ray',  
  price: 2000000,   
  getName: function() {  
    return this.name;  
  },   
  getPrice: function() {  
    return this.price;  
  },   
  applyDiscount: function(discount) {  
    return this.price * discount;   
  } 
}

객체 내부에서 해당 객체의 프로퍼티에 접근하려면 "this"라는 키워드를 사용할 수 있다.

1) 생성자(Constructor)
아래와 같이 class로 객체를 생성하는 과정을 '인스턴스화'라고 부른다.

const morning = new Car('Morning', 2000000);

class는 새로운 instance를 생성할 때마다 constructor() method를 호출한다.

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}

• Car는 class 이름으로, 항상 대문자로 시작하고, CamelCase로 작성해야 한다.
• Car class의 instance를 생성할 때마다 constructor method가 호출된다.
• class의 실행범위(context)에서 this는 해당 instance를 의미한다.
• class 내에서 name, price와 같이 변경 가능한 값이자 class 내의 context에서 어느 곳에서나 사용할 수 있는 변수를 '멤버 변수'라고 부른다.
• 멤버 변수는 'this' 키워드로 접근한다.

2) 인스턴스(Instance)
인스턴스는 class의 property 이름과 method를 갖는 객체이다.
인스턴스마다 모두 다른 property 값을 가지고 있다.

const morning = new Car('Morning', 20000000);

• 인스턴스는 class 이름에 newe를 붙여서 생성한다.
• class 이름 우측에 () 괄호를 열고, 내부에는 constructor에서 필요한 정보를 인자로 넘겨준다.
• Car class의 instance를 morning이라는 변수에 저장하였다.

3) 메서드(Methods)
메서드는 함수이며, 객체가 프로퍼티 값으로 가지고 있는 것을 의미한다.

Arrow Function

//ES5
function hi(text) {
  text += '하세요';
  return text;
}

//ES6
const hi = text => { 
  text += '하세요';
  return text 
};

//ES5
function getFullName(first, family) {
  return first + family;
}

//ES6
const hi = (first, family) => { return first + family };
const hi = (first, family) => first + family;

Template Listerals

그리고 back tick 으로 감싸면 그 안에 변수를 넣어서 표현할 수 있습니다.
const name = '김개발';

const hi = `안녕하세요. 저는 ${name} 입니다.`;

변수를 사용하려면 ${} 으로 변수를 감싸줘야 합니다.

따옴표로 감싼 string은 개행 처리를 하지 않으며, 문법 오류입니다.
따옴표로 감싼 string에서 개행을 하려면 원래 아래처럼 해야합니다.

let detail = '자세히\n'+'보아야\n'+'이쁘다';
console.log(detail);

template literal에서는 string을 입력한대로 개행이 됩니다.

let detail = `자세히 
보아야
이쁘다


내코드..`;
console.log(detail);

String Method

1) .startsWith
2) .endsWith
3) .includes
4) .repeat