자바스크립트 기초 정리

김씨네 정이·2023년 8월 30일
JavaScript
1

프로젝트 성장일기

목록 보기
3/3
post-thumbnail

목차

    1. 변수
    1. 자료형
    1. alert, prompt, confirm
    1. 연산자
    1. 제어문(반복문)
    1. 함수
    1. Array와 Object 자료형
    1. 나머지 매개변수(Rest Parameters), 전개구문(Spread syntax)
    1. 구조분해할당

01. 변수

✅ let - 변할 수 있는 값

  • 한번 선언 후 다른값으로 바꿀 수 있음.
    최초로 선언한 변수에 let를 붙여준다면 에러를 통해 알 수 있음.

✅ const - 변하지 않는 값

  • 한번 선언 후 다른값으로 바꿀 수 없음. (수정 X)

1. 변수는 문자, 숫자, $ _만 사용 가능

// 예시
const MY_HOME = "...";

2. 첫글자 숫자 X. ⛔

// 예시
const 1stGG = "...";

3. 예약어 사용 X. ⛔

// 예시
let let = "...";

4. 가급적 상수는 대문자로. 

// 예시
const MAX_SIZE = 99;

5. 변수명은 읽기 쉽고 이해할 수 있게 

// 예시
const aa = 1; ⛔
const userNumber = 1; ✅

02. 자료형

수학자 조지 불의 이름을 따서 불 대수!
*일상적인 논리를 수학적으로 표현한 것!

불대수에서 사용하는 값들은 숫자가 아닌, ✅ 진리값!
→ 어떤 명제가 참인지 거짓인지 나타내는 것.

  • 참(True), 거짓(false)

불대수에서의 연산은? ✅ AND OR NOT

AND 연산

→ x와 y가 모두 참일 때만 x AND y가 참

xyx AND y
TrueTrueTrue
Truefalsefalse
falseTruefalse
falsefalsefalse

OR 연산

→ x와 y가 하나라도 참이면 x OR y는 참

xyx OR y
TrueTrueTrue
TruefalseTrue
falseTrueTrue
falsefalsefalse

NOT 연산

xNOT X
Truefalse
falseTrue

예제

// 불린 (Boollean)

console.log(3 >= 2); // 3은 2보다 크거나 같다.
console.log(3 <= 3); // 3은 3보다 작거나 같다.
// 주의할점! 등호를 항상 부등호 뒤에 써야 함!!!

console.log(2 === 1); // 값이 서로 일치한다.
console.log(2 !== 1); // 값이 서로 불일치 한다.
// !는 부정의 의미를 가지고 있다라고 알면 됨.


// 문자열 응용해보기!
console.log('aaa' === 'aaa'); //true
console.log('aaa' !== 'aaab'); //true

// 1. && AND 연산자
console.log(true && true); //true
console.log(true && false); //false
console.log(false && true); //false
console.log(false && false); //false

// 2. || OR 연산자
console.log(true || true); //true
console.log(true || false); //true
console.log(false || true); //true
console.log(false || false); //false

// 3. NOT 연산자
//우리가 작성한 값에 반대값이 출력 됨!
console.log(!true); //false
console.log(!false); //true

// 중첩하여 활용 가능.
console.log(!!true); //true
console.log(!!false); //false

형변환(Type Conversion) 예제

// 형변환(Type Conversion)
// String, Number, Boolean 으로 형변환 가능

// 예제
console.log('10' + '5'); //105
console.log(10 + 5); // 15

console.log(Number('10') + Number('5')); //15
console.log(String(10) + String(5)); //105


// 숫자 -> 문자
let x = 123;
console.log(x);
console.log(String(x));
console.log(typeof x);
console.log(typeof String(x));

// 불린 -> 문자
let y = true;
console.log(y);
console.log(String(y));
console.log(typeof y);
console.log(typeof String(y));


// 문자 - > 숫자
let z = '문자';
console.log(z);
console.log(Number(z)); // NaN 결과값, 숫자가 아니라는 의미.
console.log(typeof z);
console.log(typeof Number(z));

// 불린 -> 숫자
let i = true;
console.log(i);
console.log(Number(i)); // 불린값은 숫자 0(false)과 1(ture)로 형변환 됨
console.log(typeof i);
console.log(typeof Number(i));

// 문자 -> 불린
let k = '문자';
console.log(k);
console.log(Boolean(k)); // 일반적으로 어떤 값을 변환할 때 true값이 됨.
console.log(typeof k);
console.log(typeof Boolean(k));

let n1 = ''; // 비어있는 문자가 false로 변환 됨.
let n2 = 0; // 숫자의 경우 숫자 0과, NaN값이 false로 변환 됨.
let n3 = NaN;
// '', 0, NaN <- 숫자가 비어있는 값을 'Falsy'값이라고 부름.

템플릿 문자열(template string) 예제

// 템플릿 문자열 (template string)
// template: 일정한 틀, 형식

// 예제1
let year = 2018;
let month = 3;
let day = 11;

console.log('생년월일은 ' + year + '년 ' + month + '월 ' + day + '일 입니다.');
console.log(`생년월일은 ${year}년 ${month}월 ${day}일 입니다.`);


// 예제2
let myNumber = 3;

function getTwice(x) {
  return x * 2;
}

console.log(`${myNumber}의 두 배는 ${getTwice(myNumber)}입니다.`);
// myNumber = 3
// 함수를 호출할 때에도 myNumber 변수를 사용하고 있으니,
// 3이 파라미터 x에 전달이 되어서
// 3 * 2를 리턴하기 때문에 결과값 6이 나옴.
// 결과 : 3의 두 배는 6입니다.

null 과 undefined

null - 의도적으로 표현할 때 사용하는 값
undefined - 값이 없다는 것을 확인하는 값

✅ 자바스크립트에서는 값이 주어지지않는 변수에는 기본적으로 undefined 라는 값을 가지고 있음!

✅ 의도적으로 값이 없다는 걸 표현하려면 반드시 null을 사용할 것을 권장.

// 예제
console.log(null == undefined); // true
console.log(null === undefined); // false

💡null과 undefined는 서로 동등하지만, 일치하진 않음.



03. alert, prompt, confirm

alert - 알려줌
prompt - 입력받음
confirm - 확인받음

기본적으로 제공되는 창들은 간단하게 사용할 수 있지만, 단점은?

  • 1. 스크립트 일시 정지
  • 2. 스타일링 X (디자이너가 싫어함ㅋㅋ)



04. 연산자

오른쪽에 있는 피연산자를,
왼쪽에 있는 피연산자로 할당한다라는 의미

  • 피연산자 = 연산 되어지는 대상을 가르키는 말
  • 할당 = 지정했다, 대입했다 등

✅ 할당 연산자 - 오른쪽에 있는 값을 왼쪽으로 할당
✅ 복합 할당 연산자 - 할당 연산자와 결합해서 자주 쓰이는 표현을 더 간략하게 쓸 수 있게 해주는 연산자
✅ 복합 할당 연산자 - 변수의 값을 1씩 증가시키거나 감소시킬 때는? 복합 할당 연산자보다 더 간략하게 쓸 수 있는 증가연산자, 감소연산자를 사용할 수도 있음

  • 더하기 기호를 연달아 쓰거나 ++
  • 빼기 기호를 연달아 쓰면 됨 --

💻 할당 연산자(Assignment operators) 예제

// 할당 연산자 (Assignment operators)
// 할당연산자는 연산의 순서가 있음.
let name = '하이'
let x = 5;
x = x - 2; // 연산식 먼저 헤결하면 됨.
console.log(x); // 3 출력.

💻 복합 할당 연산자(Compound assignment operators) 예제

// 다음 두 줄은 같습니다
x = x + 1;
x += 1;

// 다음 두 줄은 같습니다
x = x + 2;
x += 2;

// 다음 두 줄은 같습니다
x = x * 2;
x *= 2;

// 다음 두 줄은 같습니다
x = x - 3;
x -= 3;

// 다음 두 줄은 같습니다
x = x / 2;
x /= 2;

// 다음 두 줄은 같습니다
x = x % 7;
x %= 7;

💻 증가(increment), 감소(decrement) 연산자 예제

// 다음 세 줄은 같은 의미입니다.
x = x + 1;
x += 1;
x++;

// 다음 세 줄은 같은 의미입니다.
x = x - 1;
x -= 1;
x--;

💻 옵셔널 파라미터 예제

// 아무런 값도 입력하지 않은 함수를 호출하면 undefined 값이 나옴.
// -> undefined값이 아닌, 파라미터에 기본값을 설정하는 방법이 있음.
function introduce(name, age, nationality = '한국') {
console.log(`제 이름은 ${name}입니다.`);
console.log(`나이는 ${age}살 이고,`);
console.log(`국적은 ${nationality}입니다.`);
}

introduce('짱구', 4, '미국'); // 값을 모두 전달한 경우
console.log('');
introduce('짱구', 4); // 파라미터 값을 생략한 경우
// 옵셔널 파라미터는 선언할 때 반드시 생성한 후 가장 뒤쪽으로 선언해야 한다는 점 기억하기.



05. 제어문(반복문)

어떤 대상과 조건값이 일치 하는지 확인하고,
그 결과에 따라 다른 동작이 필요할 때는 스위치문을 활용할 수 있음.

💻 if 문

let myChoice = 2;

if (myChoice === 1) {
  console.log('토끼를 선택한 당신, ...');
} else if (myChoice === 2) {
  console.log('고양이를 선택한 당신, ...');
} else if (myChoice === 3) {
  console.log('코알라를 선택한 당신, ...');
} else if (myChoice === 4) {
  console.log('강아지를 선택한 당신, ...');
} else {
  console.log('1에서 4사이의 숫자를 선택해 주세요.');
}

💻 for 문

// 01. 가동작부분을 꼭 채울 필요는 없다.
for (let i = 1; i <= 10;) {
  console.log(`${i} 하이!!`);
  i++;
}


// 02. 초기화부분에서 생성한 변수는 for문의 로컬변수다.
for (let i = 1; i <= 10; i++) {
  console.log(`${i} 하이!!`);
}
console.log(i); // Error !!
// or문 안에서 생성한 로컬변수이기 때문에,
// for 반복문이 종료되고 나서 for 반복문 밖에서,
// 변수를 사용하려고 하면 오류가 발생한다


// 03. 초기화 부분도 반드시 채울 필요는 없다.
let i = 1;
for (; i <= 10; i++) {
  console.log(`${i} 하이!!`);
}
// for 반복문의 로컬변수를 꼭 활용하지 않아도,
// 반복문 밖에 있는 글로벌 변수를 활용해도,
// 아무런 문제없이 같은 결과를 출력!

💻 switch 문

💡주의할 점은 조건식에서 등호를 반드시 3개를 입력해 주어야 한다. switch 문은 암시적 형 변환을 허용하지 않기 때문!

  • switch 문은 값들을 비교할 때 자료형을 엄격하게 구분함.
// 각 등급별 가격
let VIPPrice = 15;
let RPrice = 13;
let SPrice = 10;
let APrice = 8;

// 각 등급에 맞는 가격을 출력하는 함수 checkPrice를 완성하세요
function checkPrice(grade) {
	switch(grade) {
	  case 'VIP':
	    console.log(`${grade}석은 ${VIPPrice}만원 입니다.`)
	    break;
	  case 'R':
	    console.log(`${grade}석은 ${RPrice}만원 입니다.`)
	    break;
	  case 'S':
	    console.log(`${grade}석은 ${SPrice}만원 입니다.`)
	    break;
	  case 'A':
	    console.log(`${grade}석은 ${APrice}만원 입니다.`)
	    break;
	  default:
	    console.log('VIP, R, S, A 중에서 하나를 선택해 주세요.')
	}
}

// 테스트 코드
checkPrice('R');
checkPrice('VIP');
checkPrice('S');
checkPrice('A');
checkPrice('B');



06. 함수

// function 작명(){}
// 작명() <-- 이렇게 가져다 쓰면 이안에있는 코드가 남음.

function alertOpen() {
  document.getElementById('alert').style.display = 'block';
  // 1. 긴 코드를 짧게 축약해서 쓰고 싶을 때
  // 2. 긴코드 재사용 잦을 때 편리
}
alertOpen();
// 함수 호출

여러번 호출해도 상관없음!

매개변수

  • getArea()의 매개변수를 부여해줌으로서,
    width = 100, height = 200 이 되었음으로
    area의 값은 20000이 되고,
    결과적으로, 콘솔창에 20000이 출력됨.



07. Array와 Object 자료형

[ Array / Object 차이? ]

  1. ✅ array는 순서개념이 있음! - 왼쪽에 적을 수록 더 앞에 있는 자료임
  • 가나다순 정렬
  • x번 자료부터 x번 자료까지 자르기
  • x번 자료 바꾸기
  • 맨 뒤, 맨 앞에 자료 넣기
  • 원하는 자료가 들어있나 검색 순서개념이 필요한 많은 것들을 할 수 있음.
  1. ✅ object는 순서개념이 없음! - 가장 왼쪽에 적었다고 해도 1빠임을 보장 X
  // 01. array 자료형
  // 대괄호를 열고 콤마로 구분해서 집어 넣으면 됨
  var car = ['소나타', 50000, 'white'];

  // array 자료에서 데이터를 뽑을 때 대괄호를 뒤에 붙이면 됨
  console.log(car[1]);

  // array 자료를 수정하고 싶을 때 등로를 이용해서 수정하면 됨.
  car[1] = 60000;


  // 02. Object 자료형
  // 중괄호를 열고 자료를 콤마로 구분해서 집어넣으면 됩니다.
  // 멋진 말로 자료의 이름은 key, 실제 자료는 value라고 부름
  var car2 = { name : '소나타', price : 50000 };

[ Array & Object 데이터바인딩 ]

✅ 복잡한 데이터에서 자료 꺼내려면?

  • 시작기호가 { 이거면 object 자료형임 (90% 확률)
  • 시작기호가 [ 이거면 array 자료형 (90% 확률)

✅ 웹서비스 개발할땐 2개의 방식이 있음.
1. 서버에서 html을 미리 완성해서 고객에게 보내줌 (server-side rendering)
2. 서버가 비어있는 html과 데이터만 보내줌 (client-side rendering)

💡 요즘은 2번이 유행이라 우리도 데이터를 서버에서 가져와서 데이터바인딩하는 방법을 배우고 있는 것

💡 데이터 바인딩하는 문법이 너무 길고 복잡해서 작은 사이트는
쌩 자바스크립트를 써도 커버 가능한데, 큰거 만들 땐 라이브러리 설치해서 쓰는것! (제이쿼리, 리액트, 뷰 등) why? -> 코드가 짧아짐

💡 그리고 더 최근엔 2번에 질려서 또 1번으로 돌아가는 움직임이 있음!
각. 장단점이 있음.


[ array에 자주 쓰는 sort, map, filter 함수 ]

// 01. sort 함수
// 원본을 변형시킴
let 어레이 = [7, 3, 5, 2, 40];
어레이.sort(function (a, b) {
  return a - b
});

console.log(어레이);
// 1. a, b는 array 안의 자료들임.
// 2. return 오른쪽이 양수면 a를 오른쪽으로 정렬해줌
// 3. return 오른쪽이 음수면 b를 오른쪽으로 정렬해줌
// 4. 그리고 array 안의 자료들을 계속 뽑아서 a, b에 넣어줌 
// 이렇게 동작해서 a - b 저렇게 쓰면 숫자순 정렬이 되는 것

// 예를 들면 a, b가 7과 3일 경우 7 - 3 하면 4가 남음
// 4는 양수죠? 그러면 7을 3보다 오른쪽으로 보내줌
// 그래서 숫자 오름차순 (123순) 정렬이 완성되는 것


// 02. filter 함수
// array에 자주 쓰는 filter 함수
// array 자료에서 원하는 자료만 필터링하고 싶으면 filter 함수를 씀.
let 어레이 = [7,3,5,2,40];

let 새어레이 = 어레이.filter(function(a){ // 변수에다 저장해서 써야함.
  return 조건식
});
// 1. a라고 작명한건 array 에 있던 데이터를 뜻하고
// 2. return 우측에 조건식을 넣으면 조건식에 맞는 a만 남겨줍니다.
// 3. filter는 원본을 변형시키지 않음, 따라서 새로운 변수에 담아써야 함. 


// 03. map 함수
// array 안의 자료들을 전부 변형하려면 map 함수를 씀.
let 어레이 = [7,3,5,2,40];

let 새어레이 = 어레이.map(function(a){
  return 수식같은거
});



08. 나머지 매개변수(Rest Parameters), 전개구문(Spread syntax)

// 1. 나머지 매개변수(Rest Parameters)
function showName(...names) {
  console.log(names);
}

showName(); // []
showName('Mike'); // ['Mike']
showName('Mike', 'Tom'); // ['Mike', 'Tom']

// 나머지 매개변수는 정해지지 않은 갯수의 인수를 배열로 나타낼 수 있게함.
// ...배열이름
// 아무것도 정하지 않으면 undefined 가 아닌, 빈배열이 나타남.


// 2. 전개 구문(Spread syntax) : 배열
let arr1 = [1,2,3];
let arr2 = [4,5,6];

let result = [0, ...arr1, ...arr2, 7, 8, 9]; // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
// 중간에 쓰는것도 가능함.
// 원래 배열을 넣고, 중간에 빼고 병합하는것이 번거로움. 하지만 전개구문을 사용하면 편함.

// 객체도 가능함.
let user = {name : '짱구', age : 5};
let user2 = {...user};

user2.name = "훈이";

console.log(user.name); // "짱구"
console.log(user2.name); // "훈이"
// user2의 이름을 바꾸어도 user의 name에는 아무런 영향을 미치지 않음. 
// 결론적으로 user2로 복제된거임.



09. 구조분해할당

// 01. 구조 분해 할당 구문은?
// 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식
let [x, y] = [1, 2];

console.log(x); // 1
console.log(y); // 2


// 배열 구조분해 예제
let users = ['짱구', '훈이', '유리'];
let [user1, user2, user3] = users;

console.log(user1); // '짱구'
console.log(user2); // '훈이'
console.log(user3); // '유리'


// 객체 구조 분해 예제
let user = {name: 'Mike', age: 30};

let {name, age} = user;
// 위 코드는 아래와 같음.
// let name = user.name;
// let age = user.age;
profile
김씨네 정이
이제부터 프론트엔드 개발자,
이전 포스트

git SSH key 세팅하기

0개의 댓글