자바스크립트의 특징
- 객체지향적이다.
- 동적 타이핑 언어이다.
- 비동기 처리가 가능하다.
- 클라이언트 및 서버에서도 사용 가능하다.
변수
- 변수 이름 : 저장된 값의 고유 이름
- 변수 값 : 변수에 저장된 값
- 변수 할당 : 변수에 값을 저장하는 행위
- 변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위
- 변수 참조 : 변수에 할당된 값을 읽어오는 것
- var : 재선언o 재할당o
- let : 재선언x 재할당O
- const : 재선언x 재할당x
데이터 타입
자바스크립트는 runtime : 코드를 작성할 때가 아니라,
실제 코드가 실행될때 그 때, 데이터 타입이 결정된다.
변수의 타입은 typeof 연산자를 통해서 트래킹 할 수 있다.typeof 연산자
let a = 1;
console.log(typeof a);NaN : Not a Number
- 숫자가 아닌 값을 반환하려 할때 나오는 값
number형 (정수,실수,지수)
- infinity는 정수 무한대를 의미한다.
- -infinity는 음수 무한대를 의미한다.
문자열 관련 (length, concat, substr, slice, search, replace, split)
- .length : 문자열 길이 확인
- .concat(매개변수) : 문자열 합치기
- .substr(시작인덱스, 글자갯수) : 문자열 자르기
- .slice(시작인덱스, 끝인덱스) : 문자열 자르기
- .search('찾을 문자열') : 문자열 찾기
- .replace('바꿀 문자열') : 문자열 바꾸기
- .split('기준') : ex) 쉼표 기준으로 문자열을 자르기
불린형 - Boolean형
- true(참), false(거짓)
- 문자열과 다르게 따옴표를 쓰지 않고 사용한다
- if조건문에서 유용하게 사용된다
undefined형
un : not, define : 정의하다, undefined : 정의가 되지 않았다.- 변수를 선언하고 값을 할당되지 않으면 나오는 타입이다.
null형
- 값이 존재하지 않음을 명시적으로 나타내는 방법이다.
- undefined는 정의되지 않은 값을 말하는것이고, null은 개발자가 의도적으로 값이 없다는것을 명시하기 위해 넣은 값이다.
object(객체)
{
key1: 'value',
key2: 'value'
}
<!-- 어떠한 데이터 타입이든 다 들어갈 수 있다 -->array(배열)
['value', 'value', 'value', 'value', 'value',]
// 여러개의 데이터를 순서대로 저장하는 데이터 타입이다.
// 값들은 자기의 위치에 대한 인덱스를 가지고 있다
*인덱스는 0부터 시작한다. ex) 0, 1, 2, 3형 변환
암시적 형 변환 - 문자열
let result = 1 + '2';
<!--result 안에 있는 값은 string(문자열) 12가 된다.
숫자와 문자를 더하게되면 문자열로 암시적인 형 변환이 된다-->암시적 형 변환 - 숫자형
let result = '2' * '3';
<!-- result 안에 있는 값은 number(숫자형) 6이 된다.
더하기가 아닌, 다른 연산자들은 숫자형이 우선시 된다 -->명시적 형 변환 - Boolean(매개변수)
숫자 0, 빈문자열, null, undefined, NaN은 false가,
값이 있는 문자열, array({},)는 true가 나온다
<!-- 불리언타입으로 변경할때 사용한다 -->명시적 형 변환 - String(매개변수)
매개변수안에 있는 값을 문자열로 형 변환할때 사용한다명시적 형 변환 - Number(매개변수)
매개변수안에 있는 값을 숫자형으로 형 변환할때 사용한다연산자
더하기 연산자 (+)
ex) console.log(1 + 1) // 2
ex) console.log(1 + '1') // 11빼기 연산자 (-)
ex) console.log(1 - 1) // 0
ex) console.log(1 - '2') // -1곱하기 연산자 (*)
ex) console.log(2 * 3); // 6
ex) console.log('2' * 3); // 6나누기 연산자 (/)
ex) console.log(4 / 2); // 2
ex) console.log('4' / 2); // 2나머지 연산자 (%)
ex) console.log(5 / 2); // 2.5
ex) console.log(5 % 2); // 1등호 연산자 (=)
ex) let a = 1;
// 오른쪽에 있는 값을 왼쪽에 할당할때 쓰는 연산자더하기 등호 연산자 (+=)
a += 1; // a = a+1
// 원래 있던 값에 추가로 더한 값을 할당할때 쓰는 연산자빼기 등호 연산자 (-=)
a -= 1; // a = a-1
// 더하기 등호 연산자의 반대곱하기 등호 연산자 (*=)
대충 똑같나누기 등호 연산자 (/=)
대충 똑같비교연산자
일치 연산자 (====)
// 타입까지 일치해야 true를 반환하는 연산자
ex) console.log(2 === 2); // true
ex) console.log(2 === '2') // false불일치 연산자 (!==)
// 타입까지 일치해야 false를 반환하는 연산자
ex) console.log(1 !== 1); // false
ex) console.log('1' !== 1); // true작다 연산자 (<)
ex) console.log(2 < 3); // true크다 연산자 (>)
생략작거나 같다 연산자(<=)
생략논리 연산자
논리곱 연산자 (&&)
// 두 값이 모두 true일때만 true를 반환한다
ex) console.log(true && true); // true
ex) console.log(true && false); // false논리합 연산자 (||)
// 두 값중 하나라도 true인 경우 true를 반환한다
ex) console.log(true || true); // true
ex) console.log(true || false); // true
ex) console.log(false || false); // false논리부정 연산자 (!)
// 앞에 느낌표를 붙여주면 반대로 바꿔준다.
ex) let a = true;
console.log(!a); // false삼항 연산자
// 항이 3개가 들어가기 때문에 삼항 연산자라고 부른다
// 조건이 true이면 앞의 값으로, false면 뒤의 값으로 결정된다.
ex) let x = 10;
let result = x > 5 ? '크다': '작다';
console.log(result); // 크다let y = 20;
let result = y < 10 ? '작다': '크다';
console.log(result); // 크다함수 (function)
- input, output을 가지고 있는 단위
- input은 함수의 매개변수
- output은 return문 뒤에 오는 값 : 반환값
- 자바스크립트 내에서 기능으로 묶어 재활용을 한다
함수 선언문
function add(매개변수(input)) {
// 함수 내부에서 실행할 로직
}
// ex) 두 개의 숫자를 입력 받아서 덧셈을 한 후 내보내는 함수
function add (x, y) {
return x + y;
}함수 표현식
function add2 = (x, y) {
return x + y;
}
// 위에 덧셈하는 함수와 기능은 똑같지만 다른 방법으로 만들어진 함수함수 호출법
ex)
console.log(add(2,3)); // 5
let functionResult = add(3,4);
// 함수 호출로 반환받은 값을 변수에 넣어서 출력하는 방법스코프, 전역변수, 지역변수, 화살표함수
스코프
변수의 영향 범위전역변수
// 스코프가 전체 범위에 영향을 끼칠 수 있는 함수
ex) 함수 안이 아닌 밖에 선언된 변수
let x = 10;지역변수
// 스코프가 함수 내에서만 영향을 끼칠 수 있는 함수
// ex) 함수 내에 선언된 변수
function printX() {
let x = 10;
console.log(x);
}화살표함수 (=>) // ES6 이후부터 등장한 신 문법
// 화살표함수는 기존 함수를 더 간단하게 쓸 수 있다
ex)
let arrowFunc01 = (x, y) => {
return x + y
}let arrowFunc02 = (x, y) => x + y // 한줄로 작성하는 방법*한줄로 작성하려면 중괄호도 같이 빼야됨
return문을 생략 할 수 있는 상황은 {} 안에 다른 로직이 없을 경우만 가능
let arrowFun03 = x => x // 매개변수가 한개인 경우에는 ()도 생략이 가능조건문 (if, else if, switch)
if문 기본골격
if (조건) { <- 조건이 true일 경우에 아래 메인로직이 실행됨
메인로직
}if - else문 기본골격
if (조건) {
메인로직1
} else {
메인로직2 <- if의 조건이 false일 경우에 메인로직2가 실행됨
}if - else if - else문 기본골격
if (조건) {
메인로직1
} else if (조건) {
메인로직2
} else {
메인로직3
}switch문 골격
let fruit = '사과'
switch (fruit) {
case '사과':
console.log('사과입니다.');
break;
case '바나나':
console.log('바나나입니다');
break;
case '키위':
console.log('키위입니다.');
break;
default:
console.log('아무것도 아닙니다.');
break; <----// 브레이크를 넣지 않으면 switch문에서 빠져나오지 못함.
}조건문의 중첩 골격
let age = 20;
let gender = '여성';
if (age >= 18) { <- 나이 구분
if (gender === '여성'){ <- 성별 구분
console.log('성인 여성 입니다.');
} else {
console.log('성인 남성입니다.');
}
} else {
if (gender === '여성') {
console.log('미성년 여성입니다.');
} else {
console.log('미성년 남성입니다.');
}
}
// *조건문을 많이 중첩시키는건 좋지 않지만 꼭 필요할때가 생기기도 한다.조건부 실행
let x = 10;
if (x > 0) {
console.log('x는 양수 입니다.')
}and 조건 (&&)
(x > 0) && console.log('x는 양수 입니다.')
// 이러한 패턴은 많이 쓴다or 조건 (||)
let y; <- // undefined가 들어가 있음
let z = y || 20; // <- y가 undefined라면 20을 할당해줘 라는 문법
// undefined는 false이기 때문에 20이 할당 된다
console.log(z)
// *삼항 연산자와 단축평가if문에 falsy한 값, truthy한 값
if (조건) {
// main logic
}
// *falsy한 값 : "", 0, null, undefined, NaN
자바스크립트부터 공부하는 사람