헷갈리는 js 개념이나 문법 정리
반복문
break와 continue
반복문(while, for문 모두)은 break와 continue를 통해서 강제로 반복을 중단하거나, 다음 반복으로 넘어가게 할 수 있다.
- break(반복문 중단하기)
for문 while문 안에서 break를 사용하면, 그 순간에 반복이 중단된다.
for(let i=0; i<3; i++) {
if(i ===1) break; // i가 1이 되면 반복중단
alert(i);
}- continue(반복문 계속하기)
for문 혹은 while문 안에서 continue를 사용하면, 바로 다음 반복으로 넘어간다.
for(let i=0; i<3; i++) {
if(i ===1) continue; // i가 1인경우, 아래 코드 실행하지 않고 바로 다음 반복으로
alert(i);
}0이 표시된 후에 1은 표시되지 않고 바로 2가 표시되는 것을 확인할 수 있다.
continue는 중첩을 줄이기 위한 정말 좋은 방법이다. 대부분의 경우는 continue를 쓰는게 가독성이 더 좋으니, 혹시나 for 문 안에 if
함수
-
함수 내부 변수는 외부에서 접근 불가
-
함수 외부 변수는 함수에서 접근 가능
-
전역 변수는 실제 개발 과정에서 잘 사용하지 않는다. 유저 정보등의 데이터는 함수의 매개변수 형태로 넘기면서 사용하는 경우가 대부분이다.
-
매개변수(=파라미터, 인자) : 함수 내부에서 사용할 변수에 대해서, 함수를 사용할 사용자/개발자에게 해당 변수의 값을 입력해달라고 하는 것
-
함수는 함수 이름에 명시된 딱 하나의 동작만을 수행해야 한다. 함수의 이름만으로도 해당 함수가 어떤 동작을 수행하는지 알 수 있도록 명확하게 작성하는 것이 중요하다.
호이스팅
- Hoisting은 코드 실행 순서 상으로, 아직 선언되지 않은 함수나 변수를 끌어올려서 사용하는 자바스크립트의 작동 방식을 말한다.
객체
- 문자열, 숫자, 불린, null, undefined 등의 자료형으느 하나의 데이터만 담을 수 있다는 점에서 원시형이라고 부른다.
- 객체의 경우는 원시형과 다르게, 여러가지 데이터를 담을 수 있어서 이를 객체형이라고 부른다.(객체의 경우, js가 가진 다양한 개념들(배열 등)의 기반을 이루는 요소이기도 하기에, 갹체를 잘 다루는 것이 사실상 자바스크립트를 잘 다루는 것이다.
- 객체의 경우 문자열로 출력하면
[object Object]라고 출력이 된다. alert의 경우 문자열 형태로 출력하는 함수이기 때문에, 객체를 확인하려면 console.log를 활용해야 한다.
복사
-
객체는 변수와는 다른 특징을 가지고 있는데 가장 대표적인 것이
복사이다. -
변수의 경우, 복사를 할 때에 값을 그대로 복사하게 된다.
복사를 한 후에 원래의 변수를 수정하더라도 복사된 변수에는 영향이 없다.
- 객체의 경우, 복사를 할 때 값을 그대로 복사하지 않고 참조값을 저장한다.
객체는 복사될 때 값이 아니라, 해당 객체가 있는 메모리 주소 값(참조값)이 할당되기 때문, user2, user1는 사실상 같은 데이터에다가 다른 이름을 붙인 것에 불과하게 되고, 둘 중 어느 변수명을 통해서 수정해도 동일한 데이터를 수정하게 된다. =>얖은복사
let user2 = user1;그런데 만약에 참조값 할당이 아닌, 정말로 새로운 객체 형태로 복제를 하고싶다면?
let user2 = {}형태로 새로운 객체를 선언한 후, for문을 통해 하나씩 프로퍼티를 복사하는 방식
=> 일일히 for문을 작성하기에는 번거롭기 때문에Object.assign()함수가 존재
Object.assign(프로퍼티를 추가당할 객체, 추가할 프로퍼티가 있는 객체)이 함수를 사용하면 특정한 객체에다가 다른 객체의 프로퍼티를 추가할 수 있다.
let user2 = Object.assign({}, user1)메서드와 this
this란, 객체 자기 자신을 지칭. this.key의 형태로 객체 내부의 프로퍼티 접근 가능
let user = {
name: 'Kim',
asge:20
}
function sayHi() {
alert(`나는 ${this.name}이야. 잘부탁해`)
}
user.sayHi = sayHi;
user.sayHi(); // 나는 Kim이야. 잘부탁해메서드와 this는 위와 같이 함수를 따로 선언한 후에 할당하는 방식으로 활용할 수 있다.
다만 this를 활용할 때의 주의할 점은 화살표 함수의 경우 this의 작동방식이 조금 다르다는 점이다. => 객체 내부의 프로퍼티를 불러오지 못 한다.
배열
- pop: 배열 끝 요소를 추출해서 return
- push: 배열 끝에 요소를 추가
- shift: pop과 반대로 배열의 첫 번째 요소를 추출해서 return
- unshift: push와 반대로 배열 첫 번째 부분에 요소를 추가
중요 메서드
배열에서 가장 중요한 메서드는 find , filter , map 이다.
-
find: 특정 조건을 통해 요소 '하나' 찾기
-
filter: 특정 조건을 통해 요소 '여러개' 찾기
-
map: 요소마다 함수 실행하기
-
reduce: 함수를 실행하며, 리턴값 누적하기
reduce는 map과 비슷하지만, 각 반복마다의 리턴값을 저장 후 사용할 수 있다는 점에서 차이가 있다.정렬
-
sort(정렬) : 문자열로 취급해서 정렬하므로 우리가 생각하는 숫자로서의 정렬과는 다르게 정렬된다
-
reverse(역순 정렬)
객체/배열 활용하기
-
객체는 구조분해라는 것을 할 수 있다.
let { 프로퍼티 키, 프로퍼티 키 ....} = 객체위와 같이 작성하면 프로퍼티 키 이름의 변수가 하나 생성되면서, 해당 변수에 객체의 프로퍼티 값이 할당되게 된다. => 얕은 복사
- Spread (객체 혹은 배열 요소 펼치기) :
...을Spread 연산자라고 말한다.
