0. 기본
// : 주석 (메모 기능으로 사용)
control + / : 선택 영역 전체 주석처리
터미널에서 node (파일명).js 로 실행
1. 변수의 5가지 주요 개념
변수 이름(myVar) : 저장된 값의 고유 이름
변수 값("Hello World") : 저장된 값
변수 선언(var, let, const) : 변수를 사용하기 위해 컴퓨터에 알리는 행위
변수 할당 : 변수에 값을 저장하는 행위
변수 참조 : 변수에 할당된 값을 읽어오는 것
변수 선언: | var | let | const |
똑같은 변수명으로 다시 선언 | O | X | X |
재할당 | O | O | X |
2. 데이터타입1
RUN 할 때 데이터 타입이 결정된다.
객체는 중괄호로 배열은 대괄호로
3. 형 변환
(1) + 연산자는 두 가지 데이터 타입을 결합한다.
{}, null, undefined + "1" => 문자열
1 + "1" = "11" (문자열로 변환되어 합쳐짐)
(2) -, *, / 는 항상 숫자열이 우선시 된다.
"2" * "3" = 숫자열 6
1 - "2" = -1
(3) boolean
0, "", null, undefined, NaN = false
"false", {} = true
(4) String(123, true, false, null, undefined) 모두 string 값은 아니지만
괄호 안에 넣어주면 문자열로 변환해서 출력한다.
(명시적 형 변환)
같은 구조로 Number("123") 하면 Number로 출력된다.
4. 연산자
(1) % (나머지 연산자)
5 % 2 = 1
나누고 남은 몫을 반환한다
(2) += (더하기 등호 연산자), -= (빼기 등호 연산자), *= (곱하기 등호 연산자)
변수의 값에 숫자를 더하는 것
x = x + 5 와 같은 말이다.
let x = 10;
x += 5;
=> 15
(3) 비교 연산자
▶ === (일치 연산자)
타입까지 일치해야 true를 반환
▶ !== (불일치 연산자)
타입까지 일치해야 false를 반환
(4) 논리 연산자
▶ && (논리곱 연산자)
두 값이 모두 true 일 때만 true를 반환
▶ || (논리합 연산자)
두 값 중 하나라도 true 인 경우 true
▶ ! (논리부정 연산자)
값을 반대로 바꿈
let a = true;
console.log(!a);
=> false
(5) ? (3항 연산자)
조건에 따라 값을 선택하는 것
let x = 10;
let result = x > 5 ? "크다" : "작다";
true 면 앞에 값 ("크다")을 할당하고
false 면 뒤의 값("작다")을 할당한다.
(6) typeof (타입 연산자)
해당 타입 값을 반환
* 만약 변수와 변수끼리 비교를 할 때에는
JSON.stringify(변수명) === JSON.stringify(변수명2)로 작성을 해야한다.
왜냐하면 변수는 데이터 저장 주소가 모두 다르기에 같은 값이라도 무조건 false가 나와버린다.
모두 문자열로 변환해서 그대로 비교를 해줘야한다.
5. 함수
input = 매개변수
output = 반환값
(1) 함수 선언문
function 함수명 (매개변수) {}
(2) 함수 표현식
let 함수명 = function (매개변수) {}
(3) 함수 호출
함수명(매개변수)
let 변수명 = 함수명(매개변수)
=> 변수 = 함수반환값
(4) 함수 범위
전역변수 : 전체 코드에서 사용되는 변수
지역변수 : 함수 내부에서 사용되는 변수
▶ 화살표함수
let 함수명 = (매개변수) => {}
let 함수명 = (매개변수) => x + y (이렇게 한줄로도 가능)
let 함수명() {return}
let 함수명 = x => x; (매개변수가 하나일 경우 괄호 생략 가능)
(5) 매개변수 자리에 함수를 넣는 것 = 콜백함수
▶ forEach
ex) a.forEach(function(item){});
▶ map
기존에 있었던 배열을 가공해서 새로운 배열을 생산해내는 역할
그래서 새로운 배열을 변수에 받아야한다.
ex)
let newNumbers = numbers.map(function (tiem) {return item * 2;});
모든 요소를 2배씩 곱해서 배열로 반환한다
▶ filter
조건에 해당하는 값만 반환한다.
ex)
fiteredNumbers = numbers.filter(function(item) {return item === 5});
5와 같은 수만 반환
▶ find
조건에 맞는 첫 번째 요소만 반환.
filter는 모두 반환하지만 find 는 첫 번째로 조건이 충족된 요소만 반환한다.
ex)
let result = numners.find(function (item) {return item > 3;});
6. 문
(1) 조건문
▶ if () {}
소괄호 안의 조건이 성립돼야 중괄호를 실행할 수 있다.
혹은, (수식) && 명령문 (and 조건)
ex) (x > 0) && console.log("x는 양수입니다.")
이런식으로 간편하게 사용할 수 있다.
▶ if () {}
else {}
true 라면 if 문을 실행, false라면 else 문을 실행한다.
▶ if () {}
else if () {}
else
1. if 문 2. else if 3. else 순서대로 들어가며 true인 조건의 코드를 실행한다.
▶ || (or 조건)
삼항 연산자와 단축평가
let y; //y에는 undefined
let z = y || 20;
'만약 y에 undefined면 20의 값을 세팅해줘' 라는 뜻으로 사용한다
(2) switch문
변수의 값에 따라 여러 개의 경우(case) 중 하나를 선택
switch () {case "사과": console.log('사과입니다');
break; (이걸 꼭 넣어줘야 switch문에서 빠져나올 수 있다.)
case "바나나": console.log('바나나입니다');
break;}
(3) 반복문
▶ for문
for (초기값; 조건식; 증감식) {}
ex) for(let i = 0; i < 10; i++) {console.log(i);}
이걸 풀어쓰면
i 라는 변수는 0부터 시작할거야
i 라는 변수는 10에 도달하기 전까지 계속 할거야
i 라는 변수는 한 사이클이 돌고나면 1을 더할거야
▶ for ~ in 문
for (let a in person) {
console.log(a, person[a]);}
근데 왜 여기서 a만 찍으면 key 값이 반환되고 person[a]를 찍으면 value 값을 반환해주는걸까?
같은 a 면 a만 찍었을 땐 key, value 값 모두 나와야하는거 아닌가?
▶ while 문
while (조건) {수식}
▶ do ~ while 문
일단 한번 코드를 실행하고 그 다음 while문을 실행하는 것
let i = 0;
do {console.log(i);
} while (i > 10);
이러면 그냥 while문은 콘솔이 안찍혔을텐데
do while문은 한번만 찍고 넘어가게 된다.
7. 객체
key - value 값이 중요하다!
메소드란? 객체가 가진 여러가지 기능
▶ Object.keys() : key를 가져오는 메소드
▶ Object.values() : value 를 가져오는 메소드
▶ Object.entries() : 전체를 가져오는 메소드
▶ Object.assign() : 객체 복사
ex) Object.assign(어디에 복사할지, 무엇을 복사할지, {변경값})
▶ 객체 병합
... : spread operator (밸류값만 빼오는 기능)
let a = {...b, ...c};
이렇게 하면 b와 c의 밸류값이 a에 들어가게 된다.
(1) 배열
▶ 크기 지정
let number = new Array(5)
▶ 길이 측정
.length
▶ 요소 접근
변수명[인덱스]
A. 배열 메소드
▶ push : 배열에 값을 추가
변수명.push()
▶ .unshift() : 맨 앞의 요소를 추가
▶ .pop(): 마지막 요소를 삭제
▶ .shift(): 맨 앞 요소를 삭제
▶ .splice(인덱스) : 인덱스 자리에 원하는 값을 변경
▶ .slice(인덱스 시작, 인덱스 끝) : 인덱스 범위 안에 있는 요소를 출력
'개발일지' 카테고리의 다른 글
JavaScript 화면 단위 스크롤 1편 (1) | 2023.10.17 |
---|---|
2023.10.13. TIL JavaScript 2주차 (0) | 2023.10.13 |
미니프로젝트 A-03 KPT 회고 (0) | 2023.10.12 |
2023.10.11. TIL 텍스트 애니메이션 및 반응형 폰트 비율 (0) | 2023.10.11 |
2023.10.11. TIL 그라데이션 (0) | 2023.10.11 |