[FE] JS 문법

변수

숫자 또는 문자열과 같은 값들을 담을 수 있는 컨테이너

단 상수와 다르게 변수 안의 값은 변경될 수 있다

문자열과 숫자 뿐만 아니라 함수 또한 변수에 담을 수 있다

변수의 선언

JS는 반드시 데이터 타입을 지정해 주지 않아도 된다

변수를 선언할 때

var myName;

같이 키워드 var과 함께 변수 명을 입력하면 변수가 생성된다

 

변수 선언 시

var myName = "정윤";

과 같이 등호와 부여할 값을 직접 입력하여 초기화도 할 수 있다

만약 변수가 값을 포함하고 있지 않은 빈 컨테이너라면 "undefined"라는 값을 반환하며, 이와같이 초기화를 한 경우 해당 값인 "정윤"을 반환한다

변수의 재지정

myName = "시윤";

변수는 값을 변경할 수 있기 때문에 위와 같이 값을 덮어쓸 수 있다

값을 덮어쓴 후에 myName을 호출한다면 "정윤"이 아닌 "시윤"이란 값을 반환한다

변수 이름 규칙

• 밑줄(_)로 시작되는 변수명은 특정 의미를 가지고 있으므로 사용 금지
• 숫자로 시작되는 변수명은 오류 발생
• Lower Camel Case 사용 : 첫 단어의 시작은 소문자, 그 다음 단어의 시작은 대문자 사용
• 대소문자 구분
• 변수명 직관적으로 부여
• 예약어 사용 금지

scope

변수에 접근할 수 있는 범위

크게 global(전역)과 local(지역)으로 나뉜다

전역스코프는 말 그대로 전역에 선언되어 있어 어느 곳에서든 접근 가능

지역스코프는 특정한 영역에서만 사용될 수 있고 그 범위 밖에서는 접근 불가능

var a = 1; // 전역 스코프
function print() { // 지역(함수) 스코프
 var a = 111;
 console.log(a);
}
print();

위와 같은 상황에선 전역스코프 a 가 1로 선언되어 있지만 print()라는 함수는 a를 출력하기 위해서 자신의 함수 안에 변수 a가 있는지를 먼저 찾아본 뒤 지역스코프인 a를 콘솔창에 출력 -> 111이 출력

 

그렇다면 함수 안에 있는 지역스코프 변수를 지운다면 에러가 발생할까?

var a = 1; // 전역 스코프
function print() { // 함수 스코프
 console.log(a);
}
print();

예상과 다르게 전역 스코프에 선언되어 있는 a의 값인 1이 출력

Scope Chain에 의해 일어나는 현상

스코프 체인

유효 범위를 나타내는 스코프가 scope 프로퍼티로 각 함수 객체 내에서 연결리스트 형식으로 관리되는데,
이 스코프 간의 상하관계를 스코프 체인이라고 한다

블록 스코프

중괄호로 둘러싸인 부분을 블록이라고 부르고 해당 영역을 블록 스코프 라고 한다

이전에는 함수 내에서만 지역변수가 유지 되었지만 ES6부터는 let/const 키워드를 이용해서 일반 블록에서도 지역변수 선언이 가능

조건문

if문

조건을 주어졌을 때 해당 조건의 참 거짓 여부에 따라 특정 코드를 실행하는 문법

키워드 if 뒤에 괄호에 조건절 삽입

해당 조건절은 보통 비교연산자 또는 논리연산자가 사용되며 true 또는 false를 반환

만약 해당 값이 true라면 중괄호 안에 있는 코드가 실행되고 false라면 키워드 else뒤에 있는 코드가 실행

if (조건) {
  만약 조건이 참일 경우 실행할 코드
} else {
  조건이 거짓일 경우 실행할 코드
}

단 else는 생략이 가능하다

 

조건을 더 추가하고 싶은 경우 elseif 사용

if (조건) {
	만약 조건이 참일 경우 실행할 코드
} else if (조건) {
	위의 조건은 거짓이나 아래 조건은 참일 경우 실행할 코드
} else {
	조건이 모두 거짓일 경우 실행할 코드
}

switch문

특정한 값에 특정 코드를 실행하고 싶거나 선택지가 여러개인 경우 if문보다 switch문이 효과적

키워드 switch 뒤 괄호에 변수 입력

키워드 case 뒤에 해당 코드가 실행될 조건을 입력하고 콜론으로 구분

break 문이 없는 경우 해당하는 case부터 모든 case가 다 실행되기 때문에 반드시 case마다 작성

키워드 default는 일치하는 항목이 없는경우 실행 (생략 가능하며 마지막 블록이기 때문에 break문도 필요하지 않다)

switch (변수명) {
  case choice1:
    ...
    break;

  case choice2:
    ...
    break;

  default:
    ...
}

반복

비슷한 작업을 반복해야할 때 사용할 수 있는 문법

for문

어떤 특정한 조건이 거짓으로 판별될 때 까지 반복

for (초기식; 조건식; 증감식) {
  ...
}

키워드 for을 이용해서 사용

for 뒤에는 반드시 괄호가 뒤따라 오는데 해당 괄호에는 순서대로 초기식, 조건식, 증감식이 포함

• 초기식은 for 문이 실행될 때 가장 먼저 실행
• 만약 조건식이 참이라면 해당 반복문이 실행되고, 조건식이 거짓이라면 해당 반복문은 종결
• 증감식은 루프가 돌 때마다 실행되는데 보통 증감식으로 인해서 조건식의 참 거짓 여부가 달라진다

while문

조건문이 참일 경우 계속해서 코드를 수행

while (조건문) {
	...
}

do...while문

특정한 조건이 거짓으로 판별될 때까지 반복

do {
	...
} while (조건문);

함수

반복되는 코드를 하나의 함수로 정의해서 여러번 타이핑 하지 않고 명령문 한 줄로 호출할 수 있도록 하는 문법

함수와 메서드

호출 방식에 약간 차이가 존재

함수를 호출하는 객체가 있는 경우는 메서드이고 객체가 없는 경우 함수

function show() {
  console.log('show() 함수 호출');
};

show();

위 예제에서 show 함수는 객체 없이 호출되는 것 처럼 보이지만 전역범위에서 함수가 선언 되는 경우 전역 객체인 window의 프로퍼티가 된다

함수 선언

function키워드 뒤에 함수의 이름 및 소괄호 작성

소괄호 안에는 매개변수를 입력

중괄호 안에 재사용을 원하는 코드를 입력

중괄호 안에 있는 return 문에 반환하고 싶은 값 지정 -> retrun문 생략 가능

function 함수명(매개변수) {
  ...
  return ...
};

함수 표현식 (익명함수)

const add = function(a, b) {
    return a + b;
};

JS는 함수 또한 객체이기 때문에 이런 방식으로도 함수 사용 가능

이 경우 square(매개변수)로 함수를 호출

함수 표현식을 이용하면 함수를 다른 함수의 매개변수로 전달할 때 편리

재귀함수

함수 내부에서 자기 자신을 호출하는 함수

화살표 함수

기존의 함수 선언식이나 함수 표현식보다 좀 더 간결하며, 쉽게 사용하기 위해 고안

const add = (a, b) => {
    return a + b;
};

function 대신 화살표 기호를 사용하여 기존의 함수보다 간단하게 작성

• 매개변수가 하나인 경우 소괄호 생략 가능
• 함수 내부가 단일 표현식인 경우 return 키워드 생략 가능(단 반드시 중괄호 또한 생략해야 한다)

const add = (a, b) => a + b;
const add = (a, b) => { return a + b; };
//두 코드의 결과값은 동일

• 중복된 매개변수 이름 선언 불가

일반 함수와 다르게 생성자 함수로 사용 불가능하고 this와 arguments객체를 가지지 않기 때문에 사용할 수 없다

this

1. 일반 함수 실행 방식으로 함수를 실행한 경우
   • 이 경우 this의 값은 전역객체를 가리킨다(브라우저 상에서는 window객체)
2. 객체를 만들고 해당 객체에 key와 value를 부여한 후 .으로 접근하는 방식으로 함수를 실행한 경우
   • 이 경우 this의 값은 도트 앞에 써있는 객체 자체를 가리킨다
3. function.prototype.call, function.prototype.bind, function.prototype.apply과 같은 메소드를 사용하여 this의 역할을 직접 지정해주는 방법
4. new 키워드를 통해 함수를 실행한 경우
   • new 함수명()을 통해 객체를 생성하고 this가 포함된 함수를 생성자 함수로 사용하면 this는 빈 객체를 가리키고 생성자 함수는 this라는 빈 객체를 반환

데이터 타입

프로그래밍 언어에서 사용할 수 있는 데이터의 종류

원시타입

변경 불가능 한 값이며 값에 의한 전달을 한다

• Stirng
  • 텍스트 데이터를 나타내는데 사용
  • 따옴표로 감싸져 있는 숫자는 문자열
• Number
  • 일반적으로 알고 있는 숫자와 성격이 비슷
  • 숫자를 이용하여 연산 가능
• Boolean
  • 조건문에 주로 사용되며 0, -0, null, false, NaN, undefined, 빈 문자열은 전부 false로 간주되고 그 외 다른 값은 true
• null
  • 의도적으로 변수에 값이 없다는 것을 명시할 때 사용
  • JS는 대소문자를 구별하므로 null은 Null, NULL과 다르다
• undefined
  • 어떤 변수를 선언 후 그 값을 정의해 주지 않았을 때나 존재하지 않는 객체 프로퍼티에 접근한 경우 undefined가 반환
• symbol
  • 이름의 충돌 위험이 없는 유일한 객체의 Property Key를 만들기 위해 사용

객체타입

• object
  • 데이터에 관련된 동작을 모두 포함할 수 있는 개념적 존재
  • 프로퍼티와 메서드를 전부 포함할 수 있는 독립적 주체
  • 원시타입과 다르게 참조에 의한 전달 방식으로 값을 전달

---

Arguments 객체 함수를 호출할 때 넘긴 인자들이 배열 형태로 저장된 객체, 실제 배열이 아닌 유사 배열 객체