FU11M00N

- 즉시 실행 함수를 쓰는 이유 첫 로드 시 초기화 할 때 변수를 global하게 선언하고 싶지 않고싶을때 변수에 함수를 이용해 즉시 값을 할당하고 싶을 때 라이브러리 전역 변수 충돌 방지를 원할때 (function(version){ console.log(version) }("ES5")); ((version)=>{ console.log(version) })("ES6"); ES6에서는 익명함수에서는 function 키워드 대신 괄호와 화살표를 사용합니다. 콜백 함수로 실행될 때 기존의 익명 함수는 글로벌 컨텍스트에 접근했지만, 화살표 함수는 콜백 함수를 할당한 당시의 컨텍스트를 그대로 활용합니다. 즉시실행 함수를 사용할 때는 , 괄호로 묶고 함수를 호출해야합니다.

- ES6 화살표 함수 아래와 같은 형태로 화살표 함수를 나타낼 수 있습니다. ( )=>{ } 소괄호와 화살표를 사용하여 function 키워드 없이 함수를 선언할 수 있습니다. function 대신 화살표가 생겼다고 생각하면 됩니다. const func = () => { console.log("화살표 함수"); }; func(); const func = () => console.log("arrow function"); func() 화살표 함수 안에 실행문이 하나면, 중괄호도 없앨 수 있습니다. 위와같이도 가능합니다. - this 객체 지향 관점에서 콜백을 정의할 때 더 유연하게 컨텍스트 활용이 가능합니다. 자바스크립트의 함수 실행에서의 this 는 기본적으로 전역객체입니다. 그렇기 때문에 아래와 같은 ..

기존 자바스크립트에서 객체지향 구현시 function 이 생성자였습니다. 하지만 function 으로 하다보니 표현력이 떨어지고, 코드가 점점 복잡해져서 ES6부터는 class가 생겨났습니다. 1. class class Study{ constructor(name){ this.name = name; } getName(){ return this.name; } } let study = new Study("풀문"); console.log("study.getName();" + study.getName()); class 키워드를 이용해서 클래스를 정의하고 Study 클래스를 선언했습니다. 생성자 함수는 constructor 라는 이름으로 정의되어있는데, 이는 클래스가 생성될때 기본적으로 호출되는 함수입니다. 클래스..

- 비구조화 할당 왜 쓸까? const book = { korean: "korean", math: "math", english: "english" }; const korean = book.korean; const math = book.math; const english = book.english; console.log(korean); // korean console.log(math); // math console.log(english); // english 만약 배열이나 객체에서 해당 값들을 새로운 변수에 할당 해줘야할때 위와같은 행위를 여러번 해야합니다. 하지만 const { korean, math, english } = { korean: "korean", math: "math", englissh: "..

- ES5 템플릿 문자열 표현식 기존의 싱글쿼테이션 ('문자열') 과 더블쿼테이션 ("문자열") 방법을 백틱 문자를 사용해 문자열을 여닫는 것을 템플릿 문자열 표현식이라고 합니다. 백틱 문자는 ` 를 의미합니다. var test = 'test:'+'tt'+'\ntest2:'+'tt2'; console.log(test); ES5에서는 개행문자, 병합등을 이용해 변수나 상수 안에 문자열을 넣어 사용했었습니다. - ES6 템플릿 문자열 표현식 하지만 ES6으로 오면서 백틱 안에 멀티라인 스트링을 입력하여 템플릿 문자열 표현식을 사용해 문자열에 변수도 입력하고 계산식 해석 등 해석이 가능한 것은 다 가능합니다. let test3='tt'; let test4='tt2'; console.log(` test3 : $..

- let 참조 에러 let test = '1'; if(true){ let test = '2'; console.log(test); }; console.log(test); 코드를 실행하면 위와 같은 결괏값을 출력합니다. let test = '1'; if(true){ console.log(test); let test = '2'; }; console.log(test); 코드를 위와같이 변경하면 위 와 같은 결과가 출력됩니다. 만약 호이스팅이 없었다면 3번째 test 를 출력하는 과정에서, 전역스코프의 값인 1 이 출력되었을겁니다. 하지만 블록스코프 안에 선언된 test(,4번라인 test)가 호이스팅 되어 해당 블록 스코프의 최상단에 test 변수가 선언되게 됩니다. 이때 let은 var와 다르게 변수가 초기..

- Block-scope Block-scope: {}로 감싸진 유효 범위 기존의 var는 function scope레벨 hoisting let 키워드를 사용해 변수의 유효범위를 블록 스코프 처리 1. Scope 변수의 유효범위 입니다. var 의 변수 유효범위 블록 스코프가 아닌 function 스코프입니다. var num = 1; function printNum(){ console.log(num); var num = 2; console.log(num); }; printNum(); //2 function 레벨에서 호이스팅이 발생하고 있는 것을 확인할 수 있습니다. 호이스팅: https://nevertrustbrutus.tistory.com/335 아래는 함수가아닌 블록일 경우의 예제입니다. var tes..

- ES 4,5의 해결책 ES4,5시대에는 var키워드로 변수와 상수를 선언했었습니다. 하지만 var를 사용할 경우, 전반적으로 코드가 어떻게 작동될지 직관적으로 예측하기 어려운 경우가 자주 발생합니다. hosting 개념. https://nevertrustbrutus.tistory.com/335 그래서 ES6에서는 let과 const를 사용하여 변수와 상수를 선언해야합니다. 변수는 let 선언자, 상수는 const 선언자를 이용하면 됩니다. - let 이번에는 let 선언자를 이용해 선언하면 아래와 같습니다. let test = 1; console.log(test); let test = 2; console.log(test); let 변수는 var 변수와 다르게 재선언이 되지 않습니다. 2. const ..