2022.05.17 Day 8 - JavaScript

성민규·2022년 5월 17일

Object

객체는 {}를 사용하여 다른 데이터 타입(텍스트, 숫자, 배열 등..)처럼 변수에 저장할 수 있습니다.
이렇게 {} 으로 생긴 모양의 객체를 object literal(객체 리터럴)이라고 부릅니다.

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

객체의 키에는 스페이스, 한글, 특수문자 등이 들어갈 수 있습니다. 변수(variable) 선언할 때는 할 수 없었던 표현입니다.

프로퍼티 접근

객체의 프로퍼티에 접근하는 방법으로는 2가지 방법이 있습니다.
하나는 dot(.)으로 접근하는 방법이고,
다른 하나는 대괄호([])로 접근하는 방법입니다.

dot(.)으로 접근하는 방법이 제일 편한 방법이긴 합니다만,
그렇다면 대괄호([])로는 언제 접근하는 게 좋을까요?

키 값의 이름에 공백이 있을 때

키 값의 이름이 숫자일 때

변수로 프로퍼티에 접근할 때

프로퍼티 할당

객체에 이미 키가 존재하는데, 다시 한번 할당하면 값이 수정됩니다.
이전에 없던 키로 접근하면, 새로운 프로퍼티가 추가됩니다.

Method(메서드)

객체의 값으로 함수를 지정할 수도 있습니다.
let methodObj = {
  do: function() {
    console.log('메서드 정의는 이렇게');
  }
}
위와 같은 객체가 존재할 때, 함수를 호출하는 방법은 아래와 같습니다.
methodObj.do();

객체는 reference로 저장

객체는 변수에 저장할 때, 객자 체차를 그대로 저장하는 것이 아니라 객체가 담긴 메모리의 주소를 reference로 저장합니다.
처음 접하시면 조금 어려운 개념일 수 있습니다.
이 부분에 대해서는 나중에 포스팅으로 한번 다루도록 하겠습니다.

객체를 reference로 저장하기 때문에
const로 객체의 변수를 선언하여도 객체에 접근하여 값들을 수정할 수 있습니다.
메모리 주소를 타고 가서 프로퍼티에 접근하기 때문에 변수가 바뀌는 게 아니기 때문이죠.

객체 순회하기

Object.keys(), Object.values(), Object.entries()

Object.keys 메소드는 어떤 객체가 가지고 있는 키들의 목록을 배열로 리턴하는 메소드입니다.
객체의 내장 메소드가 아니라 객체 생성자인 Object 가 직접 가지고 있는 메소드입니다.
const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

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]
]
*/
Object.keys 메소드가 리턴하는 값은 배열이기 때문에 이걸로 우리가 반복문을 사용할 수 있습니다.
Object.values 는 객체의 키가 아닌 값으로 이루어진 배열을 리턴합니다.
Object.entries 는 객체의 키와 값의 쌍으로 이루어진 길이 2짜리 배열로 이루어진, 배열을 리턴합니다.

for-in

반복문인 for문과 같은 종류의 문법이지만, 객체와 배열을 위해 특별히 존재하는, ES6 에서 추가된 문법입니다.
for (let i = 0; i < arr.length; i ++) {
  console.log(i)
  console.log(arr[i])
}

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

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

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

>첫 번째의 반복문은 우리가 기존에 사용하는 형태의 반복문입니다.
두 번째의 반복문은 첫 번째의 반복문을 for-in문을 사용하여 나타낸 것입니다.
두 개는 같은 결과값을 출력합니다.
>
객체에도 for-in문을 사용해서 키와 값을 출력할 수 있습니다.


## Arrow function(화살표 함수)
>Arrow function(화살표 함수)은 전통적인 함수표현의 간편한 대안입니다.
형태는 다음과 같습니다.
```Js
function getName() {}
>
const getName = () => {}

이해가 가시나요?

화살표 함수는 인자가 하나일 때는 소괄호 생략이 가능합니다.
const getName = function(name) {}

const getName = (name) => {}
const getName = name => {}
인자가 두 개일 때는 생략할 수 없습니다.

만약 함수가 실행내용이 딱히 없이 return만 한다면 return 키워드와 중괄호가 생략가능합니다.
function getName(name) {
  return name;
}

const hi = name => { return name };
const hi = name => name;
중괄호와 return문이 생략될 경우, 화살표 오른쪽에는 리턴될 "값"만 쓰여야 합니다.

기존의 함수보다 간편하다는 게 느껴지시나요?

하지만,하지만, 화살표 함수는 몇 가지 제한점이 있고 모든 상황에 사용할 수는 없습니다.

this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없습니다.

new.target키워드가 없습니다.

일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없습니다.

생성자(Constructor)로 사용할 수 없습니다.

yield를 화살표 함수 내부에서 사용할 수 없습니다.

Template literals, String method

template literals

template literal은 ES6에서 추가된 문법입니다.
원래 String을 작성할 때 따옴표를 사용했었지만,
이제 back tick으로도 String을 감쌀 수 있습니다.
그리고 back tick으로 감싸면 그 안에 변수를 넣어서 표현할 수 있습니다.
const name = '김개발';
console.log(`내 이름은 ${name}입니다.`)	// 	내 이름은 김개발입니다.
${} 안에 변수를 넣어서 편하게 사용할 수 있습니다.
template literal을 사용하면 엔터처리도 쉽게 할 수 있습니다.

string method

ES6에서는 유용한 string method도 추가되었습니다.

startsWith()
해당 문자열로 시작하는지 확인할 수 있습니다.
true, false로 결과값을 반환합니다.

endsWith()
해당 문자열로 끝나는지 확인할 수 있습니다.
true, false로 결과값을 반환합니다.

includes()
해당 문자열을 포함하는지 확인할 수 있습니다.
true, false로 결과값을 반환합니다.

repeat()
문자열을 반복할 수 있습니다.

Array methods

arrow function을 가장 많이 사용할 때는 callback 함수로 사용할 때 입니다.

callback 함수란, 인자로 전달되는 함수라고 생각하시면 됩니다.

Array.map()

map 메서드는 배열을 반복해주는데
callback 함수에서 return한 값으로 각 요소를 수정합니다.
map 메서드의 return 값은 수정된 값으로 다시 생성된 배열입니다.

const arr = [1, 2, 3];
const squares = arr.map(x => x * x);	// [1, 4, 9]

Array.forEach()

forEach는 for 대신 사용하는 반복문입니다.
map과의 큰 차이는 forEach 함수 자체가 return 하는 것은 아무 것도 없다는 것입니다.
그래서 forEach로 전달되는 callback 함수에서도 return하는 것이 없습니다.
그냥 forEach 함수를 탈출하고 싶을 때 return을 사용하면 됩니다.
let startWithNames = [];
let names = ['a', 'ab', 'cbb', 'ada'];

names.forEach(el => {   
  if (el.startsWith('a')) {     
    startWithNames.push(el);   
  } 
});
forEach()를 사용하여 a로 시작하는 배열을 만들었습니다.
let hasC = false;
let arr = ['a', 'b', 'c', 'd'];

arr.forEach(el => {
  if (el === 'c') {
    hasC = true;
  }
});
forEach()의 두번째 인자에 배열의 index를 사용할 수도 있습니다.