[10 / 29] JS란? | 코드 구조 | 변수와 상수

❗❗❗노션 정리 내용을 옮겨왔음으로 양식이 조금 이상할 수 있습니다❗❗❗

 

🌟 초기 환경 설정

Dev dependency

 

Dev dependency = 개발할 때만 필요한 → 클라이언트 줄 때 전달 안 함 = 파일이 가벼워짐

dependency = 클라이언트에게도 전달 됨.

깃헙에서 남의 코드 다운 받으면 npm i 부터 하자~~~ 안하면 필요한 프로그램들 안 깔림

 

🌟 코어 자바스크립트

코어 자바스크립트(Core JavaScript)는 자바스크립트 언어의 핵심 개념과 기본 동작 원리를 다루는 기초 지식입니다. 자바스크립트를 배우고 사용할 때 중요한 이론과 언어 자체의 작동 방식을 이해하도록 돕는 내용입니다.

(라고 합니다)

 

🌟 JS 란?

자바스크립트란?

자바스크립트란?

 

자바스크립트 엔진

JS는 브라우저 뿐만 아니라 서버에서도 실행할 수 있다. 그 외에도 자바스크립트 엔진이 들어있는 모든 디바이스에서도 동작한다.

브라우저에는 ‘자바스크립트 가상 머신’이라 불리는 엔진이 내장되어있다.

브라우저마다 사용하는 엔진의 종류는 다양한데, 특유의 코드네임이 있고, 이 코드네임으로 개발 관련 글에 언급이 되곤해서 알아두는게 좋다.

 

JS 엔진의 동작

간단하게 설명한 자바스크립트 엔진의 동작 과정은 다음과 같다.

 

1. 엔진(브라우저라면 내장 엔진)이 스크립트를 읽습니다(파싱).
2. 읽어 들인 스크립트를 기계어로 전환합니다(컴파일).
3. 기계어로 전환된 코드가 실행됩니다. 기계어로 전환되었기 때문에 실행 속도가 빠릅니다. 

 

🌟 Hello, World!

Hello, world!

Hello, world!

 

외부 스크립트 코드

우리가 스크립트 코드를 HTML 내부에 <script> 태그로 직접 넣어주기도 하지만 이건 스크립트 코드가 아주 짧고 간단할 때 얘기고~

보통은

<script src="/path/to/script.js"></script> 이런 식으로

js 파일을 따로 생성하여 HTML에 연결해주는데, 이렇게 스크립트를 별도의 파일에 작성하면 브라우저가 스크립트를 다운 받아서 캐시(cache)에 저장하기 때문에 성능상의 이점이 있다.

만약 여러 페이지에서 동일한 스크립트를 사용하는 경우, 브라우저는 페이지가 바뀔 때 마다 스크립트를 다운받을 필요 없이 캐시에서 최초 실행 때 받아놓은 스크립트를 가져와서 사용하기 때문이다~

 

스크립트 코드 주의사항

src 속성이 있으면 태그 내부의 코드는 무시된다.

<script> 태그를 이용하여 HTML 내부에 스크립트 코드를 넣어줄 때

<script src="file.js">
  alert(1); // src 속성이 사용되었으므로 이 코드는 무시됩니다.
</script>

이런식으로 스크립트 태그 내부에 코드를 작성한다면 그 코드는 무시된다. 따라서 외부 연결만을 하거나, 내부에서 <script>태그를 이용하여 작성하거나 둘 중 하나로 결정을 해야한다.

 

 

물론 아래와 같이 분리하는 방법도 있다.

<script src="file.js"></script>
<script>
  alert(1);
</script>

 

🌟 코드 구조

코드 구조

코드 구조

 

세미콜론

JS는 줄 바꿈을 하면 이 줄 바꿈을 ‘암시적’세미콜론으로 인식하기 때문에 생략이 가능하다.

 

하지만~ 항상 줄 바꿈을 암시적 세미콜론으로 인식하는 것은 아니다. 즉 많은 예외 상황이 있다는 뜻.

alert(3 +
1
+ 2);

예를 들어 요런 상황! 누가 봐도 계산 중 줄바꿈으로 연산이 덜 되어보이죠??? 이런 상황을 JS도 인식해서 이런 상황에는 줄 바꿈 = 암시적 세미콜론 이라고 인식하지 않는다는 것.

 

그렇기 때문에~ 우리가 모든 예외 상황을 고려할 수 없기 때문에 세미콜론을 넣는것을 습관화 하는것이 좋다! 심지어 가독성에도 좋음ㅎㅎ

 

주석

//한줄 주석

/* 
여러줄 주석
*/

// alert('Hello'); 한 줄 주석 예제
alert('World');
alert('Hello');
alert('World');

/* 두 줄짜리 주석 예제 
alert('Hello');
alert('World');
*/

주의!!  중첩 주석은 지원하지 않음

/*
  /* 중첩 주석 ?!? */
*/
alert( 'World' );

이런 식으로 쓰면 에러 남!

 

 

🌟 변수와 상수

변수 = 변할 수 있는 수

상수 = 항상 고정적인 수

변수와 상수

변수와 상수

 

변수

변수(variable)은 데이터를 저장해둘 때 사용되는 ‘이름이 붙은 저장소’이다.

JS에서는 let 키워드를 사용하여 변수를 생성한다.

 

‘message’라는 이름을 가진 변수를 생성(선언)하려면 아래와 같이 할 수 있다.

let message;

이제 이 message 라는 변수에 데이터를 저장하고자 한다면 아래와 같이 변수에 값을 할당 해줄 수 있다.

 

 

let message;

message = 'Hello';   //message라는 변수에 'Hello' 문자열을 할당하였다.

이제 이 문자열은 변수와 연결된 메모리 영역에 저장되었기 때문에 변수명을 사용해서 불러올 수 있다.

 

 

let message;           //변수 선언
message = 'Hello!';    //변수 할당

alert(message);        //변수명을 사용하여 변수에 저장된 값 불러오기

변수 선언과 값 할당을 한 줄에 작성할 수도 있고 한 줄에 여러 변수를 선언할수도 있다.

 

 

let message = 'Hello!'; // 변수를 정의하고, 값을 할당
let user = 'John', age = 25, message = 'Hello'; // 한 줄에 여러 변수 선언 및 할당

하지만 한 줄에 여러 변수를 선언하는 것은 추천하진 않음~ 가독성이 안좋음.

 

 

변수의 선언 , 변수의 할당

엄청 중요!!!

변수의 선언과 할당은 다르다!!!!!!

 

선언 = 자리만 만들어 두는 것.

할당 = 선언하여 만들어 둔 자리에 값을 넣어 주는 것.

 

변수의 선언과 할당을 비유를 해보자면

‘message’라는 변수를 선언한다는 것은 ‘message’라는 이름을 가진 상자를 만든 것 이고,

‘Hello!’라는 변수를 할당한다는 것은 그 ‘message’라는 이름을 가진 상자에 ‘Hello!’라는 값을 넣어놓는 다는 것 이다.

 

 

변수의 재할당

let message;

message = 'Hello!';

message = 'World!'; // 값이 변경되었습니다.

alert(message);  // 'World!'

이런식으로 변수에 할당된 값을 재 할당을 통해 바꿀 수 있다.

값이 변경되게 되면 이전 데이터는 변수에서 제거된다.

 

 

변수 복사하기

한 변수에 다른 변수의 값을 복사할수도 있다.

let Hello = 'Hello world!';

let message;

// Hello의 'Hello world' 값을 message에 복사합니다.
message = Hello;

// 이제 두 변수는 같은 데이터를 가집니다.
alert(Hello); // Hello world!
alert(message); // Hello world!

위와 같이 복사하여 사용할 수 있다.

 

 

다만!! 저렇게 재할당은 가능하지만 변수를 두 번 선언하는 것은 에러가 난다!!

생긴 꼴이 비슷하지만 잘 구분해야함!

let message = "This";

// 'let'을 사용하여 'message'를 또 선언하려고 하니 에러가 남.
let message = "That"; // SyntaxError: 'message' has already been declared

 

 

함수형 언어와 객체 지향 언어

 

JS는 객체 중심의 언어이다.

예전에는 객체 지향 방식으로 프로그래밍을 많이 했으나 오늘날에는 함수 지향 언어를 많이 사용하고 있다고 말씀해주셨다.

 

그럼 왜 함수를 많이 쓸까?

 

일단 객체 지향 언어보다 쉽다. 이게 큰 이유이기도 하고, 라이브러리 때문이라고 할 수도 있다. 대표적으로 리액트!

객체지향이 너무 어려워서 리액트 팀이 Hook 이라는 것을 만들었다. 이 Hook 을 이용하면 JS를 훨씬 쉽게 쓸 수 있는데 그 Hook 이 함수형이라고 그렇다고..!

자세한 내용은 차차 배우게 될 것 이라고 하셨다.

 

 

변수 명명 규칙

 

1. 변수명에는 오직 문자와 숫자, 그리고 기호는 $와 _ 만 가능하다.
2. 첫 글자는 숫자가 될 수 없다. 

• 여러 단어를 조합해서 변수명 만들 땐 보통 카멜 케이스를 사용한다.
• 변수명은 대 소문자를 구분한다! ex) apple과 AppLE는 서로 다른 변수임.
• 변수명은 영어 뿐만 아니라 다양한 언어로도 가능은 하지만 비추함. (영어를 쓰는게 국제적 관습)
• 예약어도 사용할 수 없음. 예약어ex) let, const, return, function 등

 

상수

const로 선언한 변수를 ‘상수(constant)’라고 한다. 이는 변화하지 않는 변수를 뜻한다.

 

상수는 재할당 할 수 없기 때문에 상수를 변경하려고 한다면 에러가 발생한다.

const myBirthday = '18.04.1982';  // 상수의 선언과 할당

// 상수에 재할당 하려고 하니 에러가 난다.
myBirthday = '01.01.2001'; // error, can't reassign the constant!

** 참고로 상수를 선언하고 상수의 값은 변화 시키지 못하지만 상수의 값 안에 있는 내용물은 바꿀 수 있다.

ex)

const d = { name: 'apple' };
d.name = 'ju';

console.log(d); // { name: 'ju' }

이런식으로!

 

대문자 상수

코딩을 하다보면 기억하기 힘든 값을 아래와 같이 변수에 할당하여 별칭으로 사용하곤한다.

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// 색상을 고르고 싶을 때 별칭을 사용할 수 있게 되었습니다.
let color = COLOR_ORANGE;
alert(color); // #FF7F00

이런 대문자 상수는 위와 같이 ‘하드코딩’ 한 값을 넣어두는데 많이 사용한다.

 

이 대문자 상수의 장점은 아래와 같다.

• COLOR_ORANGE는 "#FF7F00"보다 기억하기가 훨씬 쉽다.
• COLOR_ORANGE를 사용하면 "#FF7F00"를 사용하는 것보다 오타를 낼 확률이 낮다.
• COLOR_ORANGE가 #FF7F00보다 훨씬 의미가 있는 코드 이름이므로, 코드 가독성이 증가한다.

 

 

바람직한 변수명

변수명은 간결하고 명확해야한다.

변수 이름을 짓는게 프로그래밍에서 가장 중요하고 어려운 일 이라는 것…ㅎ

변수명만 보고도 초보인지 숙련자인지 알 수 있을 정도다.

 

 

<변수 명명할 때 참고하기 좋은 규칙>

• userName 이나 shoppingCart처럼 사람이 읽을 수 있는 이름을 사용하면 좋다.
• 줄임말이나 a, b, c와 같은 짧은 이름은 최대한 피하자.
• 최대한 서술적이고 간결하게 명명하자. data와 value는 나쁜 이름의 예시이다. 이런 이름은 아무것도 설명해주지 않는다. 코드 문맥상 변수가 가리키는 데이터나 값이 아주 명확할 때에만 이런 이름을 사용하자.
• 자신만의 규칙이나 소속된 팀의 규칙을 따르자. 만약 사이트 방문객을 'user’라고 부르기로 했다면, 이와 관련된 변수를 currentVisitor나 newManInTown이 아닌 currentUser나 newUser라는 이름으로 지어야 한다.

 

 

 

 

썸네일