222.09.01 JavaScript

Block Scope

코드 블록 이라고도 한다. 

코드 블록 안에서 선언한 변수 {let i =block}는 지역변수로만 사용된다. 

*사용하는 이유 : 전역변수는 어플리케이션의 시작부터 끝까지 메모리를 할당하기 때문에 많은 사용은 좋지 않다. 

 

 

 

const

javaScript에서 변수를 선언하는 함수이다. 

var과 달리 선언된 변수의 값이 고정된다. 

이처럼 값이 변하하지 않는 것을 favor immutable data type always라고 한다. 

보안상의 이유로 매우 좋다 

 

let 는 선언한 값이 추후 변할 수 있다. 

이처럼 값이 변하는 함수를 mutable함수라 한다. 

 

 

variable type(변수 타입)

primitive 

•  더 이상 쪼개질 수 없는 데이터 타입
• String, boolen, null, undifiend, symbol
• Single Item이라고 함. 

 

object

• 쪼개질 수 있는 데이터 타입
• Single Item의 여러 묶음
• Box Container
• Function, first-Class Function(이 언어에서는 function을 다른 데이터 타입처럼 할당 가능 ex) Parameter(인자), 함수의 return값 으로도 function 리턴 가능

 

 

primitive 

• null : 이 자체가 값이다.
• undefined : 값이 아예 없음. 

 

• const symbol1 = symobol("ID");
• const symbol2 = symobol("ID");
• 주어지는 String("ID")와 상관 없이 고유한 식별자가 됨. 

 

• const symbol1 = symobol.for("ID");
• const symbol2 = symobol.for("ID");
• 동일한 symbol를 만들 때 사용한다. 

object

 

• const 홍길동{name = "길동" age=3};
• 레퍼런스 : 실제로 Object를 가르키는 곳   
• ex) const 홍길동 { name ="길동"}
• 홍길동 ->name (선언 이후 바꿀 수 없음, 지우고 다시 선언해야 함. )
• name->"길동"(변경이 가능하다. 재선언해주면 됨) ex) 홍길동.name = "고길동"; 

**참고 indesing이란?

let text ='Hello';

H

e

l

l

o

  0    1     2    3    4 -> 번호 순서가 매겨지는 것

 

text.charAt(0) 를 console.log로 출력하면 h가 출력된다. 

 

Increment and decrement operators

• let counter =2;
• const b= ++counter ;
• 이것은 아래와 같다.
• counter  =counter +1; b= counter;
• b 의 값은 3이 된다. 

 

• b = counter++;
• b의 값은 3
• counter의 값은 4 
• 위 조건을 충족한 뒤 ++해주기 때문

 

Logical Operators

• || = or ,   &&=and,  !=not

 

• const value1 = false;
• const value2 = 4<2;
• const value1 = true;
• 라고 선언했을 때
• console.log(value1, value2, value3)의 출력 값은 false, false, true이다.

 

• 여기서 중요한 점은
• console.log(value1 || value2 || value3); = true인데
• true가 나오면 거기서 연산을 엄추고 출력(print)단계로 넘어간다는 것
• 만약 value3이 가장 앞에 있을 경우  console.log(value3 || value1 || value2); 
• value1과 value2를 연산하지 않는다는 것!!!
• 확실한 true값은 최후반에 배치하는 게 좋다. 

ex)내가 이해한 것

게임에서 공격을 했을 때

value3가 필수요소인 공격력 / 필수 값 이기 때문에 무조껀 true

value1이 크리티컬 확률 function / 확률에 따라 true 또는 false

value2가 명중률 function 이면  / 확률에 따라 true(명중) 또는 false(빗나감)

 

true인 value3가 가장 먼저 나왔기 때문에 뒤쪽에 있는 value1, value2가 계산되지 않아

명중률에 상관 없이 데미지가 들어가고, 크리티컬은 아예 터지지 않게 된다. 

라는 느낌이다. 

 

• !!!확실한 true값은 최후반에 배치하는 게 좋다. !!!

 

boolen+레퍼런스 추가 설명

• == 두 객체에 값이 같을 때 
• === 두 객체의 값이 같고 타입이 같을 때

const moon1 = {name="문"};

const moon2 ={name="문"};

const moon3 =  moon1 ;

 

moon1 == moon2 = false

moon1 === moon2 = false

moon1 === moon3 = true

 

moon1 ref1 -> name

moon2 ref2 -> name

moon3 ref1 -> name

 

Ternary Operator : 삼항연산자 

• ? 기호를 사용한다. 
• const name="검성고길동";
• condition : 조건문으로 사용되는 표현식
• condition ? vlaue1 : value2;
• ex)

var age = 26;
var beverage = (age >= 21) ? "Beer" : "Juice";
console.log(beverage); // "Beer"

또는 

console.log(age ===26 ? "y" : "no");
일때 y가 출력된다.

 

 

 

 

Loops(반복문)

for, while등이 있다. 

break : 반복문을 멈춰버림

continue : 해당 결과만 스킵한 뒤 반복문 진행

 

 

 

 

DOM

• 웹페이지의 인터페이스 요소이다.
• Docament Object Model
• Html 요소들의 구조화된 표현, Html의 객체기반 표현방식
• 항상 유효한 Html형식
• 자바스크립트에서 수정될 수 있는 동적 요소여야 한다. 
• 보이지 않는 요소 포함. 

 

DOM의 객체 구조

부모(HTML) 줄기
ㄴ	자식(Head) 가지
ㅣ	ㄴ		요소(My First Web Page) 잎사귀
ㄴ	자식(Body) 가지
	ㄴ	<h1>태그	요소(Hellow World) 잎사귀
	ㄴ	<P>태그	요소(How Are You) 잎사귀