JS: 노마드 코더 2강 정리

1. Basic Data Type

1) Number
   : 숫자, 서로 연산기호를 이용해 계산 가능함

• 정수형(Integer): 1, 2, 3 ...
• 소수(Float): 1.21, 3.1428 ...

2) String
   : 문자(text)

• " ", ' '를 이용해 입력(항상 짝을 이뤄야 함)
• String Type의 합은 두 개를 합쳐서 출력함

  "Hello, " + "World!" = "Hello, World!"

---

2. Variable

1) const(상수)
   : 항상 값이 변하지 않는 변수 선언 시 사용. 가장 기본적으로 사용됨.(재선언 금지, 재할당 금지)

2) let
   : 값을 수정가능한 변수 선언 시 사용(재선언 금지, 재할당 가능)

3) var
   : 딱히 별다른 규칙이 없어 자유롭게 사용가능(재선언 가능, 재할당 가능)

※ 이후 값의 update 유무를 변수 선언 만으로 파악하기 위해, 되도록 사용하지 않도록 한다.

let a = b;
let a = c;
//재선언 금지

let a = b;
a = c;
//재할당은 가능

const a = b;
const a = c;
//재선언 금지

const a = b;
a = c;
//재할당 금지

var a = b;
var a = c;
a = d;
//재선언, 재할당 가능

#길이가 긴 변수 선언 → Camelcase방식

ex. myNameIs, VeryLongName

cf. Python → my_name_is, very_long_name

---

3. Boolean

1) ture/false
   : 변수의 값, 참과 거짓을 나타냄

2) null
   : 변수의 값이긴 한데, "값이 없다", "비어있다"를 뜻함

3) undefined
   : 변수의 값이 X, 메모리 상에 자리는 존재하지만 값은 없음을 의미

const something; //undefined

let a = true; //true

let b = null;//null

---

4. Array(배열)

    : 데이터를 나열하기 위한 방법 중 하나

(데이터형) (배열이름) = [(값1), (값2), ... (값n)];

ex)

const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];

• 5번째 값 출력
  console.log(daysOfWeek[4]);
  → 인덱스 값은 0부터 시작함
  

#배열에 값 추가 시

ex) daysOfWeek.push(“holiday”)
   →  .push는 추가하는 기능

---

5. Object(객체)

    : property(속성)를 가진 데이터를 저장, { } 사용

const player = {
	name : "rin",
	color : blue,
	food : false,
};

1) property(속성) 불러오기

const player = {
	name : "rin",
	color : blue,
	food : false,
};

console.log(player.name);
// player.name == player["name"]

console.log(player.name); == console.log(player["name"]);

→ 같은 방식임

2) property(속성) 추가

player.koreanName = "감자";

--> {name: "potato", color: "blue", food: true, koreaName: "감자"}

3) property(속성) 변경
   : 속성 변경은 가능하지만 선언된 object(객체) 변경은 불가능

const player = {
	name : patato,
	color : yellow,
	food : true,
};

player.color = "blue";
console.log(player.color);
--> {name: "potato", color: "blue", food: true}

---

6. Funtion(함수)

    : 어떤 코드를 캡슐화 해서 실행을 여러번 할 수 있게 함

# function 선언

function 함수명(매개변수) {
   실행코드
}

1) 함수의 구성요소

• parameter(매개변수 or 인자)
  : 해당 function내에서 어떤 정보를 줄 수 있는 값을 의미, 있을 수도 있고 없을 수도 있음

• argument(인수)
  : 함수를 호출할 때 사용되는 값

ex)

funtion plus(x, y){ //x,y가 매개변수
	console.log(x + y)
}

plus(2, 4); //2, 4가 인수

2) 객체 내에 함수 정의

const (객체명) = {
   (변수명): (값);
   (함수명) : function(매개변수){
       실행코드
   }
}

const player = {
	name: "nico",
	sayHello: function(otherPersonsName) {
		console.log("Hello " + otherPersonsName + " nice to meet you!");
	}
};

player.sayHello("rin");// Hello rin nice to meet you!

6-1. 계산기 만들기

const carculator = {
  add: function(a, b) {
  	console.log(a + b);
  },
  minus: function(a, b) {
  	console.log(a - b);
  },
  div: function(a, b) {
  	console.log(a / b);
  },
  mul: function(a, b) {
  	console.log(a * b);
  },
  pow: function(a, b) {
  	console.log(a ** b);
  },
};

carculator.add(6, 2); //8 
carculator.minus(6, 2); //4
carculator.div(6, 2); //3
carculator.mul(6, 2); //12
carculator.pow(6, 2); //36

→ 값은 나오지만 실제로 undefined 상태임

6-2. return

    : 함수 내에서 실행된 값을 반환함

ex)

const carculator = {
  add: function(a, b) {
  	return a+b;
  },
  minus: function(a, b) {
  	return a-b;
  },
  div: function(a, b) {
  	return a/b;
  },
  mul: function(a, b) {
  	return a*b;
  },
  pow: function(a, b) {
  	return a**b;
  },
};

const addResult = carculator.add(2, 6);

console.log(addResult); //8

→ 똑같은 값이 출력되지만 위와 다르게 데이터 타입은 number가 됨

---

7. Conditional(조건문)

7-1. prompt(); & Type 변경하기

1) prompt();
   : 사용자에게 창을 띄어 값을 받는 함수, 사용자가 답 할때까지 코드의 실행을 멈추고 매우 오래된 방법으로 거의 사용하지 않음

2) parseInt;
   : prompt함수로 받은 값(string type)을 Number type으로 바꿔줌

const age = prompt("how old are you?");
console.log(age); //string -> 크기 비교 불가능

const age = parseInt(prompt("how old are you?"));
console.log(age); //number -> 크기 비교 가능

2) typeof
   : 변수의 type을 알 수 있음

const age= parseInt(prompt (“How old are you?”));
console.log(age); 
//숫자 입력 시 ->number
//문자 입력 시 -> NaN

cf. NaN = not a number

const age = parseInt(prompt("How old are you?"));
const age = Number(prompt("How old are you?"));

둘 다 사용 가능함

7-2. isNaN

    : 입력된 값이 NaN인지 판별함

const age= parseInt(prompt (“How old are you?”));
console.log(isNaN(age));

→ 숫자 입력 시 false
→ 글자 입력 시 true

7-3. if-else

if(condition){
	실행코드
}else{

}

→ 실행코드 == false >> else문 코드 실행
→ 실행코드 == true >> 실행

※ condition은 boolean으로 판별 가능해야 함(true, false)

7-4. &&(And), ||(Or), =, ==, !==

1) &&(And)
   : 두 값이 모두 true면 true, 둘 중 하나라고 false면 false

2) ||(Or)
   : 둘 중 하나라도 true면 true, 둘 다 false면 flase

3) == & ===
   : 좌우가 같다는 의미

차이점
===: 값과 자료형이 모두 일치해야 함
==: 연산자를 이용하여 서로 다른 유형의 두 변수의 값 비교

4) !==
   : 같지 않음을 확인함

7-5. 배열과 객체

• 배열형
  : 배열의 데이터 값이 같더라도 배열을 할당할 때, 각 변수는 참조하는 메모리의 주소가 다르기 때문에 두 배열는 같지 않음

var a = [1,2,3];
var b = [1,2,3];

console.log(a == b); // false
console.log(a === b); // false

• 객체형도 배열형과 같음

var x = {};
var y = {};

console.log(x == y) // false
console.log(x === y) // false