[부스트 코스] 자바스크립트 - FE

변수

유효범위가 달라진다.

 

var - ES6 에서 이제 안씀

const - 한 번 할당 후에 재할당 안됨

let 

 

*var 은 전역객체에 생성이 되고, let 과 const 는 전역객체에 생성이 되지 않는다.

타입

원시타입

    -숫자

    -문자열

    -논리값

    -특수한 값(undefined, null)

    -심벌

객체타입

   -원시타입 외 값. 배열, 함수, 정규 표현식 등등

 

타입은 선언할 때가 아닌, 실행타임에 결정된다. 

 

타입체크를 할때는 기본타입은 typeof 키워드를 사용하고, typeof 로 확인할 수 없는 것들은 toString.call 을 이용한다. 배열의 타입을 체크할 경우에는 isArray 함수가 표준으로 있다.

 

비교연산자

0 == false;
"" == false;
null == false;
0 == "0";
null == undefined;

=== 는 값과 타입까지 비교를 한다.

== 같은 경우는 임의적으로, 암묵적으로 타입을 바꾸서 비교하려는 성질이 있다.

 

조건문

if

else if

else

 

삼항연산자로도 깔끔하게 조건문이 작성할 수 있다.

let result = (a) ? "ok" : "not ok";

a 가 true 면 ok. false 면 not ok 가 출력된다.

 

반복문

for, while

 

반복문을 돌 때 배열의 길이를 계속 체크하므로, 비효율적인 것으로 알려져 있다. 따라서 다음과 같이 많이 사용한다.

var arr = [1,2,3];

//len 을 선언
for(var i = 0, len=arr.length; i<len ;i++){
	...
}

//또는 반대로 for문을 돌리는 것도 많이 한다.
for( var i = arr.length ; i > 0 ; i--){
	...
}

배열의 경우 forEach 메서드를 이용할 수 있고, for-of 를 통한 탐색도 자주 사용된다. for-in 은 객체를 탐색할 때 사용한다.

 

자바스크립트는 문자열, 배열을 선언하면 내부적으로 객체로 변환되어 동작한다. 따라서 어떤 객체 내에 있는 메서드들을 사용할 수 있다.

"ab:cd".split(":");  // ["ab", "cd"] 
"ab:cd".replace(":","$");  // "ab$cd"
"  abcd  ".trim();  // "abcd"

split 는 일반적으로 배열로 만들어주는 메서드다.

 

함수 - 함수 선언문

여러개의 인자를 받아서, 그 결과를 출력한다.

function printName(firstname){
    var myname = "jisu";
    return "name is " + firstname; // 만일 firstname 이 인자로 넘어오지 않았다면 undefined 출력
}

console.log(printName());

자바스크립트는 파라미터의 갯수와 인자의 갯수가 맞지않아도 오류를 발생시키지 않는다.

 

함수 - 함수 표현식

 

function test() {
    console.log(printName());
    var printName = function() {
            return 'anonymous';
    }
}

test();
//TypeError: printName is not a function

printName 이 표현식으로 되어있는 경우, 선언하기 전에 호출되면 printName 은 undefined 다(함수로 인식 안함).

반면, printName 이 선언문으로 선언되어있다면, 먼저 호출해도 printName 함수가 정상적으로 작동한다.

 

분명 자바스크립트는 한 라인씩 해석이 되는데, 어떻게된걸까?

 

자바스크립트 함수는 실행되기 전 해당 함수 안에 필요한 변수값들을 미리 다 모아서 유효범위 최 상단에 선언한다.

자바스크립트 parser가 함수 실행 전 해당 함수에 대한 코드를 한번 쓱 훑고 기억해둔다. 

따라서 아래쪽에있는 함수선언문을 위로 끌어올리게 된다. 

반면 함수 표현식은?

var printName; // 이렇게 변수만 끌어올려진다. 함수로 인식하지 못한다.
               //반면 함수 선언문은 통째로 끌어올려진다.

console.log(printName());

var printName = function() {
...
}

 이것을 호이스팅이라고 한다.

 

함수- 표현식과 호이스팅

자바스크립트 함수는 실행되기 전에 함수안에 필요한 변수값들을 미리 다 모아서 선언한다. 함수 안에 있는 변수들을 모두 끌어올려서 유효범위의 최 상단에 선언한다고 해서, hoisting 이라고 한다.

 

호이스팅은 var 변수선언과 함수선언문에서만 호이스팅이 일어난다.

 

호이스팅은 함수 표현식과 선언문에서 약간 다르게 동작한다.

 

더 자세한 내용은, 이 블로그 를 읽어보았다.

함수- 반환값과 undefined

자바스크립트 함수는 기본적으로 return 값은 undefined 을 반환한다. (다른걸 명시해주지 않으면)

 

 

함수 - arguments 속성

함수가 실행되면 그 안에서 arguments 라는 특별한 지역변수가 존재한다.

자바스크립트 함수는 선언한 파라미터보다 더 많은 인자를 보낼 수 있으며, 넘어온 인자를 arguments 로 배열의 형태로 하나씩 접근한다. ( array-like 로서, 배열타입은 아니므로 배열의 메서드는 사용할 수 없다. ) 

 

function a() {
	console.log(arguments);
}
a(1,2,3); 
//결과는 { '0':1, '1':2, '2':3 }

 

arguments 도 너무 이용하면 안좋다. 상황에 맞게 적당히 쓰는것이 좋다.

 

화살표 함수

화살표 함수는 항상 익명이며, 생성자로서 사용할 수 없다.

또한, 이 표현은 메소드 함수가 아닌 형태로 사용 가능하다.

자신의 this, arguments, super 를 바인딩하지 않는 것이 특징이다.  ( 일반함수의 내부함수, 콜백함수에 사용되는 this 는 window(전역객체) 를 말한다. )

function getName(name) {
   return "Kim " + name ;
}

//위 함수는 아래 arrow함수와 같다.
var getName = (name) => "Kim " + name;

// 매개변수가 없는 경우
var foo = () => console.log('bar');
foo(); // bar

// 매개변수가 하나인 경우
var foo = x => x;
foo('bar'); // bar

// 매개변수가 여려개인 경우
var foo = (a, b) => a + b; // 간단하게 한줄로 표현할 땐 "{}" 없이 값이 반환됩니다.
foo(1, 2); // 3

var foo = (a, b) => { return a + b }; 
foo(1, 2); // 3

var foo = (a, b) => { a + b }; // "{}"를 사용했는데 return이 없을 때 
foo(1, 2); // undefined

var foo = (a, b) => { // 여러줄 썼을 때
	var c = 3;
	return a + b + c;
}
foo(1, 2, 3) // 6
/*
"{}"를 사용하면 값을 반환할 때 return을 사용해야합니다.
"{}"를 사용하지 않으면 undefied를 반환합니다.
"{}"을 사용할 때는 여러줄을 썼을 때 사용합니다.
*/

// 객체를 반환할 때
var foo = () => ( { a: 1, b: 2, c: 3 } );
foo(); // { a: 1, b: 2, c: 3 };
// 출처: https://velog.io/@ki_blank/JavaScript-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98Arrow-function

 

 

중요한 비구조화 할당도 보자.

비구조화 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 한다.

 

var x =[1, 2, 3, 4, 5]; // 객체 및 배열 리터럴 표현식을 사용해 데이터 뭉치 만들기
var [y, z] = x; // 할당문 좌변에서 사용해 원래 변수에서 어떤 값을 분해해 할당할지 정의
console.log(y); // 1
console.log(z); // 2

 

변수에 기본값을 할당해놓으면 분해한 값이 undefined 일때 기본값을 대신 사용한다.

 

var a, b;

[a=5, b=7] = [1];
console.log(a); //1
console.log(b); //7

 

변수 값을 한줄로 교환할 수 있다

var a = 1;
var b = 3;

[a, b] = [b, a];  // a=3 b=1

 

객체 구조 할당으로 함수 매개변수의 기본값을 설정할 수 있다.

 

function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) {
  console.log(size, cords, radius);
  // 차트 그리기 수행
}

drawES2015Chart({
  cords: { x: 18, y: 30 },
  radius: 30
});

좌변에 빈 오브젝트 리터럴을 할당하는 이유는, 이 함수가 어떠한 매개변수 없이 호출 가능하게 한다. 

무조건 객체를 넘기길 원한다면 빈 객체 할당을 하지 않는게 좋다.

 

객체에서 필드를 해체하거나, 배열의 구조를 분해할 수 있다.

더 많은 예시는 여기 에서 볼 수 있다.

 

 

함수 호출

메모리는 우측의 Call Stack 에서와 같이 순서대로 쌓이게 된다.

 

(GIF 오류 : 최종적으로 100 을 return 한다.)