frontend/JavaScript

[필기] 자바스크립트 기초 입문 강의 30분 │조코딩

Mr.코딩 2023. 8. 3. 03:14

https://youtu.be/E-PzX2mKGUQ?t=317 


JavaScript 코드를 간단히 테스트하려면

 

1. 웹브라우저(크롬)을 켠 다음,

2. 마우스 우클릭 > 검사 Ctrl+Shift+J

3. 콘솔 클릭

4. REPL 방식으로 코드를 테스트할 수 있다.

☆ 아랫줄로 이동하기 위해서는 Shift+Enter를 친다.

5. 한 개의 명령이 끝나면 세미콜론(;)을 찍는다. (안 찍어도 동작하기도 함. 그래도 찍는 버릇이 좋다.)

☆ 브라우저 콘솔에서는 '수정'은 안 된다. 다만, 위-아래 화살표를 눌러서 덮어쓰기 해서 다시 쓸 수는 있다.

6. console.log();는 '프린트' 하고 비슷한 건데, 내장함수로써 콘솔에 결과를 출력할 때 쓴다.

 


REPL에 대해 설명해 줘.

더보기

물론, REPL에 대해 설명해 드리겠습니다.

 

REPL은 "Read-Eval-Print Loop"의 약자로, 대화식 프로그래밍 환경을 제공하는 소프트웨어 환경을 지칭합니다. 주로 인터프리터 언어에서 사용되며, 사용자가 입력한 코드를 읽고 해석하며 결과를 반환하고, 그 결과를 출력하는 루프를 반복하는 방식으로 동작합니다. 이러한 대화식 환경은 코드를 작성하고 바로 실행하며 결과를 확인할 수 있어 개발 과정을 빠르고 편리하게 만들어줍니다.

 

REPL의 세 가지 주요 단계를 간단히 설명하면 다음과 같습니다:

 

1. Read(읽기): 사용자가 입력한 코드를 읽어들입니다.

2. Eval(해석): 읽은 코드를 해석하고 실행 가능한 형태로 변환합니다.

3. Print(출력): 해석한 코드를 실행하고 결과를 출력합니다.

 

대표적으로 파이썬과 같은 스크립트 언어들이 REPL 환경을 제공합니다. 대화식으로 코드를 작성하고 실행하며 결과를 바로 확인할 수 있으므로 특정 코드 조각이 어떻게 동작하는지 빠르게 테스트하거나 프로그래밍 언어와 라이브러리의 기능을 탐색하는 데 유용합니다.

 

예를 들어, 파이썬 REPL을 실행하면 다음과 같은 대화식 환경이 제공됩니다:

Python 3.9.6 (default, Jun 29 2021, 15:39:42)
[GCC 10.3.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>>

여기서 ">>>"는 사용자가 코드를 입력할 준비가 되었다는 것을 나타내며, 사용자는 이 줄에 파이썬 코드를 입력하고 엔터를 누르면 파이썬 인터프리터가 해당 코드를 읽어 해석하고 실행 결과를 바로 출력합니다.

 

간단히 말하면, REPL은 사용자가 코드를 작성하고 실행하는 동시에 결과를 확인할 수 있는 대화식 개발 환경을 제공하는 도구입니다.


변수

 

변수는 "값을 담는 상자"라고 이해하면 된다.

변수 선언에서,

'=' (등호)는 오른쪽에 있는 걸, 왼쪽에 넣는다는 의미이다.

 

a=1 이런 식으로 작성해도 되지만, 보통 let을 많이 쓴다.

상수(변하지 않는 값)을 선언할 때는 const를 쓰고.


함수

 

함수 작성 방법

* function 이라고 앞에 붙여주고, 바로 뒤에 함수명(함수이름을 써 준다.) 그리고 소괄호('( )') 안에 '매개변수'를 쓴다.

* 뒤이어 중괄호 안에 공식(=함수의 기능)을 써 준다.

* return 함수명.. 이렇게 작성하면 결과값이 나오게 할 수 있다.

 

(예)

funtion myFuntion(x) {

         let temp=2*x+3

         return temp

}

 

myFuntion(1)

 

...... 이렇게 하면 x(매개변수) 안에 '1'을 넣어, 공식에 의해 계산된 값이 출력(return) 된다. 

 

다만, 입력값과 출력값이 없이 작동하는 함수가 있다. (오히려 이 방식이 더 많이 쓰인다,고 한다.)

 

함수는 어떤 '주문(마법)'을 묶어주는 기능이 일차적이라고 생각해도 된다.

 

함수명은 개발자가 임의로(마음대로) 쓸 수 있지만, 가급적 그 기능에 걸맞는 단어를 선택하거나 새로 만들어서 쓰는 게 좋다.

 

★ 화살표 정의로 작성할 수도 있다.

 함수명 = (매개변수) => { 함수내용 } ...... 이런식으로 작성해도 똑같다. (요즘 이런 식으로 많이 씀.)


조건문

 

if else문을 쓰면 되는데, 중첩해서 쓸 수 있다.

아래 순서도를 조건문으로 표현하면 ?

 

출처 : 조코딩 (유튜브)

 

if (money > 5000) {

     rideTaxi();

  else if(money>2000) {

     rideBus();

  else {

      walk();

}