[JS]JavaScript 개념 정리

이창준·2024년 3월 17일
JavaScript코딩테스트

취준이 가까워지면서 우당탕탕 코테를 준비하게 되었다. 현재 원하는 직군에 맞는 언어로 테스트를 준비하기 위해 JS를 공부하고 있는데, 가끔 기초 개념들이 헷갈릴 때가 있어서 찾아보는 상황이 발생한다. 그래서 이왕 참고하는거, 내가 공부하면서 적었던 내용들을 다시 보면서 공부해야 더 기억에 잘 남을거라고 생각하여 기초 개념부터 정리를 시작하려고 한다.

*다음 내용들은 테킷에서 JS관련 공부를 하며 정리한 내용들이다.

변수: 데이터를 담아놓기 위해 이름표를 붙여놓은 공간

//변수 선언(undefined)
var num;
//변수 선언 + 초기화
var num = 10;

//사용할 수 없는 변수명
var 4you;
var !mportant;

//1. camel Case
var sendEmailDate;
//2. snake_case
var send_email_date;

//주석방법
//1. 싱글라인
/*
 2. 멀티라인
*/

사용할 수 없는 변수명

  1. 숫자 먼저 오는 이름
  2. 특수기호 혹은 마침표 등이 섞인 이름
  3. 예약어(JS keyword검색하면 나옴)

자료형

  1. 기본형, 단순형, 원시형
    1. number
    2. string
    3. boolean
    4. indefined
      • 변수를 선언하고 할당하지 않으면 undefined 출력됨.
    5. null
    6. symbol
      • 동일한 텍스트 혹은 동일한 값을 다르게 인식하게 만들기 위해서는 symblo()을 씌워주어야 한다.
  2. 참조형 객체(Object)
💡 JavaScript의 number은 정수(integer)와 실수의 구분이 없다.

객체(Object)

  • 속성의 모음으로 이루어진 데이터
  • 속성에는 어떤 데이터 타입이라도 할당 가능
  • 속성의 구분은 콤마로 ,
  • 속성의 정의 속성명(key): 속성값(value)
var student = {
	grade: 1,
	school: "lino school"
};

//객체의 값 호출
var gradeInfo = student.grade;
console.log(gradeInfo);

//객체의 키 호출
var key = Object.keys(student)[0];
console.log(key);
//->grade 출력

//객체에 속성 추가
student.class = 3;
console.log(student);
//->{grade: 1, school: 'lion school', class: 3}

student.class == student['class']

//비어있는 객체 선언방법 2가지
var teacher = new Object();
var teacher = {

};

연산자

  1. 산술 연산자
var a = 10;
var b = 3;
console.log(a+b);
console.log(a-b);
console.log(a*b);
console.log(a/b);
console.log(a%b);

//작업 후 a = a+1
console.log(a++);
//작업 전 a = a+1
console.log(++a);
  1. 대입 연산자, 할당 연산자
var d = 2;
d = 10;
console.log(d);

//작업 전 연산 
console.log(d += 3) // d = d+3
console.log(d -= 3)
console.log(d *= 3)
console.log(d /= 3)
console.log(d %= 3)
  1. 비교 연산자
//값이 같은지 확인(암묵적 형변환)
==
<-> !=

//값이 같은지 확인(타입까지 동일해야 함)
===
<-> !==

  1. 논리 연산자

    1. 논리합(OR) ||
      • 둘 중 하나만 참이면 참
    2. 논리곱(AND) &&
      • 모두가 참이어야 참
    3. 부정(NOT) !

  2. typeof 연산자

    • 사용하는 데이터 앞에 typeof 붙여서 출력해보면 그 자료형이 나옴
    console.log(typeof 1); //number
console.log(typeof "1"); //string
console.log(typeof true); //boolean
console.log(typeof undefined); //undefined
console.log(typeof symbol()); //symbol
console.log(typeof null); //object

문자열

  1. 이스케이프 시퀀스

    • \n: 줄 개행
    • \t: tab 만큼 띄우기
    • \” 또는 \’: “ 또는 ‘를 출력할 때 사용
    • \: \을 출력할 때 사용

  2. 템플릿 리터럴(ES6)

    • 이스케이프 시퀀스 없이 줄 개행 가능
    var a = `안녕하세요!
반갑습니다.`;
console.log(a);
//안녕하세요!
//반갑습니다.

var price = 1000;
var b = '이 물건은 ' + price + '원 입니다.';
var c = `이 물건은 ${price}원 입니다.`;
var d = `이 물건은 ${200 + 450}원 입니다.`;
//-> 이 물건은 650원 입니다.

  3. 문자열 함수

    var abc = "I am iron man";
//indexOf
//문자열의 특정 값이 시작되는 위치를 0번지부터 세어서 알려줌
abc.indexOf("man")); // 10

//slice
//문자열의 일부를 잘라낼 때 사용
abc.slice(0,3); // I a
abc.slice(0,4); // I am

//toUpperCase(), toLowerCase()
abc.toUpperCase(); // I AM IRON MAN
abc.toUpperCase(); // i am iron man

//startsWith(), endsWith()
//내부 인자로 시작/끝나는지 확인
var efg = 'This is my car.';
efg.startsWith('Th'); // true
efg.startsWith('th'); // false
efg.endsWith('car'); // true
efg.ednsWith('Car'); // true

//includes()
//어느 위치에서든 포함하는지 확인
efg.includes('is'); // true

배열: 복수의 데이터를 순서대로 담고 있는 자료구조

var mbti = ['INTP', 'ENTJ', 'INTJ'];

consonle.log(mbit[0]); //INTP
console.log(mbti.lenght); //3

//데이터 추가
mbti[3] = 'ESFP';
console.log(mbti.lenght) //4

//값 덮어쓰기: 다른 값으로 초기화해주면 됨.
mbti[2] = 'ESFP';

//push(): 사용자가 전달한 요소를 원본 뒤에 추가한다.
// 반환값은 추가 후 배열의 길이이다.
console.log(mbti.push('ESFP', 'ISTJ')); //5

// 스프레드 문법: 원본을 훼손하지 않고 변경 가능. (...)을 사용한다.
var newMbit = [...mbti, 'ESFP', 'ISTJ'];
console.log(mbti); //['INTP', 'ENTJ', 'INTJ']
console.log(newMbti); //['INTP', 'ENTJ', 'INTJ', 'ESFP', 'ISTJ']

// pop(): 마지막 요소 뽑기. 원본 데이터도 수정됨.
mbti.pop();

// unshift(): push와 다르게 앞쪽에다가 요소 추가.
mbti.unshift('ESFP', 'ISTJ');
//이걸 스프레드 문법으로 구사하려면 순서만 바꿔주면 된다.
var newMbit = ['ESFP', 'ISTJ', ...mbti];

// shift(): 앞쪽에 있는 요소 반환해서 보여주기. 원본 데이터도 수정됨.
mbti.shift()
  • 배열의 순서는 0부터 시작한다. index=0;
  • 배열은 객체이다.
  • Key ⇒ index, Value ⇒ component

배열에 사용하는 함수들

var mbti = ['INTP', 'ENTJ', 'INTJ'];

// slice(): 인덱스의 시작점을 포함하고 끝 점은 포합하지 않는 상태로
// 인덱스 안에 있는 것들 복사해오기
console.log(mbti.slice(0, 2));
//전체 다 복사해 가져오기
console.log(mbti.slice());
//맨 뒤에서부터 -n개 가져오기
console.log(mbti.slice(-1));

//join() : 배열형태로 있던 요소들이 문자열로 표현된다.
// 기본 값은 요소 사이를 ,로 구분하는데, 원하는 구분자가 있으면 () 안에 넣으면 된다.
mbti.join();
mbti.join('-');
mbti.join('|');
mbti.join('');

//sort() : (기본값)오름차순 정렬
mbti.sort();

//reverse() : 내림차순 정렬
mbti.sort().reverse();

제어문

  • 조건문
// 1. if...else문
if(a>2){
	console.log('a>2');
} else {
	console.log('a<=2');
}

// 2. if...else if...else
if(a>2){
	console.log('a>2');
} else if (a==2) {
	console.log('a==2');
} else {
	console.log('a<=2');
}
/*
* 여러 개의 if 조건 중 여러 개의 true가 있으면, 먼저 true인 것을 만나면
* 뒤에 있는 조건을 확인하지 않고 true의 값을 반환한다.
*/

// 3. switch문
var mbit = 'ITFP';
var val;

switch(mbti) {
	case 'INFP':
		val = '당신의 MBTI는 INFP입니다.';
		break;
	case 'ENFP':;
		val = '당신의 MBTI는 ENFP입니다.';
		break;
	case 'ISFP':;
		val = '당신의 MBTI는 ISFP입니다.';
		break;
	default: 
		val = '유효한 값이 아닙니다.'
}
/*
* switch는 위에서 조건을 만족해도 아래로 쭉 내려가면서 조건을 확인한다.
* break; 문이 필수적으로 있어야 한다.
*/
  • 반복문
// 1. for문
// i = 1, 2, 3, ..., 10
for(var i=0; i<10; i++){}
// i = 10, 9, 8, ..., 1
for(var i=10; i>0; i--){}

for(var i=0; i<10; i++){
	for(var j=0; j<10; j++){
		console.log(`${i}-${j}`);
		//O(n^2)작업하는 로직
	}
}

// 2. while문
while(boolean) {
	//boolean == true일 때 진행할 반복문
}

// 3. do...while문
do{
	flag--;
	console.log(flag)
} while(boolean)
/*
* 시작하면 먼저 do에 있는 구문 실행. 최초의 조건과 상관없이 나타내고
* 두 번째부터 while문 boolean 확인 후 반복여부 결정
*/

예외(에러) 처리

try {

	//에러가 발생할 가능성이 있는 코드
	myfunc();

} catch(error /* 에러가 들어갈 변수 */) {

	//에러가 발생했을 때 실행되는 코드
	console.log("에러 발생");

} finally {

	//에러 발생 여부와 상관없이 무조건 실행
	console.log("무조건 실행);

}

// 의도적으로 에버를 터트리는 경우. 의도적으로 catch에 에러처리 위임.
// 에러를 임의로 터트리려면 throw를 써야 한다.
try {

	// error폭탄 투척
	throw new Error("에러")

} catch(error /* 에러가 들어갈 변수 */) {

	//에러가 발생했을 때 실행되는 코드
	console.log("에러 발생");
	console.log(error);

} finally {

	//에러 발생 여부와 상관없이 무조건 실행
	console.log("무조건 실행);

}

함수

  • 작업의 묶음
  • 코드를 반복해서 작성하는 비효율을 줄일 수 있다.
//함수 선언문
function multiply(a, b) {
	return a * b;
}

multiply(10, 5); // 50

var result = multiply(243, 24);
console.log(result); // 이 방식으로도 표현 가능!

// 함수 표현: 익명함수를 만들고 이름을 부여해준다. 세미콜론 ;필요!!
var multiply = function (a, b) }
	return a * b;
};

//오류 유형: 익명함수를 만들고 function 뒤에 또 함수 이름을 부여하면
// multiply(10, 5)는 50이 출력되지만, calc(10, 5)는 오류가 호출된다.(Error: calc is not defined)
var multiply = function calc (a, b) }
	return a * b;
};
  • 변수 키워드 - var, let, const
var a = 10;

while (1) {
	var a = 1000;
	break;
}
/*
* 이렇게 하면 a를 출력했을 때 1000이라는 값이 나온다. var a=10을 전역변수로
* 선언했지만, JS에서는 block 안에서도 전역변수를 수정할 수 있다.
*/

//호이스팅
console.log(word); //undefined
work = "happy";
console.log(word); // happy
var word;
/*
* JS에서는 컴파일링을 할 때 선언문(ex. var word) 를 먼저 끌어와서 컴파일링을 한다.
* 그래서 첫 선언을 아래에 했다 해도 끌어와서 word라는 변수가 존재한다고 판단하고
* console.log를 에러없이 진행할 수 있지만, 첫 번째 log에서는 word에 아무런 값이
* 할당되지 않은 상태이므로 undefined가 나오는 것이다.
* 두 번째 console.log는 그 위에 "happy"를 할당해주었기 때문에 할당값이 출력된다.
*/

//let: 위 경우(호이스팅)의 위험성을 없애기 위해 사용
console.log(word); //undefined
work = "happy";
console.log(word); // happy
let word;
/*
* let을 이용하여 선언할 경우 var과는 다르게 오류가 나온다. 호이스팅의 약점을 피하기
* 위해 사용하는 것. 따라서 let word를 맨 위에 써주어야 한다.
*/

let a = 10;

while (1) {
	let a = 1000;
	break;
}
/*
* 이걸 출력하면 a는 10이라는 값이 나온다. var과는 다르게 let에서는 블록 영역 안의 변수는
* 블록 안에서만 유효성을 가지고 있는 것으로, 밖에 전역변수 let a=10; 과는 별개라고 볼
* 수 있다.
*/

// const
//선언하고 값을 할당하지 않으면 오류발생 + 값 덮어쓰기 불가능. Unchangeable
const b = 2;
//상수로서 작동하는 것들은 대문자(snake)로 사용한다.
const PI = 3.14;
const TIME_DATE = 365;

// const로 선언된 변수에 할당된 객체
const student = {
	grade: 1,
	class: 3
};

// const 객체 안에 할당된 변수들은 재할당이 가능하다.
student.grade = 2;

// 객체 자체를 재할당하는 것은 const에서는 불가능하다.
student = {
	num: 10123,
	grade: 2
//오류 발생!!!!!!!!
}

화살표 함수

let plus = (a, b) => {
	return a + b;
}

// 더 간단하게 표시
let plus = (a, b) => a + b

// 파라미터가 한 개일 때
let print = work => {
	console.log(word);
}
print("HELLO!"); // 콘솔에 HELLO! 출력

//입력값(파라미터)이 없는 함수 
let myfunc = () => {
	return 1;
}
console.log(myfunc()); // 1출력
profile
이창준
개발자가 되고싶은 먼지입니다.
이전 포스트

Styled-component 사용법 익히기

다음 포스트

[React] atom 컴포넌트 만들기

0개의 댓글