JavaScript 문법 종합반 - 1주차 (1)

본 과정은 내일배움캠프 웹개발 사전캠프로 지급받은 강의의 내용을 바탕으로 정리한 글입니다.

자바스크립트의 특징과 역사

컴퓨터 : 0과 1만을 사용함
프로그래밍 언어 : 컴퓨터와 소통하는 것

• 1995년 자바스크립트 등장
  넷스케이프에서 만든 브라우저동작을 위한 스크립트 언어
  기존에 livescript였는데 javascript로 바꿈

• 2005년 AJAX(에이젝스) 등장
  기존엔 페이지 전체 새로고침이 되었었는데 해당 영역만 새로고침이 가능해져서
  UX(User Exprience) 향상이 됨

• 2008년 V8 엔진 출시

• 2009년 Node.js 등장
  기존에는 웹 브라우저만 가능했는데 서버개발도 사용이 가능해짐
  하나의 언어로 FrontEnd, BackEnd, DB를 통틀어서 FullStack이 가능해짐

• 2015년 ES6버전 출시

• 2016년 프론트엔드 프레임 워크 대중화

자바스크립트 언어 특징

1. 객체지향 프로그래밍 지원
   객체라는 그룹으로 묶어서 처리함

2. 동적 타이핑 지원
   변수 선언을 할때 타입을 지정하지 않아도 되고 런타임(코드가 실행되는 시점)에 결정됨

3. 함수형 프로그래밍 지원
   함수를 사용해서 프로그래밍이 가능함

4. 비동기 처리

5. 클라이언트 측 및 서버 측 모두 사용 가능
   Node.js 이용해서 서버개발도 가능해짐

---

Node.JS

1. 자바스크립트 코드를 VS Code로 만든다
2. 터미널에서 node 파일명.js를 입력하면 실행이 된다

var a = 1;
var b = 2;
var c = a+b;

☞ 터미널에서 node 01.js를 입력해서 hello world가 출력되었다.

clear : 터미널의 내용을 지우는 것

자바스크립트 기본

//주석 : JS연산을 안함

변수

기억하는 값을 메모리에 저장하고 재사용한다.

var myText = 'hello world'
console.log(myText)

변수의 5가지 개념

변수 이름 : 저장된 값의 고유 이름 ex) myText

변수 값 : 변수에 저장된 값 ex) 'hello world'

변수 할당 : 변수에 값을 저장하는 행위 ex) =

변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위 ex) var

변수 참조 : 변수에 할당된 값을 읽어오는것 ex) a+b

변수의 종류

• var

var myText1; // 이런식으로 따로도 가능하다.
myText1 = 2;

재선언 가능
재할당 가능

• let
  재선언 불가
  재할당 가능

• const
  재선언 불가
  재할당 불가

데이터 타입

• 데이터 타입은 런타임에 결정됨
• 데이터 타입을 알수 있는 방법은 console.log(typeof 변수명)

데이터타입 숫자

console.log(typeof 변수명)하면 number로 출력

1. 정수

let num1 = 10;
console.log(num1)
console.log(typeof num1)

☞ 일반 정수는 그냥 숫자만 입력 "2"는 숫자가 아닌 문자열임

2. 실수(float)

let num2 = 3.14
console.log(num2)
console.log(typeof num2)

3. 지수(Exp)

let num3 = 2.5e5; // 2.5 * 10^5(10의 5제곱)
console.log(num3)
console.log(typeof num3)

☞ 결과값은 250000 출력

4. NaN

let num4 = 'hello / 2';
console.log(num4) 

☞ 결과값은 NaN 출력 (Not a number)

5. infinity (무한대)

let num5 = 1 / 0;
console.log(num5)

☞ 결과값은 Infinity 출력

6. infinity (무한대)

let num6 = -1 / 0;
console.log(num6)

☞ 결과값은 -Infinity 출력

데이터타입 문자열 string

• 문자의 나열
• '' 혹은 ""으로 표기
• console.log(typeof 변수명)하면 string으로 출력

let str = "hello world";
console.log(str)
console.log(typeof str)

1. 문자열의 길이 확인하기 length

let str = "hello world";
console.log(str.length);

☞ 11로 출력됨

2. 문자열 결합하기 concat

let str1 = 'hello,';
let str2 = 'world';
let result = str1.concat(str2)
console.log(result)

☞ 변수명.concat(붙일 변수명)은 문자열을 합치게 한다.

3. 문자열 자르기 substr와 slice

let str3 = "Hello, world!";
console.log(str3.substr(7, 5)); // "world" 시작위치부터 몇개까지 표시할건지 
console.log(str3.slice(7, 12)); // "world" 시작위치부터 끝위치까지

4. 문자열 검색 search
   몇번째부터 시작이 되는지 찾을 수 있음

let str4 = "Hello, world!";
console.log(str4.search('world!'))

☞ 7번째부터 시작이라는걸 알려줌

5. 문자열 대체 replace

let str5 = "Hello, world!";
let result01 = str5.replace("world",
"javascript")
console.log(result01)

☞ Hello, javascript!로 출력

6. 문자열 분할 split

let str6 = "apple, banana, kiwi";
let result02 = str6.split(",");
console.log(result02); //

☞ 문자열이 각각 ,를 기준으로 ["apple", " banana", " kiwi"] 배열로 나타난다.

데이터타입 불린

불린은 참(true)과 거짓(false)을 판단함
if문에 사용함

let bool1 = true;
let bool2 = false;
console.log(bool1)
console.log(bool2)

☞ true와 false로 출력

underfined

선언은 했으나 할당이 되지 않음

let x;
console.log(x); // undefined

null

값이 존재하지 않음, 의도적으로 값이 없다는걸 명시하는 것

let y = null;
console.log(y)

object

• key value pair
• {}을 사용함

let person = { name: 'Alice', age: 20 };
person.name // 'Alice'
person.age // 20

array (배열)

• 여러 데이터를 순서대로 저장하는 데이터타입
• [] 을 사용함
• , 기준으로 순서 나열
• 인덱스가 되어서 순서가 가능함
• 0부터 시작

let numbers = [1, 2, 3, 4, 5];
let fruits = ['apple', 'banana', 'orange'];

형변환

• 형태를 바꾸는 것
• 명시적 형변환 : 개발자가 의도적으로 바꾸는 것
• 암시적 형변환 : 의도하지 않았지만 자동으로 바뀌는것

암시적 형변환

암시적 형 변환은 자바스크립트에서 자동으로 수행되는 형 변환이며, 일반적으로 연산자를 사용할 때 발생합니다.

1. 문자열

let result1 = 1 + "2"
console.log(result1)
console.log(typeof result1)

let result2 ="1" + true; 
console.log(result2)
console.log(typeof result2)

☞ 데이터타입은 문자열(string)이 출력됨\
☞ 12와 1true로 출력
☞ {객체}, null, underfined이 문자열과 만나면 문자열이 우선시 된다.

2. 숫자

let result3 = 1 - "2"; 
console.log(result3)
console.log(typeof result3)

let result4 = "2" * "3"; 
console.log(result4)
console.log(typeof result4)

☞ 결과는 -1과 6으로 출력
☞ 데이터타입은 숫자(number)로 출력
☞ 빼기, 곱하기, 나누기 연산자가 나온 경우 숫자를 우선시 한다.

명시적 형변환

의도적으로 형변환 하는 것

1. 불린

console.log(Boolean(0));   // false
console.log(Boolean(""));   // false
console.log(Boolean(null));   // false
console.log(Boolean(undefined));   // false
console.log(Boolean(NaN));   // false
console.log(Boolean("false"));   // true
console.log(Boolean({}));   // true

2. 문자열

let result5 = String(123);       // "123"
console.log(typeof result5);
console.log(result5);
let result6 = String(true);      // "true"
console.log(typeof result6);
console.log(result6);
let result7 = String(false);     // "false"
console.log(typeof result7);
console.log(result7);
let result8 = String(null);      // "null"
console.log(typeof result8);
console.log(result8);
let result9 = String(undefined); // "undefined"
console.log(typeof result9);
console.log(result9);

☞ 모두 데이터 타입은 string이 됨

3. 숫자

let result10 = Number("123")
console.log(result10)
console.log(typeof result10)

☞ 문자열도 숫자로 출력됨

---

연산자

+, -, *, / , %를 사용할 수 있음

1. 더하기 연산자 +

console.log(1 + 1);       // 2
console.log(1 + "1");     // 11

☞ 숫자 + 숫자는 연산이 되지만 숫자 + 문자열은 단순하게 붙여줌

2. 빼기 연산자 -

console.log(1 - "2") // -1
console.log(1 - 2) // -1

☞ 빼기 연산자는숫자를 우선시 해서 둘다 -1로 출력됨

3. 곱하기 연산자 *

console.log(2 * 3);
console.log("2" * 3);

☞ 마찬가지로 숫자가 우선시 되어서 6으로 출력됨

4. 나누기 연산자 /

console.log( 4 / 2);
console.log("4" / 2 );

☞ 마찬가지로 숫자가 우선시 되어서 2로 출력됨

5. 나누기 연산자 / 와 나머지 연산자 %

console.log(5 / 2); // 2.5
console.log(5 % 2); // 나머지 1 

할당연산자

1. 등호 연산자 (=)
   let x = 10;

2. 더하기 등호 연산자 (+=)
   x에 5를 더하는것

x += 5;
x = x+5

☞ 둘다 같은 것

3. 빼기 등호 연산자 (-=)
   x에 5를 빼는 것
   x -= 5;
   x = x-5

☞ 둘다 같은 것

4. 곱하기 등호 연산자 (*=)

let a = 10;
a *= 2;
console.log(a);

☞ 출력하게 되면 20이 나옴

비교 연산자

1. 일치 연산자 (===)
   데이터 타입까지 일치해야 true를 반환하는 연산자

console.log(2 === 2); // true
console.log("2" === 2); // false
console.log(2 === "2"); // false

2. 불일치 연산자 (!==)
   값이 서로 다르면 true가 나옴
   console.log(2 !== 2); // false
   console.log("2" !== 2); // true
   console.log(2 !== "2"); // true

3. 작다 연산자 < 와 작거나 같다 <=
   console.log(2 < 3); //true
   console.log(2 <= 3); // 작거나 같다 true

논리 연산자(true/false)

1. 논리곱 연산자 &&
   console.log(true && true); // true
   console.log(true && false); // false
   console.log(false && true); // false
   console.log(false && false); // false
   ☞ 둘다 true이여야 true를 반환하는 연산자

2. 논리합 연산자 ||
   console.log(true || true); // true
   console.log(true || false); // true
   console.log(false || true); // true
   console.log(false || false); // false

☞ 둘 중 하나라도 true라면 true로 반환하는 연산자

3. 논리부정연산자 !
   console.log(!true); // false
   console.log(!false); // true
   console.log(!(2 > 1)); // false
   ☞ 반대로 출력이 가능함

삼항 연산자

조건에 따라 값을 선택할수 있다.

let y = 10;
let result = (y > 5) ? "크다" : "작다";
console.log(result);   // "크다"

삼항인 이유:
(y > 5) : 1항
"크다" : 2항
"작다" : 3항

☞ y가 5보다 크다면? "크다"라고 나타내고 아니라면 "작다"라고 나타내라는 뜻

typeof 연산자

console.log(typeof "5"); // string

---

함수 (function)

input과 output을 가진 기능의 단위를 함수라고 명명함
자바스크립트 내에서 기능의 단위로 묶은 다음 재활용을 한다는 의미

• 함수의 형식

function(){} 

1. 함수 선언문

function add(매개변수){
	//함수 내부의 필요한 로직들 
} 

1) 함수 출력
출력은 항상 return을 통해서 함

2) 두개의 숫자를 입력 받아서 덧셈을 한 후 내보내는 함수

function add(x, y){
  return x + y;
}

2. 함수표현식

let add2 = function(x, y){ 
  //왼쪽에 add2라는 이름을 써둬서 함수명을 안적어도됨
  return x + y
}

3. 함수 호출
   함수 호출은 함수를 사용한다는 의미

//첫번째 방법
function add(x, y){
  return x + y;
}

console.log(add(2, 3));

//두번째 방법
let Result = add(3, 4)
console.log(Result);

☞ 함수명(입력값)이 형식이므로 add(2, 3)으로하면 5가 출력됨
☞ 두번째처럼 할당해도 됨

---

함수 용어 정리

함수는 input과 output이 있어야함

[input]
매개 변수 : function add(x, y)의 ()안에 들어가는 x, y를 매개변수라고 함
= 매개체가 되는 변수

[output]
반환값 : return문 뒤에 오는 값

스코프

스코프 : 변수가 어디 범위까지 영향을 끼칠수 있는가?
전역변수 : 모든 범위에서 영향을 끼치는 변수
지역변수 : 함수 내에서 영향을 끼치는 변수

let x = 10; //전역변수

function printX() {
console.log(x); // 지역변수
}
console.log(x)
printX(); // 10

화살표 함수

ES6에서 새로생김

function add (x, y){
return x + y;
}

//화살표 함수
let arrow =  (x, y) => {
return x + y;
}

// 한줄로 출력 
let arrow =  (x, y) => x + y; //별도의 내용이 없을 때 가능

// 매개변수가 하나일 경우 
let arrow2 = (x) => x
let arrow2 = x => x //이렇게 생략가능

오늘의 한줄평 : 아직 끝나지 않았다. 매우 내용이 길어서 일단 중간에 정리해서 올리는 TIL! 오늘은 팀이 바뀌었다 ㅇ0ㅇ! 새로운 기분 :) 자바스크립트 그나마 틈틈히 공부해서 이해가 잘 되는 것 같다.