출력, 변수와 상수
출력
console.log(출력할내용);변수
// 변수 선언
let 변수명 = 값;
var 변수명 = 값;- 변수명에는
_,$외의 기호 사용 불가 - 변수명의 첫 글자로 숫자 사용 불가
- 예약어는 변수명으로 사용 불가
- var은 같은 변수명을 중복해서 선언 가능, let은 같은 변수명을 중복해서 선언 불가 -> let
사용 권장 - 변수를 선언하고 값을 할당하지 않으면 해당 변수의 값에 undefined가 할당
상수
const 상수명 = 값;
const 상수명; //error자료형
원시 타입
한번에 하나의 값만 가질 수 있음
하나의 고정된 저장 공간 이용
숫자
정수, 실수 동일
사칙연산 가능
NaN, Infinity도 숫자형으로 분류
문자열
"" 혹은 '' 으로 감쌈
템플릿 리터럴(문자열 안에 변수 삽입)로 선언시에는 백틱 사용
불린
T/F
null
값이 비었음
undefined
값이 할당되지 않음
비 원시 타입
한번에 여러 개의 값을 가질 수 있음
여러개의 고정되지 않은 동적 공간 사용
자료형 변환(명시적 형변환)
// 문자형 -> 숫자형
let str = '1'; // 문자형
let num = parseInt(str); // 숫자형연산자
대입 연산자
값 할당 연산자
=
let 변수명 = 값;산술 연산자
사칙연산 연산자
+ * - / %
연결 연산자
값 연결 연산자
문자열과 숫자형을 더할 경우 숫자형이 문자형으로 변환되어 연결되는데, 이를 묵시적 형변환이라 함
=
let a = 'Mo';
let b = 'mo';
console.log(a+b); //'Momo'복합 연산자
산술 연산자 + 대입 연산자
+= -=
증감 연산자
산술 연산자 + 산술 연산자
숫자형에만 사용 가능
변수의 뒤에 쓰면 해당 코드 라인이 지나고 증감되고(전위연산), 변수의 앞에 붙이면 바로 증감됨(후위연산)
++ --
논리 연산자
!조건 조건의 진리값을 반대로 만들어줌
조건1 && 조건2 두 조건 모두 T여야 T
조건1 || 조건2 두 조건 중 하나 이상 T면 T
비교 연산자
두 값을 비교
변수1==변수2 두 변수의 값만 같으면 T
변수1===변수2 두 변수의 값과 자료형이 모두 같으면 T
변수1!=변수2 두 변수의 값이 다르면 T
변수1!==변수2 두 변수의 값과 자료형이 모두 다르면 T
> >= < <=
null 병합 연산자
const 변수 = 피연산자1 ㅣㅣ 피연산자2피연산자1이 false(null, undefined 포함)이면 피연산자2 반환, true이면 피연산자1 반환
자료형 확인
typeof 변수제어문
조건문
if문
if (조건1) {조건1이 true일때 실행할 코드}
else if (조건2) {조건2가 true일때 실행할 코드} //생략가능
else {조건1, 조건2가 모두 false일때 실행할 코드}switch문
switch (변수) {
case 값1:
변수==값1일때 실행할 코드
break;
case 값2:
변수==값2일때 실행할 코드
break;
default:
변수가 모든 케이스를 충족하지 않을 때 실행할 코드
}반복문
for 반복문
for (let 변수 = 값1; i<=값2, i++) {`값2-값1+1`회만큼 반복할 코드} 변수 1에 Object.length(객체명) 등을 넣어 응용 가능
함수
중복되는 동일한 동작의 코드를 묶은 것
함수 또한 값을 가지는 비원시 자료형 값이기 때문에, 값처럼 변수나 상수에 담아서 활용 가능
함수 선언식(함수 선언 방식)
function 함수명(매개변수1, 매개변수2) {함수가 호출되었을 때 실행할 코드}함수 내부에 return을 써주면 반환값을 가지는 함수가 됨
함수 내부에 선언된 지역 변수는 함수 외부에서 호출 불가
함수 외부에 선언된 전역 변수는 어디에서나 호출 가능
함수 표현식
let 변수명 = function (매개변수1, 매개변수2) {함수가 호출되었을 때 실행할 코드}화살표 함수
let 변수명 = () => (매개변수1, 매개변수2) {함수가 호출되었을 때 실행할 코드}cf.) Hoisting
함수 선언식으로 만든 함수는 코드의 위치에 상관없이 호출 가능하지만, 함수 표현식/화살표 함수로 선언한 함수는 함수 선언 이후의 라인에서 호출해야 함(hoisting의 대상이 아니기 때문)
콜백 함수
함수를 다른 함수의 매개변수로 넘겨주는 것
function 함수명(변수, 함수1, 함수2) {함수가 호출되었을 때 실행할 코드}객체
생성 방법
let 변수명 = {}; // 객체 리터럴 방식(권장)
let 변수명 = new Object(); // 생성자 방식
변수명 = {
키1: 프로퍼티1,
키2: 프로퍼티2,
}키는 반드시 문자열로 작성해야 하고, 선언할 때 따옴표는 사용하지 않음
프로퍼티에는 어떤 자료형이든 위치할 수 있음
접근 방법
let 변수명 = {
키1: 프로퍼티1,
키2: 프로퍼티2,
}
console.log(변수명.키1);
console.log(변수명['키1']); // 변경 방법
let 변수명 = {
키1: 프로퍼티1,
키2: 프로퍼티2,
}
// 값 변경
변수명.키1 = 변경할값;
변수명['키1'] = 변경할값;
// 프로퍼티 추가
변수명.추가할키 = 변경할값;
// 프로퍼티 삭제
delete 변수명.키1; // 삭제하더라도 메모리에 키1이라는 프로퍼티는 남아 있음
delete 변수명['키1']; // 삭제하더라도 메모리에 키1이라는 프로퍼티는 남아 있음
변수명.키1 = null; // 메모리에서도 삭제(권장)
변수명['키1'] = null; // 메모리에서도 삭제(권장)상수(const)로 객체를 선언하고 프로퍼티를 변경해도 객체 자체의 값이 변하는 것은 아니기 때문의 수정 가능
객체의 메서드
let 변수명 = {
키1: 프로퍼티1,
키2: 프로퍼티2,
키3: function () {
console.log(`이 변수의 키1은 ${this['키1']}`);
console.log(`이 변수의 키1은 ${변수명['키1']}`);
}
}
배열
순서 있는 요소들의 집합
생성 방법
let 변수명 = []; // 배열 리터럴 방식(권장)
let 변수명 = new Array(); // 생성자 방식
변수명 = [값1, 값2, 값3];값에는 모든 자료형을 넣을 수 있음
접근 방법
let 변수명 = [값1, 값2, 값3];
console.log(변수명[인덱스]);
console.log(변수명.length); // 배열 길이 출력변경 방법
let 변수명 = [값1, 값2, 값3];
// 값 변경
변수명[인덱스] = 변경할값;
// 값 추가
변수명.push(변경할값);배열 내장 함수
forEach
배열명.forEach((변수명) => 실행할 코드);배열 순회 내장함수
배열의 각 요소에 대해 코드 실행(파이썬의 for문과 유사)
map
const 새로운배열명 = 배열명.map((변수명) => return 변수를가공하는코드);기존 배열의 변수를 가공하여 새로운 배열에 담는 함수
includes
console.log(배열명.includes(인자));배열에 인자와 일치하는 값이 있으면 true, 없으면 false를 반환하는 함수
일치는 === 기준(자료형까지 같아야 함)
indexOf
console.log(배열명.indexOf(인자));배열에 인자와 일치하는 값이 있으면 그 값의 인덱스를, 없으면 -1을 반환하는 함수
일치는 === 기준(자료형까지 같아야 함)
findIndex
console.log(배열명.findIndex((변수)=>변수에대한조건));배열의 각 요소에 대해서, 변수에대한조건이 true일 경우 해당 요소의 인덱스를, false일 경우 -1을 반환하는 함수
조건을 만족하는 요소가 여러 개일 경우 그 요소 중 첫 번째 요소의 인덱스를 반환
find
console.log(배열명.find((변수)=>변수에대한조건));배열의 각 요소에 대해서, 변수에대한조건이 true일 경우 해당 요소의 값을, false일 경우 -1을 반환하는 함수
조건을 만족하는 요소가 여러 개일 경우 그 요소 중 첫 번째 요소의 값을 반환
filter
console.log(배열명.filter((변수)=>변수에대한조건));배열의 각 요소에 대해서, 변수에대한조건이 true일 경우 해당 요소의 값을, false일 경우 -1을 반환하는 함수
조건을 만족하는 요소가 여러 개일 경우 조건을 만족하는 모든 요소를 배열에 담아 반환
slice
배열명.slice(); // 모든 요소를 자름
배열명.slice(시작지점, 끝지점); // 시작지점부터 끝지점 전만큼 자름배열을 자르는 함수
원본 배열 변화 x
concat
배열1.concat(배열2);배열을 합치는 함수
sort
배열명.sort();
배열명.sort(비교함수);배열을 정렬하는 함수(문자열 기준, 가나다순)
숫자 기준으로 정렬하고 싶으면 비교함수를 만들어서 sort()의 인자로 넣어주어야 함
원본 배열 변화 o
join
배열명.join(구분자); // 구분자를 입력하지 않을 경우 디폴트로 ,가 구분자가 됨배열 내 요소들을 한 문자열로 합치는 함수
Reference
