Intro
감기 이슈로 핑계 맞을지도 가득 가득 밀린 내 벨로그...
정리를 안하기엔 또 뭔가 안한 것 같고 찝찝한 그럼 마음에 모든 것을 정리해야하는 성격 🥹
갈길이 머니.... 여기선 좀 알아둘만한 것들만 빠르게 정리하고 넘어가자
그러니까 미루지마 제발
연산자
나머지 연산자의 부호
❗️ 나머지 연산의 부호는 왼쪽 피연자의 부호를 따름
console.log(`7 % 5 = ${ 7 % 5 }`); // 7 % 5 = 2
console.log(`7 % -5 = ${ 7 % -5 }`); // 7 % -5 = 2
console.log(`-7 % 5 = ${ -7 % 5 }`); // -7 % 5 = -2
console.log(`-7 % -5 = ${ -7 % -5 }`); // -7 % -5 = -2문자열 결합
문자열 결합 연산자 +를 사용하여 여러 문자열을 하나로 연결
console.log("Hello, " + 'JavaScript' + `!!!!`);문자열 인덱싱
문자열의 일부를 선택 => 문자열[인덱스]
console.log(message[18]); // 범위를 벗어나면 undefined증감 연산자: 후위(postfix)와 전위(prefix)
-> 이건 정처기에서 필수로 나오는 문제들이었다👀
let x = 100;
console.log(x); // 100
if (x++ > 100) {
console.log("100 초과");
} else {
console.log("100 이하"); // 100 이하
}
console.log(x); // 101
let y = 100;
console.log(y); // 100
if (++y > 100) {
console.log("100 초과"); // 100 초과
} else {
console.log("100 이하");
}
console.log(y); // 101동등 연산자(equality operator)와 일치 연산자(strict equality operator)
- 동등 연산자 ==는 자료형(타입)을 무시하고 값만 비교
- 일치 연산자 ===는 자료형(타입)과 값 모두를 비교
Object.is() 메서드🌟
Object.is()는 엄격한 비교를 수행하며, ===와는 약간의 차이가 있다.
- -0 === +0은
true지만, Object.is(-0, +0)는false - NaN === NaN은
false지만, Object.is(NaN, NaN)은true
삼항 연산자
삼항 연산자 ? :는 조건에 따라 다른 값을 반환
let x = 100;
console.log(x > 100 ? "100 초과" : "100 이하") // 100이하자료형 변환
강제 자료형 변환
⇒ String(), Number(), Boolean() 함수를 사용하여 명시적으로 자료형을 변환
- 불리언으로 변환: Boolean() 함수를 사용하거나 이중 부정 연산자 !!를 사용
- 0, -0, null, false, NaN, undefined, '' => false, 그 외의 값은 true
console.log(Boolean(0), !!0); // false false
console.log(Boolean(1), !!1); // true true자동 자료형 변환
JavaScript는 연산 시 자동으로 자료형을 변환한다.
숫자와 문자열에 + 연산자를 사용하면 숫자를 문자열로 자동 변환
-> + 연산자는 문자열 결합 연산자로 사용
console.log(10 + 20); // 30
console.log("10" + 20); // "1020"
console.log(10 + "20"); // "1020"
console.log("10" + "20"); // "1020"숫자와 문자열에 +가 아닌 다른 연산자를 사용하면 문자열을 숫자로 자동 변환
console.log(20 - 10); // 10
console.log("20" - 10); // 10
console.log(20 - "10"); // 10
console.log("20" - "10"); // 10
console.log("20" * 10); // 200
console.log("20" / 10); // 2
console.log("20" % 10); // 0함수
함수 정의 방법
1️⃣ 함수 선언문 (Function Declaration)
function키워드를 사용하여 함수를 정의하는 가장 일반적인 방법- 이 함수는 선언되기 전에 호출하더라도 정상적으로 동작(호이스팅)
2️⃣ 함수 표현식 (Function Expression)
- 함수를 변수에 할당하는 방식으로 정의
⓵ 익명 함수 표현식 (Anonymous Function Expression)
: 함수에 이름을 지정하지 않고 변수에 할당하는 방식
let add = function(x, y) {
return x + y;
}; ⓶ 기명 함수 표현식 (Named Function Expression)
: 함수에 이름을 지정하여 변수에 할당하는 방식
-> 이름은 함수 내부에서 재귀 호출 등에 사용될 수 있지만, 함수 외부에서는 해당 이름으로 호출할 수 없음
3️⃣ Function 생성자 이용 (권장 x)
이 방식은 코드 가독성이 떨어지고 디버깅이 어려워 일반적으로 권장되지 않음
let add = new Function('x', 'y', 'return x + y');
console.log(add(10, 20)); // 30함수 종류
콜백 함수(callback function)
개발자가 코드를 이용해서 명시적으로 호출하는 함수가 아니고, 개발자는 단지 함수를 등록하기만 하고,
어떤 이벤트가 발생하거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수
- 이벤트 핸들러 ⇒ 특정 이벤트가 발생했을 때 실행되는 함수
<input type="button" onClick="function() { .... }" />
즉시 실행 함수 = 자기 호출 함수
- 함수 정의와 동시에 바로 실행하는 함수
- 주로 초기화 작업이나 한 번만 실행되어야 하는 코드를 작성할 때 사용
- 익명 함수 표현식을 괄호로 감싼 후, 즉시 호출하는 형태로 작성
(function (name) {
console.log(`${name}는 즉시 실행됩니다.`);
})('이 함수');
- 위 코드에서 함수는 정의되자마자 '이 함수'라는 인자를 받아 실행 됨
화살표 함수 (Arrow Function) 🌟
- ES6에서 도입된 간결한 함수 표현식
- function 키워드 대신 =>를 사용하여 함수를 정의
- 문법이 간단해지고 this 바인딩이 기존 함수와 다르게 동작하는 특징이 있다
// 익명 함수 표현식을 이용해서 함수 정의
const add1 = function(x,y) {return x+y;};
// 화살표 함수
// function 키워드 제거하고 화살표 => 추가
const add2 = (x,y) => {return x+y;};
// 화살표 함수 본문이 결과를 반환하는 구문일 경우 중괄호와 return 생략 가능
const add3 = (x,y) => x+y;
// 매개변수가 하나인 경우, 매개변수를 감싸고 있는 소괄호 생략 가능
const add4 = x => x+4;
// 객체를 반환하는 경우, 반환 객체를 소괄호로 감싸야한다
cosnt add5 = (x,y) => {return {result:x+y};};
const add6 = (x,y) => ({result : x+y});배열
- for - in 구문 => 개별 요소의 인덱스를 반환
for (let index in values){
console.log(index,values[index])
}- for - of 구문 이용 => 개별 요소의 값을 반환
for (let value of values){
console.log(value)}- forEach => 개별 요소를 콜백 함수로 전달
콜백 함수는 각 요소에 대해 실행되며, 배열의 요소를 나타내는 매개변수를 반드시 하나 이상 사용해야 한다.
numbers.forEach(function(number) {
console.log(number);
});// 함수 선언문 형태로 콜백 함수 정의
function printDate(data) {
console.log(data);
}
values.forEach(printData)
// 함수 표현식 형태로 콜백 함수를 정의
let printData2 = function(data) {
console.log(data);
};
values.forEach(printData2);
// 화살표 함수로 콜백 함수를 정의
values.forEach((data) => {
console.log(data);
});
객체
// 객체 선언
let person = {
"name": "홍길동",
'age': 23,
isMarraied: false,
"favorite colors": [ "red", "blue" ],
hello: function() {
console.log(`안녕하세요, 나는 ${this.name}입니다.`);
}
};
// 객체의 모든 항목을 가져와서 출력
console.log("for-in 구문을 이용 => 객체의 키를 반환")
for (let key in person) {
console.log(key, person[key]);
}
// Uncaught TypeError: person is not iterable ⇐ for of 구문을 사용할 수 없음
/*
for (let value of person) {
console.log(value);
}
*/
// 객체의 키를 배열로 만들어서 반환
for (let key of Object.keys(person)) {
console.log(key, person[key]);
}
// 함수 선언문 형식으로 콜백 함수를 정의
function print(key, value) {
console.log(key, value);
}
Object.keys(person).forEach(key => print(key, person[key]));
// 익명 함수 표현식 형식으로 콜백 함수를 직접 정의
Object.keys(person).forEach(function(key) {
console.log(key, person[key]);
});
// 화살표 함수 형식으로 콜백 함수를 직접 정의
Object.keys(person).forEach(key => {
console.log(key, person[key]);
});
// 축약된 화살표 함수 형식으로 콜백 함수를 직접 정의
Object.keys(person).forEach(key => console.log(key, person[key]));
