JavaScript 시작하기

1. 📒 자바스크립트란?

자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어이다.
HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있으며, 자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있다.
또한, 현재 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있다.

2. 자바스크립트의 특징

1. 자바스크립트는 객체 기반의 스크립트 언어이다.
2. 자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어이다.
3. 자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다.

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

3. 자바스크립트의 기본 문법

📌 1. Console.log

console.log는 자바스크립트의 가장 기본적인 디버깅(출력)방법이다. 여기서 출력이란 값을 눈에 보이도록 나타내는 것이다.
✍

console.log("camille");

개발자들 사이에서는 흔히 "찍어본다."라는 표현을 많이 사용하는데 이는 콘솔로그로 특정 값을 화면에 나타낸다는 의미이다.

"콘솔에 로그를 남긴다." 여기서 콘솔은 콘솔 탭을 의미 하는 것이며, 원래 콘솔의 의미는 브라우저 안에 담겨있는데 브라우저상에 마우스 오른쪽 버튼을 누른 뒤, 인스펙트(검사) 버튼을 누르면, 오른쪽 위 콘솔이라는 탭이 나타난다.

기본형 : console.log(출력 대상);

📌 2. Variable (변수)

변수는 데이터를 담을 수 있는 대상을 의미한다.
✍

let myNumber = 500;

여기서 myNumber라는 변수에 숫자 500을 담을 수 있는데 여기서 myNumber은 변수의 이름이 되며, 500은 변수에 담긴 값이 된다.

데이터를 변수에 담아 사용하려면 두가지 단계를 거쳐야 하는데, 아래와 같다.

1. let myNumber 이름을 선언(Declare)해 준다.
2. let myNumber = 500; 데이터를 할당(or대입) 해 준다.
   = 이제부터 myName은 500라는 값을 대신 지칭하게 된다.

let myNumber = 5;
let myNumber = 5;
위에서 알 수 있듯이 변수(variable)에 값을 할당할 때 대입연산자(=)를 사용한다.

대입연산자는 말 그대로 오른쪽 항에 있는 값을 왼쪽에 있는 변수에 대입하는 역할한다.
let myVar = 5;
let myNum = myVar;

👩‍🏫null & undefined

null과 undefined는 모두 자바스크립트의 데이터 타입이다.
undefined는 선언은 됐지만 아직 value가 할당되지 않은 경우를 의미하며,
null은 '빈 값(blank)'을 의미하는데 사용자가 준 value이다.
그래서 undefined와 다르게 자바스크립트가 자동적으로 null 이란 값을 줄 수는 없다.
포괄적인 의미로 '값이 없다'는 점에서 null과 undefined가 비슷한 것 같지만 둘은 엄격하게는 같지 않습니다.

let name;            // undefined
let name = null;     // null

console.log(null == undefined);   // true
console.log(null === undefined);  // false
let name;            // undefined
let name = null;     // null

console.log(null == undefined);   // true
console.log(null === undefined);  // false

엄격일치연산(===)는 value뿐만 아니라 type도 같아야 true가 나온다.
그러면 null과 undefined의 type은 어떤 타입일까? 타입을 알아보기 위해서
typeof 연산자를 사용해 보자.

console.log(typeof null);       // object
console.log(typeof undefined);  // undefined
console.log(typeof null);       // object
console.log(typeof undefined);  // undefined

null의 type이 object가 나왔는데, 이유가 뭘까?? null은 위에 설명한대로 '값이 없음(blank)'을 의미하는 '할당된' value이기 때문이다.

📌 3. 데이터 타입

기본타입(Primitive type) : Number, String, Boolean, Undefinde, Null
참조타입(Reference typr) : Object, Array, Function

✍ 1) Number

: 0, 1, 500, 1000 ··· 숫자 타입 모두

let myNumber1 = 2;
let myNumber2 = 100;
let myNumber3 = 400;

console.log(myNumber2); 
< 400

console.log(myNumber2 + myNumber3)
< 500
8
console.log(myNumber1 * myNumber3)
< 800

console.log(myNumber1 % muNumber3)
< 2

• 나머지 연산 %는 앞의 숫자를 뒤의 숫자로 나눈 뒤 나머지만 구한다.

✍ 2) String

: 'camille', 'dog', 'peach' ···우리가 사용하는 문자열 모두

console.log("Cat");
< Cat

console.log("Graph");
< Graph

let myName = "Camille";
console.log(myName);
< Camille

let myNumber1 = 2;
let myNumber2 = 100;
console.log('2 plus 100 equal to ' myNumber1 + myNumber2);
< 2 plus 100 equals to 102

👉 자바스크립트의 String을 더하는 여러가지 방법

1. +operator

let a ='old';
let b = 'tree';
let c = a + b;
console.log(c);
< old tree

2. • operator2

     let msg = 'There are';
     mag += 'three falcons';
     msg += 'in the sky'
     console.log(msg);
     < There are three three falcons in the sky

3. join method

   let words = ['There', 'are', 'three', 'falcons', 'in', 'the', 'sky'];
   let msg = word.join(' ');
   console.log(msg);
   <There are three three falcons in the sky

4. concat method

   let a = 'old';
   let c = a.concat(`tree`);
   console.log(c);

5. fotmatting strings

   let w1 = 'two';
   let w2 ='eagles';
   let msg = 'Threr are ${w1} ${w2} in the sky';
   console.log(msg);
   <There are two eagles in the sky

✔ concat 함수는 여러범위 및 문자열의 텍스트를 결합하지만, 디리미터 또는 ignoreEmpty인수를 제공하지 않는다.
예를 들어 =CONCAT("The"," ","sun"," ","will"," ","come"," ","up"," ","tomorrow.")는 The sun will come up tomorrow. 를 반환합니다.

✔ 문자열의 총 길이 구하기

const strings = 'Hello! world!!'
console.log(strings.length);
< 14

console.log("The length of pepsi is",'pepsi'.length)
<The length of pepsi is 5
5는 숫자

console.log("The length of pepsi is" + 'pepsi'.length)
<The length of pepsi is 5
( 문자열 + 숫자 = 문자열로 ) 5는 스트링

✍ 3) Boolean

: true, false 참과 거짓 맞는지 틀렸는지 확인 할 때 사용

let myAnswer = true;
let yourAnswer = false;
console.log(myAnswer);
< true

✍ 4) Array

: [1, 2, 3, 4, 5, 6, 7] 값이 일렬로 모여있는데, 배열로 일반적인 숫자, 텍스트, 불리언 모두 들어갈 수 있음

let fruit =['apple', 'peach', 'banana'];

console.log(fruit);
<['apple', 'peach', 'banana']

✍ 5) Object

:
여러가지 데이터가 모여있는 묶음 으로 키 앞에이름을 꼭 붙여야함 시작을 중괄호로

let camille = {
  name: camille son,
  live: daejeon
  };

console.log(camille);
< name:camille son, live: daejeon

✍ 6) Function

: 함수라는 데이터 타입으로 함수 이름을 붙이고 중괄호 안에는 함수가 담당할 기능이 들어가 있음

  function camille() {
    let petName = "bbachon",
    console.log(petName)
    return petName
    };