주니어 백엔드 개발자를 위한 자바스크립트 기초 내용 정리

728x90

이 글의 내용

프론트엔드 경험이 없는 백엔드 개발자 기준에서 빠르게 실무에서 프론트엔드 영역을 다루기 위한 자바스크립트 기초 내용 정리

JavaScript

웹 페이지를 동적으로, 프로그래밍적으로 제어하기 위해 고안된 언어이다.
웹브라우저에서 유일하게 사용할 수 있는 프로그래밍언어이다.
HTML이 한 번 화면에 출력된 후에 그 형태나 동작 방법을 바꿀 수 없는 문제를 해결하기 위해 고안되었다.
정식명칭은 ECMAScript이며, 버전을 구분할 때는 EC5, ES6 등으로 구분한다.

Script Language

자바, C언어와는 다르게 프로그램이 실행되는 런타임시에 코드가 해석된다.

기초 문법

변수 할당

자바의 경우 변수를 선언하는 시점에 자료형이 결정된다. 자바스크립트의 경우 변수에 데이터가 들어가는 시점에 자료형이 결정된다.
이를 동적 타이핑(Dynamic Typing)이라고 한다.

var, let, const의 차이

var

중복 선언, 재할당 가능

let

중복 선언 불가능, 재할당 가능

const

중복선언, 재할당 불가능

undefined vs null

undefiend

변수는 존재하지만 어떠한 값으로도 할당되지 않아 자료형이 정해지지(undefined) 않은 상태이다.

null

변수는 존재하지만 null로 (값이) 할당된 상태로, null은 자료형이 정해진(defined)것을 의미한다.

객체 타입(Object Type)

자바스크립트에서의 객체는 자바와 같은 객체지향 프로그래밍 언어의 객체와는 조금 의미가 다르다.
자바스크립트에서 객체는 key와 value로 이루어진 쌍의 집합을 의미한다.
파이썬의 dictionary, 자바의 hashMap 등과 비슷하다.
key는 반드시 문자열이어야 하며, value로는 어떤 자료형도 들어갈 수 있다.

JavaScript의 연산자

일치연산자

===, !==

좌항과 우항이 정확하게 같을 때 true가 된다.
a === b : 값과 자료형이 모두 같다.
a !== b : 값이나 자료형이 같지 않다.

alert(1=='1');  // true
alert(1==='1');  // false

alert(null == undefined);  // true
alert(null === undefined);  // false

비교연산자

!==

'!=='는 '!='와 '=='의 관계와 같다.
정확하게 같지 않다는 의미이다.

함수(function)

일반 함수

함수(function)란 하나의 로직을 재실행할 수 있도록 하는 것으로 코드의 재사용성을 높여준다.
자바든 파이썬이든 프로그래밍 언어를 한 번이라도 공부해 봤다면 바로 이해 쌉가능하다.

function 함수명( [인자...[,인자]] ){
   코드
   return 반환값
}

화살표 함수

// 일반 함수 표현식
const add = function(a, b) {
  return a + b;
};

// 화살표 함수
const add = (a, b) => a + b;

ES6부터 추가된 기능이다.
() => {} 형태로 작성되며, 일반함수와 비교했을 때 함수를 간결하게 표현할 수 있다.
익명 함수로 취급되며, 변수에 할당되거나 다른 함수의 인수로 전달될 수 있다.
변수가 상수로 선언되기 때문에 다른 값으로 재할당할 수 없다.

모듈(Module)

JavaScript에서 모듈은 코드를 구성하고 재사용하는 데 필수적인 도구이다.
개발자는 모듈을 통해 코드를 더 작고 관리하기 쉬운 조각으로 분할하여 모듈성을 촉진하여 코드의 유지보수성을 향상할 수 있다.

모듈 사용의 장점

캡슐화

모듈은 코드 세그먼트 간의 명확한 경계를 제공하여 충돌을 줄일 수 있다.

재사용성

모듈을 사용하면 애플리케이션의 여러 부분 또는 별도의 프로젝트에서도 코드를 쉽게 재사용할 수 있다.

유지보수성

코드를 모듈로 나누면 분리된 기능을 변경하거나 테스트하기 쉬워져 유지보수성이 향상된다.

종속성 관리

모듈은 코드의 서로 다른 부분 간의 종속성을 관리하는 데 도움이 된다.

모듈 사용 방식

JavaScript 모듈은 환경에 따라 CommonJs 또는 ES 모듈(ESM) 사양을 따른다.

CommonJS 모듈

Node.js와 같은 서버 측 JavaScript 환경에서 사용한다.
require() 메서드를 사용하여 모듈을 가져오고 modeule.exports로 모듈을 내보낸다.

ES 모듈(ESM)

브라우저를 포함한 최신 JavaScript 환경에 내장되어 있다.
'import'문 및 'export'문을 사용하여 종속성을 관리하고 모듈을 내보낸다.
모듈 작업을 위한 보다 표준화되고 직관적인 구문을 제공한다.

<script> 태그

JavaScript와 HTML은 완전히 다른 문법을 가졌다.
그런데 HTML 문서 안에는 JavaScript와 HTML이 동시에 표현된다.
따라서 브라우저에게 어디서부터 어디까지가 JavaScript이고, HTML인지 구분해서 알려줘야 한다.
이 역할을 하는 것이 HTML태그인 script이다.
script 태그 안쪽에 위치하는 콘텐츠는 브라우저에 의해 JavaScript로 인식된다.

src 속성

<script src="...">...</script>
외부 스크립트를 파일의 URL을 src="..." 안에 입력한다.
그럼 브라우저는 src 속성에 있는 파일을 다운로드하여 실행시킨다.
type="module" 속성을 추가하면 스크립트를 ES 모듈로 인식하게 할 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <title>Module Script Example</title>
  </head>
  <body>
    <script type="module" src="script.js"></script>
  </body>
</html>

위의 예에서 script.js 파일은 스크립트 태그의 소스로 지정된다. type="module"을 설정하면 브라우저는 script.js에 ES 모듈 코드가 포함되어 있음을 인식하게 된다. 이를 통해 개발자는 코드를 별도의 파일로 구성하고 'import' 문을 사용하여 필요한 경우 해당 모듈을 가져올 수 있다.

값으로서의 함수, 콜백 함수

함수가 값으로 사용될 수 있는 특성을 이용하여 함수의 인자로 함수 자체를 전달할 수 있다.
값으로 전달된 함수는 호출될 수 있기 때문에 이를 이용해 함수의 동작을 컨트롤 할 수 있다.

function sortNumber(a,b){

    return b-a;
}
var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
alert(numbers.sort(sortNumber)); // array, [20,10,9,8,7,6,5,4,3,2,1]

원래 sort() 메서드는 위의 그림처럼 numbers의 요소를 문자열로 인식하여 문자열 비교를 통해 정렬한다.(1, 10, 2, 20 ...)
그런데, sortNumber 함수를 인자로 사용하면 기존 sort 함수의 동작을 숫자의 내림차순으로 바꿀 수 있다.

비동기 처리

콜백은 비동기 처리에서 유용하게 사용된다.
시간이 오래 걸리는 작업이 있고 이 작업이 완료된 후에 처리해야 할 일을 콜백으로 지정하면 해당 작업이 끝났을 때 미리 등록한 작업을 실행하도록 할 수 있다.

클로저(Closure)

함수 안에 있는 함수를 내부함수라고 한다.
내부함수는 외부함수의 지역변수에 접근할 수 있다.
외부함수의 실행이 끝나 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근할 수 있는데 이 메커니즘을 클로저라고 한다.

function outter(){
    var title = 'coding everybody';  
    return function(){        
        alert(title);
    }
}
inner = outter();
inner();

위의 JavaScript 코드는 클로저의 간단한 예시이다.

`outter` 함수 정의

`outter` 함수는 `title`이라는 지역 변수를 가지고 있다.

`outter` 함수 내부에서 함수 정의와 반환

`outter` 함수 내부에서는 내부 함수를 정의하고 반환한다. 반환된 내부 함수는 외부 함수의 변수인 `title`에 접근할 수 있다. 이때, 반환된 내부 함수는 클로저이다.

`inner` 변수에 `outter()` 리턴값을 할당

`outter()`를 호출하여 반환된 내부 함수를 `inner` 변수에 할당한다.

`inner` 함수 호출

`inner()`를 호출하면 내부 함수가 실행되며, `title` 변수에 접근하여 그 값을 `alert()` 함수를 통해 알립니다.

클로저의 동작 방식은 다음과 같다.

`outter` 함수의 실행이 완료되어 스택 프레임이 소멸된 후에도, `inner` 함수는 여전히 `outter` 함수의 스코프에 접근할 수 있다. 이는 `inner` 함수가 클로저를 형성했기 때문이다.
`inner` 함수 내에서 `title` 변수를 사용할 때, 자바스크립트 엔진은 먼저 내부 스코프에서 해당 변수를 찾는다. 만약 찾지 못하면 상위 스코프인 `outter` 함수의 스코프로 올라가서 변수를 찾는다.
이렇게 `inner` 함수는 외부 함수인 `outter`의 변수에 접근할 수 있다.
따라서, 위의 코드에서 `inner()`을 호출하면 내부 함수가 실행되고 `title` 변수의 값인 'coding everybody'이 경고창으로 출력된다.
이를 통해 클로저가 외부 함수의 변수에 접근하여 값을 유지하고 사용할 수 있음을 확인할 수 있다.

도쿄에 사는 개발자인데요🗼

주니어 백엔드 개발자를 위한 자바스크립트 기초 내용 정리

이 글의 내용

JavaScript

Script Language

기초 문법

변수 할당

var, let, const의 차이

undefined vs null

객체 타입(Object Type)

JavaScript의 연산자

일치연산자

===, !==

비교연산자

!==

함수(function)

일반 함수

화살표 함수

모듈(Module)

모듈 사용의 장점

모듈 사용 방식

<script> 태그

src 속성

값으로서의 함수, 콜백 함수

비동기 처리

클로저(Closure)

`outter` 함수 정의

`outter` 함수 내부에서 함수 정의와 반환

`inner` 변수에 `outter()` 리턴값을 할당

`inner` 함수 호출

클로저의 동작 방식은 다음과 같다.

관련 용어 정리

AJAX(Asychoronous JavaScript and XML)

jQuery

'[FrontEnd] > Java Script' 카테고리의 다른 글

티스토리툴바

주니어 백엔드 개발자를 위한 자바스크립트 기초 내용 정리

이 글의 내용

JavaScript

Script Language

기초 문법

변수 할당

var, let, const의 차이

undefined vs null

객체 타입(Object Type)

JavaScript의 연산자

일치연산자

===, !==

비교연산자

!==

함수(function)

일반 함수

화살표 함수

모듈(Module)

모듈 사용의 장점

모듈 사용 방식

<script> 태그

src 속성

값으로서의 함수, 콜백 함수

비동기 처리

클로저(Closure)

`outter` 함수 정의

`outter` 함수 내부에서 함수 정의와 반환

`inner` 변수에 `outter()` 리턴값을 할당

`inner` 함수 호출

클로저의 동작 방식은 다음과 같다.

관련 용어 정리

AJAX(Asychoronous JavaScript and XML)

jQuery

'[FrontEnd] > Java Script' 카테고리의 다른 글

관련글

티스토리툴바