자바스크립트 알아보기

Cornflower blue·2022년 7월 1일

웹을 개발하는 3가지 언어 중 하나인 자바스크립트
웹 사이트를 실질적으로 동작하게 하는 언어

자바스크립트가 실행되는 곳

웹 브라우저에 내장한 자바스크립트 엔진이 자바스크립트 실행한다.

변수와 상수

변수
프로그램이 실행되는 도중에 계속해서 변하는 값
let이라는 키워드 사용
변수명에는 기호를 사용할 수 없다(언더스코어, $ 제외)
변수명은 숫자가 아닌 문자로 시작해야 한다.
변수명은 예약어를 사용할 수 없다.
var 키워드
변수를 중복해서 선언할 수 있다.
let 키워드
변수를 중복해서 선언할 수 없다.
상수
프로그램이 실행되는 도중에 변하지 않는 값이다.
const 라는 키워드를 통해 선언할 수 있다.
상수와 변수의 차이
변수와 달리 상수의 경우 값을 바꾸려고 하면 에러가 발생한다. 상수는 오직 선언 이후에 값을 절대 바꿀 수 없기 때문이다.
상수는 선언과 동시에 할당되지 않으면 에러가 발생한다.

자료형과 형변환

자료형이란 값을 그 성질에 따라 분류한 것이다.
자바스크립트에서는 값을 크게 Primitive Data Type(원시타입), Non-Primitive Data Type(비원시타입)으로, 작게 보았을때 Number, String, Boolean, Undefined, Null 그리고 Object, Array, Function으로 분류할 수 있다.

Primitive Data Type원시타입
내장형 타입또는 기본형 타입이라고 부를 수 있다.
한번에 하나의 값만 가질 수 있다.
하나의 고정된 저장공간을 이용하는 것을 원시타입이라고 부를 수 있다.

숫자형 Number
문자형
템플릿 리터럴 : 백틱안에 &{변수}를 담는 문법
불린형
참이나 거짓만을 저장하는 자료형
Null
의도적으로 해당 값이 아무것도 가리키지 않았음을 뜻할 때 사용한다.
Undefined
아무런 값을 할당하지 않으면 자동적으로 Undefined가 출력된다.

형변환
형변환을 통해 값은 유지하면서 자료형을 변경할 수 있다.
형변환에는 묵시적 형변환과 명시적 형변환이 있다.

비원시타입
한번에 여러 개의 값을 가질 수 있다.
여러 개의 고정되지 않은 동적 공간을 사용한다.

함수표현식 & 화살표함수

let hello = function () {
	return "안녕하세요";	
}

console.log(hello) // 함수가 리턴된다.

const helloText = hello();
cocnsole.log(helloText); // "안녕하세요"가 출력된다.

위와 같이 함수를 변수에 담아서 사용하는 방식을 함수표현식이라고 한다.

function helloFn() {
	return "함수선언식"
}

함수표현식과 함수선언식의 차이를 서술하시오.
함수선언식으로 만들어진 함수는 코드 실행 전 코드 최상단으로 올려진다(호이스팅이 일어난다)
함수표현식은 호이스팅이 일어나지 않는다.

화살표 함수

let helloA = () => {
	return "안녕하세요"
}

화살표 함수 또한 호이스팅의 대상이 아니므로 순서를 지켜서 코드를 작성해야 한다.

콜백함수

어떤 다른 함수의 매개변수로 함수를 넘겨준 것이 콜백함수다.

function checkMood(mood, goodCallback, badCallback) {
  if(mood === 'good') {
	// 기분 좋을 때 하는 동작
    goodCallback()
  } else {
	// 기분 안 좋을 때 하는 동작
    badCallback()
  }
}

function cry() {
	console.log("Action::CRY");
}
function sing() {
	console.log("Action::Sing");
}
function dance() {
	console.log("Action::Dance");
}

checkMood("good", sing, cry);

객체

자바스크립트의 자료 형 중 비원시타입(Non-Primitive Type)에 해당
비원시타입은 한 번에 여러 개의 값을 가질 수 있으며 여러 개의 고정되지 않은 동적 공간을 사용할 수 있다.
객체 생성자를 이용하여 객체를 생성할 수 있다. Object 키워드를 사용한다.
중괄호를 통해 객체를 생성할 수 있으며 이를 객체 리터럴 방식이라고 한다.

let person1 = new Object;
let person2 = {}; // 객체 리터럴 방식

let person = {
	key: "value"; 
}; // 키-벨류 쌍으로 저장되는 데이터를 프로퍼티라고 부른다.

객체 생성 이후 프로퍼티 수정, 삭제하기


let person = {
  name : "이정환",
  age: 25
}

person.location = "한국" // 프로퍼티 추가, 점 표기법을 이용한 프로퍼티 추가
person["gener"] = "남성" // 프로퍼티 추가, 괄호 표기법을 이용한 프로퍼티 추가

person.name = "이정환 A" // 프로퍼티 수정
person["age"] = 40; // 프로퍼티 수정

delete person.age; // 프로퍼티 삭제
delete person["name"]; // 프로퍼티 삭제
// 위 방법보다
person.name = null; // 기존의 값을 메모리에서 날릴 수 있다. 이런 방식의 삭제를 권장한다고 한다..

배열(Array)

비원시 자료형에 해당한다.
Array 키워드를 사용하여 생성한다.

let arr1 = new Array() // Array 키워드를 사용한 배열 생성
let arr2 = []; // 배열 리터럴, 대괄호를 사용한 배열 생성

let arr3 = [1, 2, 3, 4, 5]; // 배열의 값으로 여러가지의 자료형을 가져도 무방하다.

console.log(arr[0]); // 배열의 값에 접근, 인덱스를 이용한 접근

arr.push(6); // 배열 값 추가. 가장 마지막에 원소를 추가한다.

console.log(arr.length); // 배열의 길이 확인

반복문

반복문을 통해 특정 명령을 반복해서 수행할 수 있다.
배열 순회에 유용하다( 배열 내 모든 값에 한 번씩 접근할 수 있다)

for (let i=1;i<=100;i++) {
  console.log("반복되는 문구");
}// for 반복문, (초기식/조건식/연산식)

const arr = ["a", "b", "c"];
for (let i=0;i<arr.length;i++) {
  console.log(arr[i]);
}

// 객체 순회하기
let person = {
  name: "옥수수",
  age:25,
  tall:180
};

const personKeys = Object.keys(person); // object의 key를 배열로 반환받을 수 있다.
const personValues = Object.values(person); // object의 value를 배열로 반환받을 수 있다.

for(let i=0; i<personKeys.length;i++) {
  const curKey = personKeys[i];
  const curValue = person[curKey];
  console.log(`${curKey}: ${curValue}`)
};

배열 내장 함수

const arr = [1, 2, 3, 4];

for(let i=0;i<arr.length;i++){
	console.log(arr[i]);
}

// 위 for문을 통해 배열을 순회할 수도 있지만 아래와 같이 내장함수를 사용하여 순회할 수 있다.
arr.forEach((element) => console.log(element));

const newArr = arr.map((elm) => {
	return elm * 2;
}); // 원본 배열의 모든 값을 순회하며 새로운 배열을 반환한다.

let number = 3;
arr.forEach((elm) => {
  if(elm === number) {
  	console.log(true);
  }
});
console.log(arr.includes(number)); // includes 주어진 배열에서 전달받은 인자와 일치하는 값이 존재하는 지 확인한다.

console.log(arr.indexOf(number)); //주어진 배열에서 전달하는 인자와 일치하는 값의 인덱스를 반환한다. 없을 경우 -1을 반환한다.

const arr = [
  {color: "red"},
  {color: "black"},
  {color: "blue"},
  {color: "green"}
]

let number = 3;

console.log(arr.findIndex((elm) => {
	elm.color === "green"
})); // 콜백함수를 전달하여 true를 반환하는 첫번째 배열의 인덱스를 반환한다.

const arr = [
  {num:1, color: "red"},
  {num:2, color: "black"},
  {num:3, color: "blue"},
  {num:4, color: "green"},
  {num:5, color: "blue"}
];

// 배열 필터링, color가 blue인 요소만 필터링하기
console.log(arr.filter((elm) => elm.color === "blue"));
//filter 메서드는 전달하는 요소의 반환값이 true인 모든 요소를 반환한다.

// 배열 슬라이싱
console.log(arr.slice(0,2));

// 배열 합치기
const arr1 = [
  {num:1, color: "red"},
  {num:2, color: "black"},
  {num:3, color: "blue"}
];
const arr2 = [
  {num:1, color: "red"},
  {num:2, color: "black"},
  {num:3, color: "blue"},
  {num:4, color: "green"},
  {num:5, color: "blue"}
];
console.log(arr1.concat(arr2));

// 배열 정렬
let chars = ['나', '다', '가'];
console.log(chars.sort()); // 사전순으로 정렬된다. 원본 배열을 정렬한다.

let numbers = [0, 3, 2, 1,10, 30, 20];

numbers.sort();
console.log(numbers); // 이상한 모습으로 정렬되어있을 것. sort는 숫자기준이 아니라 문자기준으로 정렬하기 떄문이다.
//따라서 다음과 같이 비교함수를 만들어야 한다.
const compare = (a, b) => {
  //1. 같다
  //2. 크다
  //3. 작다
  
  if(a > b) {
  	return 1;
  }

  if(a < b) {
  	return -1;
  }
  
  //같다
  return 0;
}

numbers.sort(compare);
console.log(numbers);