리액트 스터디 : JavaScript 기본 - 2 (변수, 상수, 자료형, 형 변환, 연산자, 조건문)

함수

let width1 = 10;
let height1 = 20;

let area1 = width1 * height1;

console.log(area1);

let width2 = 30;
let height2 = 15;

let area2 = width2 * height2;
console.log(area2);

 

function getArea(){
  let width = 10;
  let height = 20;

  let area = width * height;
  console.log(area);
} // 함수 선언식, 함수 선언 방식의 함수 생성

getArea();
console.log("함수 실행 완료");

 

함수를 호출하게 되면, 함수의 중괄호 내부에 있는 동작이 끝나기 전까지는 다음 동작을 실행하지 않는다.

 

function getArea(width, height){
  let area = width * height;
  return area;
}

let area1 = getArea(100,200);
console.log("area1 : ", area1);
console.log("함수 실행 완료")

 

함수 내부에서 선언된 변수는 함수 외부에서 접근할 수 없다.

 

function getArea(width, height) {
  let area = width * height;
  return area;
}

let area1 = getArea(100, 200);

console.log(area);
// PreferenceError : area is not defined

 

함수 내에서 선언된 변수 : 지역변수

함수 외부에서 선언된 변수는 함수 내부에서 접근 가능하다.

 

let count = 1;

function getArea(width, height) {
  let area = width * height;
  console.log(count);
  return area;
}

let area1 = getArea(100, 200);

 

함수 외부에 선언되어 어디에서나 접근할 수 있는 변수를 전역 변수 또는 글로벌 변수라고 부른다.

함수표현식 & 화살표 함수

Data Types

• Primitive Data Type
  - Number
  - String
  - Boolean
  - Undefined
  - Null
• Non-Primitive Data Type
  - Object
  - Array
  - Function

 

함수도 결론적으로는 값이기 때문에 변수나 상수에 담아서 활용할 수 있다.

 

let hello = function () {
  return "안녕하세요 여러분";
}

const helloText = hello();
console.log(hello);
console.log(helloText);

 

우리가 만들 함수에는 이름을 지정하지 않아도 된다. 이 함수는 hello라는 이름으로 불리면 되기 때문에 굳이 함수의 이름을 지정해줄 필요가 없다.

함수를 값에 담을 때에는 함수의 이름을 굳이 명시해주지 않아도 상관없다.

 

let hello = function () {
  return "안녕하세요 여러분";
} // 함수 표현식

function helloFunc() {
 return "안녕하세요 여러분";
} // 함수 선언식

const helloText = hello();
console.log(helloText);

 

console.log(helloB());

let helloA = function () {
  return "안녕하세요 여러분";
}; // 함수 표현식

function helloB() {
  return "안녕하세요 여러분";
} // 함수 선언식

 

함수의 호출이 함수의 선언보다 더 아래에 작성되었으나 잘 실행이 되었다. 이러한 특징을 자바스크립트에서는 호이스팅(Hoisting)이라고 한다. 간단하게 생각하자면, 함수 선언식으로 만들어진 이런 함수들은 프로그램 실행 전에 코드의 최상단으로 끌어올려진다고 생각하면 된다. 위의 코드는 사실 아래의 코드와 동일하게 작성된 것이라고 보면 된다.

 

function helloB() {
  return "안녕하세요 여러분";
} // 함수 선언식

console.log(helloB());

let helloA = function () {
  return "안녕하세요 여러분";
} // 함수 표현식

 

console.log(helloB());
// console.log(helloA());
// TypeError : helloA is not a function

let helloA = function () {
  return "안녕하세요 여러분";
}; // 함수 표현식

function helloB() {
  return "안녕하세요 여러분";
} // 함수 선언식

 

함수 선언식으로 만들어진 함수는 함수 호이스팅이 이루어졌는데, 함수 표현식은 호이스팅이 이루어지지 않는다.

 

함수를 밑바닥에 박아두어야 하는 경우, 함수 선언식을 활용할 수 있도록 한다. 그렇지 않다면 둘 중에 좋은 것을 골라서 사용하면 된다.

 

함수 표현식으로 생성된 함수는 함수 선언식으로 생성된 함수와 다르게 해당 함수가 직접적으로 선언되기 전에는 접근이 불가하다.

 

console.log(helloB());

let helloA = function() {
  return "안녕하세요 여러분";
}; // 함수 표현식

console.log(helloA());

function helloB() {
  return "안녕하세요 여러분";
} // 함수 선언식

 

let helloA = () => {
  return "안녕하세요 여러분";
};

console.log(helloA());

 

화살표 함수 : 출력만 해야 한다면 중괄호조차 작성하지 않아도 된다.

 

let helloA = () => "안녕하세요 여러분" // 함수 표현식

console.log(helloA());

 

화살표 함수 또한 호이스팅의 대상이 아니다.

순서를 잘 지켜서 코딩을 해주어야 한다.

콜백함수

콜백함수 : 다른 함수의 매개변수로 함수를 넘겨준 것을 의미한다.

 

function checkMood(mood){
  if (mood === "good") {
    // 기분 좋을 때 하는 동작
  } else {
    // 기분 안 좋을 때 하는 동작
  }
}

chekMood("good");

function checkMood(mood, goodCallback, badCallback) {
  if (mood === "good") {
    // 기분 좋을 때 하는 동작
    goodCallback();
  } else {
    // 기분 안 좋을 때 하는 동작
    badCallback();
}

funciton cry() {
  console.log("ACTION :: CRY")
}

function sing() {
  console.log("ACTION :: SING");
}

function dance() {
  console.log("ACTION :: DANCE");
}

checkMood("good", sing, dance);
checkMood("sad", sing, cry);
// cry라는 함수가 값으로서 들어왔다.

 

함수 표현식의 개념을 이용해서 cry라는 함수 자체를 badCallback이라는 매개변수에 값을 담았다. 그리고 badCallback의 매개변수를 호출한다. 결과론적으로 badCallback 호출은 cry라는 함수를 호출하게 되는 것과 같다.

Callback 함수 : 함수의 parameter로 함수를 넘기는 것

매개변수 값을 함수로 넘겨줬다. 그래서 그 함수를 수행할 수 있게 됐다.

Callback 함수를 이런 식으로 이용하게 되면, 굉장히 여러 가지 유연한 동작을 할 수 있는 그런 함수를 만들 수 있게 된다. 이런 Callback 함수에 대해서는 뒤에 나오는 배열의 내장함수라는 내용에서 다룰 것이기 때문에, 많이 실습하면서 최대한 이해했으면 좋겠다.

객체

자바스크립트의 자료형

• Primitive Type (원시 타입)

  let number = 12;

  한 번에 하나의 값만 가질 수 있음
  하나의 고정된 저장 공간 이용
• Non-Primitive Type (비원시 타입)

  let array = [1, 2, 3, 4];

  한 번에 여러 개의 값을 가질 수 있음
  여러 개의 고정되지 않은 동적 공간 사용

let person = new Object(); // 객체 생성자 방식

 

let person = {
  key : "value", // 프로퍼티 (객체 프로퍼티)
  key1 : "value2"
  key2 : true,
  key3 : undefined,
  key4 : [1, 2],
  key5 : function () {}
}; // 객체 리터럴 방식

console.log(person);

 

key는 문자열로만 입력이 가능한데, 따옴표를 사용하지는 않는다. key 값을 중복하여 입력할 수 있지만, 가장 마지막에 입력된 프로퍼티를 기준으로 키를 찾으므로 먼저 입력된 것은 무시된다.

 

let person = new Object(); // 객체 생성자 방식

let person = {
  key : "value", // 프로퍼티 (객체 프로퍼티)
  key1 : "value2"
  key2 : true,
  key3 : undefined,
  key4 : [1, 2],
  key5 : function () {}
}; // 객체 리터럴 방식

console.log(person.key1);
console.log(person.key2);

 

프로퍼티를 통해 접근하는 것을 표기법이라고 하고, 점을 통해 접근하는 것을 점 표기법이라고 한다.

 

let person = {
  name : "Charlie Puth",
  age : 33
}

console.log(person.name);
console.log(person.age);

 

없는 프로퍼티의 키에 접근하고자 한다면 undefined가 출력된다.

 

let person = {
  name : "Charlie Puth",
  age : 33
}; // 객체 리터럴 방식

console.log(person["name"]);
console.log(person.age);

 

괄호 표기법을 이용할 때에는 반드시 key를 문자열 형태로 넣어주어야 한다. 따옴표를 빼고 넣으면 에러가 뜬다. 변수로 인식하기 때문이다.

 

let person = {
  name : "Charlie Puth",
  age : 33
}; // 객체 리터럴 방식

const name = "name";
console.log(person[name]);
console.log(person.age);

 

위와 같이 사용할 수도 있다.

 

let person = {
  name : "Charlie Puth",
  age : 33
}; //객체 리터럴 방식

console.log(getPropertyValue("name"));

function getPropertyValue(key) {
  return person[key];
}

 

괄호 표기법을 이용하면 좋은 상황 : 동적인 파라미터를 전달받는 상황, 키를 꺼내야 하는데 그 키가 고정되어 있지 않은 상황. 점 표기법보다 괄호 표기법을 통해 객체의 프로퍼티에 조금 더 쉽게 접근할 수 있다.

 

객체의 생성 이후에 프로퍼티를 추가, 수정, 삭제하는 방법?

 

let person = {
  name : "Charlie Puth",
  age : 33
};

person.location = "United States";
person["gender"] = "Male";

person.name = "Charlie Puth A";
person["age"] = 34;
console.log(person);

 

점 표기법, 괄호 표기법을 통해 추가, 수정이 가능하다.

 

여기에서 let으로 객체를 만들었는데, 이것을 const로 바꾸면 에러가 날 것 같지 않은가? 하지만 에러가 발생하지 않는다. 왜 그럴까? 프로퍼티라는 값을 수정하는 행위는 person이라는 상수 자체를 수정하는 행위가 아니기 때문이다. person이라는 상수가 갖는 오브젝트를 수정하는 행위인 거지, 객체를 수정하는 행위인 거지, person이라는 상수 자체를 수정하는 행위가 아니다.

 

그럼 person이라는 상수 자체를 수정하는 행위란 무엇일까?

 

const person = {
  name : "Charlie Puth",
  age : 33
};

person = {
  age : 20
};

 

이런 식으로 새로운 객체를 대입 연산자를 통해서 할당하는 예가 상수를 훼손하는 예이다.

상수로 선언한 person 자체에 대입 연산을 하지 않으면, 에러가 발생하지 않는다는 뜻이다. 객체는 상수로 선언을 했다고 하더라도, 이런 식으로 객체의 프로퍼티를 추가하고 수정할 수 있다.

 

const person = {
  name : "Charlie Puth",
  age : 33
};

delete person.age;
delete person["name"];

console.log(person);

 

점 표기법, 괄호 표기법 중 하나를 선택하여 프로퍼티를 삭제할 수 있다. 하지만 이렇게 삭제하는 방법은 객체와 삭제 대상인 프로퍼티 사이의 연결을 끊을 뿐, 실제로 메모리에서 값이 지워지는 것은 아니다. 그렇다면 이런 식으로 객체를 계속 지워봤자 메모리는 계속 쓰고 있을 것이다. delete를 사용하는 것보다 이런 방법을 추천한다.

 

const person = {
  name : "Charlie Puth";
  age : 33
};

person.name = null;

console.log(person);

 

delete를 통해 삭제한 것은 메모리의 연결을 지우지 않는다고 했다. 하지만 null 값을 대입해주게 된다면 기존의 값을 메모리에서 날릴 수 있다.

 

const person = {
  name : "Charlie Puth", // 멤버
  age : 33, // 멤버
  say : function () {
    console.log("안녕");
  }; // 메서드

person.say();
person["say"]();

 

const person = {
  name : "Charlie Puth", // 멤버
  age : 33, // 멤버
  say : function () {
    console.log(`안녕 나는 ${this.name}`);
    console.log(`안녕 나는 ${this["name"]}`);
    console.log(`안녕 나는 ${person["name"]}`);
  } // 메서드 -> 방법
};

person["say"]();

 

객체에 존재하지 않는 프로퍼티에 접근하면 어떻게 될까?

 

const person = {
  name : "Charlie Puth", // 멤버
  age : 33, // 멤버
  say : function () {
    console.log(`안녕 나는 ${person["name"]}`);
  } // 메서드 -> 방법
};

console.log(person.gender);

 

출력하게 되면 gender라는 프로퍼티가 없기 때문에 undefined를 반환받게 된다. 이러한 방식은 유연한 프로그래밍을 가능하게 하지만, 존재하지 않는 프로퍼티에 잘못 접근해서 연산을 수행한다거나 하는 오류가 발생할 수 있다. 존재하지 않는 프로퍼티에는 접근하지 않는 것이 가장 좋다. 접근하고자 하는 프로퍼티가 객체에 존재하는지 존재하지 않는지 확인하는 방법이 있다면 좋을텐데, 그런 방법이 실제로 있다.

 

console.log(`name : ${"name" in person}`);

 

person 객체에 name이라는 프로퍼티가 있냐?
in 연산자를 활용하면 객체 안에 프로퍼티가 있는지 확인할 수 있다.

 

const person = {
  name : "Charlie Puth", // 멤버
  age : 33, // 멤버
  say : function () {
    console.log(`안녕 나는 ${person["name"]}`);
  } // 메서드 -> 방법
};

console.log(`name : ${"name" in person}`); // true
console.log(`age : ${"age" in person}`); // true
console.log(`gender : %{"gender" in person}`); // false

 

이런 식으로 in 연산자를 객체와 함께 활용하여 프로퍼티의 존재 여부를 boolean으로 반환받을 수 있다.

배열

배열 : 순서 있는 원소들의 집합

 

let arr = new Array(); // 배열 생성자
let arr = []; // 배열 리터럴

 

let arr = []; // 배열 리터럴
console.log(arr); // []

 

let arr = [1, 2, 3, 4]; // 배열 리터럴
console.log(arr);
// (4) [1, 2, 3, 4]

 

let arr = [1, "2", true, null, undefined, {}, [], function () {}];
console.long(arr);
// (8) [1, "2", true, null, undefined, Object, Array(0), f ()]

 

자료형이 다르더라도 하나의 배열에 모두 담을 수 있다.

 

let arr = [1, 2, 3, 4, 5]; // 배열 리터럴
console.log(arr);
// (5) [1, 2, 3, 4, 5];
console.log(arr[0]); // 1
console.log(arr[1]); // 2
console.log(arr[2]); // 3
console.log(arr[3]); // 4
console.log(arr[4]); // 5
console.log(arr[5]); // undefined

 

let arr = [1, 2, 3, 4, 5]; // 배열 리터럴

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

arr.push({ key : "value" });
console.log(arr);
// (7) [1, 2, 3, 4, 5, 6, Object]

 

자료형에 관계없이 뭐든 추가할 수 있다.

 

let arr = [1, 2, 3, 4, 5]; // 배열 리터럴

console.log(arr.length);

 

점 표기법과 length를 활용하여 길이를 받아온다. 마치 객체의 프로퍼티 접근법과 같다. 배열 자체도 객체로 이루어져 있다. 이런 식으로 리스트형 데이터도 담을 수 있지만, 자신에게 굉장히 유용한 함수나 프로퍼티들을 객체처럼 저장해두었기 때문에, 프로퍼티인 length를 꺼내오면, 현재 배열의 길이를 가지고 있다. length는 배열이 바뀌면 자동으로 갱신된다. 배열은 객체와 더불어서 자바 스크립트에서 가장 많이 사용되는 자료형이다.

반복문

 

console.log("_woo_s.j");
console.log("_woo_s.j");
console.log("_woo_s.j");
console.log("_woo_s.j");
console.log("_woo_s.j");

 

for (let i = 1; i <= 100; i++){
  // 반복 수행할 명령
  console.log("_woo_s.j");
}

for (초기식 ; 조건식; 연산) {

// 반복 수행할 명령

}

 

초기식 : 반복의 주체가 되는 변수를 선언할 수 있다.
조건식 : 이 반복이 이 조건을 만족할 때만 돌아가게 하라.
연산 : 반복이 한 번 수행될 때마다 하는 연산을 적어주면 된다.

 

for문은 배열을 순회할 때 매우 유용하게 사용할 수 있다. 순회라는 것은 간단히 말해서 배열 안의 모든 요소를 한 번씩 접근하는 것을 의미한다.

 

const arr = ["a", "b", "c"];

for (let i = 0; i < arr.length; i++) {
 // 반복 수행할 명령
 console.log(arr[i]);
}

 

객체 순회에 대해 알아보도록 하겠다.

 

let person = {
  name : "Charlie Puth";
  age : 33,
  tall : 177.8
};

const personKeys = Object.keys(person);
console.log(personKeys);
// ["name", "age", "tall"]

for (let i = 0 ; i < personKeys.length; i++) {
  console.log(personKeys[i]);
}

 

객체에서 키 값만 뽑아서 배열로 반환시키는 객체 내장 함수를 사용해보도록 하겠다.
Object.keys 함수 : 객체 안에 있는 키 값들을 순서대로 배열로 반환받을 수 있다.

 

let person = {
  name : "Charlie Puth";
  age : 33,
  tall : 177.8
};

const personKeys = Object.keys(person);

for (let i = 0 ; i < personKeys.length; i++) {
  const curKey = personKeys[i];
  const curValue = person[curKey];

  console.log(`${curkey} : ${curValue}`);
}

 

value만 순회할 수도 있다.

 

let person = {
  name : "Charlie Puth";
  age : 33,
  tall : 177.8
};

const personValues = Object.values(person);

for (let i = 0 ; i < personValues.length; i++) {
  console.log(personValues[i]);
}

배열 내장 함수

1. forEach

배열을 순회하는 내장 함수

 

const arr = [1, 2, 3, 4];
arr.forEach((elm) => console.log(elm)); // 콜백함수
arr.forEach(function (elm) {
  console.log(elem));
});

 

arr이라는 배열에 forEach라는 메서드, 내장 함수를 사용하게 되면, 이 내장 함수에 전달하는 콜백 함수를 이 배열의 각각의 요소들에 대해서 실행한다고 생각하면 되겠다.

배열의 모든 원소를 2배로 한 배열을 만들어보겠다.

 

const arr = [1, 2, 3, 4];
const newArr = [];

arr.forEach(function (elem) {
  newArr.push(elm * 2);
});

console.log(newArr);

 

2. map

 

const arr = [1, 2, 3, 4];
const newArr = arr.map((elm) => {
  return elm * 2;
});

console.log(newArr);

 

배열의 map 내장 함수는 배열의 각각 모든 요소에 대해서 한 번씩 콜백 함수를 수행한다고 생각하면 된다.

map이라는 배열의 내장 함수는 원본 배열의 모든 원소를 순회하면서 어떤 연산을 해서, 리턴된 이 값들만을 따로 배열로 추려내서 반환할 수 있게 해주는 함수이다.

배열에 어떤 값이 있는지, 있다면 true, 없다면 false인 프로그램을 만들어보겠다.

 

const arr = [1, 2, 3, 4];

let number = 3;

arr.forEach((elm) => {
  if (elm === number) {
   console.log(true);
  }
});

 

3. includes

주어진 배열에서 전달받은 인자와 일치하는 값이 존재하는지를 확인하여 boolean 형식으로 리턴해준다. (=== 연산을 활용한다 : 자료형까지 일치하는지를 확인한다.)

 

const arr = [1, 2, 3, 4];

let number = "3";

console.log(arr.includes(number));

 

주어진 요소가 배열에 존재하는지 안 하는지만 확인하는 것이 아니라 존재하면 몇 번째에 있는지, 인덱스를 출력하는 그런 프로그램을 만들어보도록 하겠다.

 

4. indexOf

주어진 배열에서 전달받은 인자와 일치하는 값의 인덱스를 반환하는 함수라고 했는데, 만약에 주어진 값과 배열 안에 있는 값이 일치하는 것이 하나도 없을 경우 -1을 반환한다.

 

const arr = [1, 2, 3, 4];

let number = "3";

console.log(arr.indexOf(number));

 

arr이라는 상수 배열이, 이전처럼 단순히 숫자만 가지고 있는 배열이 아니라, 복잡한 객체들을 포함하고 있는 배열이라고 할 경우에는, 우리가 방금 배운 includes나 indexof는 조금 사용하기 힘들 것 같다. 그렇다면 이런 객체 배열에서, 원하는 속성을 갖는 배열의 요소의 인덱스를 얻기 위해서는 어떻게 작성할 수 있을까?

● 콜백 함수는 각각의 요소에 대해서 모두 순회를 하면서 사용하기 때문에 이런 식으로 element를 전달받게 된다.

 

5. findIndex

 

const arr = {
  { color : "red" },
  { color : "black" },
  { color : "blue" },
  { color : "green" }
};

let number = 3;

console.log(arr.findIndex((elm) => elm.color === "green"));

 

배열의 findIndex 메서드를 이용하면 콜백 함수를 전달해서 해당 콜백 함수가 true를 반환하는 첫 번째 요소를 반환하는 그런 로직을 작성할 수 있다.

 

console.log(
  arr.findIndex((elm) => {
    return elm.color === "red";
  })
};

 

arr이라는 배열의 모든 요소를 한 번씩 순회를 한다. 순서대로.

 

주의해야 할 것 : findIndex는 일치하는 인덱스가 두 개 이상 있을 경우 가장 먼저 만나게 되는 녀석을 반환할 수밖에 없게 된다. 왜냐? findIndex는 배열을 처음부터 끝까지 순서대로 순회하면서 가장 먼저 조건을 만족하는 녀석의 인덱스를 반환하는 함수이다. 이런 경우에는 이 함수를 사용하고자 하는 배열이 이 함수를 사용하기에 유효한가를 한 번 더 확인해보고 사용해보는 것을 권장한다.

 

이렇게 해서 얻을 수 있는 것은 배열의 인덱스이다. 우리가 찾고자 하는 요소에 직접적으로 접근하고 싶다면 이 인덱스를 활용해야 한다.

 

const arr = [
  { color : "red" },
  { color : "black" },
  { color : "blue" },
  { color : "green" },
  { color : "blue" }
];

let number = 3;

const idx = arr.findIndex((elm) => {
  return elm.color === "blue";
});

console.log(idx);
console.log(arr[idx]);

 

6. find

배열의 원소에 직접 접근하고 싶다면 굳이 findIndex를 사용할 필요가 없다. 왜냐하면, 우리가 6번째로 배울 find라는 메서드를 사용하면 인덱스를 가져오는 것이 아니라 조건에 일치하는 요소를 그냥 가져오는 것이기 때문이다.

 

const arr = [
  { color : "red" },
  { color : "black" },
  { color : "blue" },
  { color : "green" },
  { color : "blue" }
];

let number = 3;

const element = arr.find((elm) => {
  return elm.color === "blue";
});

console.log(element);

 

이 함수도 findInex와 마찬가지로 조건을 만족하는 가장 첫 번째 요소를 반환한다. 작동하는 방식은 동일한데 findIndex는 인덱스를 반환하고, find는 요소를 반환한다.

 

7. filter

전달한 콜백 함수가 true를 반환하는 모든 요소를 배열로 반환하는 메서드

 

배열을 필터링해보는 예제를 한 번 해보겠다.

 

const arr = [
  { num : 1, color : "red" },
  { num : 2, color : "black" },
  { num : 3, color : "blue" },
  { num : 4, color : "green" },
  { num : 5, color : "blue" }
];

console.log(arr.filter((elm) => elm.color === "blue"));

 

8. slice

 

const arr = [
  { num : 1, color : "red" },
  { num : 2, color : "black" },
  { num : 3, color : "blue" },
  { num : 4, color : "green" },
  { num : 5, color : "blue" }
];

console.log(arr.slice(0, 2)); // 0 ~ 1까지만 자른다

 

9. concat

첫 번째 명시한 배열 뒤로 두 번째로 전달한 배열을 갖다 붙인다. 그래서 하나의 배열로 다시 리턴해준다.

 

const arr = [
  { num : 1, color : "red" },
  { num : 2, color : "black" },
  { num : 3, color : "blue" }
];

const arr = [
  { num : 4, color : "green" },
  { num : 5, color : "blue" },
];

console.log(arr1.concat(arr2));

 

10. Sort

정렬된 배열을 반환해주는 것이 아니라 원본 배열을 정렬한다. 원본 배열의 순서를 정렬하는 메서드.

 

let chars = ["나", "다", "가"];

chars.sort();

console.log(chars);

 

let numbers = [0, 1, 3, 2, 10, 30, 20];

numbers.sort();

console.log(numbers);

 

sort는 숫자를 기준으로 정렬하는 것이 아니라 문자열을 기준으로 정렬하기 때문에 이것을 사전 순으로 정렬하게 된다. 이런 경우에는 sort 메서드의 매개변수에 비교 함수를 넣어서 작성해주어야 한다. 비교 함수는 두 개의 값을 비교해서 세 가지 중 하나의 결과를 내놓아야 한다.

 

let numbers = [0, 1, 3, 2, 10, 30, 20];

const compare = (a, b) => {
  // 1. 같다
  // 2. 크다
  // 3. 작다

  if (a > b) {
    // 크다
    return 1;
  }

  if (a < b) {
    // 작다
    return -1;
  }

  // 같다
  return 0;
}

numbers.sort(compare);

console.log(numbers);

 

1을 반환한다 : a가 b보다 뒤에 있어야 한다는 뜻 : 큰 값이 뒤로 가야 한다는 뜻

-1을 반환한다 : a가 b보다 앞에 있어야 한다는 뜻 : 작은 값이 앞으로 가야 한다는 뜻

→ 오름차순 배열!

내림차순으로 정렬하고 싶다면?

양수 → 음수, 음수 → 양수로 바꾼다면 내림차순으로 정렬할 수도 있다.

이런 식으로 비교 함수를 우리가 직접 제작해서 sort 메서드에 전달하면, 정수 배열 말고도, 객체 배열, 배열들의 배열, 함수들의 배열도 원하는 대로 우리가 정렬할 수 있겠다.

 

11. join

배열 내의 모든 요소를 문자열 형태로 합치는 메서드. 기본은 쉼표, 매개변수를 넣어주면 해당 문자를 각 원소들 사이사이에 넣어준다. 구분자.

문자열로 합쳐서 출력할 수 있게 한다.(?) 문자열 내부 값 변경?

 

const arr = ["_woo_s.j", "님", "안녕하세요", "또오셨군요"];

console.log(arr.join());

 

 

해당 게시글은 인프런 - <한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지> 강의 내용을 기반으로 작성되었음을 알립니다.