반응형
변수
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];
// 배열에서 사용
반응형
'WINK-(Web & App) > React.js 스터디' 카테고리의 다른 글
[2024 여름방학 React.js 스터디] 이종윤 #1주차 (0) | 2024.07.12 |
---|---|
[2024 여름방학 React.js 스터디] 강보경 #1주차 (0) | 2024.07.12 |
[2024 여름방학 React.js 스터디] 김태일 #1주차 - 자바스크립트 입문 (0) | 2024.07.10 |
[2024 React.js 스터디] 류상우 #7주차 (0) | 2024.07.07 |
[2024 React.js 스터디] 박지민 #마지막주차 "API 연동과 라우터" (0) | 2024.06.30 |