[포스코x코딩온] 웹 풀스택 과정 2주차 | JS

K1mhappy·2023년 10월 31일
[포스코X코딩온]
0

포스코x코딩온

목록 보기
4/13
post-thumbnail

💡JavaScript

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


자바스크립트는 HTML의 내용/ 속성/ 스타일을 변경할 수 있다.

🔹JS 문법

  • (;)세미콜론으로 구분됨
  • 대소문자를 구분하기때문에 변수,함수의 이름,예약어 작성할때 주의

🔹JS 출력

alert()
getElementByID() / getElementsByTagName()
document.write() : 테스트에 사용
console.log() : f12눌러 콘솔화면으로 확인

🔹JS 방식

  • 내장 방식
    • 간단하다
    • 특정 페이지에서만 작동하는 기능일 경우 따로 구현이 가능

  • 링크 방식 <script src="./index.js"></script>
    • js 코드의 양이 많으면 파일로 따로 관리하는게 편함
    • 같은 기능을 만들어놓고 다른 페이지에서 사용하고 싶을 때 링크만 걸어 사용 가능
    • 유지 보수 용이성이 편리

두 방식 모두 위치는 어디서나 사용 가능하며,
읽히는 순서(쓴 순서) 대로 작동한다.

🔹스크립트의 위치

스크립트의 위치는 어디가 좋을까? 때에 따라 다르다.

  • HEAD
    사용자가 빠르게 페이지 확인이 가능하나, DOM요소가 완전히 로드되지 않은 상태에서
    JS코드가 실행되어 오작동 가능성이 있다.
  • BODY
    안정성이 향상되지만, 페이지 로딩시간이 길어질 수 있고 사용자는 페이지를 보는데 더 많은 시간이 걸릴 수 있다.

🔗식별자

변수나 함수의 이름을 작성할 때 사용하는 이름

🔹작성 방식

  • 영문자, 숫자, _ , $ 만 사용 가능
  • Camel Case : 단어 첫문자들만 대문자로 작성
  • Underscore Case : _ 로 연결
  • 예약어는 사용 x

🔗변수(variable)

데이터를 저장할 수 있는 메모리 공간.
데이터를 저장하고 참조하는 데이터의 이름 var, let, const 가 있다.

🔻변수의 선언과 초기화

자바스크립트에서는 선언을 꼭 해주어야한다!

  • 선언 : 변수를 생성하는 것
  • 할당 : 변수에 값을 더해주는 것
var month; // month라는 이름의 변수 선언. 초기화를 하지 않았기에  undefined 값을 갖는다.
date = 25; // date라는 이름의 변수를 묵시적으로 선언
var month;     // 변수의 선언
var date = 25; // 변수의 선언과 동시에 초기화
month = 12;    // 변수의 초기화

쉼표를 이용하여 여러 변수를 동시에 선언 및 초기화 할 수 있다.

🔻var, let, const 한눈에

var : 중복 선언, 재선언 가능
let : 중복 선언 불가능, 재선언 가능
const : 재선언, 재할당 불가능

🔹 var

	var name = "홍길동";
    var name = "나비";
   
    console.log(name); -> 나비
  • 중복 선언, 재선언 가능
  • 선언하지 않으면 자동으로 undefined가 들어간다.
    <문제점>
    • 중간의 같은 이름의 변수를 다시 선언해도 기존의 변수에 덮어 씌움
    • 변수를 선언 했다는 건 분명이 다른 데이터를 넣으려는 것인데, 그것을 기
    존의 데이터에 덮어 씌우면!? → 문제 발생!
    • 그리고 변수가 {블록 단위} 에서 끝나는 것이 아니라, 자기 맘대로 전역으
    로 돌아다니고 영향력을 행사함 → 의도치 않은 문제 발생!
    • 따라서 ES6 문법 부터는 var 대신 let 사용을 권장

🔹 let

    let name = "홍길동";
    let name = "나비";
    
    console.log(name); -> error
  • 중복 선언 불가능, 재선언 가능
  • 선언하지 않으면 자동으로 undefined가 들어간다.

🔹 const

    const name = "홍길동";
    const name = "나비";
    
    console.log(name); -> error
  • 재선언, 재할당 불가능
  • 초반 선언 시, 반드시 초기화를 동시에 진행해야 함.
  • 선언과 동시에 할당을 해주어야 한다. (=값을 비워두면 안된다는 소리)

즉, 값은 바뀔 수 있는게 let
한 번 값이 넣어지면 안바뀌는게 const!

🔻변수 기본 규칙

  • 변수 이름으로 문자, 숫자, $, _(언더바) 만 사용가능
  • 첫 글자로 숫자 X
  • 예악어 사용 X
  • 변수 이름은 읽기 쉽게
  • 상수는 대문자로 선언해서 누구나 알 수 있게
    -> 상수란 프로그램이 실행되는 동안 변하지 않을 값

🔻타입 언어

  • 강한 타입 언어 : 타입 검사를 통과하지 못한다면 실행 자체가 안 된다.
    String, int, double 등처럼 타입을 1종류로 명확히 지정
    (Java,C,C++,C#...)
  • 약한 타입 언어 : 런타임에서 타입 오류를 만나더라도 실행을 막지 않는다.
    타입이 여러 종류인 값들이 상관없이 지정된다.
    (Javascript, Python ...)

Javascript는 느슨한 언어!
=> 데이터 종류와 관계 없이 변수를 선언하고 사용하기 때문에!

🔻data type 종류 - 자료형

🔹 기본

string 문자형 데이터

  • 문자+변수 동시에 쓰고 싶을 때
// 메소드의 매개 변수로 넣어서 사용
console.log("내 이름은", myName, "입니다."); // 내이름은 길동 입니다.
// +를 사용해서 문자로 변환
console.log("문자" + 변수 + "문자"); // 내이름은길동입니다.
// 백틱 문자 사용
console.log(`문자를 쓰다가 변수를 쓰고 싶으면 ${변수} 쓰면 됩니다`)

number 숫자형 데이터

boolean 참,거짓 데이터

undefined 미할당 데이터/ 타입이 정해지지 않은 것

null 의도된 빈 데이터/ 값이 정해지지 않은 것

🔹 객체

array 배열

object 여러 데이터 꾸러미

typeof 자료형을 알려줌

typeof 10;        // number 타입
typeof "문자열";  // string 타입
typeof true;      // boolean 타입
typeof undefined; // undefined 타입
typeof null;      // object 타입

🔻변수의 유효 범위(variable scope)

해당 변수가 접근할 수 있는 변수,객체,함수의 집합을 의미한다.

🔹 지역변수(local variable) : 함수 내에 선언된 변수

변수가 선언된 함수 내에서만 유효하고 함수가 끝나면 메모리에서 사라짐.

🔹 전역변수(global variable) : 함수 외부에서 선언된 변수

프로그램 어느영역이나 접근 가능. 웹페이지가 닫혀야만 메모리에서 사라짐.

지역변수를 선언할 떄에는 var키워드를 사용해 선언해야 한다.
함수 내부에서 키워드를 사용않고 변수를 선언하면, 해당 변수는 지역 변수가 아닌 전역변수로 선언됨

function globalNum(){
	num = 10; 
    console.log(num); // 10 나옴
}
globalNum();
console.log(num); // 내부에 키워드 안쓰고 선언했기 때문에 전역변수로 선언되어서 함수 호출이 끝나도 num은 10으로 나온다

🔗함수(function)

특정 동작(기능)을 수행하도록 설계된 독립적 블록
함수의 핵심은 재사용성. 여러곳에서 하나의 부품처럼 함수를 호출해서 사용하고 변경하는 것

호이스팅:
코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다.

🔻함수선언식

function 함수명() {
	구현 로직
        }
// 예시 
functionName();
function functionName() {
	console.log('안녕하세요');
        }
  • 호이스팅에 영향을 받아, 어디서든 호출이 가능하다.

🔻함수표현식

let 함수명 = function () {
  구현 로직
	}
//예시
let functionName = function(){
	console.log('안녕하세요');
}functionName();
  • 호이스팅에 영향을 받지 않으므로, 코드에 도달하면 생성 사용가능하다.

🔻화살표함수

let functionName =()=>{
            console.log('안녕하세요3');
}functionName();

🔻반환(return)문

함수의 실행을 중단하고, return 키워드 다음에 명시된 표현식의 값을 호출자에게 반환한다

function addNum(x, y) {
    return x * y; // x와 y를 곱한 결과를 반환함. 
}

🔻함수의 유효 범위(function scope)

자바스크립트에서 함수는 자신이 정의된 범위 안에서 정의된 모든 변수 및 함수에 접근할 수 있다

🔹전역함수

모든 전역변수와 전역함수에 접근가능
반면, 다른 함수내에 정의된 내부함수는 그 함수의 부모함수에서 정의된 모든 변수 및 부모 함수가 접근할 수 있는 모든 다른 변수까지도 접근할 수 있다.

var x = 10, y = 20; // x,y를 전역변수로 선언

function sub() { // sub()을 전역함수로 선언
    return x - y; // 전역 변수인 x=10, y=20에 접근함.
}
console.log(sub()); // -10

function parentFunc() { // parentFunc()을 전역함수로 선언
    var x = 1, y = 2; // 전역 변수와 같은 이름으로 선언하여 전역 변수의 범위를 제한함.
    function add() {  // add() 함수는 내부 함수로 선언됨.
        return x + y; // 전역 변수가 아닌 지역 변수 x=1, y=2에 접근함.
    }
    return add();
}
console.log(parentFunc()); // 3

🔗형 변환

자바스크립트는 타입검사가 매우 유연하기 때문에,
묵시적 타입 변환을 한다.
특정타입의 값을 기대하는 곳에 다른 타입의 값이 오면 자동으로 타입을 변환하여 사용한다는 것이다.

🔻명시적 타입 변환

🔹 문자형변환 : String(), toString();

let num = 123;
let a = String(num);
console.log(typeof a);  // a의 타입은 string으로 출력된다.

let b = num.toString();
console.log(typeof b);  // b의 타입은 string으로 출력된다.

String(), toString()의 차이점

// toString();은 null과 undefined 에서 문제가 발생한다.
let a = null;

let c = a.toString();
console.log(typeof c);		//error

🔹 숫자형변환 : Number();

let n1 = true; 
let n2 = "123.9";

console.log(type of Number(n1)); 	//number
console.log(Number(n1)); 			//true의 값 1
console.log(type of Number(n2)); 	//number
console.log(Number(n2)); 			//123.9

console.log(typeof Number('hello')); //콘솔에는 number가 나오지만
console.log(Number('hello')); 		// 실제값은 NaN가 나올 것.

🔹실습

수학77점 영어88점 평균을 계산하여 avgScore 에 저장하고, 이를 출력하는 프로그램을 작성하세요!
명시적 형 변환을 사용하여 평균 점수가 정확하게 나와야 합니다

let mathScore = prompt('수학 점수를 입력해주세요.');
let engScore = prompt('영어 점수를 입력해주세요.');
let avg = (Number(mathScore) + Number(engScore)) /2;
        console.log(avg);

🔗연산자

🔻기본 연산자

  • 산술 연산자 : +, - , * , /
  • 나머지 연산자 : %
    홀수 판단 : num % 2 == 1 이면 홀수
    짝수 판단 : num % 2 == 0 이면 짝수
  • ** 거듭 제곱
    **     를 사용
    2 ** 3 = 8
    3 **     3 = 27

🔻대입 연산자

변수에 값을 대입할 때 사용하는 이항 연산자.
피연산자들의 결합 방향은 오른쪽에서 왼쪽이다.

  • =
    : 왼쪽 피연산자에 오른쪽 피연산자 값을 대입
  • += , -= , = , /= , %=
    :왼쪽 피연산자의 값에 오른쪽 피연산자 값을 + , - ,     , / , % 한 후 , 그 결과값을 왼쪽 피연산자에 대입

🔻증감 연산자

피연산자를 1씩 증가 또는 감소시킬 때 사용한다.

  • ++Num / --Num
    : 피연산자 값을 먼저 1 증감시킨 후 해당 연산 진행
  • Num++ / Num--
    : 먼저 해당연산을 수행하고 난 후, 피연산자 값을 1 증감시킴

🔻비교 연산자

  • 동등연산자 (==)
    : 왼쪽 오른쪽 피연산자의 값이 같을때 true 반환

  • 일치연산자 (===)
    : 왼쪽 오른쪽 값이 같고 같은 타입일 때 true 반환

  • 부등연산자 (!=)
    : 값이 같지 않으면 true

  • 불일치연산자 (!==)
    : 값이 같지않거나, 타입이 다르면 true

  • < , <=, > , >=

🔻논리 연산자

  • OR 연산자, ||
    : 이름이 뽀로로 이거나, 성인이면 통과
  • AND 연산자, &&
    : 이름이 뽀로로 이고, 성인이면 통과
  • NOT 연산자, !

🔻기타 연산자

🔹문자열 결합 연산자

var x = 3 + 4; // 7   
var y = "너무 " + "추워" // 너무 추워 
var z = 12 + "월" // 12월

🔹삼항 연산자

if/else 문 대신 사용 가능하여 코드를 간결하게 만들어줌

  • 표현식 ? 반환값1 : 반환값2
    : 물음표 앞 표현식에 따라 참이면 반환값1 반환, 거짓이면 반환값2 반환
var x = 3, y = 5;
var result = (x > y) ? x : y   
// x가 더 크면 x를, 그렇지 않으면 y를 반환함으로 5를 반환

🔗조건문

프로그램의 순차적 흐름을 제어해야할 때 사용하는 실행문
대표적으로 조건문과 반복문이 있다.

표현식의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문

🔻if문

  • if
  • if/else
  • if/else/if
  • if 중첩

🔻switch

🔗반복문

똑같은 명령을 일정 횟수만큼 반복해 수행하도록 하는 실행문

🔻for

while문보다 간결하게 표현 가능

  • 문법
for (초기식; 표현식; 증감식) {
   실행문;
}

초기식, 표현식, 증감식은 생략 가능

  • 예시
for(let i = 0; i < 10; i ++) {
  console.log(i); // 0~9 까지 나온다.

for(let i = 0; i < 100; i ++) {
	if(i % 13 == 0 && i % 2 ==1){
    	console.log(i);
    }
}//13의 배수이면서 홀수인 숫자
  
for(let i = 2; i < 9; i ++) {
  console.log(i,'단');
  for(let j = 1; j < 9; j ++) {
    console.log(i,'x'j,'=',i*j);
  }
}//구구단 만들기

🔻while

특정조건을 만족할때까지 계속 반복
무한루프가 가능하기 때문에 주의하여 사용

  • 문법
while (표현식) {
    실행문;
}

표현식이 참인지를 판단해서 참이면 실행문을 실행하고 전부 실행했으면 다시 표현식으로 돌아와서 또 참인지 판단

  • 예시
//1번 타입, 조건문 사용
let i = 0; 
while(i < 5){
  console.log('while i: ',i);
  i ++ ; // 0~4까지 출력
}

//2번 타입, if문 + break 사용
let i = 0;
while(true){
  console.log('while i: ',i)
  i++;
  if(i>10){
    break;
  }
}

🔻반복문 제어

  • break : 멈추고 밖으로 빠져나옴
  • continue : 멈추고 다음 반복으로 진행

🔗Array

배열은 이름과 인덱스로 정렬된 값의 집합
배열을 구성하는 값을 배열요소 . 배열에서의 위치를 가리키는 숫자를 인덱스라고 한다

🔹배열의 특징

  • 같은 배열에 있는 요소끼리 타입이 서로 다를 수 있음
  • 인덱스는 연속적이지 않아도 됨. so, 특정 배열 요소가 비어있을 수 있음
  • 자바스크립트에서 배열은 array 객체로 다뤄짐

🔹배열 생성

  • [ ] 사용
  • Array 객체 사용
    : var arr = Array(배열요소1, 배열요소2,...);

🔗표준객체와 메서드

  • 객체(Object)란 ? {}를 사용하여 정의되며 ,
    프로그래밍을 하는데 필요한 도구들
    String, Number, Array, Date, Math ..........

  • 메서드(Method)란 ? 객체에 속한 함수를 가리킨다. 메서드는 객체에 특정 동작이나 기능을 수행하도록 정의된 함수입니다.

// 객체 정의 
var car = {
    brand: "Toyota",
    model: "Camry",
    year: 2022,
    start: function() {
        console.log("Engine started!");
    },
    drive: function(speed) {
        console.log(`Driving at ${speed} km/h`);
    },
    stop: function() {
        console.log("Car stopped.");
    }
};
// 메서드 호출
car.start();     // "Engine started!"
car.drive(60);   // "Driving at 60 km/h"
car.stop();      // "Car stopped."

car은 객체. 그 안에 brand,model,year라는 프로퍼티
start,drive,stop 이라는 메서드가 포함

🔻Number

🔹객체

toString(n) : 여러 진법으로 변환. 살제로 바꿔주는게 아니고 변환된 형태의 문자열을 반환해주는 것
Infinity : 임의로 수정할 수 없는 읽기 전용 값. 어떤 수보다도 큰 수로 취급
NaN : 숫자가 아니라는 의미

🔹메서드

Number.parseFloat()
Number.parseInt() : 숫자를 정수형태로 반환
Number.isNaN()
Number.isFinite()
Number.isInteger()
Number.isSafeInteger()

🔻Math

🔹프로퍼티

수학에서 자주 사용하는 상수와 함수들을 미리 구현해놓음

Math.PI
Math.e

🔹메서드

웹 브라우저마다 다른 결과값이 나올 수 있기에 정확한 결과를 얻어야 할 경우에는 사용하지 않는 것이 좋다.
Math.min()
Math.max()
Math.random() : 무작위 숫자 반환
Math.round() : 소수점 첫째자리 반올림
Math.floor() : 인수로 전달받은 값과 같거나 작은수 중 가장 큰 정수로 반환

Math.floor(10.95);  // 10
Math.floor(11.01);  // 11

Math.ceil() : floor와 반대로 가장 작은 정수 반환

Math.ceil(10.95);  // 11
Math.ceil(11.01);  // 12

Math.sin() : 함수값 반환

🔻Date

매 순간 바뀌는 시간과 날짜에 관한 정보 얻을 때 사용

🔹객체

new Date()

  1. new Date("날짜를 나타내는 문자열")

  2. new Date(밀리초)

  3. new Date(년, 월, 일, 시, 분, 초, 밀리초)

🔹메서드

Date.now() :현재 시간 반환
Date.prototype getter 의 메서드
• date.getFullYear()
• date.getDate()
• date.getDay()
• date.getTime()
• date.getHours()
• date.getMinutes()
• date.getSeconds()

🔻String

🔹객체

length : 문자열의 길이를 반환 ( 공백포함)

🔹메서드

toUpperCase() : 문자열 전체 대문자 변경
toLowerCase() : 문자열 전체 소문자 변경
indexOf('') : 매개변수로 문자열을 받아서 몇번째 인덱스인지 숫자 반환
slice(tstartIndex, endIndex) : 스타트부터 end-1 자리까지 슬라이스해서 빼옴 . 매개변수로 음수값도 가능 . 한자리도 가능
replace('a','b') : 문자열 a를 문자열 b로 변경
replaceAll('a','b') : a를 전부 찾아서 b로 바꿈
repeat(n) : 문자열에 대해 n번 반복
trim() : 문자열 양끝 공백 삭제
split() : 매개변수로 들어온 문자열을 기준으로 쪼개서 배열로 저장

🔻Array

🔹객체

length : 배열의 길이 반환

🔹메서드

push() : 배열 끝에 추가
pop() : 배열 끝 요소 제거
unshift() : 배열 맨 앞 추가
shift() : 배열 맨 앞 제거
indexOf() : 매개변수에 해당하는 배열의 인덱스를 받아옴. 매개변수로 문자열만 넣을 수 있는 것은 아니다.
includes() : 해당 배열에 지정한 요소가 있는지 확인
reverse() : 배열 순서 뒤집어서 반환
join() : join안의 문자열 기준으로 문자열로 병합

🔻메서드 체이닝

각각의 메소드를 연결해서 사용하는 개념
-단, 사용한 메소드가 반환(return)값을 가지고 있는 경우에만사용이 가능하다.

let hello = "Hello~"
helloArr = hello.split("");
console.log(helloArr);
let reverseHello = helloArr.reverse();
console.log(reverseHello);
let helloAgain = reverseHello.join("");
console.log(helloAgain);
console.log(hello.split("").reverse().join(""));

//~olleH 로 나옴

🔗배열에서의 for

배열, 기본 for 문 사용하기
배열, for of 반복문
배열, [].forEach
배열의 합
배열 함수, filter









<출처 및 레퍼런스>
포스코X코딩온
TCP school https://www.tcpschool.com/javascript/intro
ChatGPT

profile
K1mhappy
킴코린의 개발일지😗
이전 포스트

[포스코x코딩온] 웹 풀스택 과정 1주차 | CSS

다음 포스트

[포스코x코딩온] 웹 풀스택 과정 3주차 | DOM & jQuery

0개의 댓글