Variable.js
1. use strict
- use strict를 사용하는 이유
: JavaScript - flexible => 비상식적인 코드 사용 가능
ex) 선언되지 않은 변수에 값 할당
2. 변수
var, let, const
① var : 선언과 초기화가 동시에 진행
1) 변수의 중복 선언이 허용
2) 변수 hoisting
: 변수를 어디에 선언했던 상관없이 변수 선언을 가장 위로 끌어 올리는 것(변수 할당 전에 값을 찍어보면 undefined 나옴)
3) block level scope 무시
var의 단점을 보완하기 위해 등장한 변수 선언 방식 : let, const
② let : mutable data type(값을 변경할 수 있음)
③ const : immutable data type(값을 변경할 수 없음)
3. Data Types
1) primitive type : number, string, boolean, undefined, null, symbol
2) object/reference type : 6가지 제외한 나머지 data type
ex) object, function, array 등
✔ number
JavaScript는 변수를 선언할 때 data type을 따로 명시하지 않아도 됨
// special numeric values : Infinity, -Infinity, NaN(Not a Number), bigint(길이 제약X)
✔ string
char 타입 없음
cf) template literal : ``(백틱) 이용
1) ``안에 있는 문자열 그대로 출력
2) 표현식 삽입 예) template = `1 + 2 = ${1 + 2}`; //"1 + 2 = 3"
✔ undefined : 값이 할당되지 않은 것
✔ symbol : 고유의 key 값을 부여
Symbol() -> symbol 값은 외부로 노출되지 않음
예) const symbol1 = Symbol('id');
console.log(`value: ${symbol1.description}, type: ${typeof symbol1}`); //value: id, type: symbol
✔ object
예) const itsMe = { name : 'Jay', age : 100 };
console.log(itsMe); //{name: "Jay", age: 100}
//itsMe = { name : 'JavaScript', age : 26 };
const는 재할당이 금지 = 객체에 대한 '참조'를 변경하지 못함. 하지만 이 때 객체의 'property'는 보호X
=> 할당된 객체의 내용(프로퍼티의 추가,삭제,값의 변경)은 변경할 수 있다
itsMe.age = 200;
console.log(itsMe); //{name: "Jay", age: 200}
5. Dynamic Typing
C, Java -> 정적 타입 언어
JavaScript -> 동적 타입 언어
=>타입이 바뀔 수 있음
예) foo = 3;
console.log(typeof foo); //number
foo = { name : 'foo' };
console.log(typeof foo); //object
Operator.js
연산자
**= : 지수연산
예) 3**=5 (3의 5승)
== : Loose equality -> 값이 같으면 같다
=== : Strict equality -> 값과 type이 모두 같으면 같다
console.log('' === false); // false(string/bool)
console.log(null === undefined); // false(null, undefined)
for문
① for ... of 반복문
for of 문 사용 조건 : 컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야함
② forEach 반복문
forEach문 사용 조건 : 오직 Array 객체에서만 사용가능
✔ for문처럼 index와 조건식, increase를 정의하지 않아도 callback 함수를 통해 기능을 수행
Function.js
① 함수 리터럴
리터럴이란? 선언함과 동시에 값 또는 코드를 지정해주는 것
//변수에 함수 리터럴을 할당
var f = function add(x, y) {
return x + y;
}
② 화살표 함수
function 키워드 대신 화살표 =>를 이용한 좀 더 간략한 함수 선언 방식
const add = (x, y) => x + y;
console.log(add(2, 5)); //7
③ Rest 파라미터
Rest 파라미터 : 매개변수 이름 앞에 세개의 점 ...을 붙여서 정의한 매개변수. 함수에 전달된 인수들의 목록을 배열로 전달받음
function foo(...rest) {
console.log(Array.isArray(rest)); // true
console.log(rest); // [ 1, 2, 3, 4, 5 ]
}
foo(1, 2, 3, 4, 5); //인수 목록이 배열로 전달됨
④ Default 파라미터
parameter에 default 값을 지정해서 인자가 전달되지 않을 경우 default 값으로 대체
function multiply(a, b = 1) {
return a * b;
}
⑤ 함수 표현식
const print = function () { // anonymous function
console.log('print');
}; print();
const printAgain = print;
printAgain();
⑥ 콜백 함수
인자로 전달되어 상황에 맞게 호출되는 함수
addsub = function(a, b, callback){
callback(a+b, a-b); //callback의 변수로 각 값을 넣어서 보냄
}
addsub(8, 2, function(result1, result2){ //function은 받은 결과값을 출력
console.log(result1);
console.log(result2);
}
⑦ IIFE : Immediately Invoked Function Expression(즉시실행함수)
선언과 동시에 호출
(함수 선언)();
(function foo() {
alert('foo);
})();
'Etc > Frontend' 카테고리의 다른 글
[JavaScript] 콜백 함수(callback function)란? (0) | 2023.03.21 |
---|---|
내비게이션 바에서 링크를 클릭했을 때 클릭된 내용을 본문에 나타내기 (0) | 2021.08.11 |
07.13 (0) | 2021.07.14 |
2021.07.11 (0) | 2021.07.11 |
2021.07.07 (0) | 2021.07.07 |