[2024 여름방학 React.js 스터디] 김민서 #1주차

변수

var messsage = 'hi';
// message 라는 변수에 hi 문자열 저장

var을 이용해 변수 선언

const a = 10; //const는 값을 변경할 수 없다
let b = 20;

b = 30; //let은 값을 변경할 수 있다

const : 상수

let : 변수

 

데이터 타입

• 숫자
• 문자열
• 불리언
• 배열
• 객체

변수 선언 유의사항

• 숫자로 시작할 수 없음
• 예약어를 사용할 수 없음
• Camel Case : 여러 단어로 이름을 지었을 때 두 번째 단어부터 첫 글자를 대문자로 작성

 

함수

function logText(message) {
  console.log(message);
}
// 함수 선언문, message는 파라미터

logText('hi');
// 함수 호출

let logText = function() {
    console.log('hi');
}
// 함수 표현식

 

// 일급함수
function logText(message) {
    message();
}

logText(function() {
    console.log('hi');
});

 

// 화살표 함수
var logText = () => {
    console.log('hi');
}

• 단순한 표현식의 경우 {} 생략 가능
• 전달 인자가 하나인 경우 소괄호 생략 가능

 

조건문

 

1. if 문

if (조건식) {
  // 조건식이 참이면 실행
}

 

2. if else 문

if (조건식) {
  // 조건식이 참이면 실행
} else {
  // 위 조건식이 거짓이면 실행
}

 

 

반복문

for (변수 초기화, 조건식, 증감식) {
  // 반복할 연산
}

 

 

객체

let obj = {
  // 객체 내용 (키 : value)
};

obj.b = 10; // b 속성 추가, 숫자 10 할당

• 속성과 값이 같으면 1개만 기입 
• 속성에 함수를 정의할 때 function 예약어 생략 가능

 

배열

let arr = []; // 빈 배열 선언
arr[0] = 10; // 첫 번째 요소에 10 할당 = arr.push(10);
arr[1] = 20; // 두 번째 요소에 20 할당

arr.push('a'); // 배열에 요소 추가하기
arr.pop(); // 요소 삭제
arr.splice(0, 1); // 첫 번째 인덱스에서 요소 한 개만 삭제

• push(): 배열에 데이터 추가 (맨 끝 인덱스부터 추가됨)
• slice() : 배열의 특정 인덱스에 있는 값을 반환 (배열의 내용이 변환되지 않음)
• splice() : 배열의 특정 인덱스에 있는 값을 변경 또는 삭제 
• pop() : 배열의 마지막 인덱스의 값을 꺼냄
• shift() : 배열의 첫번째 인덱스의 값을 꺼냄 

 

배열 반복문

arr.forEach(function(value) {
    console.log(value);
})

 

 

map, filter

 

1. map

배열에 대해 길이를 유지한 상태로 데이터 변형

var arr = [10, 20, 30];
arr.map(function(item) {
    return item * 10;
})

 

2. filter

배열 안에 있는 특정 아이템을 꺼내오기

arr.filter(function(item) {
    if (item == 10){
        return true;
    }
})

 

3. 반복문으로 map, filter 대체

var arr = [10, 20, 30];
var newArr = [];
arr.forEach(function(item) {
    newArr.push(item * 10);
});
// forEach로 map 대체

arr.forEach(function(item) {
    if (item == 10) {
        newArr.push(item);
    }
});
// forEach로 filter 대체

 

 

템플릿 리터럴

 

자바스크립트에서 문자열을 입력하는 방식

백틱(back-tick)이라는 기호(`)를 사용하여 정의한다

var a = 'hi';
var message = `${a} 안녕`;

 

 

구조 분해 문법

var arr = ['apple', 10];
var [myFruit, myNum] = arr; // myFruite에는 apple, myNum에는 10 할당

var josh = {
    skill: 'js',
    age: 21
}
var {skill, age} = josh;
// var sill = josh.skill
// var age = josh.age

 

 

스프레드 오퍼레이터

 

특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길 때 사용

var obj = {
  a: 10,
  b: 20
};
var newObj = {...obj};
// 객체에서 사용

var arr = [1,2,3];
var newArr = [...arr];
// 배열에서 사용