[Node.js로 서버만들기] 2. 자바스크립트 기본 문법(객체/배열/함수)

✅ 객체

1. 객체란?

우리가 인식할 수 있는 하나의 카테고리

ex) 객체 - 나라
'나라'라는 '객체'가 가질 수 있는 특징은
이름, 크기, 인구 수 등이 있음

 

2. 자바스크립트에서의 객체란?

키(key)와 값(value)의 쌍으로 이뤄진 프로퍼티(property)의 정렬되지 않은 집합

ex) 객체 - 나라
'나라'가 가질 수 있는 특징 = '프로퍼티'
이를 키 - 값 쌍으로 매핑하여 저장

// sample07
const country = {
    name: 'Korea',
    population: '5178579',
    get_name: function(){
        return this.name;
    }
};
console.log(
    country.name,
    country.population,
    country.get_name()
    );
// Korea 5178579 Korea

 

1) 프로퍼티 : 객체가 가진 특징, 정보

key	value
name	Korea
population	5178579

➡ 객체는 프로퍼티 말고도 행위를 가질 수 이음.

 

2) 메서드 : 객체 안의 함수

get_name: function(){
        return this.name;
    }

---

✅ 배열

배열이란?

[요소 1, 요소 2,,,] 를 통해서 생성하여 숫자, 문자열, 객체 등 다양한 것들을 요소로 넣을 수 있음.

 

1. 구조 분해 할당

: 객체나 배열을 변수로 간편하게 '분해'해주는 문법

// sample09
const animal = ['dog', 'cat', 'monkey'];
let [first, second] = animal;

console.log(first); // dog
console.log(second); // cat

 

2. 배열 내장 함수

1) push() : 배열의 끝에 요소 추가

- 배열.push(요소)

- 요소는 객체, 숫자, 문자열 등 어떤 것이든 가능함!

// sample 08
const coffee = [];

coffee.push({name: 'Americano'});
coffee.push({name: 'Latte'});

console.log(
    coffee, // [ { name: 'Americano' }, { name: 'Latte' } ]
    coffee[0],// { name: 'Americano' }
    coffee.length // 2
    );

 

2) pop() : 배열의 끝에 요소 삭제

- 배열.pop()

const alpha = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

alpha.pop();
console.log(alpha);
// [0, 1, 2, 3, 4, 5, 6, 7, 8 ]

 

3) forEach() : for문을 짧게 줄임

- 함수를 인수로 받음

- 함수에는 세 개의 매개변수가 있음

[1 - item] 해당 요소 [2 - index] : 인덱스  [3 - arr] : 해당 배열 (보통 3번째는 생략함) 

let arr = ["Mike", "Jane", "Tom"];
arr.forEach((name, idx) => {
  console.log(name); // Mike Jane Tom
  console.log(`${name}'s number is ${idx}`);
});

// 출력결과
/*
  Mike's number is 0 
  Jane's number is 1
  Tom's number is 2 
  */

 

4) indexOf() : 원소의 인덱스 반환

- 배열.indexOf(숫자) : 숫자가 배열 안에 있으면 인덱스 반환 (없으면 -1 반환)

- 배열.indexOf(a, b) : 인덱스 b부터 살펴보았을 때, a가 있으면 인덱스 반환 (없으면 -1 반환)

배열.lastIndexOf(숫자) : 숫자를 뒤에서부터 찾기 시작함.

let arr = [1,2,3,4,5,1,2,3];
console.log(
  arr.indexOf(3), //2
  arr.indexOf(3, 3), // 7
  arr.lastIndexOf(2), // 6
  arr.indexOf(6) // -1
)

 

5) find(fn) : 찾은 값을 반환해줌

- 함수를 인자로 받음

- 배열 안에 있으면 첫번째 true 값만 반환함 (여러 개 있어도 첫번째만!)

- 없으면 undefined 반환 🌟🌟

/* ex 1 */
let arr = [1, 2, 3, 4, 5];
const result = arr.find((item) => {
  return item % 3 === 0;
});

console.log(result); // 3

/* ex 2 */
let arr = [1, 2, 3, 4, 5];
const result = arr.find((item) => {
  return item % 6 === 0;
});

console.log(result); // undefined

findIndex() :  배열 안에 있으면 인덱스를 반환
없으면 -1 반환

/* ex3 */
let userList = [
  { name: "Mike", age: 30 },
  { name: "Jane", age: 22 },
  { name: "Tom", age: 17 }
];

const teen = userList.find((user) => {
  if (user.age < 19) {
    return true;
  }
  return false;
});

const teen2 = userList.findIndex((user) => {
  if (user.age < 19) {
    return true;
  }
  return false;
});

console.log(teen); // {name: "Tom", age: 17}
console.log(teen2); // 2

 

6) filter() : 조건을 만족하는 배열 생성

- 함수를 인자로 받아 만족하는 모든 요소를 배열로 반환함.

find()는 만족하는 첫번째 요소만!
filter()는 만족하는 모든 요소를!

let arr = [1,2,3,4,5,6,7,8,9,10]
const filter_result = arr.filter((item)=>{
  if(!(item%2)) return true;
  return false;
});

const find_result = arr.find((item) => {
	if(!(item%2)) return true;
    return false;
});
    
console.log(filter_result); // [2, 4, 6, 8, 10]
console.log(find_result); // 2

 

7) join() : 배열 요소를 문자열로 합침

- 배열.join('문자')

- '문자'가 없으면 ',' 문자로 구분지어 합침.

- '문자'가 있으면 그 문자로 구분하여 합침

let arr = ["나는", "이현진", "입니다."];
console.log(
  arr.join(), // 나는,이현진,입니다.
  arr.join(" "), // 나는 이현진 입니다.
  arr.join("_") // 나는_이현진_입니다.
);

<-> 배열.split('문자') : '문자'를 기준으로 나눠줌
('문자'가 없으면 하나씩 나눠줌)

let users = "Mike,Jane,Lucas,Will,Max,Dustin";
const result = users.split(",");
console.log(result); //["Mike", "Jane", "Lucas", "Will", "Max", "Dustin"]

let hello = "hello";
console.log(hello.split("")); // ["h", "e", "l", "l", "o"]

 

8) map() : 배열 각 원소를 반환

- 함수를 받아 특정 기능을 시행하고, 새로운 배열을 반환함

let userList = [
    { name: "Jane", age: 30 },
    { name: "Lee", age: 22 },
    { name: "Eom", age: 26 }
  ];
  
  let newUser = userList.map((user, idx) => {
    return Object.assign({}, user, {
      id: idx + 1,
      isAdult: user.age > 25
    });
  });
  
  console.log(userList);
  /*
  0: {name: 'Jane', age: 30}
  1: {name: 'Lee', age: 22}
  2: {name: 'Eom', age: 26}
  length: 3
  */
  
  console.log(newUser);
  /*
  0: {name: 'Jane', age: 30, id: 1, isAdult: true}
  1: {name: 'Lee', age: 22, id: 2, isAdult: false}
  2: {name: 'Eom', age: 26, id: 3, isAdult: true}
  length: 3
  */

 

 

9) splice() : 인덱스로 특정 항목 제거

- splice(n, m) : 인덱스 n부터 m개를 지움

let arr = [1,2,3,4,5];
arr.splice(1,2);

console.log(arr); // [1,4,5]

 

- splice(n, m, x) : 인덱스 n부터 m개를 지우고, x로 채움

let arr = [1,2,3,4,5];
arr.splice(1,3,200,300);

console.log(arr); // [1, 200, 300, 5]

 

- splice(n, 0, x) : 요소를 지우지 않고, 원하는 곳에 요소 추가

let arr = ["나는", "이현진", "입니다."];
arr.splice(1, 0, "대한민국", "대학생");

console.log(arr); // ['나는', '대한민국', '대학생', '이현진', '입니다.']

 

- 삭제된 요소 반환

let arr = [1, 2, 3, 4, 5];
let result = arr.splice(2, 2);

console.log(
  arr, // [1, 2, 5]
  result // [3, 4]
);

 

10) slice() : 항목을 제거하여 새 배열 생성

- slice(n, m) : 인덱스 n ~ m-1까지 반환

let arr = [1,2,3,4,5];
console.log(arr.slice(1,4)); // [2, 3, 4]

 

11) concat : 배열을 합쳐서 새 배열 생성

- concat(arr1, arr2,,,,)

let arr1 = [1, 2, 3];
let arr2 = arr1.concat([4]);
let arr3 = arr2.concat([5, 6], [7, 8]);

console.log(
  arr1, //[1, 2, 3]
  arr2, //[1, 2, 3, 4]
  arr3 //[1, 2, 3, 4, 5, 6, 7, 8]
);

 

12) reduce() : 누적 값 계산

- reduce(함수, 초기 값)

prev : 누적 계산 값 / cur : 현재 값 / return 계산 값

let userList = [
    { name: "Mike", age: 10 },
    { name: "Lucas", age: 9 },
    { name: "Jane", age: 11 },
    { name: "Will", age: 8 },
    { name: "Dustin", age: 12 },
    { name: "Max", age: 13 }
  ];
  
  let result = userList.reduce((prev, cur) => {
    if (cur.age > 10) {
      prev.push(cur.name);
    }
    return prev;
  }, []);
  
  console.log(result); // ["Jane", "Dustin", "Max"]

 

ex) 합계 구하기 (reduce 미사용)

/* 합계 구하기 */
// 방법 1 - for 반복문
let result = 0;
for(let i = 0; i<arr.length; i++){
  result += arr[i];
}
console.log(result); // 15

// 방법 2 - for..in 반복문
let result = 0;
for(let i in arr){
  result += arr[i];
}
console.log(result); // 15

// 방법 3 - for of
let result = 0;
for(let i of arr){
  result += i;
}
console.log(result); // 15

// 방법 4 - forEach()
let result = 0;
arr.forEach((i) => {
  result += i;
})
console.log(result); // 15

 

ex) reduce를 사용하여 합계 구하기

// ex 1
let arr = [1,2,3,4,5];

const sum = arr.reduce((prev, cur) => {
  return prev + cur;
}, 0);

console.log(sum); // 15

 

13) includes() : 포함하는지 확인

- 포함하면 true 반환

- 포함하지 않으면 false 반환

let arr = [1,2,3];

console.log(
  arr.includes(2), // true
  arr.includes(8), // false
);

 

14) Array.isArray() : 배열과 객체 구분

📛 주의!
typeof()로 배열과 객체를 판별하면 둘 다 배열이 나옴

- Array.isArray(배열)를 사용하면 둘의 구분이 가능함

let user = {
    name: "Lee",
    age: 22
  };
  
  let users = ["Lee", "Kim", "Woo"];
  
  console.log(
    typeof user, // object
    typeof users, // object
  
    Array.isArray(user), // false
    Array.isArray(users) // true
  );

 

15) sort() : 배열 재정렬

- 새 배열을 반환하는 것이 아니라, 배열 자체가 변경되니 주의해야함! 💥💥💥

- 인수로 정렬 로직을 담은 함수를 받음

let arr = [1,5,2,4,3];
let arr2 = [13, 21, 5, 44]
console.log(
  arr.sort(), // [1, 2, 3, 4, 5]
  arr2.sort(), // [13, 21, 44, 5]
  );

📛 주의!
sort()는 배열의 요소를 문자로 생각하고 정렬하기 때문에
13과 5를 비교할 때 '1' vs '5'를 비교하여 13이 앞 순서로 나오게 됨.

 

➡ 해결책

let arr2 = [13, 21, 5, 44];
console.log(
  arr2.sort((a,b)=>{
    return a-b;
  }) // [5, 13, 21, 44]
);

 

16) reverse() : 역순 재정렬

- 가장 최근에 댓글을 작성한 사람, 방문한 사람 등을 찾을 때 사용

let arr = [1,2,3,4,5];
arr.reverse();

console.log(arr); // [5, 4, 3, 2, 1]

---

✅ 함수

1. 함수 선언

1) function을 통해 선언

2) () 안에 파라미터 지정

3) {}문 안에 로직 작성

4) return을 통해 반환 값 저장

// sample10
function add(a, b){
    return a+b;
}

console.log(add(1,4)); // 5

 

2. 화살표 함수

(ES6부터 도입된 화살표(Arrow) 함수, 람다식)

function 대신 => 를 통해 선언 가능

const add = (a, b) =>{
    return a + b;
}
console.log(add(1,2)); // 3

 

만약 함수 안에 return 밖에 없다면?

const add = (a,b) => a+b;

{ }와 return 생략 가능

 

3. 화살표 함수의 특징
: 함수명 / arguments / this  가 없음

 

[함수명]

함수명이 없음 ➡ 익명 함수로 동작한다는 뜻

 

[arguments]

1) 보통 함수가 생성되면?

자신의 스코프 안에 자기 자신을 가리키는 this와 파라미터가 담기는 arguments가 자동으로 생성됨

const func = function(){
	console.log(arguments)
};

func(1,2,3,4); // Arguments(4) [1, 2, 3, 4]

* 파라미터 : 매개변수

 

2) 화살표 함수의 경우는?

- 자동으로 arguments가 생성되지 않음

const func = () =>{console.log(args)};
func(1,2,3);
// ERROR 발생
/*
VM381:1 Uncaught ReferenceError: args is not defined
    at func (<anonymous>:1:32)
    at <anonymous>:1:1
*/

 

- 필요하다면 함수의 파라미터 부분에 ...args를 넣어 args라는 배열 안에 파라미터를 담을 수 있음.

const func = (...args) =>{console.log(args)};
func(1,2,3); // [1, 2, 3]

💡 참고사항 💡
... : 전개 연산자
값이 몇 개가 될지 모르나 뒤에 오는 변수명에 값을 배열로 넣을 수 있음.

 

[this]

1) console.log(this); 를 찍어보면 결과로 Window 객체가 나옴.

console.log(this);
// Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …}

이유는?

console.log(this)를 호출한 함수는 전역이고 브라우저에서 Global은 Window 객체를 의미하기 때문!

 

2) this의 사용

// sample12
var people = {
    name: 'gildong',
    say(){
        console.log(this);
    }
};

people.say();

var sayPeople = people.say;
sayPeople();

// 출력결과
/*
{ name: 'gildong', say: [Function: say] }
<ref *1> Object [global] {
  global: [Circular *1],
  clearInterval: [Function: clearInterval],
  clearTimeout: [Function: clearTimeout],
  setInterval: [Function: setInterval],
  setTimeout: [Function: setTimeout] {
    [Symbol(nodejs.util.promisify.custom)]: [Getter]
  },
  queueMicrotask: [Function: queueMicrotask],
  performance: Performance {
    nodeTiming: PerformanceNodeTiming {
      name: 'node',
      entryType: 'node',
      startTime: 0,
      duration: 32.825800001621246,
      nodeStart: 0.4677000045776367,
      v8Start: 2.4589000046253204,
      bootstrapComplete: 22.77639999985695,
      environment: 11.898200005292892,
      loopStart: -1,
      loopExit: -1,
      idleTime: 0
    },
    timeOrigin: 1660719347749.774
  },
  clearImmediate: [Function: clearImmediate],
  setImmediate: [Function: setImmediate] {
    [Symbol(nodejs.util.promisify.custom)]: [Getter]
  }
}

- people.say() 에서는 people 객체가 say()를 호출함 ➡ this는 people 객체

- sayPeople 변수에 people.say를 넣고 호출함 ➡ 전역변수가 호출한 주체가 되므로 this는 전역 객체

 

3) this 객체를 고정하고 싶다면?

bind(this로 고정시킬 객체) 함수 이용

let people = {
    name: 'gildong',
    say(){
        console.log(this);
    }
};

people.say();

let sayPeople = people.say.bind(people);
sayPeople();

// 출력결과
/*
{ name: 'gildong', say: [Function: say] }
{ name: 'gildong', say: [Function: say] }
*/

➡ 그러나 화살표 함수로 만들어진 객체 경우 this가 존재하지 않기 때문에 bind를 사용해도 this를 주입할 수 없음.

 

4) this가 없다는 것의 의미는?
화살표 함수로 만들어진 객체에 this를 사용하면,
일반적인 인자나 변수와 동일하게 취급하기 때문에
내부 스코프에 this가 없고 상위 함수의 this나 전역객체의 this를 불러오게 됨.

💥 간단하게 정리하자면?

객체 안 메소드의 this = 그 메소드가 담긴 객체
함수 안의 this = 전역 객체