[React] Javascript 기본

내가 처음으로 완주한 유데미 강의,,ㅎㅎ

본 블로그는 Udemy의 한입 크기로 잘라 먹는 리액트 강의를 듣고 개인적으로 복습하고자 작성되었습니다!

배운 내용을 쓰기에 앞서 강의에 대해 살짝 설명하자면,

하나의 리액트 프로젝트를 제작부터 배포까지 진행하면서, 리액트의 전반적인 학습과 더불어 결과물까지 남길 수 있습니다.

감정 일기장

제 결과물입니다,, 강의를 완주하시면 이런 사이트를 만들 수 있습니다.

강의를 그대로 따라가서 제 사이트 자체에 특별한 건 없지만, 이런 번듯한 사이트를 만들 수 있어 저에겐 무척 의미있었습니다.

저처럼 html/CSS 조금 알고 JS를 찍먹만 해본 사람들에게 딱 맞는 강의입니다!

 

그럼 복습 시작~

목차

1. 변수와 상수

2. 자료형 종류

3. 연산과 관련된 JS의 특징

4. JS의 함수식

5. Callback 함수

6. 객체

7. 배열

8. forEach

9. map

10. 배열 내장 함수

 

JS의 변수와 상수

상수: 값을 바꿀 수 없는 것으로, 키워드로 const를 사용

변수: 값을 바꿀 수 있는 것으로, 키워드로 let을 사용

ex)

const name = "mingbee";
let age = 86;

이 외에 var 키워드도 있지만, 잘 사용하지 않습니다.

이는 변수 중복 선언이 가능하기 때문입니다.

 

변수 중복선언

: 같은 이름으로 변수를 여러 번 선언하고 할당받아도 에러가 나지 않는 것

var age = 25;
var age = 30;

즉 이런 게 된다는 겁니다,,

실수로라도 이미 사용한 변수를 또 쓰지 않기 위해, var 키워드 사용은 지양해야겠습니다.

 

JS의 자료형 종류

Primitive Type(원시 타입)

: 한 번에 하나의 값만 가질 수 있고, 고정된 공간을 이용합니다.

ex) 숫자 타입 등

let number = 12;

Non-Primitive Type(비원시 타입)

: 한 번에 여러 값을 가질 수 있고, 여러 고정되지 않은 동적 공간 이용합니다.

ex) 배열 등

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

 

타입, 연산과 관련된 JS의 특징

1. Infinity, -Infinity, NaN(not a number)도 숫자로 정의됩니다.

let number = -Infinity;

2. 템플릿 리터럴

: 백틱(``) 안에 ${}를 쓴 후, 중괄호 안에 변수를 넣어 문자열처럼 사용 가능합니다.

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

// 출처 Mdn web docs

3. 묵시적 형변환, 명시적 형변환

console.log(12*"2");
//24

JS는 12*"2"의 결과로 24를 출력합니다,,

"2"를 넣어도, 문맥상 숫자가 들어갈 자리라면 알아서 "2"를 2로 고쳐 계산하기 때문입니다.

console.log(12+"2");
//"122"
console.log(12+parseInt("2"));
//14

반면 12+"2"의 결과는 "122"를 출력하는데요ㅜㅜ

여기서도 제대로 정수 계산을 하기 위해선 parseInt()를 사용한 명시적 형변환이 필요합니다.

참고로 typeof를 변수 앞에 붙이면 해당 인자의 타입을 반환합니다.

 

4. undefined와 ??

JS는 변수를 선언만 하고 값을 넣지 않았을 때 그 값을 undefined라고 정의합니다.

const a = null 이라고 넣은 후 해당 변수를 다루기에 명시적으로 알 수 있는 null과 달리,

아예 변수에 값을 넣지 않을 때 undefined가 됩니다.

특정 변수가 null이거나 undefined는 아닌지 유효성을 검사할 때는 연산자 ??를 사용하면 됩니다.

연산자 ??를 잘 이용하면 외부에서 값을 제대로 못받았을 때를 처리할 수 있습니다!

let a;
a = a ?? 10;
// a가 undefined일 경우 a에 10을 넣는다

 

5. '=='와 '==='

JS는 값이 같은지 비교하는 연산자가 둘입니다.

'=='는 두 값이 값만 같으면 true를 반환하는데, '==='는 두 값이 값과 타입 모두 같아야 true를 반환합니다.

즉 우리가 흔히 아는 일치 연산자는 '==='이 되겠습니다.

예제 코드를 보면 이해하기 쉬울 듯 합니다.

(JS는 참 타입에 관대한 언어 같습니다...)

var a = 1; 
var b = "1"; 
console.log(a == b); // true 
console.log(a === b); // false

 

JS의 함수식

JS의 함수식은 크게 선언식과 표현식으로 나뉩니다.

이건 설명하기보다 코드를 보는 게 이해가 더 빠를 것 같습니다.

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

먼저 함수 선언식입니다. 우리가 흔히 아는 함수의 모양입니다.

선언식의 특징은 hoisting이 일어난다는 점입니다.

hoisting이란 코드 아래쪽에 함수를 정의해도, 실행할 경우 코드 최상단에 올려 선언되는 것을 말합니다.

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

이건 함수 표현식입니다. 함수를 정의한 후 변수에 넣는 모양을 가졌습니다.

표현식은 선언식과 다르게 함수가 하나의 변수에 들어가므로, 정의를 먼저 한 후 정의 밑부분에서 사용해야 합니다.

위의 코드를 설명하자면 hello 함수를 표현식으로 쓴 후, 바로 실행하게 만드는 ()를 붙여 다른 변수에 넣고, 이를 출력한 것입니다.

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

표현식의 경우 이렇게 화살표 함수로도 나타낼 수 있습니다.

() 안에 매개변수가 들어가고, {} 안에 실행할 코드를 쓰면 됩니다.

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

만약 위의 helloA처럼 다른 실행문 없이 반환만 할 경우, 중괄호와 return 을 빼고 바로 반환값을 써도 됩니다.

 

Callback 함수

해당 함수 안에서 실행할 일들을 함수 호출 시에 정해주는 함수를 콜백함수라고 합니다.

함수 호출 시 매개변수 위치에 함수 이름을 써놓으면, 이를 매개변수로 전달받아 선언할 때 써놓은 대로 실행이 될 것입니다.

이것도 역시 코드를 보면 이해가 빠릅니다.

function checkMood(mood, goodCallback, badCallback) {
  if (mood === "good") {
    goodCallback();
  } else {
    badCallback();
  }
}
function smile() {
  console.log("^^");
}
function cry() {
  console.log("ㅠㅠ");
}
function dance() {
  console.log("춤춰~");
}
checkMood("sad", smile, dance);
// "춤춰~"

이 코드에서 콜백으로 전달해준 함수는 smile과 dance입니다.

호출받은 checkMood 함수를 봅시다.

mood로 "good"를 받는다면 goodCallback 함수를 실행하고, 그게 아닐 경우 badCallback 함수를 실행합니다.

근데 저는 호출 시 goodCallback으로 smile 함수를, badCallback으로 cry 함수를 주었으므로

checkMood에서 먼저 mood가 "sad"임을 확인한 후, "good"이 아니므로 badCallback으로 받은 dance 함수를 실행할 것입니다.

 

객체

JS는 객체 생성 방식도 생성자 방식과 객체 리터럴 방식 두 가지입니다.

let person = new Object();

이렇게 new를 이용해 생성하는 것이 생성자 방식이고,

let person = {};

{}만 쓰는 것이 객체 리터럴 방식입니다. 객체 리터럴 방식을 더 자주 사용합니다.

let person = {
  key: "value",
  key1: 123,
  key2: true,
  key3: undefined,
  key4: [1, 2],
  key5: function () {}
};
console.log(person.key1);    //점표기법
console.log(person['key2']);    //괄호표기법

객체의 호출 방법도 두 가지입니다.

객체이름.키이름 이렇게 .을 이용해 표기하는 것을 점표기법,

객체이름['키이름'] 이렇게 괄호로 표기하는 것을 괄호표기법이라고 합니다.

 

객체의 수정, 삭제, 추가

const person = {
  name: "최명빈",
  age: 123
};

 

위와 같은 객체가 있다고 해보겠습니다.

person.name = "밍비";

이렇게 객체를 수정할 수 있습니다.

//delete person["name"];
person.name = null;    //이렇게 삭제해야 메모리연결도 해제됨

삭제를 하는 방법에는 위의 두 가지가 있습니다.

하지만 delete를 쓸 경우 메모리 연결이 그대로 남아서, 메모리 낭비가 생깁니다.

따라서 null을 사용해 삭제하는 것이 깔끔합니다.

person.location = "한국";
person["gender"] = "여성";

마지막으로 추가하는 방법입니다.

점표기법과 괄호표기법 모두 사용가능합니다.

 

this

const person = {
  name: "최명빈",
  age: 123,
  say: function () {
    return `안녕 나는 ${this.name}`;
  }
};
 
console.log(person.say());

위처럼 객체 안에 함수를 넣을 수도 있습니다.

this를 사용하면 객체 안에서 자기자신을 접근할 수 있습니다.

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

위의 코드는 "name"이라는 이름의 키가 person 객체에 있는지 확인해 출력하는 코드입니다.

이런식으로 객체를 키이름의 문자열들로 이뤄진 배열처럼 접근할 수도 있습니다.

 

배열

배열은 곧 키가 없는 객체입니다. 다른 타입의 값들을 넣을 수 있습니다.

const person = {
  name: "최명빈",
  age: 123,
  height: 175
};
 
const personKeys = Object.keys(person);
 
for (let i = 0; i < personKeys.length; i++) {
  const pKey = personKeys[i];
  const pVal = person[pKey];
  console.log(`${pKey} : ${pVal}`);
}

객체에서 Object.keys(객체명)를 이용하면 객체의 키만 모아서 배열로 만들 수 있습니다.

 

forEach

forEach는 배열의 모든 항목에 대해 특정 코드를 반복해 실행하고자 할 때 사용합니다.

const arr = [1, 2, 3, 4];
 
arr.forEach((elm) => {
  console.log(elm);
});

위의 코드를 예로 들자면, arr 배열의 모든 요소가 차례대로 elm으로 들어가 출력됩니다.

 

map

map 함수는 배열의 모든 항목에 대해 특정 코드를 적용한 새로운 배열을 만들 때 사용합니다.

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

위의 코드에서 newArr 배열은 각 항목에 2가 곱해진 [2,4,6,8]이 됩니다.

 

배열 내장 함수

includes: 배열이 해당 값을 갖고있는지 true/false로 반환합니다.

indexOf: 배열 안에 해당 값이 있으면 index를, 없으면 -1을 반환합니다.

const arr = [1, 2, 3, 4];
 
let number = 3;
 
console.log(number in arr);
console.log(arr.includes(3));
//indexOf 함수는 배열에 없을경우 -1을 반환함
console.log(arr.indexOf(number));
 
// arr.forEach((elm) => {
// if (elm === number) {
//   console.log(true);
// }
// });

findIndex: 파라미터로 넣은 함수의 조건을 만족하는 첫 원소의 index를 반환합니다.

const arr = [
  { color: "red" },
  { color: "yellow" },
  { color: "blue" },
  { color: "green" }
];
 
console.log(arr.findIndex((elm) => elm.color === "yellow"));

find: 파라미터로 넣은 함수의 조건을 만족하는 요소를 반환합니다.

const arr = [
  { color: "red" },
  { color: "yellow" },
  { color: "green" },
  { color: "blue" }
];
 
//console.log(arr.findIndex((elm) => elm.color === "blue"));
 
const element = arr.find((elm) => elm.color === "green");
 
console.log(element);

여기서는 {color:"green"} 객체가 반환됩니다.

 

filter: 조건에 해당하는 값들을 모두 찾아줍니다.

const arr = [
  { num: 1, color: "red" },
  { num: 2, color: "yellow" },
  { num: 3, color: "green" },
  { num: 4, color: "blue" },
  { num: 5, color: "blue" }
];
 
console.log(arr.filter((elm) => elm.color === "blue"));

여기서는 num이 4인 객체와 5인 객체 두 개가 반환됩니다.

slice: 인자 두개를 받아, (첫인자)~(두번째인자-1)번째까지 배열을 잘라냅니다.

arr.slice(0,3) // 배열 0번째~3-1번째 요소까지 자름

concat: 두 배열을 붙입니다.

arr1.concat(arr2)

sort: 원본 배열을 정렬시킵니다. 이때 sort() 함수의 대상이 되는 원래 배열이 바뀐다는 점을 명심합시다.

arr.sort()

여기서 숫자를 정렬해도, 문자열로 보고 정렬하기 때문에 숫자를 정렬하기 위해서는 따로 함수를 만들어야 합니다.

다음은 숫자 배열을 정렬하는 예제 코드입니다.

const nums = [0, 1, 3, 2, 10, 30, 20];
 
//앞 숫자가 더 크면 1, 더 작으면 -1, 같으면 0 반환
const compare = (a, b) => {
  if (a > b) return 1;
  if (a < b) return -1;
  else return 0;
};
nums.sort(compare);
console.log(nums);

위처럼, 비교하는 함수를 따로 만든 후 sort 함수에 파라미터로 넣으면 그 함수에 따라 정렬됩니다.

 

join: 배열의 요소들을 하나의 문자열로 붙입니다.

const chars = ["안녕", "밍비", "만나서", "반가워"];
// chars.forEach((elm) => console.log(elm));
 
console.log(chars.join(" "));
// 안녕 밍비 만나서 반가워

 

챕터2 끝,,