[JS] JS의 기본문법 정리
Updated:
JavaScript 간단문법 정리
변수
1. 상수와변수
const a = 5;
let b = "saemyung";
JS에서는 임의의 값을 담기 위해 const와 let 2가지로 지정할 수 있다
-> const는 상수로 변하지 않는 값을 저장할때 사용한다
-> let은 변수로 변하는 값을 저장할 때 사용한다
=> default로 const를 사용하며 필요에 따라 let을 이용한다
2. 자료형
const a = 5;
const b = "saemyung";
const c = true;
const d = null;
let e;
-> a에 저장된 type은 num으로 구체적으로 들어가면 integer(정수)와 float(실수)로 나뉜다
-> b에 저장된 type은 string으로 문자를 나타낸다
-> c에 저장된 type은 boolean으로 true와 false 2가지가 존재한다
-> d에 저장된 type은 값이 존재하지 않음을 나타내는 null이다. null은 의도적으로 값이 없음을 알려주기 위해 쓴다
-> e에는 아무런 값도 대입하지 않았기 때문에 undefined라고 부르고 이는 null과 다른 개념이다
+α) NaN은 Not a Number의 약자로 0으로 나누는 등 계산이 불가능할 때와 숫자로서 읽을 수 없을 때 2가지 경우에 발생한다
3. 배열
const dayOfTheWeek = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
const testArr = [1, 'test', false, null, undefined];
console.log(testArr[1]);
dayOfTheWeek.push('sun');
console.log(testArr.length);
-> JS의 배열은 위와 같이 표현가능하고 같은 자료형이 아니더라도 하나의 배열에 들어갈 수 있다
-> 3번째 줄과 같은 방식으로 testArr의 2번째 값은 test값을 출력할 수 있다
-> 4번째 줄과 같은 방식으로 해당 배열의 마지막에 요소를 추가할 수 있다
-> length를 이용하여 해당 배열의 크기를 알 수 있다
4. Object
배열을 이용하여 각각의 요소를 다루기 위해선 각각의 요소가 어떤 값을 가지고 있는지 주석으로 표시가 필요하다 => 배열보다 효율적인 Object를 사용하여 data관리
const peopleInfo = {
name:'saemyung',
age:23
};
console.log(peopleInfo.name);
console.log(peopleInfo["age"]);
peopleInfo.name = "lim";
peopleInfo["age"] = 17;
peopleInfo.height = 171;
console.log(name in peopleInfo) //true
console.log(height in peopleInfo) //false
-> 위와 같이 peopleInfo라는 Object를 만들 수 있다
-> 위와 같이 2가지 방식으로 Object내부의 특정값에 접근하고 수정할 수 있다
-> 물론, peopleInfo라는 Object를 const로 지정하여 값을 변경할 수 없지만 여기서 변경하는 것은 Object내부의 값이라 변경가능하다
-> 위와 같이 Object에 특정 property를 추가하는 것도 가능하다
-> in을 사용하여 해당 property가 객체의 속성으로 존재하는지 여부를 확인할 수 있다
주의점> 객체의 property 접근방식의 차이
const lim = {
name: 'saemyung',
age: 23,
};
for(key in lim){
console.log(lim.key); //undefined로 출력됨
console.log(lim[key]); //정상출력됨
}
-> ‘.’방식으로 접근할 경우, lim.key로 접근하여 undefined가 출력된다
-> ‘[]’방식으로 접근할 경우, key in lim에 의해 []안에 lim이란 객체의 property가 들어가게 되어 lim[name], lim[age]로 접근하여 정상출력된다
함수
JS에서 사용하던 console.log() 와 alert() 모두 하나의 함수이다. 사용자도 직접 함수를 만들어 사용할 수 있다
function sayHi(){
console.log("hi!");
}
sayHi();
-> 위의 경우는 파라미터로 아무런 값을 전달받지 않는 형태의 함수이다
-> 함수명()의 방식으로 함수를 실행가능하다
function sayInfo(name, age){
console.log("your name is " + name + " and your age is " + age);
}
sayInfo("saemyung", 23);
-> 위의 경우는 파라미터로 값을 전달받는 형태의 함수이다
-> 마찬가지로 함수명()의 방식으로 함수를 실행가능하다
const info={
name:'saemyung',
func1: function(name){
console.log("my name is "+name);
}
};
info.func1(info.name);
-> 위와 같은 방식으로 Object 내부에 함수를 넣는 것도 가능하다
cf> 함수선언방식
function add(n1, n2){
return n1+n2;
}
const add = function(n1, n2){
return n1+n2;
}
-> 첫번째 방식은 함수 선언문이라고 하며, 코드에 도달하지 않아도 실행 전에 js가 코드를 훑어 메모리에 올려주기 때문에, 함수 선언코드 전에도 해당 함수를 사용할 수 있다
-> 두번째 방식은 함수 표현식이라고 하며, 해당 코드에 도달하기 전까지는 해당 함수를 사용할 수 없다
cf> 화살표 함수
const add = (n1,n2) => {
return n1+n2;
}
-> ES6에서 많이 사용하는 방식으로 함수 표현식으로 표현된 함수를 위와 같이 수정하여 간단히 표현할 수 있다
메서드와 this
-> 객체의 property로써 존재하는 함수를 메서드라 부른다
let lim = {
name: 'saemyung',
getName: function(){
console.log(this.name);
}
};
lim.getName(); // saemyung이 출력됨
-> 위의 방식처럼 this를 사용하며, 일반 함수는 자신만의 this를 가지기 때문에 saemyung이 출력된다
let lim = {
name: 'saemyung',
getName: ()=>{
console.log(this);
}
};
lim.getName(); // window가 출력됨
-> 화살표 함수는 일반 함수와 달리 자기만의 this를 가지지 않기 때문에 내부에서 this를 사용하면, 외부인 전역객체에서 this를 가져오게 된다
-> 브라우저 환경에서의 this는 window객체이고, Node.js에서의 this는 global객체이다
연산자
기본적인 연산자 이외에 JS는 ‘===’이라는 연산자를 제공한다. 기존 사용하던 ‘==’은 값의 비교만 해주지만, ‘===’은 값의 비교뿐만 아니라 type이 같은지까지 검사해주는 역할을 한다
Leave a comment