자바스크립트 스터디 2. 자바스크립트 기본

자바스크립트 스터디 2. 자바스크립트 기본

2022. 5. 1. 16:58ㆍjavascript

2.1 Hello World

<script> 태그

script 태그를 이용해서 html 코드 대부분에 js코드를 작성할 수 있다.

사용법은 크게 어렵지 않다. 아래와 같이 body 태그 안 또는 body 태그 밖 에 두어도 실행할 수 있다.

<!DOCTYPE html>
<html>
  <script>
    alert( 'Hello, world! 1' );
  </script>
  
<body>
  <script>
    alert( 'Hello, world! 2' );
  </script>
</body>

  <script>
    alert( 'Hello, world! 3' );
  </script>
</html>

js는 인터프리터 언어이기 때문에 위에서 부터 차례대로 코드를 한줄씩 실행시킨다. 따라서 위의 코드를 실행 시키면

Hello World 1 -> Hello Wrold 2 -> Hello World 3

순서대로 실행된다.

또한 script에서는 여러 속성이 존재한다.

language

script에서 어떤 언어를 사용하는지 나타내고 있습니다. 하지만 현재는 web상에서 기본 언어가 javascript이기 때문에 사실상 별 의미가 없는 부분인 것 같습니다.

src

src는 source의 줄인말로 외부의 코드를 가져오기 위해서 path 또는 , url을 두는 속성이다. 또한 src 속성이 존재하면 scr 안에 존재하는 js 코드는 모두 무시된다.

<script src="/path/to/script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

외부 소스코드를 왜 가져와야 할까?

js코드를 html 파일 안에 다 넣으면 html 코드 또한 엄청 많은데 js를 또 집어넣게 되면 사람들이 보게 힘들게 된다. 현업에서도 매우 중요시 되지만 가독성은 매우 중요하다. 내가 짠 코드를 다른 사람도 읽게 될거고 시간이 지나고 나면 나 또한 읽는데 큰 어려움을 갖게 된다. 그래서 코드를 알맞은 목적으로 파일로 splitting 하자!

2-1 과제!

alert.js

alert('alert.js')

html

<!DOCTYPE html>
<html>
<body>
  <script src="alert.js"></script>
</body>
</html>

2-2. 코드 구조

Statment(문)는 어떤 작업을 수행하는 문법구조와 명령어를 의미한다. 각 문은 세미콜론을 통해서 각 문을 구분해준다.

자바스크립트에서는 나름대로 자유로운 문법 구조를 갖고 있어서 세미콜론을 붙이지 않아도 에러를 내지 않습니다.

이런 동작 방식을 일명 세미콜론 자동 삽입이라고 합니다.

alert('hi')
alert('hi2')

alert('hi');
alert('hi2');

세미콜론을 사용하는 일반적인 언어라면 위의 경우에 에러가 발생하겠지만 자바 스크립트는 위와 같은 경우 세미콜론 자동 삽입 이라는 기능을 통해 에러가 발생하지 않는다.

하지만 모든 줄 바꿈이 세미콜론 자동 삽입 이라는 기능으로 작동하지는 않는다. 예를 들어 아래와 같은 경우가 있을 수 있다.

alert(3 +
1
+ 2);

위는 +를 통해 값을 이어 붙여서 ; 이 불필요한 상황인데요. js는 이를 자동으로 판단하고 세미 콜론이 불필요한 상황이라고 인식합니다.

하지만 js에서는 이를 자동적으로 판단하지 못하는 경우도 있습니다.

alert("에러가 발생합니다.")

[1, 2].forEach(alert)

자바스크립트에서는 대괄호 앞에서는 ;가 있음을 가정하지 않기 때문에 위와 같은 코드는 에러가 발생하고 아래와 같이 인식하게 됩니다.

alert("에러가 발생합니다.")[1, 2].forEach(alert)

즉 위와 같이 두개의 문이 잘못합쳐지면서 에러가 발생합니다. 따라서 위와 같은 경우에는 ;을 이용해서 줄바꿈을 만들어줍시다.

alert("에러가 발생합니다.");
[1, 2].forEach(alert);

주석

주석이란 해당 코드가 어떤 역할을 하고 어떤 의미를 갖고 있는지 설명하는데 주로 이용합니다. 코드의 실행과는 전혀 상관없이 진행 상화엥서는 크게 의미를 갖고 있지 않습니다.

주석에는 두가지 가 존재합니다.

1. 주로 한줄의 주석을 의미하는 '//'

// alert('not excution');
alert('excution');

// 실행한다는 알림을 주는 코드입니다.
alert('excution');

not excution 부분은 실행되지 않는다. 실행한다는 알림을 주는 주석을 추가한다.

2. 주로 여러 줄의 주석을 의미하는 '/* */'

/*
alert('excution');
*/

위와 같은 주석의 형태는 다른 언어에서도 크게 다르지 않아 잘 알아 두면 다른 언어를 학습하는데 크게 도움이 될 것 같다.

2.3 엄격모드

2.4 변수와 상수

변수와 상수는 해당 값을 저장하는 저장소로 이해하면 크게 좋을 것 같습니다.

변수와 상수의 차이점

변수: 해당 저장소의 값을 바꿀 수 있다.

상수: 해당 저장소의 값을 바꿀 수 없다.

사용법

let hi = 1;
hi = 2;
const hi2 = 2;
hi2 = 3; // error 발생

let의 경우 값의 변경이 가능하고, const의 경우 값의 변환이 불가능합니다.

변수 명명 방법

변수 명에는 오직 문자와 숫자, 그리고 기호 $, _ 만으로 변수명을 만들 수 있다.

*첫글자는 숫자가 될 수 없다.*

그리고 변수를 만들때 각종 표기법이 있다.

1. 카멜 표기법

여러 단어를 사용할 때 첫 글자를 제외한 새로운 단어가 시작할 때 대문자로 시작하는 것을 의미한다.

2. 스네이크 표기법(주로 파이썬에서 많이 사용한다.)

여러 단어를 사용할 때 첫 슬자를 데외하고 새로운 단어가 시작할 때 _ 언더 바를 사용하는 것을 의미한다.

예약어의 사용을 조심해야한다.

예약어란!!

let, const 등의 미리 js에서 사용할거라고 정의된 단어를 의미한다. 따라서 아래와 같은 경우에는 에러가 발생한다.

let const;
let let;

let

ES6에 추가된 변수를 선언할 수 있는 방법이다. 나름 최근에 추가된 방법이고 기존에 있던 var의 단점들을 커버하며 문제를 해결해준다.

기존 몇몇 의 사람들이 js의 문법이 별로라는 말을 했었는데 이는 var의 사용에 따라 발생하는 문제가 꽤나 있었던 것 같다.

1. 재정의 가능

한번 변수를 선언한 뒤에 다시 한번 정의가 가능하다.

즉 이런 것이 된다.

var hi = 3;
alert(hi); //3

var hi = 4;
alert(hi); //4

일반적인 모든 언어는 위와 같은 것이 가능하지 않다. 즉 위와 같이 재정의가 가능하다.

하지만 let은 재정의가 불가능하다. 아래와 같이 에러가 발생한다.

2. 스코프의 범위가 다르다.

Scope란 각 변수를 참조할 수 있는 범위를 나타낸다.

let의 경우에는 블록스코프이다. var의 경우에는 함수 스코프이다.

블록 스코프는 블록을 기준으로 참조할 수 있다는 뜻이고 함수 스코프는 함수를 기준으로 참조할 수 있는지 나뉘어 진다.

따라서 아래와 같은 상황이 발생한다.

var을 사용할 경우

var a = 1; 
function ab(){ 
	var a = 3; 
    console.log(a); 
} 

ab(); // 3
console.log(a); // 1


var a = 1; 

if(true){ 
	var a = 3; 
    console.log(a); //3
} 

console.log(a); //3

let을 사용할 경우

let a = 1; 

if(true){ 
    let a = 3; 
    console.log(a); //3 
} 

console.log(a); //1

위와 같은 경우 let이 block 기준으로 각 변수를 의미하기 때문에 위와 다르게 나오는 경우를 알 수 있다.

주의할 점

scope를 참조할 때 없으면 더 크게 벗어나서 찾으려고 한다. 따라서 아래와 같은 경우 에러가 발생하지 않는다.

let a = 1; 

if(true){ 
	console.log(a); // 1
} 
 
console.log(a); // 1

if(true) 코드에서 a를 찾을 수 없어서 더욱 큰 scope에서 a를 찾아서 출력한다. 만약 a를 찾지 못하면 error가 발생한다.

하지만 반대의 경우에는 에러가 발생한다.

if(true){ 
	let a = 1;
} 
 
console.log(a); // error

반대로 더 넓은 범위에서 더 좁은 범위의 스코프에서는 값을 찾지 못한다.

3. hoisting이 가능하다.

호이스팅이란 선언전에 미리 나오면 이를 메모리에 할당하는 것을 의미한다.

text = 'study'; 
alert(text);
var text;

이는 다른 언어에서 불가능하다. 다른 언어를 학습하다가 온 사람들은 이와 같은 상황이 이상하다고 느낄 것이다.

'javascript' 카테고리의 다른 글

React로 ChromeExtension에 빌드하기 (2)	2019.03.30

React로 ChromeExtension에 빌드하기 2019.03.30

후니의 컴퓨터