JS 기초문법 공부 1주차(2)

김종화·2023년 5월 23일

JavaScript

목록 보기
2/18

**조건문과 반복문

1-1. if 문
if (true 또는 false 가 나오는 조건) {
maim logic #1
}

 ex) let x = 10;
     if (x < 0) {
    console.log('x는 양수입니다')
  } -> x = 10 으로 'x는 양수입니다' 출력

1-2. if - else 문
if () {
maim logic #1 true일 경우 #1 수행
} else {
main logic #2 false일 경우 #2 수행
}

ex) let x = 10;

if (x > 0) {
    console.log('x는 양수입니다.');
} else {
    console.log('x는 음수입니다'); } -> x = 10 으로 첫번째 로직인 'x는 양수입니다' 출력

1-3. switch
변수의 값에 따라, 여러 개의 경우(case) 중 하나를 선택
default

let fruit = '바나나';

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

break; -> fruit = '바나나' 이므로 '바나나입니다 출력. 바나나도 사과도 아닐 경우 default값으로 입력된 '아무것도 아닙니다'를 출력한다.

**객체
key - value pair
하나의 변수에 여러개의 값을 넣을 수 있다! <- 가장 큰 장점 , value에 들어가는 데이터타입에 제한이 없다

  1. 객체 생성 방법
    1-1, 기본적인 객체 생성 방법
let person = {
    name:'홍길동',
    age:30,
    gender: '남자',
};

person 이라는 객체를 생성 person 이라는 객체는 name, age, gender
3가지 속성을 가지고 있다.

  1. 속성에 접근하는 방법
console.log(person.name): person 객체의 name이 가지고 있는 속성값을 보여줘 -> '홍길동'
console.log(person.age) person 객체의 age이 가지고 있는 속성값을 보여줘 -> 30
console.log(person.gender) person 객체의 gender이 가지고 있는 속성값을 보여줘 -> '남자'
  1. 객체 메소드(객체가 가진 여러가지 기능: Object.~~~)
    3-1. Object.key() : key를 가져오는 메소드
let person = {
    name:'홍길동',
    age:30,
    gender: '남자',
};
let keys = Object.keys(person)
console.log(keys); -> {'name', 'age', 'gender'}
=> person(객체)의 속성들이 keys에 배열형태로 담김

3-2, valuse

let values = Object.values(person); person(객체) 속성값
console.log(values); -> {'홍길동', 30, '남자'}이 
values에 배열형태로 담김

3-3, entries
key와 value를 묶어서 배열로 만든 배열!! (2차원 배열)

let entries = Object.entries(person); [key, value] 
console.log('entries=>', entries) -> [ [ 'name', '홍길동' ], [ 'age', 30 ], [ 'gender', '남자' ] ]

**배열
1. 생성
1-1, 기본 생성
let fruits = ['사과', '바나나', '오렌지']; // 0번째: 사과, 1번째 바나나 -> 배열은 0번째 부터 생성

1-2, 크기를 지정해서 생성 가능
let number = new Array(5) // 5개의 공간이 생긴 배열 생성

console.log(number.length) = 5

  1. 요소 접근 index를 통해서 접근 0, 1, 2번째 인덱스 사과, 바나나, 오렌지 변수를 통해서 for문과 함께 동적으로 사용
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);
  1. 배열 메소드

3-1. push

let fruits = ['사과', '바나나',] ;
console.log(fruits); push 사용 전 [사과, 바나나]
fruits.push('오렌지');
console.log(fruits) push 사용 후 [사과, 바나나, 오렌지]

3-2. pop 마지막 녀석을 삭제하는 메소드

let fruits = ['사과', '바나나',] ;
console.log(fruits) pop 사용 전 [사과, 바나나]
fruits.pop();
console.log(fruits) pop 사용 후 [사과]

3-3. shift 첫번째 녀석을 삭제

let fruits = ['사과', '바나나', '키위'] ;
console.log(fruits);
fruits.shift();
console.log(fruits);

3-4, unshift 맨 앞에 어떤 것("??")을 추가

let fruits = ['사과', '바나나', '키위'] ;
fruits.unshift('포도');
console.log(fruits); [포도, 사과, 바나나, 키위]

3-5 splice () 배열의 범위를 지정해서 요소를 삭제하고 그자리에 새로운 요소 추가

let fruits = ['사과', '바나나', '키위'] ;
fruits.splice(1, 1, '포도');
console.log(fruits) [사과, 포도, 키위]

3-6 slice () 배열의 위치를 지정(n번째 인덱스부터 m 번째까지)해서 잘라낸 요소들을 반환한다. m번째 요소는 포함시키지 않는다.

let fruits = ['사과', '바나나', '키위'] ;
let slicedFruits = fruits.slice(1,2); 
console.log(slicedFruits)  [바나나]

3-7 map : 항상 원본 배열의 길이만큼이 return 된다. return이 없어도 undefined로 배열의 길이만큼 return 한다
기존에 있었던 배열을 가공해서 새로운 배열을 생산해 내는 역할 map을 거치고 나면 반드시 새로운 배열이 튀어 나온다.

사용방법) let numbers = [1,2,3,4,5];
let newNumbers = numbers.map(function(item){
    return item * 2;
}) => [2,4,6,8,10] 인 배열을 반환한다

3-8, filter: 반드시 return이 필요 return문에 조건이 들어간다. 새로운 배열을 return (조건에 해당하는 것만 return)

사용방법) let numbers = [1,2,3,4,5];
let filteredNumbers = numbers.filter(function(item){
    return item !== 5 
}) -> [5] 하나만 return

3-9, find: 반드시 return 필요 return문을 통해서 조건에 맞는 것 중 첫번째 요소만 반환

사용방법) let numbers = [1,2,3,4,5]; let result = numbers.find(function(item){ 
    return item > 3;
}) 5도 조건을 만족하지만 find 메소드의 특성상 [4] 하나만 return 

**조건문과 반복문

for, while => ~동안 : 반복문

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

i 라는 변수는 0부터 시작할거야
i 라는 변수가 10에 도달하기 전까지 계속할거야
i 라는 변수는 한 사이클이 돌도 나면 1을 더할거야
for ( let i = 0; i < 10; i++) {
console.log(i);
} ->1~9 까지의 값을 하나씩 차례대로 반환 10이 되면 조건을 만족하지 못하므로 값을 반환하지 않는다

배열과 for문은 짝꿍이다.

const arr = ['one','two','three','four','five'];
for ( let i =0; i < arr.length; i++ ) {ㄹ
    console.log(i);
    console.log(arr[i]);
}

ex : 0부터 10까지의 수 중에서 2의 배수만 console.log로 출력하는 예시

for (let i = 0; i <= 10; i++) {
    if (i >= 2) {
        if (i % 2 === 0) {
            console.log(i)

0개의 댓글