javascript-모던 자바스크립트

JM·2022년 3월 23일

codeit 으로 공부하면서 정리한 내용을 작성했습니다!

챕터 2는 내용이 많아서 다 공부하는데 시간이 걸릴 것 같다.!

모던 자바스크립트란?

ECMASCript!? - 자바스크립트 표준 명세서
국제표준화 기구(ecma)에서 관리를 하고 있다.
규칙이나 세부사항들을 ECMA 문서로 관리를 하고 있는데 이것을 ECMAScript 라고 한다.
JavaScript는 프로그래밍 언어이고, ECMAScript는 프로그래밍 언어의 표준, 설명서!

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

데이터 타입

기본형 - Number, String, Boolean, Symbol, BingInt, Null, Undefined
참조형 - Object

유연한 데이터 타입!

console.log(2+'3') // '23'
console.log('3' * 5) // 15

곱셈의 경우에는 연산 대상을 모두 숫자 형으로 형 변환을 한 다음 연산이 수행

False / True

False: false, null, undefined, NaN, 0, ''
True: 나머지 값들!

// Hi 가 출력된다.
if ('me'){	// True
  console.log('Hi');
} else {
  console.log('bye');
}

// NaN 이 출력된다.
if (Number('test') // NaN

AND / OR

AND: 왼쪽이 true 이면 오른쪽 값을 리턴 / 왼쪽이 False 이면 왼쪽 값을 리턴
OR: 왼쪽이 True 이면 왼쪽 값을 리턴 / 왼쪽이 False 이면 오른쪽 값을 리턴

console.log(null && undefined); // null
console.log(0 || true); // true
console.log('0' && NaN); //NaN

null 병합 연산자

연산자 왼편 값이 null이나 undefined 이면 오른쪽 값을 리턴하고, 둘 다 아닌 경우 왼쪽 값을 리턴한다,

const example1 = null ?? 'anything';	// 'anything'
const example2 = undefined ?? 'something';	// 'something'
const example3 = 'anything' ?? 'something'; // 'anything'

변수와 스코프

var를 사용하다가 es2015부터 let과 const가 등장.

var

변수를 선언하기 전부터 사용할 수 있다. 마치 선언이 위로 올라가서 된 것 같은 호이스팅(Hoisting)이 발생한다.
또한 var에서 선언과 동시에 값을 초기화하면 할당된 값은 선언 이후에 사용 가능하고 선언 전의 변수는 undefined 를 출력한다.
함수 스코프(function scope)

let, const

조건문이나 반복문에서 사용되는 변수는 전역변수로 취급한다.
let, const - 블록 스코프(block scope)
했고 let은 변수 처럼 사용되고 const는 상수처럼 사용된다.

함수 만드는 방법

두 방식이 다른 특성을 가지고 있기 때문에 최대한 일관되게 작성을 해야한다.

함수 표현식(Functioin Expression)

변수에 함수를 할당하는 것이 포인트가 아니라 함수 선언을 값처럼 사용하는 것이다.
선언 이전에 함수에 접근할 수 없다.

const printCodeit = function(){
	console.log('test');
}

printCodeit();

myBtn.addListenner('click', function(){
	console.log('test event');
})

함수 선언

함수 선언보다 먼저 호출해도 함수를 호출 할 수 있다.

printCodeit();

function printCodeit (){
	console.log('test')'
}

기명 함수 표현식(Named Function Expression)

함수를 선언할 때,함수에 이름을 붙여주는 것을 기명 함수 표현식이라고 한다.
만약, 이름이 없는 함수의 경우에는 변수 이름 그 자체를 문자열로 가진다.
외부에서 함수 이름을 호출하여 함수를 사용할 수 없다.

const hi = functioin(){
	console.log('test');
}

console.log(hi.name)	// hi

일반적으로, 기명 함수 표현식은 함수 내부에서 함수 자체를 가리킬 때 사용된다.
예를 들어 재귀함수가 있다.

// 기명 함수 표현식이 아닌 경우
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); // 정상적으로 동작

즉시 실행 함수(Immediately Invoked Function Expression)

함수를 선언과 동시에 실행하는 방법이다.
줄여서 IIFE 라고 부른다.
단, 외부에서 재사용할 수 없다.
프로그램 초기화 기능(프로그램이 실행 될 때 기본적으로 동작할 코드들..)
함수의 리턴 값을 바로 변수에 할당하고 싶을 때

(function(x,y){
	console.log(x + y);
})(3, 5);

함수를 특별한 값으로 취급한다.

콜백함수(Callback Function)

다른 함수에 파라미터로 사용되는 함수를 콜백함수라고 부른다.

고차함수(Higher Order Function)

함수를 리턴하는 함수를 고차함수라고 부른다. 또는 이중괄호를 사용해서 고차함수로 리턴되는 함수를 바로 사용할 수 있다.

// 값으로서 함수
function getPrintHi() {
	return function() {
    	console.log('Hi');
    }
}

const sayHi = getPringHi();

sayHi(); // Hi

getPrintHi()(); // 고차함수를 바로 호출 가능하다.

일급함수 (First Function)

변수나 다른 데이터구조에 함수를 할당
다른 함수의 파라미터(인자)로 할당
다른 함수의 리턴 값이 될 수 있는데 이러한 것들을 일급함수라고 한다.

Parameter

함수 선언을 할 때, 작성하는 것을 파라미터이고 선언한 이후 함수를 호출하여 사용하는 것을 아규먼트(Argument)라고 한다.

아규먼트에서 undefined를 사용하면 default 값이 출력 된다.
단, null을 사용하는 경우 null 값 그대로 전달 받게 된다.

function hello (name = 'javascript', code='jj'){	// 파라미터
	console.log(`${name}!와 ${code}`);
}

hello('mj') // 아규먼트
hello(undefined, 'python') // javascript와 python 

function add (x, y = x + 3){
	console.log(`${x}과 ${y}`);
}
add(3); // 3과 6

Arguments

파라미터 개수에 부족하게 아규먼트를 입력할 경우 undefined를 출력한다.
파라미터 개수를 넘어서 아규먼트를 입력할 경우, 초과한 아규먼트는 생략한다.(출력하지 않는다.)
파라미터나 함수 내부에서 arguments와 같은 이름을 사용하는 것은 피해야한다.

// 이렇게도 사용이 가능하다.
function pringtArgumetns(a,b,c){
	for (const arg of arguments){
    	console.log(arg);
    }
}

// 파라미터를 안 사용해도 출력이 가능하다.
function print(){
	for (const arg of arguments){
		console.log(arg);
    }
}

function('몰라','으어어') // '몰라','으어어'

Rest Parameter

함수 안의 arguments는 유사배열로 배열의 메소드를 사용할 수 없다.
Es2015 이후에 등장

function RestParameter(...args){
	for (const arg of args){
    	console.log(arg.splice(0, 2));	// 배열 메소드 사용이 가능하다.
    }
}

function PrintRank(first, second, ...others){
	console.log(`우승: ${first}`);
	console.log(`준우승: ${second}`);
  	for (const arg of args){
    	console.log(`참가자들: ${arg}`);
    }
}

연습문제

첫 번째 아규먼트는 출력이 되지 않도록 한다.
1. shift 사용
- 첫 번째 배열을 제거해준다.
2. rest parameter를 사용

Arrow Function

파라미터가 한 개인 경우 소괄호를 생략할 수 있지만, 코드의 가독성을 위해서는 소괄호 생략을 지양한다.
arguments 객체가 없어서 함수로 반환이 안된다.

// 원래 함수
const getTwice = function(number) {
	return number * 2;
}

// function 제거
const getTwice = (number) => {
  return number * 2 }

// 소괄호 제거
const getTwice = number => {
  return number * 2 }

// 중괄호 제거
const getTwice = number => number * 2

//
const getCodeit = () => ({name:'Codeit', });

myBtn.addEventListener('click', () => {
	console.log('button is clicked!');
}

this

일반함수와 arrow function 에서 this를 다루는 방법이 다르다.
arrow function 에서는 this를 지양하도록 하자.
arrow function이 선언되기 직전에 유효한 this 값과 똑같은 값을 가지고서 동작하게 된다.

function getFullName(){
	return `${this.firstName} ${this.lastName}`;
}

const user = {
	firstName: 'Tess',
    lastname: 'Jang',
    getFullName: getFullName;
}

const admin = {
	firstName: 'kim',
    lastname: 'min',
    getFullName: getFullName;
}

console.log(user.getFullName());
console.log(admin.getFullName());

초조해하지 말자! 나는 충분히 할 수 있다! 인생은 길다!

이전 포스트

javascript - Event(2)

다음 포스트

javascript-모던 자바스크립트

모던 자바스크립트란?

데이터 타입

False / True

AND / OR

null 병합 연산자

변수와 스코프

var

let, const

함수 만드는 방법

함수 표현식(Functioin Expression)

함수 선언

기명 함수 표현식(Named Function Expression)

즉시 실행 함수(Immediately Invoked Function Expression)

콜백함수(Callback Function)

고차함수(Higher Order Function)

일급함수 (First Function)

Parameter

Arguments

Rest Parameter

연습문제

Arrow Function

this

javascript - Event(2)

javascript-모던 자바스크립트

0개의 댓글

관련 채용 정보