[코드잇] 모던 자바스크립트(1)

강윤채·2023년 3월 26일
오늘도코드잇자바스크립트코드잇코드잇TIL코딩공부
0

[코드잇]자바스크립트

목록 보기
1/2

✨ Mordern JavaScript

  • 현시점에 사용하기 적합한 범위 내에서 최신 버전의 표준을 준수하는 자바스크립트

✨ ECMAScript VS JavaScript

ECMAScript : ECMA라는 국제 표준화 기구에서 정해준 규칙을 정리해 둔 Script (ES1, ES2 ... ES6, ES6+)

  • JavaScript는 프로그래밍 언어(결과물)이고, ECMAScript는 프로그래밍 언어의 표준(설명서)이다.

  • JavaScript는 ECMAScript를 기반으로 하지만 ECMAScript에 정의된 내용뿐만 아니라, 다른 부가적인 기능도 존재한다.-ex)DOM

🎇 자바스크립트의 동작 원리

✨ 데이터 타입 특징과 종류

Symbol

  • 코드 내에서 유일한 값을 가진 변수이름을 생성할 때 사용
  • 다른 어떤 값과 비교해도 true가 될 수 없는 고유한 변수가 된다. ( 같은 값도 포함)
const symbolA = Symbol('this is Symbol');
const symbolB = Symbol('this is Symbol');

console.log(symbolA === symbolB); // false

Bigint

  • 자바스크립트에서 정수를 더하거나 뺄때 2진법으로 계산하기 때문에 큰 정수를 표현할 때 미세한 오류가 발생한다.
    (−253−1-2^{53}-1 ~ 253−12^{53}-1)
  • 큰 정수를 오류없이 계산 하기 위해 사용된다.
  • 소수표현에는 사용 될 수 없고, 소수 형태로 리턴 될 경우 소수점 아랫부분은 버려지고 정수 형태로 리턴된다.
  • Bigint 타입끼리만 연산이 가능하다.
3n * 2; // TypeError
3n * 2n; // 6n
Number(3n) * 2; // 6

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 연산자의 결과가 모든 타입과 1:1로 매칭되지 않는다.
  • typeof null은 리턴 값은 object 이다.
typeof null; // object
  • 함수를 리턴하면 function이 리턴 된다.
function sayHi() {
  console.log('Hi!?');
}

typeof sayHi; // function

✨ 불린으로 평가되는 값

falsy 값 : False로 평가되는 값
truthy 값 : True로 평가되는 값 ([]빈배열, {}빈객체)

✨ AND 와 OR의 연산 방식

true && true // true 
true && false // false
false && true // false
false && false // false
  • 앞이 true면 뒤에 값을 리턴한다.
  • 앞이 false면 앞에 값을 리턴한다.
true || true // true 
true || false // true
false || true // true
false || false // false
  • 앞이 true면 앞에 값을 리턴한다.
  • 앞이 false면 뒤에 값을 리턴한다.
null && undefined // null      false && false -앞
0 || true // true              false || true - 뒤
'0' && NaN //NaN 			   true && NaN - 뒤
{} || 123 // {} 			   true || true - 앞

✨ 연산자 우선 순위

  • AND > OR (AND 연산자가 우선순위가 더 높다)

✨ null 병합 연산자

  • 물음표 2개(??)를 사용해서 null 혹은 undefined값을 가려내는 연산자
const example1 = null ?? 'I'; // I
const example2 = undefined ?? 'love'; // love
const example3 = 'Codeit' ?? 'JavaScript'; // Codeit

console.log(example1, example2, example3); // I love Codeit
  • 연산자 왼편의 값이 null이나 undefined라면 연산자 오른편 값이 리턴되고, 아니라면 왼편 값이 리턴 된다.
  • ||(OR연산자)와 비슷하게 동작하지만, ||(OR연산자)은 falsy 값을 확인하는 것이고, ??(null 병합 연산자)는 null값과 undefined 값을 확인한다는 차이가 있다.
const title1 = false || 'codeit';
const title2 = false ?? 'codeit';

console.log(title1); // codeit
console.log(title2); // false

const width1 = 0 || 150;
const width2 = 0 ?? 150;

console.log(width1); // 150
console.log(width2); // 0

✨ var VS let, const

var 키워드

  • 변수 선언 전에 사용 가능(호이스팅)
  • 변수 이름 중복선언 가능
  • 함수를 기준으로 스코프를 구분(함수 스코프)
  • for, if, while 등과 같은 문법 안에서 선언한 변수는 그 문법 밖에서도 계속 유효하게 작동하여 중복 선언등의 문제가 생겨나기도 한다.
for (var i = 0; i < 5; i++) {
  console.log(i);
}

console.log(i); // 5     for문 안에 선언된 값이 유효하게 작동됨

let, const 키워드

  • 변수 이름 중복선언 불가 (SyntaxError 발생)
  • 변수 선언 전에 사용 불가 (ReferenceError 발생)
  • 중괄호로 감싸진 코드 블록에 따라 유효 범위를 구분하게 된다.(블록스코트)
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

🎇 함수 다루기

✨ 함수를 만드는 방식

1. 함수 선언식

  • 선언 이전에 함수에 접근 가능(호이스팅)
  • 함수 스코프
function 함수이름(파라미터) {
  함수 내용
}

2. 함수 표현식

  • 함수를 값처럼 사용하는 것 (변수 할당 해도 되고 안해도 됨)
  • 선언 이전에 함수에 접근 불가(ReferenceError)
  • 선언된 변수 값에 따라 스코프가 달라진다.
const sayHi = function (파라미터) {
  함수 내용
};

sayHi();

🎉 기명함수 표현식(이름 있는 함수 표현식) 🎉

  • 함수 표현식으로 함수가 할당된 변수에는 자동으로 name이라는 프로 퍼티를 가진다.
const sayHi = function () { 
  console.log('Hi');
};

console.log(sayHi.name); // sayHi-이름이 없는 경우

const sayHi = function printHiInConsole() {    
  console.log('Hi');
};

console.log(sayHi.name); // printHiInConsole-이름이 있는 경우
  • 함수 이름은 내부에서 함수 자체를 가리킬 때 사용 가능하며, 외부에서 호출 할 때는 사용할 수 없다.
const sayHi = function printHiInConsole() {
  console.log('Hi');
};

printHiInConsole(); // ReferenceError
  • 함수 이름 없이 재귀함수 형식으로 사용하게 되면, 함수 이름 변수에 값이 재 할당 되면 문제가 발생할 수 있다.
let countdown = function(n) {
  console.log(n);
  if (n === 0) {
    console.log('End!');
  } else {
    countdown(n - 1);
  }
};

let myFunction = countdown;

countdown = null;

myFunction(5); // TypeError
  • 내부에서 함수를 호출한 경우
let countdown = function printCountdown(n) {
  console.log(n);
  if (n === 0) {
    console.log('End!');
  } else {
    printCountdown(n - 1);
  }
};

let myFunction = countdown;

countdown = null;

myFunction(5); // 정상적으로 동작

✨ 즉시 실행 함수(IIFE)

  • 함수 선언 즉시 실행하는 함수
(function (x, y) {
  console.log(x + y);
})(3, 5);  // 변수 없이도 사용 가능
  • 함수 이름을 지어주더라도, 외부에서 재사용이 불가하다
(function sayHi() {
  console.log('Hi!');
})();

sayHi(); // ReferenceError
  • 함수 이름을 지어주면, 재귀함수로 사용이 가능
(function countdown(n) {
  console.log(n);
  if (n === 0) {
    console.log('End!');
  } else {
    countdown(n - 1);
  }
})(5);

✨ 다양한 함수의 형태

  • 변수에 할당해서 활용
const printJS = function () {
  console.log('JavaScript');
};
  • 객체의 메소드로 활용
const codeit = {
  printTitle: function () {
    console.log('Codeit');
  }
}
  • 콜백함수로 활용
myBtn.addEventListener('click', function () {
  console.log('button is clicked!');
});
  • 고차 함수로 활용
function myFunction() {
  return function () {
    console.log('Hi!?');
  };
};

✨ 파라미터의 기본값

  • 함수의 파라미터는 기본값을 가질 수 있는데, 함수를 호출 할 때 argument를 전달하지 않으면, 파라미터는 기본값을 가지고 동작한다.
function sayHi(name = 'Codeit') {
  console.log(`Hi! ${name}`);
}

sayHi('JavaScript'); // Hi! JavaScript
sayHi(); // Hi! Codeit

✨ arguments 객체

  • 자바스크립트 함수 안에는 arguments라는 객체가 존재한다.
  • arguments 객체는 함수를 호출할 때 전달한 argument들을 배열의 형태로 모아둔 유사배열 객체이다.
function printArguments() {
  // arguments 객체의 요소들을 하나씩 출력
  for (const arg of arguments) {
    console.log(arg); 
  }
}

printArguments('Young', 'Mark', 'Koby');

profile
강윤채
다음 포스트

[코드잇]인터랙티브 자바스크립트(1)

0개의 댓글