SOJU 2기

[SOJU] JavaScript (1)

idleday 2023. 4. 25. 02:59
더보기
  1. JavaScript 강의를 듣고 정리한다.
  2. HTML과 CSS로 만든 프로젝트에 JavaScript로 몇가지 기능을 추가한다.

1. 필수 강의 정리

스스로 기억하고 싶은 것만 기록

 

[드림코딩] 자바스크립트 기초 강의 (ES5+)

 

자바스크립트 기초 강의 (ES5+): 같이 노트를 작성하며 배워요 📒

 

www.youtube.com

 

 

더보기

1. 자바스크립트의 역사와 현재 그리고 미래 (JavaScript, ECMAScript, JQuery, Babel, Node.js)

 

탄생배경
동적 기능을 구현하기 위한 스크립트 언어 (1995)
자바의 인기에 업혀가려고 LiveScript -> JavaScript
마소의 JScript에 지쳐 ECMAScript로 표준화(1997)
AJAX도입(2004) - 서로 다른 브라우저에 구애받지 않으려고 나온 제이쿼리 등 라이브러리 
ECMAScript6 (2015)
다양한 브라우저들의 자바스크립트 엔진(크롬의 V8 등)
개발은 최신으로, 배포는 자바스크립트 트랜스컴파일러로(Babel 등)
SPA를 구현하기 위한 다양한 프레임워크(React, Vue 등)

 

더보기

2. 콘솔 출력, script async 와 defer의 차이점

NodeJS: 브라우저 없이 자바스크립트를 실행 가능한 런타임 엔진
Dev Tools
MDN(developer.mozilla.org) : 공식사이트처럼 이용하세요
'use strict' : 바닐라JS 작성시 strict 모드로 자바스크립트의 유연성으로 인한 위험 방지, ECMAScript5에 추가되어있음, 성능에도 도움된다.
async vs defer
브라우저는 한줄한줄 HTML&CSS 파싱하며 DOM요소로 변환하다가<script> 태그를 만나면 자바스크립트를 실행한다
parsing HTML - ( fetching js - executing js ) - parsing HTML

async 옵션: HTML파싱과 병렬로 js다운로드
defer 옵션: HTML파싱과 동시에 js 다운받다가 파싱 후 js 실행

 

 

더보기

3. 데이터타입, data types, let vs var, hoisting

변수(Variable) - Mutable, read/write
let : 변수 선언 (ES6), 전역변수(global variable)
var : 선언 전 값 할당 가능, 블록스코프 적용X
상수(Constant) - Immutable, readonly
const : 보안성, 쓰레드 안전성을 위해  
Variable types
primitive(single item) : 값 자체가 메모리에 저장됨
object (box container) : 객체가 가리키는 참조값이 메모리에 저장됨
function : first class function
primitive type

number : Infinity, -Infinity, NaN, bigInt
string : `template literals`
boolean : true, false(0, null, undefined, NaN, '')
null & undefined 
symbol : 고유식별자, 우선순위 주고싶을때 + {Symbol.for, symbol.description}
Dynamin typing
선언이 아닌 런타임 시에 타입 결정

 

 

더보기

4. 연산자operator, if, for loop

연산자(operator)

String concatenation (+)
Numeric operators (+, -, /, *, %, **)
Increment & decrement (++, --)
할당연산자(=), 비교연산자(>,>=, <)
논리연산자 (||or, &&and, !not)

* 무거운 연산일수록 뒤에서 체크
||(or) : finds the first truthy value -> 유효성 체크시 단순 value는 앞에, 표현식이나 함수는 마지막에 배치해서 호출
&&(and) : finds the first falsy value -> null체크 nullableObject && nullableObject.something (null 아닌 경우에만 값 실행)
동등연산자 (Equality)

==(loose equality)
===(strict equality)

 

 

더보기

5. Arrow Function, 함수의 선언과 표현

Function
= subprogram
함수명은 동사형태로
하나의 함수는 한가지 일만!
object → 변수에 할당, 인자로 전달, 반환 가능
Parameters
premitive 파라미터 : passed by value
object 파라미터 : passed by reference
Default parameters (ES6)
파라미터에 값이 전달되지 않을 때, 값이 대체되어서 사용된다
function showMsg(message, from = 'unknown') {
	console.log(`${message} by ${from}`);
}
showMsg('Hi!')	//Hi! by unknown
Rest parameters (ES6)
전개연산자 - 배열형태로 전달됨
function printAll(...args) {
	for(let i=0; i<args.length; i++){
    	console.log(arg[i]);
    }
    
    for(const arg of args){
    	console.log(arg);
    }
    
    args.forEach((arg) => console.log(arg));
}

printAll('dream', 'coding', 'ellie');​
  • Local scope
  • return undefined or return a value
  • Early return, early exit
  • Hoisting : JS엔진이 선언된 함수를 제일 위로 끌어올려주는것
Function Expression : 선언된 다음부터 할당 가능
Function Declaration : 선언되기 이전에 호출 가능

 

named function

  • better debugging in debugger's stack traces
  • recursions

 

anonymous function (익명 함수)

const print = function() {	// anonymous function
	console.log('print');
}

 

Arrow function

const simplePrint = () => console.log('print');		// arrow function
const simpleAdd = (a,b) => a + b;
const simpleMultiply = (a,b) => {
	// do something more
    return a * b;
};

 

IIFE (Immediately Invoked Function Expression)

(function hello() {		// IIFE
    console.log('IIFE');
})();

 

더보기

6. 객체지향 언어 클래스

클래스와 오브젝트의 차이점(class vs object)


하나의 함수는 한가지 일만!
  •  
  •  

 

객체지향 언어 클래스

  • better debugging in debugger's stack traces
  • recursions

 

anonymous function (익명 함수)

const print = function() {	// anonymous function
	console.log('print');
}

 

Arrow function

const simplePrint = () => console.log('print');		// arrow function
const simpleAdd = (a,b) => a + b;
const simpleMultiply = (a,b) => {
	// do something more
    return a * b;
};

 

IIFE (Immediately Invoked Function Expression)

(function hello() {		// IIFE
    console.log('IIFE');
})();

 

자바스크립트 기초 강좌 : 100분 완성

 

 

변수

변수 : 어떤 값에 이름을 붙인 것

예약어 : 자바스크립트에서 이미 사용하는 단어

변수 선언 : let(변수) & const(상수)

  • 문자, 숫자, $, _
  • 첫글자는 숫자 X
  • 예약어 X
  • 상수는 대문자로
  • 변수명은 읽기 쉽고 이해할 수 있게

 

자료형

문자형(String)

  1. "큰따옴표"
  2. '작은따옴표'
  3. `백틱`: 문자열 내부에 변수 사용할 때
const msg = `My name is ${name}`;

 

숫자형(Number)

  • 사칙연산 가능
  • Infinity, NaN(Not a Number)

불린(Boolean)

  • 참,거짓

null & undefined

  • null : 존재하지않는 값
  • undefined : 할당되지않은 값

+ 객체형

+ 심볼형

 

typeof 연산자

  • typeof 'null' = object로 나오지만, null은 객체가 아니다

 

대화상자

alert : 알림

prompt : 입력, 두번째 인수로 default값을 지정 가능

confirm : 확인

 

형변환 (Type Conversion)

명시적 형변환

  • String()
console.log(
    String(3),	
    String(true),
    String(false),
    String(null),
    String(undefined)
)	//"3" "true" "false" "null" "undefined"
  • Number()
    • Number(null) //0
    • Number(undefined) //NaN
    • Number(0) //false
    • Number('0') //true
    • Number('') //false
    • Number(' ') //true
console.log(
    Number("1234"),	
    Number("12asdf34"),
    Number(true),
    Number(false),
)	//1234 NaN 1 0
  • Boolean() - false
    • 0
    • ''
    • null
    • undefined
    • NaN
console.log(
    String(3),	
    String(true),
    String(false),
    String(null),
    String(undefined)
)	//"3" "true" "false" "null" "undefined"

 

연산자(Operators)

기본연산자

  1. + - * / ** %
  2. += -=
  3. ++ --

비교연산자

  • < > <= >=  == !=
  • 결과는 Boolean
  • ==(동등연산자) : 값 비교
  • ===(일치연산자) : 값 + 타입까지 비교

논리연산자

  • &&(AND) : 둘다 true → true, 첫번째 false → 정지, 조건순서 고려해서 성능최적화
  • ||(OR) : 하나라도 true → true, 첫번째 true → 정지
  • !(NOT)

 

제어문

조건문

  • if
  • else
  • else if
  • switch

반복문

  • for : (초기값, 조건, 실행후)
  • while
  • do..while
  • break : 멈추고 반복문 탈출
  • continue : 멈추고 다음반복 진

 

함수(function)

  • 한번에 한작업에 집중
  • 읽기 쉽고 어떤 동작인지 알 수 있게 네이밍
    • showError
    • getName
    • createUserData
    • checkLogin

 

함수선언문

// 1. 함수선언
function 함수명(매개변수){
	console.log(`Hello! ${매개변수}`);
}

// 2. 힘수호출
함수명("파라미터~");	// "Hello! 파라미터~"
  • 전역변수 : 어디에서든 접근 가능
  • 지역변수 : 함수 내부 스코프에서만 접근
  • 매개변수 값은 복사된 후 함수의 지역변수가 된다
    함수에 특화된 지역변수를 쓰는 습관을 들이자. 전역변수가 많아지면 관리가 힘들다
// 1. 함수선언
function 함수명(매개변수){
	console.log(`Hello! ${매개변수}`);
}

// 2. 힘수호출
함수명("파라미터~");	// "Hello! 파라미터~"
// 3. OR
function sayHello(name){
	let newName = name || 'friend';
    let msg = `Hello! ${newName}`
    console.log(msg);
}

sayHello();		//"Hello! friend"
sayHello('Jane')	//"Hello! Jane"
// 4. default value
function sayHello(name = 'friend'){
    let msg = `Hello! ${name}`
    console.log(msg);
}

sayHello();		//"Hello! friend"
sayHello('Jane')	//"Hello! Jane"
// 5. return으로 값 반환 & 함수 종료
function showError(){
	alert('에러!');
    return;
	alert('절대 실행되지 않는 코드입니다');
}

const result = showError();
console.log(result);	//undefined

 

함수표현식(Function Expression)

let sayHello = function(){
    console.log('Hello!');
}

sayHello();		//"Hello!"
  • 함수 선언문 : 어디서든 호출 가능
    • 인터프리터 언어: 한줄씩 읽으며 순차적으로 실행, 즉시 결과 반환
    • 호이스팅: 실행전 초기화 단계에서 코드의 모든 함수 선언문을 찾아서 생성 → 코드 전체가 사용가능범위 
  • 함수 표현식 : 코드에 도달하면 함수 생성

 

화살표 함수(arrow function) - ES6

let showError = () => {
	alert('에러!');
}
showError();		//"에러!"

 

객체(Object)

프로퍼티(property)

  • 키와 값으로 구성
  • 접근,추가는 .으로
  • 삭제는 delete 명령
  • 단축프로퍼티
  • in : 프로퍼티 존재확인
  • for..in 반복문으로 키값을 가져올 수 있다

메소드(method) - this

  • 화살표 함수는 일반함수와 달리 자신만의 this를 가지지 않음
  • 화살표 함수 내부에서 this 사용하면, 외부에서 값을 가져옴
    • 전역객체
      • 브라우저 환경: window 객체
      • Node.js : global 객체

 

배열(Array)

순서가 있는 리스트

  • [index]
  • 문자, 숫자, 함수, 객체 등 
  • 배열의 메소드
    • push()
    • pop()
    • shift(), unshift()
    • for
    • for .. of : 인덱스를 얻지 못한다
저작자표시 비영리

'SOJU 2기' 카테고리의 다른 글

[SOJU] JavaScript (2)  (0) 2023.05.10
[SOJU] HTML & CSS  (0) 2023.04.11
[SOJU] GIT  (0) 2023.03.23
[SOJU] 웹개발 개념들  (0) 2023.03.23

'SOJU 2기'의 다른글

  • 현재글[SOJU] JavaScript (1)

관련글

티스토리툴바