JS 기초 상식
-
JS 는 HTML에 '< script >'를 이용해서 직접 스크립트를 작성하는 방식이다.
하지만 이는 아주 간단할 때만 보통 HTML 안에 작성하고,
그 외에 복잡한 경우에는 별개로 분리된 파일로 만들어 저장하는게 좋다고 한다.페이지가 분리될 때마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와 사용하기 때문,
본 스크립트를 여러 HTML에서 사용하더라도, 받아놓은 캐시로부터 스크립트를 가져와 사용한다.
실제로 속도를 빠르게 하는 방법 중 하나라고 한다. -
세미콜론의 경우에는 줄바뀜이 있을 때는 생략가능 [...] 앞에는 세미콜론이 있다고 가정하지 않는 예외도 있다고 하니,
→ 줄바뀜이 있더라도 각 문 사이에는 세미콜론을 넣는게 좋다고 함.
-
주석의 경우는 그냥
command+option+L로 처리하면 된다고 한다.
→ 실행중인 스크립트에는 주석이 들어가지 않으므로, 주석은 최종 배포되는 코드에 절대 부정적 영향이 없다고 하니, 잘 이용하도록 해보자.좋은 코드는 explanatory 주석이 없는, 코드 자체로 코드가 무슨 일을 하는지 볼 수 있는 것이다.
"코드가 불분명해서 주석이 불가피하다면 코드를 다시 작성해야하는 지경" 이라고 한다.
함수의 이름이 주석 역할 그 자체가 되도록 변수명을 잘 짓는 연습을 해보자.주석 달기 좋은 상황에는,
① 아키텍쳐를 설명 → 고차원 수준의 흐름이라던가, 컴포넌트간 상호작용, 상황에 따른 제어흐름일때
② 함수의 용례와 매개변수 정보를 담고 있는 주석
③ 왜 이런 방법으로 설명(명확해 보이지 X) -
모달창(Modal Window) : 페이지 나머지 부분과 상호작용하지 않는 창을 말한다.
특히, 스크립트가 중간에 일시중지된다.① prompt() : Input field, 확인(OK), 취소(False) 로 구성. default값은 선택인데, 입력취소시에는 null 값을 반환한다.
② confirm() : 확인 → return True, 취소 → return False
변수와 자료형
-
변수 = 이름이 붙은 저장소(가독성을 위해 한줄에는 하나의 변수)
- 변수명은 숫자, 문자, $, _ (+첫문자 숫자금지) 가 조건이다.
특히 대문자는 상수, 하드코딩한 값들일 때 쓰고, 런타임때 평가된 값들은 보통 소문자로 명명한다고 한다.
- 변수를 많이 선언하는 습관이 좋다고 한다. 이미 있는 변수를 계속 쓰면, 디버깅을 할 때 더 공을 들여야하는 단점이 있고, 모던 자바스크립트와 브라우저에는 코드에 최적화되어 있기 때문에, 값이 다른 경우 변수를 다르게 두는게 매우 좋다고 권장한다.숫자형으로 변환시,
undefined ↔︎ NaN
null ↔︎ 0
true ↔︎ 1
string ↔︎ 첫/끝 공백제거, 문자 비어있으면 0 -
alert()는 매개변수로 문자형을 받는다 ( 자동변환 )
수학과 관련 연산자가 받은 값은 숫자로 변환해줌. → 숫자이외 글자를 숫자로 변환하면 NaN반환된다. -
불린형(Boolean)
0, null, undefined, '' 등 직관적으로 비어있는 것들은 모두 False 를 반환한다.
" "도 공백이 있으므로, 비어있지 않다고 판단하여, 문자열로 판단해서 True 반환한다. -
이항 VS 단항
이항연산자 '+'(덧셈)은 문자열을 연결할 수 있다. 피연산자 중 하나라도 문자열이라면 문자열더하기를 실행한다.
- 제외한 나머지 산술연산자들은 모두 숫자형으로 변환시킨다.
- 쉼표연산자( , , ,) → 마지막 값으로 할당된다.
- 문자열을 비교시에는 사전순 (유니코드순이라 'a' > 'A' 이다) → 단어길이 순으로 비교하는데, 비교하려는 숫자형이 아닌 경우, 숫자형으로 바꾼다. (둘의 자료형이 같은 경우는 문자열 비교로 들어간다.)
- === 은 자료형까지 비교해서 값을 return 한다.
- null == undefined 는 서로는 true 관계지만, 둘의 자료형은 다르다.
- 이외의 기타비교연산자는 숫자로 변환한다.(null → 0, undefined → NaN)
논리연산자
- ||, &&, ! (or, and, not)
- || 는 변환 후에 그 값이 True이면 연산을 멈추고 해당 피연산자 변환 전 원래 값을 반환한다.
ex) alert('' || '' || nickname = '바이올렛, "익명") → return 바이올렛 - alert()자체는 피연산자로서 undefined로 반환되지만, 실행은 그대로 된다는 특징이 있다.
- &&은 첫번째 Falsy를 반환한다. 모두 True 라면 마지막 피연산자 반환한다.
- !! 는 Boolean()과 동치이다.
- 연산자 우선순위는 ! > && > || 이다
- while : Falsy가 되면 반복문을 멈춘다.
- do,,,while : 본문을 최소한 1번이라도 실행하고 싶을 때 사용
- continue : ()안이 참일 때 실행을 중단하고, 다음 loop로 넘어간다.
- ? 연산자의 경우 break문이나 continue문은 올 수 없다.
#반복문 앞에 레이블을 붙이고, break/continue에 이 레이블을 함께 사용할 수 있음.
#레이블은 중첩 반복문을 빠져나와 바깥의 반복문으로 갈 수 있다.
outer:for(let i = 0; i > 3; i++){
for(let j = 0; j > 3; j++){
let input = prompt('(${i},${j})의 값','')
if(!input) break outer;
}
}
alert('완료')머리한번 다시 굴려보기.
let num;
do {
num = prompt("100을 초과하는 숫자를 입력해주세요.", 0);
} while (num <= 100 && num);
// 0 일때 prompt 창 과연 몇번??
let num=0;
while( num <= 100 ){
num = prompt("100을 초과하는 숫자를 입력해주세요.", 0);
if( ! num ) break;
}
//0 일때 prompt 창 과연 몇번??
-----------------------------------------------------
let num=0;
while( num <= 100 ){
num = prompt("100을 초과하는 숫자를 입력해주세요.", 0);
if( !Number(num) ) break;
}
//0 일때 prompt 창 과연 몇번??