모던자바스크립트(1)

조건문에서 문자열을 사용하면 불린값으로 형변환됨

truthy한 값은 문자열, true, 숫자형, 빈객체와 배열음.

 

falsy한 값은 false,null,undefined, 0, NaN,빈 문자열 등이 있음

 

독특한 방식으로 동작하는 논리연산자

AND연산자

왼쪽 값이 truthy하면 오른쪽 값을 리턴함 console.log('0' && NaN); // NaN

왼쪽 값이 fulsy하면 왼쪽값을 리턴함 console.log(null && undefined); // null

 

OR연산자는 반대임

왼쪽 값이 truthy하면 왼쪽값을 리턴함 console.log({} || 123); // {} 

왼쪽값이 falsy하면 오른쪽 값을 리턴함  console.log(0 || true); // true

 

함수스코프와 블록스코프

var키워드로 선언한 변수는 함수스코프 let,const 키워드로 선언한 변수는 블록스코프를 가짐

 

var키워드로 선언한 변수는 함수를 기준으로 스코프를 구분하기 때문에 함수 안에서 선언한 변수는 함수 안에서만 유효함

하지만 함수를 제외한 for, if, while 등과 같은 문법안에서 선언한 변수는 문법 밖에서도 계속 유효해 중복선언 등 문제가 생길 수 있음

 

이런 문제들을 해결하기 위해 let과 const키워드와 함께 블록 스코프가 등장함

블록  스코프는 중괄호로 감싸진 코드 블록에 따라 유효범위를 구분하게 되는데 코드블록 안에서만 사용가능한 변수를 

지역변수라고 하고 블록 밖에서 선언된 변수를 전역변수라고 함

 

함수선언

자바스크립트에서 함수는  다양한 방식으로 선언할 수 있음

// 함수 선언 function sayHi() { console.log('Hi!'); }

 

함수표현식

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

 

다양한 함수의 형태

자바스크립트에서 함수는 값으로 취급되는데, 이런 특징은 코드를 작성할 때 다양한 형태로 활용될 수 있음

// 변수에 할당해서 활용
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!?');
  };
};

 

파라미터의 기본값

자바스크립트에서 함수의 파라미터는 기본값을 가질 수 있음 함수를 호출할때 아규먼트를 전달하지 않으면 함수 내부의 동작은 이 파라미터의 기본값으로 동작함

 

function sayHi(name = 'Codeit') {
  console.log(`Hi! ${name}`);
}

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

 

여기서 'Codeit'이 기본값임

 

arguments 객체

자바스크립트 함수 안에는 arguments라는 독특한 객체가 존재함

arguments객체는 함수를 호출할 때 전달한 아규먼트들을 배열의 형태로 모아둔 유사 배열 객체임

특히 함수를 호출할 때 전달되는 아규먼트의 개수가 불규칙적일 때 유용하게 활용될 수 있음

argument는 실제로 함수가 호출될 때 넘기는 변수 값을 의미

function plus (num1, num2) {
	return num1 + num2;
}
// num1과 num2는 parameter이다.

plus(10, 20);
// 10과 20은 argument이다.

 

Rest Parameter

arguments 객체를 이용하는 것 말고도 불규칙적으로 전달되는 아규먼트를 다루는 방법이 있음

파라미터 앞에 ...마침표 세개를 붙여주면, 여러 개로 전달되는 아규먼트들을 배열로 다룰 수 있게 됨

그리고 argument객체는 유사 배열이기 때문에 배열의 메소드를 활용할 수 없는 반면, restparameter는 배열이기 때문에 배열의 메소드를 자유롭게 사용할 수 있다는 장점이 있음(map(),filter()와 같은 배열메소드를 이용할 수 있음

function printArguments(...args) {
  // args 객체의 요소들을 하나씩 출력
  for (const arg of args) {
    console.log(arg); 
  }
}

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

rest parameter는 다른 일반 파라미터들과 함꼐 사용할 수도 있음

function printRankingList(first, second, ...others) {
  console.log('코드잇 레이스 최종 결과');
  console.log(`우승: ${first}`);
  console.log(`준우승: ${second}`);
  for (const arg of others) {
    console.log(`참가자: ${arg}`);
  }
}

printRankingList('Tommy', 'Jerry', 'Suri', 'Sunny', 'Jack');

이름 그대로 앞에 정의된 파라미터에 argument를 먼저 할당하고 나머지 argument를 배열로 묶는 역할을 하기 때문에 일반 파라미터와 함께 사용될때는 반드시 가장 마지막에 작성해야 함

 

Arrow Function

에로우 펑션은 익명함수를 좀 더 간결하게 표현할 수 있도록 ES2015에서 새롭게 등장한 함수 선언 방식임

아래 코드와 같이 표현식으로 함수를 정의할 때 활용될 수도 있고 콜백함수로 전달할때 활용할 수도 있음

// 화살표 함수 정의
const getTwice = (number) => {
  return number * 2;
};

// 콜백 함수로 활용
myBtn.addEventListener('click', () => {
  console.log('button is clicked!');
});

 

화살표함수는 다양한 상황에 따라 축약형으로 작성될 수도 있음

// 1. 함수의 파라미터가 하나 뿐일 때
const getTwice = (number) => {
  return number * 2;
};

// 파라미터를 감싸는 소괄호 생략 가능
const getTwice = number => {
  return number * 2;
};

// 2. 함수 동작 부분이 return문만 있을 때
const sum = (a, b) => {
  return a + b;
};

// return문과 중괄호 생략 가능
const sum = (a, b) => a + b;

Arrow fuction이 일반함수와 몇가지 차이점이 있음

가장 대표적인 차이점은 argument객체가 없고, this가 가리키는 값이 일반함수와 다름

 

this

자바스크립트에서 this라는 조금 특별한 키워드가 있음

웹브라우저에서는 this가 활용될 때는 전역객체, Window 객체를 가지게 됨, 하지만 객체의 메소드를 정의하기 위한 함수안에선 메소드를 호출한 객체를 가리키게 됨.