[JavaScript] ~ 함수

JavaScript : 객체 기반의 스크립트 프로그래밍 언어

- 인터프리터 언어 : 한 번에 한 줄 씩 읽어들여 실행 ex) python, R

 

const 상수_이름

let 변수_이름

var 변수_이름 (ES5까지는 var을 사용, 6부터는 const와 let 사용)

 

변수의 범위에는 블록 scope와 함수 scope가 있다.

const와 let의 범위는 블록 scope이고 var는 함수 scope다.

 

다음과 같은 코드가 있을 때 let의 경우 범위가 블록이기 때문에 해당 범위 밖에서는 호출이 불가능하다. 따라서 블록 밖에서는 변수 b가 정의되어 있지 않다고 에러가 발생한다. 하지만 var는 함수 scope이기 때문에 사용할 수 있다.

함수 scope, 블락 scope

함수 scope, 블록 scope 차이점

Hoisting(호이스팅) : 호이스팅은 ECMA 2015 전까지 사용된적 없는 용어다. var와 함수의 선언은 컴파일 단계에서 메모리에 저장되는 것이다.

 

호이스팅

호이스팅 결과

위와 같이 hello()함수를 선언하기 전에 선언이 가능한 이유는 컴파일 과정에서 hello()가 먼저 선언되었기 때문이다. 또 var age같은 경우에도 age를 선언하기 전에 age에 값을 대입할 수 있는 이유도 마찬가지다. (단, const와 let은 불가능)

그런데 console.log(name)을 보면 undefined가 나오는데 그 이유는 호이스팅은 선언부만 가지고 오기 때문이다.

 

동적 타이핑 : 변수가 가지는 동적 타입이 존재하지 않는다. 대입된 값에 따라 알아서 바뀐다. 즉, 이름만으로는 변수의 타입을 알 수 없다.

 

데이터 타입

- primitive value : Boolean, Null, Undefined, Number, String, Symbol

- object

 

boolean, null, undefined

primitive value 결과

boolean형을 new 로 객체를 생성한다면 해당 변수의 값은 boolean이지만 데이터 타입은 Object(객체)다. 따라서 해당 객체 안에 들어있는 값은 false지만 객체는 true이기 때문에 if문이 실행된다. 

null의 type은 객체고 아무 값도 저장하지 않은 변수는 undefined라는 type이고 값 역시 undefined입을 확인할 수 있다.

그리고, 변수 a의 type은 null 이고 변수 b의 type은 undefined인데 == 으로 a와 b를 비교하면 다른 타입임에도 불구하고 같은 값이라는 결과가 나온다. 따라서 정확하게 비교하기 위해서는 === 을 사용하는데 그러면 타입까지 비교할 수 있다.

 

number, string

primitive value 결과

number type에는 NaN이 있는데 이는 String을 number로 형변환 시켰을 때 숫자로 제대로 변환되지 않았을 때 NaN 값이 들어가게 된다. 그래서 문자열 Mark를 형변환 시켰을 때는 number형이 됐지만 값은 NaN이 되고 '37'을 형변환했을때는 number형의 37 이라는 값으로 제대로 형변환이 된 것이다. 

string 형은 + 로 문자열을 합칠 수 있다. 그리고 탬플릿 스트링이라고 해서 `` 안에 ${}를 통해 javscript의 표현식을 문자열로 바꿀 수 있다.

 

symbol

primitive value 결과

symbol은 ES6부터 생긴 데이터 타입이다. new가 아닌 함수 호출형으로 사용한다. 즉, 생성자 함수로 사용할 수 없다. new symbol(); 로 하면 에러가 뜬다. c 랑 d는 같은 Symbol(Mark)라는 값을 갖고 있지만 다른 Symbol이다.

 

조건문

falsy - false, 0, null, undefined, NaN, ''(빈 문자열)

truthy - falsy가 아닌 나머지 모두 ex) [], {}

 

조건문

조건문 결과

if문 활용

조건문 결과

위를 보면 알 수 있듯이 대입 순서가 마지막인 걸 확인할 수 있다. 그래서 (n%3 === 0) 으로 괄호를 치지 않아도 그 결과가 boolean 값으로 대입되는 것이다.

 

논리연산자

- && || !

 

논리 연산자 활용

논리 연산자 결과

&& 연산은 모두 참이어야 참이다. 따라서 앞이 거짓이라면 이미 거짓이기 때문에 && 뒤를 확인할 필요가 없다. 그래서 console.log('&& : 7로 나누어 떨어진다.')는 실행되지 않는다.

|| 연산은 둘 중 하나만 참이면 결과가 참이다. 따라서 앞에 결과가 참이라면 뒤를 확인할 필요가 없다. 그래서 console.log('|| : 5로 나누어 떨어진다.')는 실행되지 않는다.

이 성질을 이용해서 &&에서는 참일 때만 뒤에가 실행이 되고, ||에서는 거짓일 때만 뒤에가 실행이 된다.

 

삼항 연산자

 

삼항 연산자 예시

삼항 연산자는 다음과 같이 조건문 ? 참일 때 실행문 : 거짓일 때 실행문 의 형식이다.

 

Switch

 

swtich 에제

switch 결과

 

switch와 마찬가지로 for문, while문, do while문, continue 등은 c와 동일하기 때문에 생략한다.

 

for of : iterable 객체에서 모두 사용 가능.

iterable한 프로토콜을 자체적으로 내제한 객체 ex) 배열

 

for in : 모든 프로퍼티에서 사용 가능.

객체 안에 있는 모든 프로퍼티 하나하나를 사용 가능.

아래처럼 prototype 안에 프로퍼티를 설정해놓으면 프로토타입안에 있는 test도 함께 출력됨.

 

for of, for in

for of, for in 결과

 

함수

: 함수는 표준 내장 객체라고 하며 함수의 키워드는 function 이다.

- 선언적 function

- 익명 함수를 만들어 변수에 할당(호이스팅 불가능)

 

function

function 실행화면

마지막처럼 익명함수를 만들 때는 hello 변수에 넣었지만 type은 function이다.

선언적 function은 위의 hello1과 hello2 함수처럼 호이스팅이 가능하다.

단, 익명함수는 변수의 선언부만 가져오기 때문에 변수가 var의 경우는 undefined가 되고 그 외 역시 not defined로 호이스팅이 불가능하다.

 

- new 생성자로 함수 생성

new로 함수를 생성할 때는 인자 다음에는 함수의 바디를 넣어서 functinon 객체를 할당한다.

 

new로 함수 생성

sum 함수 실행화면

위처럼 sum함수를 실행할 때는 문제점이 존재한다.

new 함수 생성 시 주의점

실행 결과

new로 함수를 선언하면 전역변수만 사용이 가능하다. 익명함수로 선언하면 블록 내에 있는 변수가 사용이 가능하다.

 

- arrow function

 

익명함수에서 function(){}; 을 () => {};로 생략해서 사용하는 것이다. 이 방식은 선언이 불가능하고 항상 익명함수다.

arrow function은 한 줄인 경우 중괄호와 return을 생략할 수 있다.

 

arrow function

arrow function 실행 결과

 

- new 함수

생성자 함수로 새로운 객체를 만들 때 function으로 틀을 만들고 new를 통해 그 function을 객체로 만들어낸다.

 

new

실행 화면

이때 arrow function은 사용할 수 없다. 그 이유는 arrow function은 함수 내에서 this가 생기지 않아 this로 값이나 프로퍼티를 넣을 수 없다. 따라서 생성자 함수를 이용할 때는 항상 function을 사용한다.

 

 

함수는 다음과 같이 함수 안에서 함수를 호출할 수도 있고 callback이라고 하여 함수의 인자로 함수를 줄 수도 있다.

 

function 활용

실행 화면