[한입 크기로 잘라 먹는 리액트] 2. Javascript 기본

'한입 크기로 잘라 먹는 리액트' 라는 강의를 보면서 정리한 내용이다.

 

 

2-1. Hello World

CodeSandBox에서 실습

 

2-2. 변수와 상수

*let*변수

-변수 중복 사용 허용하지 않음

let age=25;

console.log(age); //25

age=30;

console.log(age);//30

 

*var*변수

-변수 중복 사용 허용 => 함정빠질 가능성 있음

 

*const*상수

const age=25;

console.log(age); //25

age=30; //오류=>상수는 선언 이후 절대 바뀔 수 없음

 

2-3. 자료형과 형 변환

*자바스크립트의 자료형*

-원시타입 : 한번에 하나의 값만 가질 수 있음, 하나의 고정된 저장 공간 이용

let age=25;//정수

let tall=175.9;//상수

 

let name="wood";//문자형

let name1=`wood ${name}`;

 

let a=null;

console.log(a); //null

 

let variable;

console.log(a); //undefined

 

++형변환

let numbera=12;

let numberb="2";

console.log(numbera*numberb)//24

console.log(numbera+numberb)//122

console.log(numbera+parseInt(numberb))//14 ==>numberb라는 문자열을 숫자로 변환, 명시적 형변환

 

-비원시타입 : 한번에 여러 개의 값을 가질 수 있음, 여러 개의 고정되지 않은 동적 공간 사용

 

2-4. 연산자

console.log(true&&true)//true and true==>true

비교연산...

 

let compareA=1;

console.log(type of compareA); //number

compareA="1";

console.log(type of compareA); //string ==> typeof는 변수의 자료형이 무엇인지 알려줌

 

let a;

a=a??10;

console.log(a); //10

 

2-5. 조건문

===

 

2-6. 함수

function getArea(width, height){

  let area=width*height;

  return area;

}

let area1 = getArea(100,200);

console.log("area1 : ", area1);

 

2-7. 함수 표현식과 화살표 함수

-함수 표현식

let hello = function () {

//함수를 값에 넣을 땐 이름지정하지 않아도 된다.

return "안녕하세요 여러분";

};

let hellotext = hello();

console.log(hellotext); // 안녕하세요 여러분

 

-화살표 함수

1)

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

console.log(hello()); //안녕하세요 여러분

2)

let hello = () => {

return "안녕하세요 여러분";

};

console.log(hello()); //안녕하세요 여러분

 

2-8. 콜백함수

=>함수의 파라미터에 함수를 넘기는 것

function checkMood(mood, goodCallback, badCallback) {

if (mood === "good") {

  goodCallback();

  } else {

  badCallback();

  }

}

function cry() {

  console.log("action::cry");

}

function sing() {

  console.log("action::sing");

}

function dance() {

  console.log("action::dance");

}

checkMood("good", sing, cry); //action::sing

 

 

2-9. 객체

1) 예제1

let(const) 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: Array(2)…}

 

-점 표기법

console.log(person.key1); //123

-괄호 표기법

console.log(person["key1"]); //123  --->[ ]안에 ""를 사용해서 변수를 넣어줘야 한다. 

const key1 = "key1";

console.log(person[key1]); //123  ---> 변수에 key1를 넣어주면 가능 

 

console.log(getPropertyValue("key1")); //123

function getPropertyValue(key){

  return person[key];

}

 

-추가

person.key6 = "happy";

person["key7"]="lucky";

 

-수정

person.key1=456;

 

-삭제

person.key7=null;

 

 

2) 예제2

const person={

 name:"kimlee".

 age: 20,

 say: function(){ console.log(`안녕 나는 ${this["name"]}`);  //여기서 ``는 작음 따옴표 아님

  }

};

person["say"](); //안녕 나는 kimlee

 

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

 

2-10. 배열

 

2-11. 반복문

let person = {
  name: "kimlee",
  age: 20,
  tall: 170
};
const personKeys = Object.keys(person); //person을 배열로 반환

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

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

/*결과

name : kimlee

age : 20

tall : 170

*/

 

2-12. 배열 내장 함수

forEach //배열의 모든 요소를 순회

map 

includes

indexOf

findIndex

filter

slice