자바스크립트 기초 정리 -1-

변수 

문자(String)는 항상 "" 감싸줘야함.

예약어는 변수로 선언할수 없음  ( Class)

alert() - 경고창을 띄움
consol.leg() - 로그를 찍어줌

let 한번선언 후에 다른 값으로 바꿀수 있음

let a = 10; 과 a = 10 은 같은 뜻임

let을 통해 이전에 먼저 선언되었는지 확인할수 있으며 앞에 let을 안붙히면 값만 바뀜

const 절대로 바뀌지 않는 상수를 선언할때 사용

대문자로 선언하여 상수라는 것을 알리기 좋음

 

*자바스크립트에서 변수를 선언할때는, 

변하지 않는 값을 const,

변할수 있는 값을 let으로 선언하여 

의도치 않는 상황을 방지 할수 있다 

 

1. 변수는 문자와 숫자, $와 _만 사용할수 있다.
2. 첫글자는 숫자가 될수 없다.
3. 예약어는 사용할수 없다.4. 가급적 상수는 대문자를 사용하는게 좋다
5. 변수명은 읽기 쉽고 이해할수 있게 선언

 

자료형

문자형 String 는 세개로 사용할수 있다.

1. ""(쌍따음표)

중간에 작은따음표가 들어가면 특수문자로 인식함 

const message = "i'm a boy"

2.''(작은따음표)

작은따음표만을 사용할때 특수 문자 사용하려면 \ 를 사용해야함

const message = 'I\'m a boy.'

3.`(백틱) - 문자열내부에 변수를 사용할때 편리  

const message = `my name is &{name}`;

 

숫자형

const y = 10;

+ 더하기 

- 뺴기 

/ 나누기 

* 곱하기

% 나머지

 

boolean

참과 거짓

 

null과 undefined

null - 존재하지 않는 값

undefined - 값이 할당되지 않음

 

typeof 연산자

변수의 타입을 알때 사용

const a = 10; 

console.log(typeof a);

 

대화상자

alert()  - 알려줌

alert("안녕하세요");

 

prompt() -  값을 입력받을때 사용

const name = prompt("이름을 입력하세요"); // 입력창이 나옴
alert(`안녕하세유, ${name}님. 환영합니다.`); // 알림창이 나옴

두번째 인수로 default 값을 출력할수 있다.

prompt('예약일을 입력하세여','2022-12-');

confirm() - 확인 받음

const isAdult = confirm("당신은 성인입니까?");

confirm과 alert의 차이는 alert은 취소가 없다. 

confirm은 창을 통해 확인/취소 클릭시 참과 거짓을 반환함

 

 

형변환

String() -> 문자형으로 변환

Number() -> 숫자형으로 변환

Boolean() -> 불린형으로 변환

형변환은 자료형이 다를때 사용함

const mathScore = prompt("수학몇점?");
const engScore = prompt("영어몇점?");
const result = (mathScore + engScore)/2;
consol.log(result);

prompt의 입력값은 문자형으로 결과값이 정상적으로 출력되지 않음

숫자형이 아니더라도 나누기는 자동 형변환이 됨

const mathScore = 80;
const engScore = 90;
const result = (mathScore + engScore)/2;
consol.log(result);

변수값에 숫자형으로 선언하였을때 정상적으로 값이 출력됨

 

String(323); -> 문자형 변환
Number("323"); -> 숫자형 변환
Number(null); -> 0 반환
Number(undefined); -> NaN 반환
Boolean(0); 
Boolean(null);
Boolean("");
Boolean(undefined);
Boolean(NaN);
-> 불린 형변환 
-> 위의 변환은 모두 false를 반환하며 이외 나머지는 모두 true를 반환함

 

함수 

function sayHello(name){
console.log(`hello, ${name}`);
}

sayHello('bin'); // 함수 호출

//function 함수선언
//sayHello 함수명
//name 매개변수 매개변수는 한개 이상일수 있으며, (name1,name2,name3...)식으로 사용할수있다
//매개변수가 없으면 공란으로 놓는다

 

함수표현식과 함수 선언문

함수 선언문은 어디서든 호출 가능 -> 자바스크립트 내부 알고리즘으로 인해 코드의 함수 선언문을 모두 찾아서 위로 올려줌

sayHello(); // 정상작동

function sayHello(){
  console.log('Hello');
}

sayHello(); // 정상작동

함수 표현식은 코드에 도달하면 생성

sayHello(); // 에러 발생 

let sayHello = function(){
  console.log('Hello');
}

sayHello(); // 정상 작동

 

화살표 함수 

화살표 함수는 좀더 간결하게 사용할수 있다

let add = function(num1,num2){
  return num1 + num2;
}
를 아래의 화살표 함수로 바꿀 수 있다.
let add = (num1,num2) => {
  return num1 + num2;
}

위와 같이 리턴문 일 경우 중괄호가 아닌 소괄호로, return생략
let add = (num1,num2) => (
  num1 + num2;
)

리턴문이 한줄일 경우 괄호 생략
let add = (num1,num2) => num1 + num2;

인수가 하나일 경우
let sayHello =(name) => 'Hello,${name}';

인수가 없을 경우 생략할수 없음
let showError = () => {
  alert('error');
}

리턴문으로 끝나기 전에 여러줄의 코드인 경우 아래와 같은 함수형식으로 사용
let add = (num1,num2) => {
 const result = num1 + num2;
 return result;
}

 

 

객체(Object)

사람의 정보를 객체로 나타나면

name : bin

age:30

const people = {
  name:'bin',
  age:33,
}

객체의 접근

people.name //bin

접근
people.name //bin
people['age'] // 33

추가 
people.gender='male';
pelple.['gender'] = 'male';

삭제 
delete people.gender;

 

단축 프로퍼티

const name = 'bin';
const age = 33;

const people = {
  name, // name:'bin',
  age,  // age:33,
  gender:'male',
 }
 
 존재하지 않은 프로퍼티에 접근
 people.birthDay
 // undifined
 
 프로퍼티 존재 여부 확인
 'birthDay' in people
 //false
 
 age in people
 //true
 
 for... in 반복문
 객체를 순회하며 값을 얻을 수 있다.
 for(let key in people){
   console.log(key);
   console.log(people[key]);
 }

Method

객체 프로퍼티로 할당된 함수

const people = {
  name:'bin',
  age:33,
  gender:'male',
  fly:function(){
    console.log('안녕하세여');
  }
 }
  people.fly(); // 안녕하세여
  
 function 생략 가능
 const people = {
  name:'bin',
  age:33,
  gender:'male',
  fly(){
    console.log('안녕하세여');
  }
 }

this

sayHello : function(){
  console.log('hello,im ${this.name}');
}

ley boy = {
  name:'bin',
  sayHello,
}

ley girl = {
  name:'sol',
  sayHello,
}

위의 함수가 있을때 
boy.sayHello();  //hello,im bin
를 실행 하면 this 는 boy를 가르키며

girl.sayHello(); ////hello,im sol
를 실행 하면 this 는 girl를 가르킨다

 

sayHello : function(){
  console.log('hello,im ${this.name}');
}
의 함수가 화살표 함수로 되어있다면??
sayHello() =>{
  console.log('hello,im ${this.name}');
}

boy.sayHello();
 -> this는 boy의 객체를 가르키지 않는다.

화살표함수는 일반 함수와는 달리 자신만의 this를 가지지 않음
화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져옴

 

배열

length: 배열의 길이 

push : 배열 끝에 추가 

pop : 배열 끝 요소 제거 

unshift : 배열 맨 앞 추가 (여러개 요소를 한번에 추가 가능)

shift : 배열 맨 앞 요소 제거 

let days = ['월','화','수'];

for(iet index = 0; index < days.length; index++){
  console.log(days[index])
}