뭘 만들어봤고, 몇 명이 이용해봤고 무엇을 해봤다.
for(;;) -> 무한반복문
for(;array.length;){
console.log(array[i]);
i++;
}
무한반복문은 조심히 써야한다.
어떤 값이 들어오면 인풋 => 리턴값
array.forEach(e => console.log(e*3));
const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element+'!!'));
// expected output: "a"
// expected output: "b"
// expected output: "c"
for of 문 편리하다 (= python의 for in문)
for (var variable of array) {
document.write(variable, '!!
');
}
for (let value of array) {
console.log(value);
}
let array =[10.20,30,40,50];
let result = 0;
for (let value of array) {
result += value;
}
console.log(result/array.length);
평균, max, min, 산술 .. 많이 사용됨
실제로 분석사이트 만들때 (보통은 관리자페이지)
오늘 접속한 사람 등등 계산할 때 사용한다.
for (let value in array) {
console.log(value)
}
let i =0;
while(i<100) {
i+=2
console.log(i);}
# 100이하 짝수 합
let i =0;
let result =0;
while(i<101) {
result+=i;
i+=2;
console.log(result);}#### # 참고! let num = 0; do { console.log(num); num += 1; } while (num < 11);
# while 반복문 구구단
let i = 2;
let j = 1;
while (i < 10) {
while (j < 10) {
console.log(${i} X ${j} = ${i*j});
j++;
}
i++;
j = 1; //j=10인 상태라 두번째 while문을 실행할수없어서 초기화가 필요!
}* 작은 따옴표가 아니라 벡틱 (1 옆에 있는 ) 문자 사용이다. `${i} X ${j} = ${i*j}` * error, let은 재선언 안된다. * var 은 재선언 가능
# while 5단에서 멈추는 구구단 5*9까지
let i = 2;
let j = 1;
while (i < 10) {
if (i == 5){
break;
}
while (j < 10) {
console.log(${i} X ${j} = ${i*j});
j++;
}
i++;
j = 1;
}
# while 5단에서 멈추는 구구단 a*5까지
let i = 2;
let j = 1;
while (i < 10) {
while (j < 10) {
console.log(${i} X ${j} = ${i*j});
if (j == 5){
break;}
j++;}
i++;
j = 1;
}
outer라는 식별자가 붙은 레이블 forans
현업에서는 객체와 헷갈려서 잘 안쓰는 편 . 할꺼면 function으로 사용.
# outer 비권장 최신문법
// outer라는 식별자가 붙은 레이블 for 문
// 현업에서는 객체와 햇갈려서 잘 안쓰는 편
// 할꺼면 function으로.
outer: for (let i = 2; i < 10; i++) {
for (var j = 1; j < 10; j++) {
// i + j === 3이면 outer라는 식별자가 붙은 레이블 for 문을 탈출한다.
if (i === 5) break outer;
console.log(${i} X ${j} = ${i*j});
}
}
*함수와 클래스 파트가면 () 있고 없고 명확.
s.length => 들어갈 인수 필요 없다.
# search // indexOf // substr //substring차이
둘 다 문자열 안에 포함되어있는지. (공통점)
str.indexOf(arr, start-index)
- indexof는 시작값을 설정할 수 있고, search는 정규표현식을 사용할 수 있다.
- substr(start-index, 몇 개) : 시작 인덱스부터 몇 개 가져올 건지.
- substring(start-index ) 시작 인덱스부터 끝까지 전체 출력
ex) substring(2, -2) // -2를 0로 처리
let s = 'abcdefABCDEF';
- js에서 list[-1]을 구현하고 싶으시다면 list.slice(-1)[0] 로 구현 하면된다.
'ab' (2부터 -2까지 없앰 . 앞에 남은것만)
- s.replace('ABC', 'hojun')
'abcdefhojunDEF'
console.log로 함수를 출력하면 함수의 코드가 출력되고,
console.dir로 함수를 출력하면 함수의 속성이 출력된다.
string
console.log(${s});
엔터도 인식한다~!.
정리
변수(타입)
변수 이름 명명 규칙
- 숫자와 문자를 사용하되 첫 글자는 숫자가 될 수 없다.
- 특수기호는 $와 _만 사용할 수 있다.
- 비 라틴계 언어의 문자나 상형문자도 사용할 수 있지만 잘 쓰이진 않는다.
8가지 기본 자료형 지원
-
Array(배열)
형태: ['하나','둘','셋'],[100,200,300]
호출: 변수명, 변수명[0], 변수명[0][0] 호출되는 것을 indexing -
Number(숫자)
형태: 10, 10.123
호출: 변수명 -
BigInt(아주 큰 숫자 저장)
-
Boolean(논리값)
*형태: true, false -
null
'비어있음','존재하지 않음'을 나타내는 독립 자료형 -
undefine
값이 할당되지 않은 상태를 나타내는 독립 자료형 -
객체와 (심볼)symbol형
복잡한 자료구조를 저장하는 데 쓰이는 객체형과 고유한 식별자를 만들 때 사용되는 심볼형
*호출: 변수명
- Object(객체)
*형태: {
"지역이름": "전국",
"확진자수": 24889,
"격리해제수": 23030,
"사망자수": 438,
"십만명당발생율": 48.0
}
*호출: { 변수명[index]) 이라고 한다.
Korea[0]{"확진자수"}
변수명, 변수명.지역이름, 변수명['지역이름'] (변수명.key, 변수명[key])
배열 안 {객체}를 Json이라고 한다.
- String(스트링)
형태: 'abcde', "abcde",abcde
호출: 변수명, 변수명[0], (변수명[index])
반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments)
산술연산
'+' '-' '/', ' * ' , ' ** '(제곱) '%'(나머지)
논리연산
! 부정 &&(and) ||(or)
비교연산
==, !=, >=, >,<, <=, ===(값,타입), !==
조건문
if, else if, else, switch
반복문
for , for in, for of, while, do while, forEach, break, continue (아래코드 실행하지 않고 바로 다음으로 넘어간다)
함수
함수 , 콜백함수(함수를 인자값으로 사용해서 함수안 함수 사용), 화살표함수(화살표로 연결), 익명함수 (함수명 x으로 이해?)
선언
- let x :블록 단위 변수
- var x :(전역에서 사용할 변수값, 실무에서 되도록 사용x)
중복선언 가능 (마지막에 할당된 값 변수에 저장) - const x : 변하지않는 값
선언은 블록 범위의 상수를 선언, 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없다.let c = console.log
c('hello world') => hello world 출력된다.
let 자주사용하는함수= [console.log, console.error, innerWidth] 로 대신 사용할 수 있다.
자주사용하는함수0 => hello
할당
매개변수
parameter(함수 정의시, 매개변수)
argument(함수 호출시, 값 넣는 전달인자)
전개표현식 사용
function add(...x){
return x;
}
add(1,2,3,4,5)
[1,2,3,4,5] 출력
블록스코프
hoj변수명이 not defined 되었다고 나온다.
if(true){let hojun = 100;}
console.log(hoj);
let이 아닌 val 로 하면 나옴.
Dom
HTMl 문서의 내용을 트리형태로 구조화하여 웹페이지와 프로그래밍 언어를 연결시켜주는 역할.
이때 각각의 요소와 속성, 콘텐츠를 표현하는 단위를 '노드(node)'라고 한다.
정규 표현식
특정한 문자를 찾을 수 있는 표현
구문
리터럴
- 리터럴은 코드에 보여지는 타입의 표현을 의미
new Array(4,5,6);
상호작용
호스트 환경이 브라우저인 경우, 다음과 같은 UI함수를 이용해 사용자와 상호작용할 수 있다.
prompt(question, [default])
프롬프트 창에 매개변수로 받은 question을 넣어 사용자에게 보여준다. '확인'버튼을 눌렀을 땐 사용자가 입력한 값을 반환해주고, '취소'버튼을 눌렀을 땐 null을 반환한다.
ex)
prompt('hello?')
hi
confirm('hi)
alert('hello')
confirm(question)
컨펌 대화상자에 매개변수로 받은 question을 넣어 사용자에게 보여준다. '확인'버튼을 누르면 true를, 그 외의 경우는 false를 반환한다.
alert(message)
message가 담긴 얼럿 창을 보여준다.
=> 세 함수는 모두 모달 창을 띄워주는데, 모달 창이 닫히기 전까지 코드 실행이 중지. 사용자는 모달 창외에 페이지에 있는 그 무엇과도 상호작용할 수 없다.
let s=''
for(let i=s.length-1; i>=0; i--) {
console.log(s[i])}
/ 는 나누기
-에러가 많아서 소숫점 연산은 애초에 안하는 경우도 있음 parseInt 나 parseFloat도 씀
parseInt(10/3,10)
절대값은 Math.abs()
% 나머지
#반대로 출력
평균과 분산 구하는것.
