The Complete JavaScript Course 2021(1)

유데미의 the complete javascript course를 듣고 정리한 내용입니다.

 

자바스크립트란?

자바스크립트는 고수준 언어이고, 객체 기반의 언어Object-oriented programming (OOP)이며, 멀티 패러다임 언어이다.

자바스크립트의 역할?

웹 상에서 HTML은 콘텐츠를 표시하고, CSS는 어떻게 보여줄 지 구현하고, 자바스크립트는 웹 앱을 운영하는 프로그래밍 언어 역할을 한다.

자바스크립트의 원시타입?

1. NUMBER
2. STRING
3. BOOLEAN
4. Undefined
5. Null
6. Symbol (ES2015)
7. Bigint (ES2020)

이 중 1~3이 가장 중요한 원시타입이다.

Javascript has dynamic typing
자바스크립트는 직접 변수의 형변환을 해주지 않아도 자동으로 형을 잡아준다.

var, let, const

let은 수정가능mutable한 변수를 저장할 때 사용, 일반적으로 const로 선언한다.
수정 가능한 변수는 잠재적 버그의 원인이 되기 때문이다.
var도 let과 비슷하게 작동하나, 사용하지않는다. 

Boolean

console.log(Boolean(0)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean("yj")); // true
console.log(Boolean({})); // true
console.log(Boolean("")); // false

==과 ===의 차이

==은 자동으로 형변환하여 값을 비교하지만
===은 value의 타입까지 비교하여 값을 비교한다.

use strict

(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Strict_mode)

코드의 상단에 "use strict"라고 선언하여 사용한다.
실수로 전역변수를 생성하는것을 막거나, 자바스크립트 내의 메서드를 변수명으로 사용하면 에러를 일으켜 심각한 에러를 방지할 수 있다.

함수

자바스크립트에서 함수는 변수처럼 할당 가능하며, 변수명()로 호출이 가능하다. 또한 함수를 다른 함수의 인자로 전달 가능하다.

const fruit = function() {
  console.log("it's delicious");
 };
 // 변수명을 이용해 함수를 호출
 fruit();
 
 
 // 익명함수를 변수에 할당하였음, 이후 변수명()를 이용해 함수 호출
 
 
 const noname = fucntion() {
   console.log("I don't have name");
 };
 
 noname();
 
 
 // 함수에 이름을 지어줬어도, 변수명으로 호출이 가능하다.
 
 const named = function dana() {
   console.log("I'm dana");
 };
 
 named();

function sayHello() {
  return("HI!, ");
};

function greeting(helloMessage, name) {
  console.log(hellowMessage() + name);
};

// sayHello함수가 greeting함수의 인자로 전달됨
greeting(sayHello, "javascript!");

function fruitProcessor(apples, oranges) {
	const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
	return juice;
}
// 반환된 값을 사용하려면 변수에 저장해야함
const appleJuice = fruitProcessor(5, 0);
console.log(appleJuice);
console.log(fruitProcessor(5, 0));

const appleOrangeJuice = fruitProcessor(2, 4);
console.log(appleOrangeJuice);

함수 선언과 함수 표현식

두 방법은 결과가 같다.
자바스크립트에서 함수는 value이기 때문에, value를 variable에 저장하는 것 또한 가능하다.

//함수 선언식
function calcAge1(birthYear) {
  return 2021-birthYear;
};

const age1 = calcAge1(1994);
console.log(age1) 

//함수 표현식
const calcAge2 = function (birthYear) {
  return 2021 - birthYear;
};

const age1 = calcAge2(1994);

화살표 함수

함수에 대해 return을 해줄 필요 없이 자동으로 값이 return 된다.

// function declaration
const calcAge2 = function (birthYear) {
	return 2037 - birthYear;
};
// arrow function
const calcAge3 = (birthYear) => 2037 - birthYear;
const age3 = calcAge3(1991);
console.log(age3);

const yearsUntilRetirement = (birthYear) => {
	const age = 2037 - birthYear;
	const retirement = 65 - age;
	return retirement;
};

yearsUntilRetirement(1991);