1. Element / Body / Console

2. 자바스크립트 데이터 타입

3. Console.log();

4. const vs let

5. boolean

6. Array

7. Object

1. Element / Body / Console

• 브라우저는 HTML을 열고
• HTML은 CSS와 자바스크립트를 가져옴
• Element는 html과 Body에서 CSS를 볼 수 있음.
• Console은 자바스크립트

2. 자바스크립트 데이터 타입

• 숫자를 사용할 수 있다.
  • Integer(정수)와 float(1.5)
• 문자를 사용할 수 있다.
  • String

3. Console.log();

console.log(5454354); // 숫자(Integer, float)

console.log("Hello My name is nico."); // String.

4. const vs let

• const : 상수라는 것이고 값이 바뀔 수 없다는 의미
  • 많은 사람이 const를 기본적으로 사용함.
• let : 값이 바뀔 수 있다는 의미
  • 변수 업데이트를 하고 싶다면 let을 씀.
• var : 쓸 수 있지만 거기서 몇몇의 값을 보호 받을 수 없음.
  • 사용 안 하는 게 좋음.

4-1) const

console.log(6+2);
console.log(6*2);
console.log(6/2);

• 내가 6을 5로 변경하고 싶으면 세 개의 숫자를 변경해야함.
• 개발자는 코드를 적게 쓰면서 에러도 적고 시간도 덜 걸리는 걸 원함.

4-1)-1. 자바스크립트 변수 사용방법(const)

• const : constant(상수)값이 변하지 않는다는 의미. 유지 된다.

const a = 5;
const b = 2;
const myName = "nico";

console.log(a+b);
console.log(a*b);
console.log(a/b);
console.log("hello" + myName);

• 변수를 사용해서 코드를 적게 쓰고 에러 확률도 줄이면서 시간도 덜 걸리는 걸 실행에 옮김.

4-2) let

• 아래에서 알 수 있는 건 절대 바뀌지 않는 변수 2개와 바뀔 수도 있는 변수 한 개가 있음.
• const(변하지 않음), let(변함)

const a = 5;
const b = 2;
let myName = "nico";  // const로 하면 에러가 남!!!

console.log(a+b);
console.log(a*b);
console.log(a/b);
console.log("hello" + myName);

myName = "zzanggoon";

console.log("Your name is " + myName);

5. boolean

• true / false / 0은 꺼져 있고 1은 켜저있다.

const amlFat = true;

console.log(amlFat);

• Q : boolean은 언제 사용할까?
  • 사용자가 로그인 할 때 비디오가 재생되고 있는 가? true / false
• Q: null과 underfined의 차이는?
  • null은 아무것도 없다.
    • null은 절대 자연적으로 발생하지 않는다는 거임.
    • 변수 안에 어떤 것이 없다는 것을 확실히 하기 위해 쓰임.
  • underfined
    • 어떤 변수가 메모리에 있는데 값이 없는 거임.
    • something이라는 변수가 존재하는데 값이 주어지지 않는 거임.

const amlFat = null;

let something;

console.log(amlFat);

6. Array

• 문자열일 때

  const mon = "mon";
  const tue = "tue";
  const web = "web";
  const thu = "thu";
  const fri = "fri";
  const sat = "sat";
  const sun = "sun";
  
  const daysOfWeek = "mon, " + "tue, " + "wed, " + "thu, 
  " + "fri, " + "sat, " + "sun"; // 그냥 문자를 보여주는 거임.
  
  console.log(daysOfWeek);
  

  • 이렇게 하면 그냥 문자이기 때문에 첫 번째 요일에 접근하기 힘듦.
  • 그래서 무언가를 나열하기 위해서 더 좋은 것이 필요함.

• Array 적용

  // 배열이 되는 거임
  const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];
  
  // Get Item from Array
  console.log(daysOfWeek);
  
  // Add One more day to the Array
  daysOfWeek.push("sun");
  
  console.log(daysOfWeek);
  

  • Console

    

7. Object

7-1) 첫 번째 : 변수

• 이것보다 아래 형식이 좋음.

const playerName = "nico";
const playerPoints = 1212;
const playerHandsome = false;
const playerFat = "little bit";

7-2) 두 번째 : 한 개의 객체(Entity)

• 즉, player에 대해 설명하고 있다는 걸 알 수 있음.
• 훨씬 더 정돈 되어 보임.
• 여기서 하려는 건 데이터를 가능한 최선으로 정리하는 거임.

player.name
player.points
player.handsome

7-3) 세 번째 : Array가 적합하지 않은 경우

const player = ["nico", 1212, false, "little bit"];

• Array는 1212, false, “little bit”이 무슨 의미인지 안 알려주고 있기 때문에

  Object 형식을 만들 거임.

7-4) Object 형식

• 이건 리스트가 아님. 리스트는 모든 값이 같은 의미를 갖기 때문에

const player = {
	name : "nico",
	point : 1212,
	handsome : false,
	fat : true
};

console.log(player);
console.log(player.name);
console.log(player["name"]);  // 대괄호 Array를 여는 게 아니라 
															// 중괄호(property)를 여는 거임.

• Console

  

7-4)-1. 데이터 수정하기

const player = {
	name : "nico",
	point : 1212,
	handsome : false,
	fat : true
};

// 데이터 수정
console.log(player.fat);
player.fat = false;
console.log(player.fat);

• Console

7-4)-2. 데이터 추가

7-4)-3. Q : const는 수정 못하고 let은 수정 가능하다고 하지 않았나?