Written

JavaScript 필기노트 1 본문

Front-end/Java Script

JavaScript 필기노트 1

steeringhead 2022. 12. 29. 21:54
C언어와의 차이점

C계열의 언어는 소스 파일 작성 후 , 해당 파일을 컴파일하여 사용자가 실행할 수 있는 실행파일(.exe)로 만들어 사용합니다. 하지만 인터프리터 언어인 JS는 이러한 컴파일 작업을 거치지 않고, 소스 코드를 바로 실행할 수 있습니다. JS는 웹 브라우저에 포함된 자바스크립트 인터프리터가 소스 코드를 직접 해석하여 바로 실행해 줍니다.

 

자바스크립트를 적용하는 방법

HTML문서에 자바스크립트 코드를 적용하는 방법은 2가지 입니다.

 

1. 내부 자바스크립트 코드로 적용

2. 외부 자바스크립트 파일로 적용

 

● 내부 자바스크립트 코드

자바스크립트 코드는 <script>태그를 사용하여 HTML문서 안에 삽입할 수 있습니다.

HTML의 <head> 또는 <body>태그 양쪽 모두에 위치할 수 있습니다.

그리고 어디에 위치한 들 동작상의 차이는 없습니다.

 

●외부 자바스크립트 코드

HTML문서 내부 뿐만 아니라 외부 파일로 생성하여 연동시킬 수 있습니다.

.js확장자를 사용하여 스크립트 코드를 구현한 파일을 저장시킨 후,

스크립트 태그를 사용하여 src속성에 위치를 기입해서 연동 시킬 수 있습니다.

EX)

<head>
    <meta charset="UTF-8">
    <title>JavaScript Apply</title>
    <script src="/examples/media/example.js"></script>
</head>

 

외부 자바크스립트 파일을 사용하는 것이 HTML코드와 JS코드를 각각 읽기에도 좋고,

유지보수 차원에서도 효율적입니다. 또한 웹 브라우저가 파일을 미리 읽어올 수 있어 로딩 속도

또한 빨라집니다.

 

JS에서 변수란

 

변수(variable)란 데이터를 저장할 수 있는 메모리 공간을 의미하며 , 값이 변경 될 수 있습니다.

선언되지 않은 변수를 사용하거나 접근하려고 하면 오류가 발생합니다. 

단, 선언되지 않은 변수를 초기화할 경우에는 묵시적으로 선언을 해줌과 동시에 초기화도 해줍니다.

 

EX)

var month; // month라는 이름의 변수 선언

date = 25; // date라는 이름의 변수를 묵시적으로 선언

 

JS의 변수는 타입이 정해져 있지 않습니다. 같은 이름의 변수에 다른 타입의 값을 넣어도 문제가 되지 않습니다.

이 부분은 제가 기존에 공부했던 C++에서는 문제가 될 수 있는 부분이지만 , 자바스크립트에서는 유연하게형변환을 해줍니다 ! 또한 하나의 변수에 여러 타입의 값을 재 할당 할 수 있지만 , 한번 선언한 변수를 다시 선언하는것은 불가능합니다.

 

var num = 10;        // 변수의 선언과 함께 초기화

num = [10, 20, 30];  // 배열 대입

var num;             // 이 재선언문은 무시됨.

 

쉼표 연산자

저는 지금까지는 다른 언어에서는 본적이 없는 새로운 연산자입니다!

for문에 두개의 변수를 한번에 투입할 수 있습니다.

 

// 루프마다 i의 값은 1씩 증가하고, 동시에 j의 값은 1씩 감소함.

for (var i = 0, j = 9; i <= j; i++, j--) {

    document.write("i의 값은 " + i + "이고, j의 값은 " + j + "입니다.<br>");

}

 

 

delete 연산자

C++에서는 delete가 힙에 메모리공간을 new로 생성했을 때, delete연산자로 그 할당받은 공간을 삭제해주는 역할을 했었는데 JS에서의 delete는 피연산자인 객체 , 객체의 프로퍼티 또는 배열의 요소를 삭제해줍니다. 성공적으로 삭제했다면 , 

true를 반환 실패했을 경우 false를 반환합니다.

 

delete를 통해 배열의 요소를 삭제했을 때, 배열의 길이까지 줄여주지는 않습니다. 또한 삭제한 배열의 인덱스에 접근하면

undefined를 반환합니다.

 

var arr = [1, 2, 3];          // 배열 생성

delete arr[2];                // 배열의 원소 중 인덱스가 2인 요소를 삭제함.

document.write(arr + "<br>"); // [1, 2, ]

// 배열에 빈자리가 생긴 것으로 undefined 값으로 직접 설정된 것은 아님.

document.write(arr[2] + "<br>");

// 배열의 요소를 삭제하는 것이지 배열의 길이까지 줄이는 것은 아님.

document.write(arr.length);

 

배열의 생성방법 3가지

JS에서 배열을 생성하는 방법은 총 3가지 입니다.

 

1. var arr = [배열요소1, 배열요소2,...];          // 배열 리터럴을 이용하는 방법

2. var arr = Array(배열요소1, 배열요소2,...);     // Array 객체의 생성자를 이용하는 방법

3. var arr = new Array(배열요소1, 배열요소2,...); // new 연산자를 이용한 Array 객체 생성 방법

 

3가지 모두 같은 결과의 배열을 만들어줍니다.

JS에서 배열이 가지는 특징을 알아보겠습니다 !

 

1.같은 배열안에 서로 다른 타입의 데이터가 들어갈 수 있습니다.

2.특정 배열 요소가 비어있을 수 있습니다. 즉, 배열이 연속적이지 않을 수 있습니다.

3.JS에서 배열은 Array객체로 다뤄집니다.

 

배열에 데이터 추가하기

1. arr.push(데이터) // push() 함수 이용하기.

2. arr[arr.length] = 추가하고 싶은 데이터 // JS에서는 배열의 길이를 넘는 index에 접근해도 괜찮다는 것을 이용.

3. arr[특정 인덱스] = 추가하고 싶은 데이터 // 특정 인덱스에 데이터 추가

 

* 그렇다면 만약 길이 5의 기존 배열에 arr[10] = 1;로 데이터를 추가하게 되면 어떻게 될까요 ?

-> 이렇게 되면 arr배열의 길이는 11이 되고 데이터가 담겨있지 않은 index번호 5,6,7,8,9의 배열 공간에는

undefined로 채워져 arr[7] 이렇게 참조하려고 하면 undefined를 반환해줍니다 !

 

값으로서의 함수

다른 언어를 공부하면서는 한번도 본적이 없는 ! 값으로서의 함수가 JS에서는 가능합니다.

즉 , 일반 변수에 함수를 저장하여 변수를 함수처럼 사용하는 것입니다. 상당히 신기했습니다 :D

 

function sqr(x) {                // 제곱의 값을 구하는 함수 sqr를 정의함.

    return x * x;

}

var sqrNum = sqr;                // 변수 sqrNum에 함수 sqr을 대입함.

document.write(sqr(4) + "<br>"); // 함수 sqr을 호출함.

document.write(sqrNum(4));       // 변수 sqrNum를 함수처럼 호출함.

 

출처 : http://www.tcpschool.com/javascript/

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

위에 필기한 내용 및 예시들은 위의 사이트를 참조하였습니다.

 

★ 개인적으로 공부한 부분들의 필기를 목적으로 쓰는 글이다보니, 제가 생각하기에 헷갈릴만 하다거나중요하거나 특별한 부분들을 위주로 정리하고 있습니다. 혹시나 보시는분들은 다소 난잡하여도 양해 부탁드립니다..!

저작자표시

'Front-end > Java Script' 카테고리의 다른 글

(function() { })() / 함수 정의가 끝나고 괄호가 붙는 경우 / IIFE  (0) 2023.03.08
JavaScript 프로젝트 과제  (0) 2023.02.26
JavaScript - 값 복사 , 참조 복사 / filter()  (0) 2023.02.01
JavaScript - 유사 배열 객체 / Array.from() / 화살표 함수  (0) 2023.01.31
JavaScript 필기노트 2  (0) 2023.01.02
'Front-end/Java Script' Related Articles more
Comments