모던 자바 스크립트 기본 개념 정리

Symbol과 BigInt

---

🔖ES6+ 이후 추가된 새로운 데이터타입

// Symbol 고유한 값을 만들 때 사용
const symbol = Symbol('this is a Symbol'); // 다른 어떤 값과 비교해도 무조건 false

// BigInt JS가 안전하게 표기할 수 있는 최대 정수형을 넘어선 표현을 위해 사용
const bigint = 9007199254740993n;
const bigint = BigInt(9007199254740993);
// 소수 표현에는 사용 불가, 같은 타입끼리만 연산 가능!

typeof 연산자

---

🔖변수의 데이터타입을 확인하기 위해 사용하는 연산자

// typeof 변수 or typeof(변수) 의 형태로 사용
typeof 'Codeit'; // string
typeof Symbol(); // symbol
typeof {}; // object
typeof []; // object
typeof true; // boolean
typeof(false); // boolean
typeof(123); // number
typeof(NaN); // number
typeof(456n); // bigint
typeof(undefined); // undefined

❗typeof function의 경우, object 아닌 function이라는 고유의 값으로 리턴

and, or 연산에 따른 출력방식의 차이

---

🔖출력의 결과값의 차이가 발생한다.

console.log(true && n) // n가 무슨 값이든 왼쪽이 true일 경우 n가 출력된다.
console.log(false && n) // false가 왼쪽일 경우 무조건 false가 출력된다.
console.log(true || n) // 왼쪽이 true일 경우 n가 무슨 값이든 true가 출력된다.
console.log(false || true) // 왼쪽이 false일 경우 오른쪽이 true면 true가 출력된다.
console.log(false || false) // 왼쪽이 false일 경우 오른쪽도 false면 false가 출력된다.

✅null 병합 연산자

const example1 = null ?? 'i'; // 왼쪽이 null이나 undefined일 경우 오른쪽 값 리턴
const example2 = 1 ?? 'i'; // 왼쪽이 null이나 undefined가 아닐 경우 왼쪽 값 리턴

❗or 연산자와 출력방식이 비슷하지만 서로 다른 연산자임에 주의!

자바스크립트의 변수 선언 방식

---

🔖JS의 변수 선언 방식은 크게 var, let, const로 구분된다.

✅var : ES6이전 선언 방식, 중복선언 및 호이스팅의 문제 + 함수 스코프 = 문제⬆️

var variable;

✅let, const : ES6 이후 추가, 중복선언 선언 전 사용 불가 + 블록 스코프 = 문제⬇️

let variable;
const variable;

✅함수 스코프와 블록 스코프
❗var는 함수 스코프이므로 함수를 제외한 다른 모든 스코프에서는 중복되는 문제발생

function sayHi() {
  var userName = 'codeit';
  console.log(`Hi ${userName}!`);
}
console.log(userName); // ReferenceError
// function이 아니라면 error 없이 동작해버림

❗let과 const는 블록 스코프이므로, {}로 감싸져 있다면 전부 적용

function sayHi() {
  const userName = 'codeit';
  console.log(`Hi ${userName}!`);
}

for (let i = 0; i < 5; i++) {
  console.log(i);
}

{
  let language = 'JavaScript';
}

console.log(userName); // ReferenceError
console.log(i); // ReferenceError
console.log(language); // ReferenceError

함수 선언 방식

---

🔖함수 표현 방식은 크게 함수 선언, 함수 표현식, 화살표 함수(ES6+)로 나누어진다.

// 함수 선언
function myFunction() {}
// 함수 표현식
const myFunction = function() {}
// 화살표 함수
// 파라미터가 하나일때 소괄호 생략 가능, return문만 있을 때 중괄호 생략 가능
const myFunction = () => {}

✅기명 함수 표현식 알아두기

// 함수 표현식으로 함수를 작성하는 경우, 선언하는 함수에 이름을 붙힐 수 있다.

// 이름 없는 함수를 변수에 할당한 경우
const myFunction = function() {}
console.log(myFunction.name); // myFunction
// 이름을 따로 작성한 경우
const myFunction = function myFunc() {}
console.log(myFunction.name); // myFunc

❗함수 내부에서만 사용하며, 함수 바깥에서는 사용 불가
❗함수 내부에서 함수를 사용하는 식을 작성하는 경우, 기명 함수 표현식으로 작성하는 것이 유리

✅즉시 실행 함수 알아두기

// 선언과 동시에 실행되는 즉시 실행 함수
(function () {
    ...
})

❗이름을 지어주더라도 외부에서 사용 불가
❗전역변수 네이밍이 더 자유로움

Parameter & Arguments

---

🔖함수 호출 시 argument의 전달이 없다면, 기본값을 지정하여 대신 출력되게 할 수 있다.

function myFunc (arg = 'example'){
    console.log(arg);
}
myFunc(); // example

🔖Arguments : 함수를 호출할 때 전달한 argument을 모아놓은 유사 배열

function myFunc (){
    for(const arg of arguments){
        console.log(arg);
    }
}

myFunc(1,2,3); // 1 2 3

🔖 Rest Parameter : Arguments를 유사배열로 다룰 수 있는 또 다른 방법

function myFunc(...args){
    for(const arg of args){
        console.log(arg)
    }
}
myFunc(1,2,3,4); // 1 2 3 4

// 일반 파라미터와 혼용 가능
function myFunc(arg1, arg2, ...args){
    ...
}

this

---

🔖웹 브라우저에서 사용 시 전역 객체 window를, 함수 안에서는 메소드를 호출한 객체를 가리킴

const user = {
    name1 : lee,
    name2 : park,
    getEveryName: function () {
        return `${this.name1} ${this.name2}`;
    }
}

console.log(user.getEveryName()); // lee park

Spread 문법

---

🔖객체를 Spread하여 프로퍼티들을 복사 가능하다.

const obj = { 
  name: 'kim', 
};

const objClone = { 
  ...obj, // spread 문법!
};

console.log(obj); // {name: "kim"}
console.log(objClone); // {name: "kim"}

모던한 프로퍼티 접근 및 옵셔널 체이닝

---

🔖ES6 이후로 고안된 접근법으로 간결한 코드 작성에 용이하다.

const title = "CodingKing"
const name = "Cogi";
const myFunc = () => {
    ...
}

const obj = {
    title,
    name,
    myFunc, 
    yourFunc() { // 함수 선언도 간결하게
    }
}

🔖옵셔널 체이닝 : 프로퍼티의 값이 null이나 undefined일 경우 에러코드 대신 undefined 반환

const obj = {
    name: 'Cogi',
    friend : {
        name : 'Gogi'
    }
}

function printFriendName(user) {
    console.log(user.friend.name); // 만약 friend 객체가 없을 경우 에러 발생
}

// 옵셔널 체이닝
function printFriendName(user){
    console.log(user.friend?.name); // 만약 friend 객체가 없을 경우 undefined 반환
}

finally 문법

---

🔖JS에서 예외처리를 가능케하는 try..catch 문 뒤에 finally 코드 블록을 추가하는 형식

try{
    ...
} catch (err) {
    ...
} finally {
    ...
}

✅ try에서 코드를 실행하지 못해 catch문으로 받았다면, catch의 코드가 모두 실행된 후에 실행할 코드를 finally 부분에 작성한다.

🔖만약 finally문 자체에서도 예외처리를 하고싶다면 try..catch를 중첩하여 사용한다.

try{
    try{
        ...
    } catch (err) {
        ...
    } finally {
        ...
    }
} catch(err){
    ...
}

자바스크립트 고차함수

---

🔖forEach 메서드
✅ 배열의 요소를 순회하며 반복작업(for과 유사), 첫번째 인자로 콜백함수 전달

const num = [1,2,3];

num.forEach((el) => {
    cosole.log(el); // 1, 2, 3
})

🔖map 메서드
✅forEach와 유사하나 리턴값이 아닌 새로운 배열을 만들어 반환함

const num = [1,2,3];

const newNum = num.map((el) => {
    return el * 2; // newNum = [2, 4, 6]
})

🔖filter 메서드
✅ 배열의 요소를 순회하며 콜백함수가 리턴하는 조건과 일치하는 요소만 따로 배열로 만들어 반환

const student : [
    {name : 'kim', age : 10},
    {name : 'lee', age : 10},
    {name : 'park', age : 15},
]

const filteredStudent = student.filter((el) => {
    return el.age == 10; // {name: 'kim', age: 10}, {name: 'lee', age: 10}
})

🔖find 메서드
✅filter 메서드와 유사하지만 일치하는 요소를 하나라도 찾으면 그 즉시 종료

const student : [
    {name : 'kim', age : 10},
    {name : 'lee', age : 10},
    {name : 'park', age : 15},
]

const filteredStudent = student.find((el) => {
    return el.age == 10; // {name: 'kim', age: 10}
})

🔖some, every 메서드
✅some 메서드는 콜백함수의 리턴 조건이 하나라도 있다면, every 메서드는 콜백함수의 조건이 전부 일치한다면 true를 반환한다.

// some
const num = [1, 3, 5, 7, 9];

const someReturn = num.some((el) => {
  return element > 5;
});
console.log(someReturn); // true;
// every
const num = [1, 3, 5, 7, 9];

const someReturn = num.every((el) => {
  return element > 5;
});
console.log(someReturn); // false;

🔖reduce 메서드
✅누적값을 계산할 때 사용하는 메서드, 일반적으로 파라미터 값을 두개 사용(콜백함수와 초기값)

const num = [1,2,3,4];

const sum = num.reduce((acc, el) => {
    reuturn acc+ el;
}, 0)
console.log(sum); // 10 

🔖sort 메서드
✅유니코드 기준 순서에 따라 배열을 정렬, 일반적인 정렬X, 기준을 설정해야함(원본 배열)

const num = [1, 2, 31, 4222, 5];

num.sort();
console.log(num); // 1, 2, 31, 4222, 5;

// 문자, 혹은 숫자 크기별로 정렬
num.sort((a,b) => a-b);
num.sort((a,b) => b-a);

🔖reverse 메서드
✅기존 배열의 순서를 뒤집어 재작성(원본 배열)

const num = [1, 2, 3];

num.reverse();
console.log(num); // [3, 2, 1]

🔖Map
✅객체와 비슷하게 이름이 있는 데이터를 저장, 하지만 메서드를 이용하여 각각의 데이터에 접근

const map = new Map();

map.set(value); // 데이터 작성
map.get(value); // 데이터 불러오기
map.has(value); // 데이터 유무 검사
map.delete(value); // 데이터 삭제
map.clear(); // 모든 데이터 삭제
map.size; // 데이터의 개수

🔖Set
✅배열과 비슷하게 여러개 값을 순서대로 저장, 하지만 메서드를 이용해 각각의 인덱스에 접근

const set = new Set();

set.add(value); // 데이터 작성
set.has(value); // 데이터 유무 검사
set.delete(value); // 데이터 삭제
set.clear(); // 모든 데이터 삭제
set.size; // 데이터의 개수

❗Set은 중복값을 허용하지 않는다.

모듈

---

🔖자바스크립트의 파일 하나를 의미하며, 많은 양의 코드를 쓰임에 따라 나누어 관리하는 것

<!-- 모듈 스프프 -->
<script type="module" src="script.js"></script>

🔖모듈 문법은 기본적으로 export와 import 키워드를 사용한다.
✅모듈 파일의 변수나 함수를 export로 지정해 외부로 공유하고, import로 받아오는 방식

// print.js
export const title = 'CogiStudy';

export function print(value){
    console.log(value);
}
// script.js
import { title, print } from './print.js';

// as 키워드를 사용해 이름을 변경할 수 있다.
import { title as myTitle, print } from './print.js';

// *(와일드카드 문법) 키워드를 이용해 export 대상을 한번에 불러올 수 있다.
import * from './print.js';

// export 또한 객체로 모아 한번에 외부로 공유할 수 있다.
export { title as myTitle, print };

// export default를 통해 파일에서 단 하나만 기본 공유 대상을 지정할 수 있다.
export default title;
import title from './print.js';