-
[부스트 코스] 자바스크립트 - FE프로그래밍 언어/Javascript 2020. 3. 13. 23:39728x90반응형
변수
유효범위가 달라진다.
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 한다.)
728x90'프로그래밍 언어 > Javascript' 카테고리의 다른 글
[Javascript 초급] 객체와 배열, 함수의 기초 (0) 2020.02.03 [Javascript 초급] 이벤트 처리기 등록하기 (0) 2020.01.30