JavaScript 요약강좌1

강좌 1.

주의사항

 

• JavaScript 와 CSS 는 분리해주는게 유지보수면에서 좋다.
• JavaScript 출력 방법 4가지를 익혀놓을 것
• HTML 문법 자동 완성해주는 코드 : html 에서 ! 입력

 

JavaScript 출력방법

• Chrome 에서 콘솔창을 이용

• about:blank 접속
• cmd + option + I 입력 ( 맥북 )
• 요소로 들어가서 원하는 부분 소스코드 수정 ( 바로 반영됨 )
• 콘솔에 javascript 부분 입력

1. document.getElementById('one').innerHTML='hi world'  : 문서 내에 요소를 선택하여 출력
2. document.write('js hello') : 문서에 직접 입력
   
3. alert('hello') : 사용자 인터랙션 ( alert 이외에 confirm 등이 있음 )
4. console.log('hello') : 콘솔에 찍는 방법

 

코드 구조

1. statement 는 세미콜론으로 구분 ( 붙치지 않는곳도 존재 )
2. statement 는 값, 연산자, 키워드, 명령어, 표현식 등으로 구성됨

 

엄격 모드

• use strict 라는 지시자를 통해 엄격모드를 활성화할 수 있습니다.
• 활성화된 경우에만 반영이 됩니다.
• class 문법의 경우 엄격모드가 기본입니다.
• 함수별로 엄격모드를 다르게 적용할 수 있으나 이는 혼란을 야기합니다.

 

 

변수 선언 방법

• let : 값을 중간에 변경해야하는 경우 사용합니다.
• var : 앞에 선언하고, 뒤에 또 선언해도 에러를 발생시키지 않아서 사용하는 것을 권장하지 않음
• const : 상수로 선언할 시 문제가 될 것 같은 경우에만 let을 사용하고 웬만하면 const 를 항상 사용

ex.

const xx = 10;
xx= 30; // Error !

let xx = 10;
xx = 30; // Success

* 특이사항

- let,const 는 블록 단위의 스코프를 가집니다. ( 블럭이라하면 중괄호 ( { } ) 를 의미 )

 

 

 

nullish 병합 연산자

let result1;
let result2 = result1 ?? 100; // 100

let result3 = 10;
let result4 = result3 ?? 100; // 10

result1 이 null 이거나 undefined 인 경우, 뒤에 값을 넣어줌

 

 

 

프로퍼티 접근 연산자

• 마침표 프로퍼티 접근 연산자
• 대괄호 프로퍼티 접근 연산자

let x = {'one':1, 'two':2}
x.one // 1
x['one'] // 1

 

 

 

관계 연산자

키만 가지고 판단

10 in [10,20,30] // false
1 in [10,20,30] // true
1 in 'hello' // error
'name' in {'name':'hojun','age':10} // true
'length' in [10,20,30] // true

• 10 이 false 가 나오는 이유

[10,20,30] 은 기본적으로 인덱스 값이 키값으로 들어가있습니다.

[ 0:10, 1:20, 2:30 ] 이런식입니다.

 

그래서 10은 키값으로 없으니 false 이고, 1은 1이라는 인덱스가 존재하는 true 가 반환됩니다.

 

• length 가 true 가 나오는 이유

[10,20,30] 을 console.dir 로 찍어보면 Array(3) 안에 length : 3 이 존재하는 것을 볼 수 있습니다.

 

 

 

변수의 형(타입)

typeof 로 확인 가능

• 원시타입 ( primitive type ) : 유일한 값을 가진 것 ex. boolean, string, number, null ....
• 참조타입 ( reference types ) : 값을 변경할 수 있는 것 ex. object, array, map, set, function ...
• Number : 숫자