TIL032 JavaScript Wrap-up

헷갈리는 개념들을 한번씩 되짚어보자! 😣🙈😎

1. Introduction to JavaScript

• JS는 웹페이지와 상호작용하도록 만들어진 언어.
• 브라우저에서 사용자의 행동을 처리하고, 데이터도 저장하고, 네트워크 응답과 요청을 처리한다.

2. Function Basic

1) return

• 모든 함수는 값을 반환한다.(return이 명시 되어 있지 않은 경우 return undefined가 생략되어 있는 것)

2) 매개변수(parameter)와 인자(argument)

function getName(name) {
  return name + '님';
}

• 매개변수: 외부로부터 들어오는 값을 담아 함수 내부에서 사용하도록 하는 변수의 역할, 위 함수에서 name이 해당한다. 함수에서 전달되는 인자들을 담아두는 곳.

let result1 = getName('개발자'); // '개발자님' 출력
let result3 = getName('프론트엔드 개발자'); // '프론트엔드 개발자님' 출력
let result4 = getName('백엔드 개발자'); // '백엔드 개발자님' 출력

• 인자: 위 코드에서 '개발자', '프론트엔드 개발자', '백엔드 개발자'와 같은 값이 인자, 즉 함수 호출 시에 매개변수 자리에 들어가는 구체적인 값을 뜻한다.

3. Math Expressions

let num = 1;
let newNum = num++;
console.log(num); //2
console.log(newNum); //1

• 결과값이 반대로 나와야할 것 같지만, 그렇지 않다.
• 그 이유는 아래 사진과 같다.
  
• 결과값이 반대로 나오려면 아래와 같이 코드를 입력해야한다.

let newNum = ++num;

4. String

1) String 기초

console.log("2 더하기 2는 " + 2 + 2); //2 더하기 2는 22

• 위와 같이 코드를 실행하면 "2 더하기 2는 4"가 아닌 "2 더하기 2는 22"가 출력된다. 그 이유는 프로그래밍은 왼쪽부터 순서대로 실행되기 때문이다.
  
• 위와 같이 서로 다른 type인 string+number를 할때는 항상 주의해야한다!
• String과 Number를 더하면 항상 String으로 변환된다.
• 그래서 우리가 원하는 값으로 변환하려면 아래와 같이 코드를 입력해야한다.

console.log("2 더하기 2는 " +  (2 + 2)); //2 더하기 2는 4

2) indexOf: 문자열 찾기

• indexOf 메소드는 문자열에 특정 문자열이 들어있는지 확인하고, 만약 있다면 몇번 째 순서에 해당 문자열이 있는지 알려준다.
• 해당 문자열이 없다면 -1을 반환
• 댓글에 욕설이 포함되면 달지 못하도록 차단할 때 사용할 수 있다!

3) slice: 슬라이스는 한국어로 자르다...

• slice는 말그대로 문자열을 잘라주는 함수
• 구조는 다음과 같다. slice(잘릴 시작위치, 잘릴 끝위치)
• 잘릴 끝위치가 조금 헷갈리는데, 잘릴 끝위치의 문구는 포함하지 않는다.

4) string <-> number 전환

(1) string -> number

• Number(), parseInt(), parseFloat()

parseInt("1.901");
parseFloat("1.901");
Number("1.901");
parseInt("200") + 1;

• 마이너스 연산의 특성을 활용

var numberAsNumber = "1234"; 
var numberAsString = numberAsNumber - 0;
 
console.log(numberAsNumber, typeof numberAsNumber);
console.log(numberAsString, typeof numberAsString);

(2) number -> string

• toString()

var numberAsNumber = 1234; 
var numberAsString = numberAsNumber.toString();
 
console.log(numberAsNumber, typeof numberAsNumber);
console.log(numberAsString, typeof numberAsString);

• 플러스 연산의 특성을 활용

var numberAsNumber = 1234; 
var numberAsString = 1234 + "";
 
console.log(numberAsNumber, typeof numberAsNumber);
console.log(numberAsString, typeof numberAsString);

5. 논리연산자

if (age > 65 || age < 21 && res === "한국")

이러한 조건문이 있다면, 왼쪽에서부터 차례대로 실행된다. 즉, 첫번째 ||에서 나뉘어서 이를 기준으로 둘 중 하나만 참이면 true가 된다. 즉,

• 65세가 넘거나
• 21세 아래이고 한국에 산다
  중에 하나만 참이면 조건을 충족하게 된다.

<참인 경우>

• 66세이다
• 11세이고 한국에서 산다.

이와 같이 여러조건을 나열하면 가독성이 떨어지고 헷갈리니 웬만하면 괄호로 묶어주는 습관을 가지는 것이 좋다. 바로 이렇게!

if (age > 65 || (age < 21 && res === "한국"))

Assignment
rockPaperScissors 함수를 구현해서 가위 바위 보 게임을 구현해주세요.
가능하면 || 와 && 연산자 둘다 사용해주세요.
player1과 player2 중 이긴 사람이 누군지 리턴해주세요.
예를 들어, player1이 이겼으면 "player1" 이 리턴 되고 그 반대의 경우라면 "player2"가 리턴이 되어야 합니다.
만일 비기는 경우에는 무조건 "player1"이 리턴 되어야 합니다.

풀이

function rockPaperScissors(player1, player2) {
  // 예제:
  if ( (player1 === "가위" && player2 === "보" ) || (player1 == "바위" && player2 == "가위") || (player1 === "보" && player2 === "바위") || (player1 === "가위" && player2 === "가위" ) || (player1 == "바위" && player2 == "바위") || (player1 === "보" && player2 === "보") ){
     return "player1";
  } else {
    return "player2";
  }
}

6. For문

아래 문제는 두고두고 유용하게 사용할 것 같아서 일단 박제해본다!

Assignment
함수 findSmallestElement 의 arr 인자는 숫자 값으로만 이루어진 배열입니다.
arr 의 값들 중 가장 작은 값을 리턴 해주세요.
만일 arr 가 비어있으면 0을 리턴 해주세요.

풀이

function findSmallestElement(arr) {
  // your code here
  if (arr.length === 0){
    return 0;
  } else {
    let num = arr[0]; //임의의 최솟값 지정
    for (i = 0; i < arr.length; i++){
      if(arr[i] < num){
        num = arr[i]; //임의의 최솟값보다 작은 값이 있을 경우 최솟값 재할당
      } 
    }
    return num;
  }
}

7. 배열

1) 인덱스로 요소 수정/추가

let cities = [];
cities[0] = "서울"; // ["서울"]
cities[1] = "대전"; // ["서울", "대전"]
cities[2] = "대구"; // ["서울", "대전", "대구"]
cities[5] = "제주도"; //["서울", "대전", "대구", undefined, undefined, "제주도"]
cities[5] = "포항"; //배열 요소를 수정하기
console.log(cities[5]); // 포항

2) push/unshift: 요소의 추가

• push와 unshift는 모두 배열에 요소를 추가해주는 메소드! 둘의 차이는 요소들이 배열에 추가되는 위치가 다르다는 것!
• push: 배열의 마지막 부분에 요소를 추가한다.
• unshift: 배열의 맨 앞 부분에 요소를 추가한다.

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

console.log(cities); //["인천", "경주", "전주"]

3) pop: 요소의 제거

• pop메서드를 통해 배열의 마지막 요소를 제거할 수 있다.
• 제거할 뿐만 아니라, 제거된 값을 반환까지 해준다.

cities.pop();
console.log(cities); ////["인천", "경주"]

let lastCity = cities.pop();
console.log(lastCity); //"전주"

4) map: 배열 순회해서 수정하기

• map 메서드는 배열을 반복해서, callback함수에서 return한 값으로 매 요소를 수정해준다.
• map 메서드의 return값은 수정된 값으로 다시 생성된 배열이다.
• map은 array타입의 데이터를 요소 갯수 만큼 반복한다.
• 반복할 때마다 실행할 함수는 parameter로 전달한다.
• 그러면 이 콜백함수에서 배열의 요소를 인자로 받는다.
• 해당 요소를 수정하고 싶은대로 로직을 구현하고 리턴해주면 해당 인덱스의 요소가 리턴된 값으로 치횐된다.

const arr = [1, 2, 3];

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

console.log(squares) //[ 1, 4, 9 ]

5) forEach: 리턴없는 반복문

• forEach 메서드는 리턴하는 것이 없다.
• 그냥 for 대신 사용하는 반복 메서드라고 생각하면 된다.
• 반복문을 종료하고 싶으면 return하면 된다.

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

console.log(idxOfC) // 2

8. 데이터 타입

//null은 빈 객체를 참조하고 있다.
console.log(typeof null); //"object"
// array는 확장된 객체이다.
console.log(typeof array); //"object"

1) 여러 데이터 타입의 boolean 값 변환

✔️ true 로 변환되는 값

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

✔️ false 로 변환되는 값

• 문자열 : " " (빈문자열)
• 숫자 : 0, NaN
• 객체 : null
• undefined

9. 날짜와 시간

Assignment
만으로 계산한 나이를 구하는 함수인 getWesternAge 함수를 구현해 봅시다.
이 함수는 birthday 라는 인자를 받습니다.
이 birthday 는 Date 객체 입니다. birthday 라는 인자를 넣었을 때, 현재를 기준으로 만으로 계산한 나이를 리턴 해주세요.

풀이

function getWesternAge(birthday) {
  //오늘의 날짜 데이터 만들기
  const dateToday = new Date();
  //세는 나이 구하기
  const year = dateToday.getFullYear() - birthday.getFullYear()
  // 오늘의 날짜가 생일날짜보다 크거나 같으면 세는 나이 그대로, 작으면 한살 빼주기
  if(dateToday.getMonth() >= birthday.getMonth() || (dateToday.getMonth() == birthday.getMonth() && dateToday.getDate() >= birthday.getDate())){
    return year;
  }else{
    return yaer -1;
  }
};

10. Number

1) round, ceil, floor

//round
console.log(Math.round(2.5)); //3
console.log(Math.round(2.49)); //2
console.log(Math.round(2)); //2
console.log(Math.round(2.82)); //3
//ceil
console.log(Math.ceil(2.5)); //3
console.log(Math.ceil(2.49)); //3
console.log(Math.ceil(2)); //2
console.log(Math.ceil(2.82)); //3
//floor
console.log(Math.floor(2.5)); //2
console.log(Math.floor(2.49)); //2
console.log(Math.floor(2)); //2
console.log(Math.floor(2.82)); //2

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

풀이

function getRandomNumber (min, max) {
  return Math.round(Math.random()*(max-min)+min)
}

11. Object

1) 객체

• 키는 마치 특정 값을 갖고 있는 변수같은 역할을 한다.

2) 객체에 접근하는 법

let plan1 = {   
  name: "Basic"
};

console.log(plan1.name); //dot notation  
console.log(plan1["name"]); //bracket notation

• bracket notation:
• • 동적으로 접근할 때 사용됨.
• • 계산된 결과로 접근한다.
• • 키 값이 공백, 특수문자를 포함한 경우, 변수로 접근할 경우 또는 숫자인 경우 브라켓 노테이션으로 접근한다.
• dot notation:
• • 정적으로 접근할 때 사용됨.

3) 객체는 reference로 저장된다.

• 객체를 변수에 저자하면 객체자체가 저장되는 것이 아니라, reference가 저장된다.
  
• 그래서 객체를 담은 변수를 비교하면 서로 같지 않다고 나온다.
• 그러나 객체 내부의 프로퍼티 값이 텍스트일 경우는, 텍스트를 비교하게 되어 서로 같음 / 다름 여부를 판단할 수 있다.

const mutableObj = {
  name: '객체'
};
 
mutableObj = {
   name: '수정'
}
 
mutableObj.name = '수정 됩니다!';

• const로 선언된 변수는 절대 바뀌면 안되기 때문에, mutableObj에 새로운 객체를 할당하면 오류가 난다. 왜냐하면 새로운 메모리 주소로 수정을 시도하기 때문이다!
• 하지만, mutableObj.name로 프로퍼티에 접근해서 데이터를 수정하는 것은 가능하다.
• mutableObj가 저장된 reference가 바뀌는 것이 아니라 객체 내부의 프로퍼티 값이 수정되는 것이기 때문.

Assignment
getData 함수는 세 개의 배열을 인자로 받습니다(salesArr : 날짜별 판매량, reviewArr : 날짜별 리뷰수, likeArr : 날짜별 좋아요수). 다음 요구사항을 충족하는 객체를 만들어서 return 해주세요. 리턴되는 객체는 아래와 같이 3개의 property를 가집니다.(sumAmount : 총 판매량, sumReview : 총 리뷰 개수, sumLike : 총 좋아요 수)

풀이

>**Assignment**
getAnswer 함수는 아래의 객체에서 '샐러드' 라는 값을 출력합니다.
```js
let myProfile = {
  name: '김개발',
  address: {
    email: '[email protected]',
    home: '위워크'
  },
  'my favorite': {
    food: [{
      name: '샐러드',
      price: 3500
    }, {
      name: '삼겹살',
      price: 15000
    }],
    hobby: ['축구']
  }
}

- 이 메소드가 리턴하는 값은 배열이기 때문에 이걸로 반복문을 사용할 수 잇다.

```js
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 arr = ['coconut', 'banana', 'pepper', 'coriander']
 
for (let i = 0; i < arr.length; i ++) {
  console.log(i+":"+ arr[i]) // 0:coconut 1:banana 2:pepper 3:coriander
}

for (let i in arr) {
  console.log(i+":"+ arr[i]) // 0:coconut 1:banana 2:pepper 3:coriander
}

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)
  //name
  //melon
  //weight
  //4350
  //price
  //16500
  //isFresh
  //true
}

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

const rayPriceByFunction = ray.getPrice();
console.log('함수로 접근 => ' +rayPriceByFunction);

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
    this.department = "선릉지점";
    this.salesAmount = 0;
  }

  applyDiscount(discount) {  
    return this.price * discount;   
  }
  
  addSales() {
    this.salesAmount++;
  }
}

const morning = new Car('Morning', 2000000);
console.log(morning); //morning: [object Object]
console.log(morning.name); //Morning
console.log(morning.price); //2000000

const price = morning.applyDiscount(0.8); 
console.log(price); //1600000

console.log(morning.salesAmount); //0
morning.addSales();
console.log(morning.salesAmount); //1

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

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

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