자바스크립트 변수에 대해 알아보자.
변수란 데이터를 저장하고 참조(사용)하는 데이터의 이름
var, let, const 등이 있다.
변수선언과 할당이 있다.
1) 선언
let 변수이름;
var 변수이름;2) 할당
const 변수이름 = 값;
let 변수이름 = 값;
var 변수이름 = 값var
- 선언 단계와 초기화가 동시에 이루어지며 아무것도 할당하지 않으면 자동으로 undefined가 할당
- 중복 선언 가능. 재선언도 가능
문제점
- 중간의 같은 이름의 변수를 선언하면 기존의 같은이름의 변수가 덮어씌어짐 -> 문제발생
- 변수가 블록단위가 아니고 전역범위에서도 영향력이 있기에 의도치 않은 -> 문제발생
이러한 이유등으로 ES6문법 부터는 var 대신 let 사용을 권장
let
- 변수 중복 선언이 불가능 하지만, 재할당 가능
- var과 마찬가지로 선언을 하지 않으면 자동으로 undefined가 들어간다.
let name= "홍길동"
let name = "나비"
console.log(name);
중복선언이 안되기에 에러가 난다.const
- 초반에 선언할 때 반드시 초기화를 동시에 진행해야 한다.
- 재선언 불가능, 재할당 불가능
변하지 않는 상수의 개념으로, 고정된 값을 저장하는데 const가 사용된다.
데이터 종류(자료형)
String, Number, Boolean, Undefined, Null, Object, Array
String - 문자형 데이터
Number - 숫자형 데이터
Boolean - 참, 거짓 데이터
Undefined - 미할당 데이터
Null - 의도된 빈 데이터
Array - 배열 데이터
Object - 여러 데이터 꾸러미 (객체)
함수
함수 선언문
- 가장 기본적인 형태의 함수 선언
function sayHello(){
console.log('지역 hello');
};
console.log("전역 hello")
sayHello();함수 표현식
let sayHello = function(num) {
console.log(num);
console.log("Hello");
}
sayHello(20);화살표 함수
- ES6에서 생긴 화살표함수 개인적으로 화살표함수가 사용하기 편한것 같다.
let sayHello = () => {
console.log("Hello");
}
sayHello();조건문
if문
조건은 항상 true/false가 와야함
if (조건) {
조건이 참일때 실행
} else {
조건이 거짓일때 실행
}
if문 안에 중첩으로도 if문 사용이 가능하다
const myId = 'abc';
const myPw = '1234';
const inputId = prompt('아이디를 입력하세요');
const inputPw = prompt('비밀번호를 입력하세요');
console.log(inputId, inputPw);
if (myId === inputId) {
if(myPw === inputPw) {
console.log('로그인에 성공했습니다.')
} else {
console.log('비밀번호가 틀립니다.')
}
} else {
console.log('아이디가 틀립니다');
}
삼항 연산자
- 조건문을 단축시켜서 간략하게 코드를 수정할때 사용하면 유용할것같다.
- 리액트 문법에서 삼항연산자가 많이 사용된다고 한다.
let myId = 'abc';
let myPw = '1234';
const inputId = prompt('아이디를 입력하세요');
const inputPw = prompt("비밀번호를 입력하세요");
myId === inputId ?
myPw === inputPw ?
console.log('로그인성공') : console.log('비밀번호 실패')
: console.log('틀립니다.');반복문
for문
먼저, 반복의 순서도 사진을 보자
배열과 함께 사용된 반복문에 대해 예시 코드를 작성했다.
배열과 함께 사용 될때
const colors = ["red", "oragnge", "yellow", "green", "blue", "navy", "purple"];
for(let i = 0; i < colors.length; i++) {
console.log(`무지개 ${i + 1}번째 색상은 ${colors[i]}`);
}
결론
자바스크립트의 변수와 데이터 종류 그리고 함수와 조건문, 반복문등을 알아봤다. 자바스크립트의 기본적인 내용인 만큼 가장 중요하고 많이 공부해야할 필요성을 느꼈다.
- 참고자료
[코딩온] 웹개발자 풀스택 과정 2주차 ppt
