[CS] Javascript 1

동화·2023년 3월 23일

CS

목록 보기

2/2

Javascript

Closure 설명과 예시

클로저는 "함수와 함수가 선언된 어휘적(lexical) 환경"의 조합을 말합니다. 쉽게 말해, 어떤 함수(outer) 내부에 선언된 함수(inner)가 바깥 함수(outer)의 지역변수(outerVariable)를 참조하는 것이 함수(outer)가 종료된 이후에도 계속 유지되는 현상을 말합니다.
통상적으로 "외부함수의 변수에 접근할 수 있는 내부함수"를 클로져 함수라 부릅니다.
외부함수의 실행이 종료된 후에도, 클로져는 외부함수의 스코프를 참조할 수 있습니다.

클로저 사용 예시

커링: 함수 하나가 n개의 인자를 받는 대신 n개의 함수를 만들어 각각 인자를 받게 하는 방법입니다.
클로저 모듈: 변수를 외부 함수 스코프 안쪽에 감추어, 변수가 함수 밖에서 노출되는 것을 막는 방법) 등의 패턴을 구현할 수 있습니다.

클로저의 단점

일반 함수였다면 함수 실행 종료 후 가비지 컬렉션(참고) 대상이 되었을 객체가, 클로저 패턴에서는 메모리 상에 남아 있게 됩니다. 외부 함수 스코프가 내부함수에 의해 언제든지 참조될 수 있기 때문입니다. 따라서 클로저를 남발할 경우 퍼포먼스 저하가 발생할 수도 있습니다.

클로저 사용 이유

반환된 내부함수가 자신이 선언됬을때의 환경인 스코프를 기억하여 자신이 선언되었을때의 환경 밖에서 호출되어도 그 환경에 접근할 수 있는 함수, 자신이 생성될때의 환경을 기억하는 함수

사용 하는 이유

현재 상태를 기억하고 변경된 최신 상태를 유지하기 위해
전역 변수의 사용을 억제 하기위해
정보를 은닉하기 위해

js에서 this란?

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

this는 '자신이 속한 객체를 가리키는 변수' 입니다.
자바스크립트에서의 this는 자신을 '호출'하는 방법에 따라 다른 값을 가리킵니다.

호출하는 방법에 따른 this 참고 : https://eunjinii.tistory.com/104

일반함수의 this와 화살표 함수의 this 차이

자바스크립트의 내부함수는 일반 함수, 메소드, 콜백함수 어디에서 선언되었든지 this는 전역객체를 가리킵니다.
일반함수의 this는 window(전역)을 가리키며, 화살표 함수의 this는 언제나 상위스코프의 this를 가리킵니다.

“==” and “===”

==과 ===은 조건식에서 어떤 것이 같은지 판별할 때 사용합니다.
==는 Equal Operator이고, ===는 Strict Equal Operator입니다.
==은 값만 비교하지만 ===은 값과 타입을 같이 비교합니다.
따라서 숫자와 숫자리터럴을 비교하였을 때, ==으로는 같을 수도 있고, ===로는 다를 수도 있습니다
또한, undefined와 null을 비교할 때 ==을 사용하면 둘 다 빈값이기 때문에 true가 출력됩니다.
그러나 ===을 사용하면 값 뿐만 아니라 type까지 비교하게 되어, undefined는 undefined 타입이나 null은 object타입이므로 둘은 같지 않다고 판별되어 false가 출력됩니다.

ES6

ES란, ECMAScript의 약자이며 자바스크립트의 표준, 규격을 나타내는 용어이고, ES6은 2015년 출시되었습니다.

ES6 스펙에 대한 지원 부족 해결

Babel을 사용합니다.
ES6이상의 문법의 코드들을 브라우저가 이해할 수 있게끔 ES5이하의 문법으로 변환합니다.

Babel

babel은 트랜스파일러입니다. 컴파일은 한 언어로 작성된 소스 코드를 다른 언어로 바꾸는 것(C-> 어셈블리어)인데,
트랜스파일러는 한 언어로 작성된 소스코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것을 말합니다.
(C++>C, ES6->ES5)

ES6 에서 추가된 스펙

let, const, 화살표함수, 클래스, 프로미스, 스프레드 연산자 등

var 와 let, const

(function scope와 block scope의 개념에서)

var은 함수 레벨 스코프를 지원, let, const는 블록 레벨 스코프를 지원하여, 블록 레벨에 foo를 456으로 재선언하는 경우 foo를 456으로 인식하지만, let이나 const는 블록 안에 있는것을 읽지 않고 전역 변수를 읽습니다.

var foo = 123; // 전역 변수
console.log(foo); // 123

{
  var foo = 456; // 전역 변수
}
console.log(foo); // 456

사용하고 있는 ES6 feature

Destructing 구조분해할당
Spread Operating Spread 연산자
Rest Parameters
Default Parameters
Template Literals 템플릿/백틱
Arrow Fuctions 화살표함수
for...of loop

javascript 와 node 차이

NodeJS: NodeJS는 서버 측에서 자바 스크립트를 실행할 수있는 크로스 플랫폼 및 오픈 소스 자바 스크립트 런타임 환경입니다. Nodejs를 사용하면 자바 스크립트 코드가 브라우저 외부에서 실행될 수 있습니다. Nodejs는 많은 모듈과 함께 제공되며 주로 웹 개발에 사용됩니다.
Javascript: Javascript는 스크립팅 언어입니다. 주로 JS로 축약됩니다. Javascript는 ECMA 스크립트의 업데이트 된 버전이라고 할 수 있습니다. Javascript는 Oops 개념을 사용하는 고급 프로그래밍 언어이지만 프로토 타입 상속을 기반으로합니다.

hoisting

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말합니다.

hoisting 특징

자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언합니다.
자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑습니다.
함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킵니다.
유효 범위는 함수 블록 {} 안에서 유효합니다.
즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것입니다.
실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이기 때문에, 실제 메모리에서는 변화가 없습니다.

자바스크립트의 호이스팅(Hoisting)

변수를 선언하고 초기화 했을때 선언부분이 최상단으로 끌어올려지는 현상입니다.
예를 들어, 코드 상단에서 console.log(a)를 찍고 하단에서 var a=1; 이라고 하였을때 a는 undefined라고 나옵니다. 이런 현상을 호이스팅이라고 합니다. 함수의 경우 함수표현식은 호이스팅이 적용되지 않으나 일반 함수선언문은 함수 호이스팅이 적용됩니다.

call apply bind

3가지 방법은 this를 바인딩하기 위한 방법입니다..
Call은 this를 바인딩하면서 함수를 호출하는 것, 두 번째 인자를 apply와 다르게 하나씩 넘기는 것이고,
Apply는 this를 바인딩하면서 함수를 호출하는 것, 두 번째 인자가 배열입니다.
Bind는 함수를 호출하는 것이 아닌 this가 바인딩 된 새로운 함수를 리턴합니다.

call 메소드

.call 호출은 명시적으로 this를 지정할 때 사용합니다. 첫 번째 인자가 항상 this.
foo.call(context). context를 this로 지정하고, foo() 함수를 실행합니다.
call의 두번째 인자 이후로는 파라미터로 전달됩니다.

apply 메소드

.apply 호출은 명시적으로 this를 지정할 때 사용합니다. 첫번째 인자가 항상 this이고 두번째 인자는 배열입니다.

javascript c 언어의 배열

자바스크립트의 배열은 []나 new Array()로 생성하며, 크기의 제약이 없고, 하나의 배열에 서로 다른 타입의 변수가 들어갈 수 있습니다.
C 언어에는 문자열이 따로 있지 않고, char형 데이터들의 배열이 곧 문자열입니다. 배열은 메모리 공간에 정해진 크기만큼 일렬로 자리를 잡는데, 이 배열을 탐색하거나 정렬할 내장 메서드가 없으므로 탐색함수와 정렬함수를 직접 구현해야 합니다.
반면 자바스크립트로 구현한다면, 내장메서드들이 이미 최적화되어 있습니다.

깊은 복사와 얕은 복사

얕은 복사(Shallow copy)는 참조 타입 데이터가 저장한 '메모리 주소 값'을 복사한 것을 의미합니다.
반대로 깊은 복사(Deep copy)는 새로운 메모리 공간을 확보해 완전히 복사하는 것을 의미합니다.

얕은 복사(Shallow Copy)

얕은 복사(Shallow Copy)란 객체를 복사할 때 원본 값과 복사된 값이 같은 참조(=메모리 주소)를 가리키는 것입니다.
또한, 객체 안에 객체가 있을 경우에 한 개의 객체라도 원본 객체를 참조한다면 얕은 복사라고 볼 수 있습니다.
얕은 복사 후 해당 변수를 재사용하여 수정한다면 원본 값이 동시에 변하므로 주의하여야 합니다.

깊은 복사(Deep copy)

깊은 복사(Deep Copy)는 복사된 객체가 다른 주소를 참조하며 내부의 값만 복사됩니다.
재귀함수나 JSON 객체 JSON.parse()와 JSON.stringify()을 이용할 수 있습니다.

Object.assign()

Object.assign()을 이용하면 객체 자체는 깊은 복사가 수행되지만, 2차원 이상의 객체는 얕은 복사가 수행됩니다. 아래 예시에서 객체는 서로 다른 주소를 참조하고 있어 깊은 복사가 이루어졌지만 내부의 객체는 같은 주소를 참조하고 있습니다.

let origin = {
    a: 1,
    b: { c: 2 }
};

let copy = Object.assign({}, origin);
copy.b.c = 3

console.log(origin === copy) // false
console.log(origin.b.c === copy.b.c) // true