[한입 크기로 잘라 먹는 리액트(React.js)] 섹션 1. JavaScript 기본

이정환님의 인프런 [한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지]강좌를 참고하여 작성하였습니다. 

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8#

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의

---

Hello World

🍅 자바 스크립트란?

• HTML
• CSS
• Javascript

🍅 자바 스크립트의 실행 환경

• 엔진

🍅 실습

• 개발자 도구 이용(F12)
• codesandbox 이용(해당 강의에선 Vanilla  템플릿 사용)

변수와 상수

• 변수는 let을 이용하여 선언할 수 있다. 

🍅 변수명 명명 규칙

• 기호 사용은 불가능하다. (단, _$ 기호는 사용 가능하다.)
• 변수명은 문자로 시작해야 한다. 즉, 숫자로 시작하는 것은 불가능하다. 
• javascript의 예약어는 변수명으로 사용할 수 없다. 

🍅 var을 이용한 변수 선언

• 같은 변수명으로 새로운 값을 새롭게 선언하여도 오류가 나지 않는다. 
• 그래서 앞으로 실수는 let으로 선언. 

🍅 상수

• 상수는 선언 이후에 값을 변경하는 것이 불가능하다. 

---

자료형과 형 변환

🍅 자바스크립트의 자료형

• Primitive Type (원시타입) :
  • 한 번에 하나의 값만 가질 수 있음. 하나의 고정된 저장 공간 이용
• Non - Primitive Type (비 원시 타입)
  • 한번에 여러 개의 값을 가질 수 있음 여러 개의 고정되지 않은 동적 공간 사용

🍅 원시타입

• 숫자형

• 문자형

•  boolean 형

• Null 

• undefined

🍅 형변환

• 묵시적 형 변환

•  명시적 형 변환

---

연산자

🍅 대입 연산자

🍅 산술 연산자

🍅 연결 연산자

🍅 복합 연산자

🍅 증감 연산자

• 숫자형에만 사용할 수 있다. 

🍅 논리 연산자

🍅 비교 연산자

==	자료형에 관계없이 값이 같다.
===	엄격하게 같다. (자료형과 값이 같다.)
!=	자료형에 관계없이 같지 않다.
!==	엄격하게 같지 않다. (자료형과 값이 다르다.)

<	작다
<=	작거나 같다
>	크다
>=	크거나 같다

🍅 typeof  연산자

🍅 Null 병합 연산자

• a 가  null이거나 undefined 이면  a, 아니면 10을 할당한다. 

---

조건문

• 참 거짓에 따라서 각자 다른 지시를 내리기 위해 사용

🍅if - else if - else 문

🍅 switch  문

---

함수

---

함수표현식 & 화살표 함수

---

콜백함수

매개변수에 함수를 넣는다. 

---

객체

객체는 여러가지 데이터를 담을 수 있는 Non-Primitive Type(비 원시 타입)이다. 

🍅 객체를 생성

let person1 = new Object(); //생성자 방식

let person2 = {};    //객체 리터럴 방식

 

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

console.log(person);    
//{
//  key: 'value',
//  key1: 123,
//  key2: true,
//  key3: undefined,
//  key4: [ 1, 2 ],
//  key5: [Function: key5]
//} 출력

• 객체는 key와 value로 이루어진 프로퍼티로 이루어진다. 
• 어떠한 자료형이라도 value값으로 들어갈 수 있으며, key는 문자열이여야만 한다. 

🍅 객체의 값을 이용하는 방법

let person = {
    name: "cloudmato",
    age: 24
};

console.log(person["name"]);    //괄호 표기법 cloudmato
console.log(person.age);        //점 표기법 24

• 괄호 표기법과 점 표기법이 있다. 
• 다만 괄호 표기법으로 객체의 값을 이용할 때에는 반드시 문자열("")형태로 이용해야 한다. 
• 문자열로 이용하지 않을 경우 변수로 인식하기 때문. 

//괄호 표기법에 ""사용을 안하려고 할 경우 변수를 만들어 사용하면 된다. 
const nameV = "name";
console.log(person[nameV]);

// 동적으로 파라미터를 넣을 상황에는 괄호 표기법이 적절하다. 

let person = {
    name: "cloudmato",
    age: 24
};

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

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

🍅 객체 생성 이후에 프로퍼티 추가/수정

let person = {
    name: "cloudmato",
    age: 24
};

//주소지를 프로퍼티로 넣고 싶은 상황. 
person.location = "korea";  //점 표기법 이용. 
person["gender"] = "female" //괄호 표기법 이용

//프로퍼티의 값 수정. 
person.name = "cloudmato00";
person["age"] = 25;

console.log(person);

• 생성된 객체는 점 표기법과, 괄호 표기법을 이용해서 값을 추가/수정 가능하다.

// let person = {
//     name: "cloudmato",
//     age: 24
// };

const person = {
    name: "cloudmato",
    age: 24
};

//주소지를 프로퍼티로 넣고 싶은 상황. 
person.location = "korea";  //점 표기법 이용. 
person["gender"] = "female" //괄호 표기법 이용

//프로퍼티의 값 수정. 
person.name = "cloudmato00";
person["age"] = 25;

console.log(person);

• 이때, 객체를 let에서 const로 바꿔도 오류가 나지 않는다.
• 왜냐하면 person이라는 상수가 갖는 객체(Object)를 수정한 것이지, person이라는 상수 자체를 바꾼 것이 아니기 때문.

person = {
    age: 20
}

• 상수를 변경하는 경우는 다음과 같이 대입연산자(=)를 통하여  상수 자체에 새로운 객체를 대입하는 것이다. 
• 따라서 자유로운 추가/수정이 가능하다. 

🍅프로퍼티의 삭제 - 

delete 사용

const person = {
    name: "cloudmato",
    age: 24
};
console.log(person);    //{ name: 'cloudmato', age: 24 }

delete person.age;      //점 표기법 사용
console.log(person);    //{ name: 'cloudmato' }

delete person["name"];  //괄호 표기법 사용
console.log(person);    //{}

• 그러나 이런 방법은 객체인 person과 이 property간의 연결만 끊을 뿐 실제 메모리는 그대로 사용하게 된다.

= null 사용

const person = {
    name: "cloudmato",
    age: 24
};

person.name = null;

console.log(person);

• null을 대입할 경우 메모리에서도 삭제할 수 있으므로 이런 방법을 추천해주셨다.  

🍅 객체의 메서드

const person = {
    name: "cloudmato",  //member
    age: 24,            //member
    say: function () {
        console.log("hello");
    }   //method -> 방법
};

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

• 객체의 프로퍼티 중 함수를 메서드, 함수가 아닌 것을 멤버라고 한다. 

const person = {
    name: "cloudmato", 
    age: 24,           
    say: function () {
        console.log(`안녕 나는 ${this.name}`);
        console.log(`안녕 내 나이는 ${this["age"]}`);
    }  
};

person.say();
// 안녕 나는 cloudmato
// 안녕 내 나이는 24

• this를 사용하여 객체의 메서드에서 멤버를 접근할 수 있다. 

🍅 존재하지 않는 프로퍼티에 접근한 경우

const person = {
    name: "cloudmato", 
    age: 24,           
    say: function () {
        console.log(`안녕 나는 ${this.name}`);
        console.log(`안녕 내 나이는 ${this["age"]}`);
    }  
};

console.log(person.gender); //undefined

• 에러를 일으키지 않고 undefined를 띄운다. 
• 이러한 방식은 유연한 프로그래밍을 가능하게 하지만 잘못된 연산을 하게 할 수도 있다. 

const person = {
    name: "cloudmato", 
    age: 24,           
    say: function () {
        console.log(`안녕 나는 ${this.name}`);
        console.log(`안녕 내 나이는 ${this["age"]}`);
    }  
};

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

• in 연산자를 객체와 함께 활용하면 프로퍼티의 존재 여부를 boolean형태로 알 수 있다. 

---

배열

🍅배열

• 배열은 비원지 자료형에 해당하며, 순서 있는 요소들의 집합, 즉 여러개의 항목이 들어있는 리스트이다. 
• 여러가지 자료형이 들어갈 수 있는 특징이 있다. 

let arr = new Array();  //생성자를 이용한 생성
let arr1 = [];          //배열 리터럴

console.log(arr);  //[]

🍅배열의 각 인덱스에 접근하기

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

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

• 배열의 이름을 쓰고 대괄호 안에 인덱스를 사용하여 접근한다. 

🍅배열 요소 추가 - push

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

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

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

• push를 이용하여 요소를 추가하면 마지막 인덱스 그 다음 인덱스에 요소가 추가된다. 
• 이때, 어떤 자료형이라도 추가할 수 있다. 

🍅배열의 길이

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

console.log(arr.length);    //5

---

반복문

• 반복문이란 특정 명령을 반복해서 수행해야 할 때 사용하는 문법이다. 

🍅for 반복문

for(let i = 0; i < 5; i++) {
    console.log("cloudmato");
}

🍅for 반복문을 이용한 배열 순회

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

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

🍅for 반복문을 이용한 객체 순회

let person = {
    name: "cloudmato",
    age: 24,
    tall: 164
};

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}`);
}

• keys, values 등을 이용하여 객체를 배열처럼 만들어 순회가 가능하다. 

---

배열 내장함수

🍅 forEach

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

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

• 해당 코드를 줄여보자. 

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

arr.forEach((elm) => console.log(elm));

• 배열의 모든 요소를 한 번씩 순회할 수 있도록 해준다. 
• 즉, arr이라는 배열에 forEach라는 내장함수를 사용하게 되면 이 내장함수에 전달하는 콜백 함수를 각각의 요소들에 대해서 실행한다. 

🍅map

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

arr.forEach((elm) => newArr.push(elm));

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

• 해당 코드를 줄여보자

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

console.log(newArr);    //[ 2, 4, 6, 8 ]

• map은 원본 배열의 모든 요소를 순회하면서 리턴된 값을 따로 배열로 반환한다. 

🍅 includes

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

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

🍅indexOf

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

console.log(arr.indexOf(3));     //2
console.log(arr.indexOf(10));    //-1 존재하지 않는 값

• indexOf는 주어진 인자에 일치하는 인덱스를 반환하는 내장함수이다. 

🍅findIndex

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

console.log(arr.findIndex((elm) => elm.color === "black")); //1

• findIndex 메서드를 이용하면 콜백 함수를 전달해서 해당 콜백 함수가 true를 반환하는 첫 번째 요소를 반환한다. 

🍅filter

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

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

• filter메서드는 배열에서 어떤 특정한 조건을 만족하는 요소들을 배열로 다시 반환받을 수 있도록 해준다. 

🍅slice

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

console.log(arr.slice());       //배열 그대로 반환
console.log(arr.slice(1,2));    //[ { num: 2, color: 'black' } ]

• slice메서드는 begin인덱스부터 end-1번째 인덱스까지 잘라 배열로 반환한다. 
• 즉 begin번째 인덱스에 해당하는 요소는 반환되지 않는다. 

🍅concat

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

const arr1 = [
    { num: 3, color: "blue"},
    { num: 4, color: "green"}
]

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

// [
//     { num: 1, color: 'red' },
//     { num: 2, color: 'black' },
//     { num: 3, color: 'blue' },
//     { num: 4, color: 'green' }
// ]

• concat 메서드를 사용하면 서로 다른 배열을 붙일 수 있다. 

🍅sort

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

chars.sort();

console.log(chars); //[ '가', '나', '다' ]

• sort 메서드는 원본 배열을 정렬해준다. 

let numbers = [3, 20, 1, 2, 2, 4];

numbers.sort();

console.log(numbers);   //[ 1, 2, 2, 20, 3, 4 ]

• 하지만 sort메서드는 사전순으로 정렬을 해주기 때문에 숫자 배열 정렬을 시도하면 이런 결과가 나온다. 

let numbers = [3, 20, 1, 2, 2, 4];

const compare = (a,b) => {
    if(a > b) {
        return 1;
    }
    
    if(a < b) {
        return -1;
    }

    return 0;
}

numbers.sort(compare);
console.log(numbers);   //[ 1, 2, 2, 3, 4, 20 ]

🍅join

const arr = ["cloud", "mato"];

console.log(arr);               //[ 'cloud', 'mato' ]
console.log(arr.join());        //cloud,mato
console.log(arr.join(" "));     //cloud mato
console.log(arr.join("바보"));     //cloud바보mato