JavaScript 문법 종합 1주차(1)

공부/JavaScript

JavaScript 문법 종합 1주차(1)

뀨뿌뀨뿌 2023. 5. 23. 00:58

1. JS 언어 특징 및 역사

기본적으로 컴퓨터는 0과 1만 이해할 수 있는데, 사람과 컴퓨터 간의 소통이 필요해지기 시작
=> 프로그래밍 언어를 통해 소통을 시작함

ⅰ. JavaScript 의 역사

1995 탄생
- 넷스케이프 커뮤니케이션(LiveScript -> JavaScript)
- 자바스크립트는 브라우저 동작 스크립트 언어임
1999년 자바스크립트 표준화(ECMA-262) 완료
2005년 AJAX등장
✔ AJAX
- 자바스크립트를 기반으로 함
- 버튼하나를 누르면 전체가 새로고침이 실행되다가 AJAX로 인해 버튼하나만 누르면 해당 부분만 새로고침이 실행
=> 많은 개발자가 사용하게 됨
- 비동기 웹 애플리케이션 개발 가능
- 폭발적인 UX 향상
  ✔ UX(User Experience) - 사용자 경험
2008년 V8 엔진 출시(google) -> 구글 크롬에 탑재돼서 등장함
- super fast(코드 실행 속도 상당 부분 개선됨)
- 컴파일러, 메모관리 시스템
2009년 Node.js 등장, 서버 개발 활성화
✔ Node.js로 인하여 브라우저 내부에서만 작동하던 자바스크립트가 브라우저 밖에서도 사용이 가능해짐
- 자바스크립트 하나의 언어로 FrontEnd + BackEnd + DB(MongoDB) = FullStack 전체를 사용할 수 있게 됨
2015 ECMScript 6(ES6) 버전 출시
2016년 프론트엔드 프레임워크(React, Vue, Angular) 대중화, SPA 개발 활성화

현재 자바스크립트는 프론트엔드 및 백엔드 개발 분야에서 널리 사용되며, Node.js를 이용한 서버 개발도 활발하게 이루어지고 있음

ⅱ. JS 언어의 특징

객체 지향 프로그래밍지원
- 객체 지향 vs 절차지향
  ✔ 절차 지향은 순서대로 프로그램을 만드는 것
  ✔ 객체 지향은 역할을 가지고 있는 객체라는 그룹으로 묶어서 그룹 단위로 프로그래밍을 실행하는 것
동적 타이핑 언어
- 자바스크립트가 아닌 다른 언어에서는 변수를 지정할 때 타입으로 지정하는데 자바스크립트는 데이터 타입이 런타임에서 결정됨
  ✔ 런타임이란 프로그램이 실행되는 타임
함수형 프로그래밍 지원
비동기 처리
클라이언트 측 및 서버 측 모두에서 사용 가능

2. 기본 문법

ⅰ. 변수와 상수

변수란?
✔ 기억하고 싶은 값을 메모리에 저장한 후 저장된 값을 읽어 들여서 재사용함
변수의 5가지 주요 개념
✔ 변수이름
- 변수이름 : 저장된 값의 고유 이름
- 보통 영어로 작성
- 키워드 바로 뒤에 작성
✔ 변수 값
- 변수에 저장된 값
✔ 변수 할당
- 변수에 값을 저장하는 행위
- 변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위
=> 키워드를 이용해서 변수를 만들어달라고 컴퓨터에 알림
✔ 변수 참조
- 변수에 할당된 값을 읽어오는 것
변수를 선언할 수 있는 3가지 키워드
- var, let, const

// 1. var
// -> 재선언이 가능함
// -> 재할당이 가능함
var myVar = "Hello World"
var myVar = "Test 1"
myVar = "GoodBye"
console.log(myVar)

// 2. let
// -> 재선언이 블가능함
// -> 재할당이 가능함
let myLet = "Hello World1"
// let myLet = "Test 2"       // 에러발생
myLet = "GoodBye1"
console.log(myLet)

// 3. const
// -> 재선언이 블가능함
// -> 재할당이 블가능함
const myConst = "Hello World3"
// const myConst = "Test 1"   // 에러발생
// const myConst = "GoodBye2" // 에러발생
console.log(myConst)

변수의 선언과 할당은 따로 사용할 수 있음
=> 특별한 이유가 있지 않으면 따로 할당하지 않음

var myVar1
myVar1 = 3

ⅱ. 데이터 타입

자바스크립트는 코드가 실행될 때 데이터 타입이 결정됨
◾ runtime - 코드를 작성할 때가 아니라, 실제 코드가 실행될 때

// java
String a = "abc";

// JavaScript
const s = "abc"

숫자
- 숫자데이터에는 정수형, 실수(float), 지수형(Exp), NaN, Infinity(무한대), -Infinity, 객체(Object), 배열(Array)이 존재함
- 큰따옴표나 작은따옴표 안에 숫자를 넣으면 데이터 타입이 string이 되기 때문에 숫자는 그냥 숫자만 작성
- NaN은 자바스크립트에서 숫자가 아님을 나타내는데 보통 수학적으로 정의되지 않는 계산을 수행하거나, 숫자가 아닌 값을 숫자로 변환하려고 할때 발생

// 1-1. 정수
let num1 = 10
console.log(num1)
console.log(typeof num1)    // typeof -> 데이터 타입을 확인하는 명령어

// 1-2. 실수(float)
let num2 = 3.14
console.log(num2)
console.log(typeof num2)

// 1-3. 지수형(Exp)
let num3 = 2.5e5    // 2.5 * 10^5
console.log(num3)
console.log(typeof num3)

// 1-4. 
// Nan : Not a Number, JavaScript 에서 숫자가 아님을 나타내는 값
let num4 = "Hello" / 2
console.log(num4)   // NaN

// 1-5. Infinity(무한대)
let num5 = 1 / 0
console.log(num5)   // Infinity
console.log(typeof num5)    // number

// 1-6. -Infinity(무한대)
let num6 = -1 / 0
console.log(num6)     // -Infinity
console.log(typeof num6)    // number

문자열(String)
- 문자열은 문자의 나열
- 작은따옴표나 큰따옴표로 감싸서 표현
- 문자열의 길이 확인
  ✔ 변수명.length
- 문자열 결합하기(concatenation)
  ✔ 변수명.concat(변수명)
- 문자열 자르기
  ✔ 변수명.substr(어디서부터 자를지(숫자), 몇 개까지 자를지(숫자))
  ✔ 변수명.slice(시작할 숫자, 끝낼 숫자)
- 문자열 검색
  ✔ 변수명.search("검색할 문자열")
  - 검색한 문자열이 몇 번째부터 시작되는지를 찾아줌
- 문자열 대체
  ✔ 변수명.replace("원래단어", "바꿀단어")
- 문자열 분할
  ✔ 변수명.split("무엇을 기준으로 자를지")

// 문자열 기본
let str = "Hello World!"
console.log(str)
console.log(typeof str)

// 문자열 길이 확인하기
console.log(str.length)   // 12

// 문자열 결합하기(concatenation)
let str1 = "Hello,"
let str2 = "world!"
let result = str1.concat(str2)
console.log(result)     // Hello,world!

// 2-3. 문자열 자르기
let str3 = "Hello, World!"
console.log(str3.substr(7, 5))      // World
console.log(str3.slice(7, 12))      // World

// 2-4. 문자열 검색
let str4 = "Hello, World1"
console.log(str4.search("World"))      // 7

// 2-5. 문자열 대체
let str5 = "Hello, World!"
let result01 = str5.replace("World", "JavaScript")      
console.log(result01)         // Hello, JavaScript!

// 2-6. 문자열 분할
let str6 = "apple, banana, kiwi"
let result02 = str6.split(",")       
console.log(result02)         // [ 'apple', ' banana', ' kiwi' ]

불린언(Boolean)
- 참(true)이나 거짓(false)인지에 따라서 논리적으로 판단해서 여러 가지 선택을 하기 때문에 프로그래밍 언어에서 중요함

let bool1 = true
let bool2 = false

console.log(bool1)
console.log(typeof bool1)
console.log(bool2)
console.log(typeof bool2)

undefined
- un : not | define : 정의하다
- 값이 할당되지 않은 변수를 의미함

let x
console.log(x)

null
- 값이 존재하지 않음을 명시적으로 나타내는 방법
- undefined와 같지 않음

let y = null
console.log(y)

Object(객체)
- key와 value를 가지는 값

let person = {
  name: 'choi',
  age: 20,
  isMarried: true
}

console.log(typeof person)

array(배열)
- 여러 개의 데이터를 순서대로 저장하는 데이터 타입

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

ⅲ. 형변환

자바스크립트의 데이터 타입을 다른 타입으로 바꿈
형변환에는 명세적 형 변환과 암시적 형변환이 있음
암시적 형 변환
- 의도하지는 않았지만 암시적으로 바꿈
- 문자열
  ✔ 문자열과 다른 데이터 타입이 더하기 연산자로 만나면 문자열이 우선시 됨
- 숫자
  ✔ 더하기 연산자가 아닌 다른 연산자를 빼거나 곱하기 나누기 등의 연산자를 만나면 숫자가 우선시됨
  ✔ 문자랑 문자가 더하기가 아닌 다른 연산자로 만나도 숫자가 됨

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

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

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

let result4 = "2" * "3"
console.log(result4)        // 6
console.log(typeof result4)         // number

명시적 형 변환
- 개발자가 의도적으로 데이터 타입을 바꿈
- 어떠한 타입으로 형 변환한다는 것을 명시적으로 적어야 함

// Boolean
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, 빈 문자열이 아닌 값이 있는 문자열은 무조건 true가 나옴
console.log(Boolean({}))          // true, 객체는 값이 비어있어도 true

// 문자열
let result5 = String(123)
console.log(typeof result5)     // string
console.log(result5)            // 123

let result6 = String(true) 
console.log(typeof result6)     // string
console.log(result6)            // true

let result7 = String(false)
console.log(typeof result7)     // string
console.log(result7)            // false

let result8 = String(null)
console.log(typeof result8)     // string
console.log(result8)            // null

let result9 = String(undefined)
console.log(typeof result9)     // string
console.log(result9)            // undefined

// 숫자
let result10 = Number("123")
console.log(result10)           // 123
console.log(typeof result10)    // number

ⅳ. 연산자

자바스크립트에서는 변수와 상수를 이용해서 많은 연산들을 처리하는데 이때 필요한 게 연산자
기본 연산자

// 더하기 연산자
console.log(1 + 1)      // 2
console.log(1 + "1")    // 11

// 빼기 연산자
console.log(1 - "2")    // -1
console.log(1 - 2)      // -1

// 곱하기 연산자(*)
console.log(2 * 3)      // 6
console.log("2" * 3)    // 6

// 나머지 연산자(/)
console.log(4 / 2)      // 2
console.log("4" / 2)    // 2

// 나누기 연산자(/) vs 나머지 연산자(%)
console.log(5 / 2)      // 2.5
console.log(5 % 2)      // 1

할당 연산자

// 등호 연산자(=)
let x = 10
console.log(x)

// 더하기 등호 연산자(+=)
x += 5
console.log(x)

// 빼기 등호 연산자(-=)
x -= 5       // x = x -5
console.log(x)

// Q. x를 10으로 만들어라
x -= 20     // x = x - 20
console.log(x)

// 곱하기 등호 연산자(*=)
let a = 10
a *= 2
console.log(a)    // 20

비교 연산자
- ture 또는 false를 반환하는 연산자
- 좌, 우 혹은 어떠한 값을 비교해서 true나 false 값을 내는 연산자
- 일치 연산자(===)
  ✔ 타입까지 일치해야 true를 반환하는 연산자
- 불일치 연산자(!==)
  ✔ 타입까지 일치해야 false를 반환하는 연산자
- 등호로 비교하는 연산자
  ✔ 등호에 따라서 값을 비교한 후 true 또는 false를 반환

// 일치 연산자
console.log(2 === 2)    // true
console.log("2" === 2)  // false
console.log(2 === "2")  // false

// 불일치 연산자
console.log(2 !== 2)    // false  -> 숫자 2가 숫자 2와 다르니? 아니
console.log("2" !== 2)  // true
console.log(2 !== "2")  // true

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

논리 연산자
✔ true와 false를 비교하는 연산자
- 논리곱 연산자(&&)
  ✔ 두 값이 모두 true일 때만 true를 반환
- 논리합 연산자(||)
  ✔ 두 값 중 하나라도 true인 경우 true를 반환
- 논리부정 연산자(!)
  ✔ 값을 반대로 바꿈

// 논리곱 연산자
console.log(true && true)   // true
console.log(true && false)  // flase
console.log(false && true)  // false
console.log(false && false) // false

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

// 논리부정 연사자
console.log(!true)      // false
let a = true
console.log(!a)         // false

삼항연산자
- 조건에 따라 값을 선택
- 조건 ? true일 때 반환할 값 : false일 때 반환할 값

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

// Q. 삼항연산자를 이용해서 y가
// 10보다 작은 경우를 작다로 console.log로 출력
// 10보다 크다면 크다를 출력
let y = 20
let aResult = y < 10 ? "작다" : "크다"
console.log(aResult)     // 크다

타입연산자(tyoeof)

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

ⅴ. 함수(function)

자바스크립트에서는 함수를 정의하여 코드의 재사용성을 높일 수 있음
input과 output을 가지고 있는 어떤 기능의 단위로 묶음
✔ input -> 매개변수(매개체가 되는 변수)
✔ output -> return문 뒤에 오는 값(반환값)
함수 선언문
- function 함수명 (매개변수) {
  // 함수 내부에서 실행할 코드
  }

// 두 개의 숫자를 입력 받아 덧셈을 한 후 내보내는 함수
function add (x, y) {
  return x + y
}

// 함수의 호출(사용)
// 함수명(입력값)
console.log(add(2, 3))

let funtionResult = add(3, 4)
onsole.log(funtionResult)

함수 표현식
- let 변수명 = funtion (매개변수) {
  // 함수 내부에서 실행할 코드
  }

let add2 = function (x, y) {
  return x + y
}

// add2를 가지고 10과 20을 더한 값을 출력해보기
let funtionResult2 = add2(10, 20)
console.log(funtionResult2)

함수 스코프
- 스코프란 변수의 영향 범위
- 전역 스코프(global scope)
  ✔ 선언된 변수는 어디에서든지 참조할 수 있음
- 지역 스코프(local scope)
  ✔ 선언된 변수는 해당 함수 내에서만 참조할 수 있음
- 블록 스코프(block scope)
  ✔ if문 내에서 선언된 변수는 해당 블록 내에서만 참조할 수 있음

// 전역 스코프
let x = 10;

function printX() {
  console.log(x);
}

printX();   // 10

// 지역 스코프
function printX() {
  let x = 10;
  console.log(x);
}

printX();

// 블록스코프
if (true) {
  let x = 10;
  console.log(x);
}

console.log(x);   // ReferenceError: x is not defined

화살표 함수
- ES6부터 추가된 문법
- 기본적인 화살표 함수
  let 변수명 = (매개변수) => {
  실행할 코드
  }
- 한 줄로
  let 변수명 = (매개변수) => 실행할 코드
  ✔ return문을 뺄 수 있는 조건은 중괄호 안에 있는 코드가 한 줄이면 가능하고 중괄호를 같이 생략해 줌

let arrowFun01 = (x, y) => {
  return x + y
}

let arrowFun02 = (x, y) => x + y

function testFun(x) {
  return x
}

let arrowFun03 = x => x

저작자표시

'공부 > JavaScript' 카테고리의 다른 글

JavaScript 문법 종합 1주차(숙제) (0)	2023.05.24
JavaScript 문법 종합 1주차(2) (0)	2023.05.24
JavaScript 기초4 (0)	2023.05.03
JavaScript기초 3 (1)	2023.05.02
JavaScript기초 2 (0)	2023.04.28

현재글JavaScript 문법 종합 1주차(1)

rosie

코딩부트캠프후기, 항해99후기, 부트캠프추천, 항해99장점, 항해99단점, ㅇㄻ,

Today :
Yesterday :

rosie

JavaScript 문법 종합 1주차(1)

1. JS 언어 특징 및 역사

ⅰ. JavaScript 의 역사

ⅱ. JS 언어의 특징

2. 기본 문법

ⅰ. 변수와 상수

ⅱ. 데이터 타입

ⅲ. 형변환

ⅳ. 연산자

ⅴ. 함수(function)

'공부 > JavaScript' 카테고리의 다른 글

'공부/JavaScript'의 다른글

티스토리툴바

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

JavaScript 문법 종합 1주차(1)

1. JS 언어 특징 및 역사

ⅰ. JavaScript 의 역사

ⅱ. JS 언어의 특징

2. 기본 문법

ⅰ. 변수와 상수

ⅱ. 데이터 타입

ⅲ. 형변환

ⅳ. 연산자

ⅴ. 함수(function)

'공부 > JavaScript' 카테고리의 다른 글

'공부/JavaScript'의 다른글

관련글

티스토리툴바