2023.10.12. TIL JavaScript 1주차

0. 기본

// : 주석 (메모 기능으로 사용)

control + / : 선택 영역 전체 주석처리

터미널에서 node (파일명).js 로 실행

 

 

1. 변수의 5가지 주요 개념

변수 이름(myVar) : 저장된 값의 고유 이름

변수 값("Hello World") : 저장된 값

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

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

변수 참조 : 변수에 할당된 값을 읽어오는 것

var myVar = "Hello World"

변수 선언:	var	let	const
똑같은 변수명으로 다시 선언	O	X	X
재할당	O	O	X

 

 

2. 데이터타입1

RUN 할 때 데이터 타입이 결정된다.

객체는 중괄호로 배열은 대괄호로

 

 

3. 형 변환

(1) + 연산자는 두 가지 데이터 타입을 결합한다.

{}, null, undefined + "1" => 문자열

1 + "1" = "11" (문자열로 변환되어 합쳐짐)

 

 

(2)  -, *, / 는 항상 숫자열이 우선시 된다.

"2" * "3" = 숫자열 6

1 - "2" = -1

 

 

(3)  boolean

0, "", null, undefined, NaN = false

"false", {} = true

 

 

(4)  String(123, true, false, null, undefined) 모두 string 값은 아니지만

괄호 안에 넣어주면 문자열로 변환해서 출력한다.

(명시적 형 변환)

같은 구조로 Number("123") 하면 Number로 출력된다.

 

 

4. 연산자

 (1) % (나머지 연산자)

  5 % 2 = 1 

  나누고 남은 몫을 반환한다

 

 (2) += (더하기 등호 연산자), -= (빼기 등호 연산자), *= (곱하기 등호 연산자)

  변수의 값에 숫자를 더하는 것

 

  x = x + 5 와 같은 말이다.

  let x = 10;

  x += 5;

  => 15

 

 (3) 비교 연산자

  ▶ === (일치 연산자)

  타입까지 일치해야 true를 반환

 

 ▶ !== (불일치 연산자)

  타입까지 일치해야 false를 반환

 

(4) 논리 연산자

▶ && (논리곱 연산자)

  두 값이 모두 true 일 때만 true를 반환

 

▶ || (논리합 연산자)

  두 값 중 하나라도 true 인 경우 true

 

▶ ! (논리부정 연산자)

값을 반대로 바꿈

let a = true;

console.log(!a);

=> false

 

(5) ? (3항 연산자)

조건에 따라 값을 선택하는 것

 

let x = 10;

let result = x > 5 ? "크다" : "작다";

true 면 앞에 값 ("크다")을 할당하고 

false 면 뒤의 값("작다")을 할당한다.

 

(6) typeof (타입 연산자) 

해당 타입 값을 반환

 

  * 만약 변수와 변수끼리 비교를 할 때에는

    JSON.stringify(변수명) === JSON.stringify(변수명2)로 작성을 해야한다.

    왜냐하면 변수는 데이터 저장 주소가 모두 다르기에 같은 값이라도 무조건 false가 나와버린다.

    모두 문자열로 변환해서 그대로 비교를 해줘야한다.

 

 

5. 함수

input = 매개변수

output = 반환값

 

(1) 함수 선언문

  function 함수명 (매개변수) {}

 

 (2) 함수 표현식

  let 함수명 = function (매개변수) {}

 

 (3) 함수 호출

  함수명(매개변수)

  let 변수명 = 함수명(매개변수)

  => 변수 = 함수반환값

 

 (4) 함수 범위

  전역변수 : 전체 코드에서 사용되는 변수

  지역변수 : 함수 내부에서 사용되는 변수

 

  ▶ 화살표함수

   let 함수명 = (매개변수) => {}

   let 함수명 = (매개변수) => x + y (이렇게 한줄로도 가능)

   let 함수명() {return}

   let 함수명 = x => x; (매개변수가 하나일 경우 괄호 생략 가능)

 

  (5) 매개변수 자리에 함수를 넣는 것 = 콜백함수

   ▶ forEach

     ex) a.forEach(function(item){});

 

   ▶ map

    기존에 있었던 배열을 가공해서 새로운 배열을 생산해내는 역할

    그래서 새로운 배열을 변수에 받아야한다.

    ex) 

    let newNumbers = numbers.map(function (tiem) {return item * 2;});

    모든 요소를 2배씩 곱해서 배열로 반환한다

 

  ▶ filter

    조건에 해당하는 값만 반환한다.

    ex)

    fiteredNumbers = numbers.filter(function(item) {return item === 5});

    5와 같은 수만 반환

 

  ▶ find

    조건에 맞는 첫 번째 요소만 반환. 

    filter는 모두 반환하지만 find 는 첫 번째로 조건이 충족된 요소만 반환한다.

    ex)

    let result = numners.find(function (item) {return item > 3;});

 

 

6. 문

 (1) 조건문

  ▶ if () {}

  소괄호 안의 조건이 성립돼야 중괄호를 실행할 수 있다.

 

  혹은, (수식) && 명령문 (and 조건)

  ex) (x > 0) && console.log("x는 양수입니다.")

  이런식으로 간편하게 사용할 수 있다.

 

  ▶ if () {}

  else {}

  true 라면 if 문을 실행, false라면 else 문을 실행한다.

 

  ▶ if () {}

  else if () {}

  else

  1. if 문 2. else if 3. else 순서대로 들어가며 true인 조건의 코드를 실행한다. 

 

  ▶ || (or 조건)

   삼항 연산자와 단축평가

   let y; //y에는 undefined

   let z = y || 20;

   '만약 y에 undefined면 20의 값을 세팅해줘' 라는 뜻으로 사용한다

 

 

 

 (2) switch문

   변수의 값에 따라 여러 개의 경우(case) 중 하나를 선택

   switch () {case "사과": console.log('사과입니다');

   break; (이걸 꼭 넣어줘야 switch문에서 빠져나올 수 있다.)

   case "바나나": console.log('바나나입니다');

   break;}

 

 (3) 반복문

  ▶ for문

   for (초기값; 조건식; 증감식) {}

   ex) for(let i = 0; i < 10; i++) {console.log(i);}

   이걸 풀어쓰면

   i 라는 변수는 0부터 시작할거야

   i 라는 변수는 10에 도달하기 전까지 계속 할거야

   i 라는 변수는 한 사이클이 돌고나면 1을 더할거야

 

  ▶ for ~ in 문

   for (let a in person) {

   console.log(a, person[a]);}

   근데 왜 여기서 a만 찍으면 key 값이 반환되고 person[a]를 찍으면 value 값을 반환해주는걸까?

   같은 a 면 a만 찍었을 땐 key, value 값 모두 나와야하는거 아닌가?

   

 

  ▶ while 문

    while (조건) {수식}

 

  ▶ do ~ while 문

   일단 한번 코드를 실행하고 그 다음 while문을 실행하는 것

   let i = 0;

   do {console.log(i);

   } while (i > 10);

   이러면 그냥 while문은 콘솔이 안찍혔을텐데 

   do while문은 한번만 찍고 넘어가게 된다.

 

 

 

 

 

7. 객체

key - value 값이 중요하다!

메소드란? 객체가 가진 여러가지 기능

 

 ▶ Object.keys() : key를 가져오는 메소드

 ▶ Object.values() : value 를 가져오는 메소드

 ▶ Object.entries() : 전체를 가져오는 메소드

 ▶ Object.assign() : 객체 복사

  ex) Object.assign(어디에 복사할지, 무엇을 복사할지, {변경값})

 

 ▶ 객체 병합

   ... : spread operator (밸류값만 빼오는 기능)

   let a = {...b, ...c};

   이렇게 하면 b와 c의 밸류값이 a에 들어가게 된다.

 

 (1) 배열

  ▶ 크기 지정

    let number = new Array(5)

  ▶ 길이 측정

    .length

  ▶ 요소 접근

    변수명[인덱스]

 

  A. 배열 메소드

  ▶ push : 배열에 값을 추가

    변수명.push()

  ▶ .unshift() : 맨 앞의 요소를 추가 

  ▶ .pop(): 마지막 요소를 삭제

  ▶ .shift(): 맨 앞 요소를 삭제

  ▶ .splice(인덱스) : 인덱스 자리에 원하는 값을 변경

  ▶ .slice(인덱스 시작, 인덱스 끝) : 인덱스 범위 안에 있는 요소를 출력