JS - 복습

Jaa-van·2023년 4월 3일
0
post-thumbnail

JS란?

객체 지향 언어
동적 타이핑 언어 -> 변수의 타입을 따로 지정해줄 필요 없고 런타임에 변수의 타입이 정해지는 언어

변수를 선언하는 3가지 방법 : var, let, const

var는 전에 선언한 변수를 다시 선언할 수 있다 (let, const 는 불가능)

var, let 은 변수에 재할당을 할 수 있다
하지만 const 는 재할당이 불가능하다

형태

  1. 숫자
    정수
    실수
    지수형

무한대
무한대

  1. 문자 - string
    문자열 길이 확인 - length
    문자열 결합하기 - concat
    문자열 자르기 - substr(a,b) -> a번째부터 b만큼 출력해줘
    문자열 검색 - search
    문자열 대체 - replace(a,b) -> a 를 찾아서 b로 대체해줘
    문자열 분할 - split

  2. boolean

  3. undefined

  • null -> 값이 존재하지 않음을 명시적으로 나타내는 타
  1. object
    let person - {
    name : 'choi',
    age : 20,
    isMarried : true
    }
  2. array
    let number = [1,2,3,4,5]

형변환

  1. 암시적 형 변환

+연산자는 문자가 우선시 된다( 문자와 숫자를 합치면 문자로 출력된다)
-,*,/ 등은 숫자가 우선시 된다

  1. 명시적 형 변환 ( 첫글자 대문자 주의)
  • boolean
    Boolean (0), '', null, undefined, NaN //false
    Boolean ( "false", {} ) //true
  • 문자열
    String() // 다른 형태를 넣어도 다 string 으로 변환해줌
    console.log(string(null)) // "null"

  • 숫자
    Number( ' 123') // 123, typeof = number

연산자

  • 더하기 연산자
    -> console.log(1 + "1") // 11 ( 문자열을 우선하기 때문에)

  • 빼기, 곱하기,나누기 연산자
    console.log(1 - "2") // -1 ( 숫자를 우선시 하기 때문에)

  • 나머지 연산자 (%)
    console.log(a % b) // a 를 b 로 나눈 후 남은 나머지 값을 출력한다

  • 할당 연산자( = )

비교 연산자 (true or false 를 반환하는 연산자)
1. 일치 연산자 ( === )
타입까지 일치해야 true 를 반환한다
console.log("2" === 2) // false

  1. 불일치 연산자( !== )
    타입까지 일치해야 false 를 반환한다 (일치 연산자의 반대값이 나온다)

console.log( 2 !== 2) // 숫자 2와 숫자2가 다르니?? 답변 = 아니 (false)

  1. < > 비교 연산자

  2. 논리 연산자
    논리곱 연산자 && ( 모두 true 일때 true 를 반환)
    논리합 연산자 || ( 하나라도 true 일때 true 를 반환)
    논리 부정 연산자
    let a = true;
    console.log(!a) // false

  3. 3항 연산자
    a ? 1 : 2
    a가 참이면 1을, 거짓이면 2를 반환한다

  4. 타입 연산자 ( typeof )
    항의 형태를 반환한다

객체

객체는 key - value pair 이다
하나의 변수에 여러개의 값을 넣을 수 있다

생성자 함수를 이용해 객체를 생성할 수 있다
function Person{name, age, gender) {
this.name = name;
this.age = age;
this.gender =gender
}

let person1 = new Person( "홍길동", 30, "남자")
let person2 = new Person("홍길순", 20, "여자")

  • 접근하는 방법
    person.name
    person.age

@객체 메소드
Object.keys() // 객체의 key를 다 가져오는 메소드
key 값만 배열의 형태로 반환된다

values.() // 객체의 value 를 다 가져오는 메소드
value 값만 배열의 형태로 반환된다

entries.() // key 와 value 값을 묶어서 배열로 만들고,
이를 배열의 형태로 반환한다

assign() // 객체 복사
assign( 어디에 복사할 것인지, 무엇을 복사할 것인지, 바꿀 부분 )
let newPerson = {}
Object.assign(newPerson, person)

@객체 비교
객체는 크기가 상당히 커서 저장할 때 저장할 주소를 만들어서 저장한다
따라서 구성 요소가 완전히 같은 객체 두개를 === 하여도 false 가 나온다

JSON.stringify() 라는 기능읗 활용해서 내용만 비교할 수 있다

@객체 병합
spread operator ( ... ) 을 사용해서 객체를 해체한 뒤에 병합한다

let sum = ( ...arr1, ...arr2 )

if, elseif, switch ~~

@if 문
if (true 또는 false 가 나올 수 있는 조건) {

}
// true 라면 {}가 실행된다

@if - else 문
if (조건) {

} else {

}

조건이 참이라면 if 뒤의 {} 를 실행, 그 외에는 전부 else 뒤의 {} 를 실행한다

@switch
변수의 값에 따라 여러개의 경우 중 하나를 선택
~() 안에는 변수가 들어간다~

break; -> switch 반복을 마무리 하고 다음 항으로 넘어간다
default -> case 에 해당하지 않는 경우 실행된다

let fruit = "사과"

switch (fruit) {
case "사과":
console.log("사과입니다");
break;
case "바나나":
console.log("바나나입니다");
default :
console.log("아무것도 아닙니다")
break;
}

@조건부 실행

~(and 조건)~
let x = 10;

if (x>0) {
console.log("x는 양수입니다")
} // 를 짧게 줄이기 위해서

(x>0) && console.log("x는 양수입니다")
// 로 표현할 수 있다 ( && 조건부 실행)

삼항 연산자와 단축평가
~or 조건~
let y; // y 에는 undefined 가 할
let z = y ||20; // undefined 라면 20을 할당해줘 라는 단축평

@falsy 와 truthy
어떤 값이 true 에 가깝냐 falsy에 가깝냐 를 평가하는 것

0, "", null, undefined, NaN 는 falsy 한 값

배열

@배열 메소드

  • push
    배열의 맨 뒤에 배열 요소를 추가한다
  • pop
    배열의 맨 뒤에 있는 요소를 뺀다(제거한다)
  • shift
    배열의 첫 번째 있는 요소를 제거한다
  • unshift
    배열의 맨 앞에 요소를 추가한다
  • splice
    splice( a, b, c) // index a 에서부터 b 만큼의 요소를 제거하고 c 로 대체해줘
  • slice
    slice (a, b) // index a 부터 b까지로 이루어진 배열을 만들어서 반환해줘

매개변수 자리에 함수를 넣는 것을 콜백 함수라고 한다
콜백함수의 매개변수에는 item, i 를 넣는다

  • forEach (대문자 주의)
    let numbers = [4, 1, 5, 4, 5]

numbers.forEach( function ( item ) {
console.log ( "item입니다 =>" + item);
});

item입니다 =>4
item입니다 =>1
item입니다 =>5
item입니다 =>4
item입니다 =>5

각각의 배열 요소들을 function( item) 의 매개변수로 사용해서 실행했다

  • map
    map 은 항상 원본 배열의 길이만큼의 배열이 다시 return 된다.
    let newNumbers = numbers.map(function (item) {
    returm item *2 ;
    )}

console.log(newNumbers)
//
[4, 2, 10, 8, 10]

  • filter
    모든 배열만큼 돌리는 것이 아닌 조건에 true 가 되는 요소만 작용한다

  • find
    filter 와 유사하게 조건에 맞는 요소를 반환하지만 true 가 되는 첫 번째 요소를 반환한

함수

  1. 함수 선언문
    function 함수이름() {

}

  1. 함수 표현식
    let 함수이름 = function () {

}

input -> 매개변수
output -> 반환값

  1. 전역 변수와 지역변수
    함수 내에서 선언된 변수는 함수 내에서만 작용한다\

  2. 화살표 함수
    let 함수이름 = () => {

}
문법은 기존의 함수와 똑같다

for, while, break, continue

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

}

@for in
객체의 속성을 출력하는 문법

for ( let key in obj) {
console.log( key + ':' + person[key])
}

객체의 key 값을 각각 불러와서 사이클을 돌리게 된다

@while

while (조건) {
메인로직
증감
}

증감 적용 이후 조건이 true 일 경우 계속 메인 로직이 작동하고 false 가 된 순간 while 문에서 튕겨져 나간다

let i = 3
let arr = []

while (i < 100) {
if (i%5 == 0) {
arr.push(i)
}
i++
}
console.log(arr)

[
5, 10, 15, 20, 25, 30, 35,
40, 45, 50, 55, 60, 65, 70,
75, 80, 85, 90, 95
]

@do while
먼저 로직을 한번 실행하고 while 조건을 돌린다

do {
메인로직
증감
} while (조건)

@break
break 를 만나는 순간 for 문을 끝내고 밖으로 나간다

@continue
continue 를 만나면 그 아래로 내려가지 않고 바로 다음 for 문으로 넘어간다

0개의 댓글

관련 채용 정보