한 입 크기로 잘라 먹는 리액트 1장 - 자바스크립트 기초

개요

일요일마다 있는 한 입 크기로 잘라 먹는 리액트 스터디를 위해 읽은 것을 복습하는 목적으로 정리하게 되었다.

(저자님께 정리한 것을 올려도 된다고 허락 받았습니다.) 

 

내용

자바스크립트는 어떤 언어인가?

웹(Web) 페이지를 만들 때 사용하는 언어

• HTML : 웹 페이지 요소 배치 -> 정적인 서식
• CSS : 웹 페이지 요소의 스타일링 -> 디자인
• JavaScript : 웹 페이지 요소의 동작 정의 -> 서식과 디자인 변경 등의 동적 효과 추가

 

HTML

텍스트,이미지, 버튼, 메뉴 등과 같이 웹 페이지에 나타나는 모든 요소의 배치와 내용을 기술하는 언어

움직이지 않는 정적인 온라인 신문 같은 존재.

 

CSS

색상이나 크기처럼 웹 페이지 요소의 스타일을 정할 때 사용하는 언어.

사용자와의 상호작용은 할 수 없기에 정적인 수준에 머문다.

 

JavaScript

사람의 근육처럼 웹 페이지에 움직이는 (동적) 기능을 장착할 수 있게 도와줌.

버튼 클릭, 정보 입력, 페이지 스크롤 등 웹 브라우저에서 이루워지는 모든 동작이 JavaScript로 구현한 기능들이다.

 

자바 스크립트는 어떻게 실행되나?

'자바스크립트 엔진' 이라는 프로그램에 의해 해석되어 실행된다.

기본적으로 웹 브라우저에 탑재되어 있어 별도의 실행 환경을 구축하지 않는 한 웹 브라우저가 반드시 필요하다.

 

변수와 상수

변수

프로그램을 실행하는 과정에서 변경될 수 있는 값을 저장하는 저장소 (상자와 같은 존재)

변수를 선언함과 동시에 값을 할당할 수 있는데 이 것을 "변수 초기화"라고 부른다. -> 입주청소에 비유 가능

 JavaScript의 변수 초기화는 언제든 변수값은 변경할 수 있기에 선택 사항이다.

변수는 이름으로 구분하기 때문에 let으로 변수를 선언할 때는 이름을 "중복" 해서 사용할 수 없지만 var를 이용한 변수 선언은 이름을 중복해 선언해도 실행할 수 있다.

그러나 중복되는 이름의 변수가 존재한다면 프로그래머가 실수할 가능성이 커지고, 복잡도를 높히기에 가급적 변수 선언 키워드로는 let을 사용해야 한다.

 

상수

절대 변하지 않는 값을 저장할 때 사용한다.

변수와 달리 프로그램 실행 과정에서 값을 변경할 수 없다.

'불변'이라는 뜻의 constant 에서 유례된 const 키워드를 붙여 선언하고, 선언과 동시에 값을 할당하는 과정이 반드시 필요하다.

• 전역변수 (var) : 이름 중복이 가능하다.
• 지역변수 (let) : 이름 중복이 불가능하다.
• 상수 (const) : 초기화가 필수로 필요하다.

 

명명규칙

변수 또는 상수에 이름을 정하는 행위를 네이밍(naming)이라고 한다.

반드시 지켜야 할 규칙 4가지

• 기호 사용 규칙
  • 특수 기호는 _와 $만 허용하며 그 외의 기호는 사용할 수 없다.
    • $ 기호는 jQeury를 사용할 때 처럼 이 변수가 별도의 라이브러리 객체라는것을 가르킬 때 사용한다.
    • _ 기호는 두 단어 이상으로 이루어진 합성어일 때 가독성을 높히기 위해 사용한다.
• 숫자 사용 규칙
  • 변수의 이름이 숫자로 시작해서는 안된다.
• 예약어 규칙
  • let, const 키워드처럼 JavaScript에서 이미 사용되기로 약속된 예약어는 사용할 수 없다.
• 대소 문자 구별 규칙
  • 변수 이름에서 대소 문자를 구별 한다.
    • 해당 규칙은 위의 3개의 규칙과는 달리 직접적인 오류가 발생되진 않는다.

 

좋은 변수 이름이란?

• 변수가 무엇을 의미하는 값인지 명확한 이름
• 어떻게 동작할지 유추할 수 있도록 작성된 이름
• 어떤 프로그래밍인지도 대략적이나마 파악할 수 있는 이름

 

왜 좋은 변수명을 지어야 할까?

• 변수명이 명확하지 않다면 코드 수정이 까다로워진다.
• 동료와의 협업도 힘들어진다.

 

대표적인 변수명 표기법

• 카멜 표기법
  • 모든 단어의 첫 글자를 대문자로 표기하는 방법
  • 맨 앞의 단어는 소문자로 시작한다.
• 파스칼 표기법
  • 모든 단어의 첫 글자를 대문자로 표기하는 방법
  • 보통 클래스, 함수의 이름을 지을 때 사용한다.
• 스네이크 표기법
  • _ 기호를 활용하는 표기하는 방법
  • 단어 사이에 _ 기호를 넣는다.

 

자료형

값을 성질에 따라 분류한 것

JavaScript의 자료형은 크게 원시 또는 객체 자료형으로 나누고, 작게는 8개의 세부 자료형으로 나뉜다.

• 원시 자료형
  • 원시 타입 혹은 기본 타입
  • 값이 변할 수는 있으나 둘 이상의 값을 동시에 가질 수 없는 자료형
• 객체 자료형
  • 다양한 값을 담는 자료형

 

숫자형

수의 종류를 구분하지 않고, 소수, 음수, 실수와 같은 수를 모두 포함하는 자료형

덧셈, 뺄셈, 곱셈, 나눗셈의 사칙연산을 수행하고 %기호를 이용해 나머지를 구하는 모듈러 연산도 가능하다.

• Infinity : 양의 무한대 (0으로 어떤 수를 나눈 결과)
• -Infinity : 음의 무한대 (0으로 어떤 수를 나눈 결과)
• NaN : 숫자 아님 ( 표현이 불가능한 숫자형의 결과)

 

문자형

사람의 이름과 같은 문자열을 포함하는 자료형

큰따옴표 또는 작음따옴표, 백틱(``)을 이용하여 만들 수 있다.

 

템플릿 리터럴?

문자열 사이에 변수를 배치하여 값이 동적으로 변하는 문자열을 생성하는 것.

'${ 변수명 }은 ${ 변수명 } 이다.';

${ } 의 안에 선언한 변수값도 문자열로 반환된다.

 

불리언, null, undefined

불리언 형

참(true) 또는 거짓(false)만으로 저장하는 자료형

스위치에 비유할 수 있으며, 작업을 성공적으로 종료했는지, 어떤 값이 있는지 등을 확인할 때 사용한다.

 

null

"아무것도 없다"라는 뜻으로, 값을 할당할 필요가 없을 때 사용한다.

 

undefined

c나 자바에서 초기화를 하지 않으면 null이 할당되지만 JavaScript는 undefined를 할당한다.

undefined로 인한 오류가 많이 일어나는 편이다.

 

블로그 주인장의 궁금증 1 : JavaScript는 왜 undefinde를 만들었을까? 

 

형변환

어떤 값의 자료형을 다른 자료형으로 변환하는 것.

• 명시적 형 변환 : 내장 함수 등을 이용해 프로그래머가 의도적으로 자료형을 변경하는 것.
• 묵시적 형 변환 : JavaScript 엔진이 스스로 알아서 자료형을 변경하는 것.
  • JavaScript는 암묵적으로 숫자를 문자로 형 변환해 계산한다.

 

만약 숫자 뿐만 아니라 문자도 포함된 문자열을 숫자로 변환하고 싶다면?

함수 parseInt를 사용하면 숫자만 추려 반환하기 때문에 문자와 숫자가 섞여 있는 문자열도 숫자로 변환할 수 있다.

parseInt(문자열, 진수);

 

단 문자열의 첫 문자부터 숫자로 변환하므로, 문자열이 숫자가 아닌 문자로 시작한다면 NaN을 반환하게 된다.

 

숫자형을 문자열로 변환

함수 String을 이용하면 인수로 제공한 값을 문자열로 변환해 반환하게 된다.

String(변수명);

문자열로 형 변환하는 것은 대체로 예측할 수 있는 방식으로 일어난다.

• 문자열이 undefined라면? : 문자열 undefined로 변환
• 문자열이 null라면? : 문자열 null로 변환
• 문자열이 true라면? : 문자열 true로 변환

 

불리언으로 변환

불리언 변환은 truthy & falsy 규칙을 따른다.

문자열은 true, 숫자 0은 false, 빈 문자열은 false로 반환된다.

 

연산자

+, -, *, / 등 연산을 수행할 때 도움을 주는 기호 또는 문자.

 

대입 연산자 ( = )

가장 기본이 되는 연산자로 변수에 값을 할당하는 역활을 한다.

 

산술 연산자 ( +, -, *, /, % )

계산 기능을 수행하는 연산자이다.

곱셈, 나눗셈, 나머지 연산자가 덧셈, 뺄셈 연산자보다 우선순위가 높다.

 

복합 대입 연산자 ( +=, -=, *=, /=, %= )

대입 연산자와 산술 연산자의 기능을 함께 이용할 때 사용한다.

복합 대입 연산자는 모든 산술 연산자와 함께 사용할 수 있다.

 

증감 연산자 ( ++. -- )

값을 1씩 늘리거나 줄일 때 사용하는 연산자이다.

let a = 1;

console.log(a++); -> 후위 연산(다음 행 부터 적용)
console.log(++a); -> 전위 연산(작성한 행 부터 적용)

 

논리 연산자 ( || , &&, ! )

참 (true)과 거짓 (false)을 포함하는 불리언 값을 다룰때 사용하는 연산자이다.

1. OR ( || ) : 둘 중 하나라도 참이면 참
2. AND ( && ) : 둘 중 하나라도 거짓이면 거짓
3. NOT ( ! ) : 참이면 거짓, 거짓이면 참

 

비교연산자

두 값을 비교하는 연산자이다.

• ===  : 같다
• !== : 같지 않다.
• > : 왼쪽이 크다.
• >= : 왼쪽이 크거나 같다.
• < : 왼쪽이 작다.
• <= : 왼쪽이 작거나 같다.

 

==  와 === 의 다른 점

== 연산자는 값만 비교할 뿐 자료형은 비교하지 않는다.

값의 형까지 비교하기 위해서는 ===을 사용해야 한다.

 

null 병합 연산자

값이 확정된 변수를 찾을 때 사용하는 연산자이다.

값이 '없음' 을 나타내는 자료형 null과 undefined가 변수에 할당되어 있다면 값이 확정되지 않은 변수라고 한다.

?? 를 사용하면, 값이 확정된 변수를 쉽게 찾을 수 있다.

let a = 10;
let b;

console.log( a ?? b );

 

동적 타이핑과 typeof 연산자

• 동적 타이핑
  • 저장하는 변수값에 따라 변수의 자료형도 함께 변경되는 특징을 지칭하는 단어
• typeof 연산자 
  • 변수의 자료형을 확인할 수 있고, 조건문에서 변수의 자료형에 따라 각기 다른 코드를 수행하도록 해야할 때 사용

 

삼항 조건 연산자 (또는 삼항 연산자)

3개의 피연산자를 취하는 연산자.

const a = 1;

typeof a === "String" ?
	console.log ("문자 자료형") :
    console.log ("숫자 자료형");

 

조건문

특정 조건을 만족할 때 원하는 동작을 수행하게 하는 프로그래밍 기본 문법 중 하나.

if문과 switch/case문이 존재한다.

 

if문

영어로 '만약'이라는 뜻의 if문은 '만약 A라면 B를 하고, 그렇지 않으면 C를 하라'와 같은 조건에 따라 각기 다른 명령을 수행하도록 만들 때 사용한다.

if(조건식 1) {
	조건식1 이 참일 때 수행한다.
} else if (조건식2) {
	조건식2 가 참일 때 수행한다.
} else {
	조건식 1과 2가 거짓일 때 수행한다.
}

 

switch문

비교할 조건이 많을 때 사용하며, case문과 비교해 정확히 일치할 때만 수행한다.

let a = 1;

switch (a) {
	case 1 : {
    	console.log ("하나");
        break;
    }
    case 2 : {
    	console.log ("둘");
        break;
    }
    default: {
    	console.log ("숫자 아님");
    }
}

 switch 문은 일치하는 case문의 명령을 수행한 후에도, 다음 작성한 명령까지 모두 수행하려는 속성이 있기 때문에 break문을 사용하여 조건식과 일치하는 case 문만 수행하도록 해야한다.

또한 default 문은 비교하는 식 또는 값이 어떤 case와도 일치하지 않을 때 수행하는 명령이지만 생략해도 오류가 발생하지 않는다.

 

반복문 (Loop)

동일하거나 유사 동작이 반복해서 나올 때 사용한다.

for 문, while 문, do while문 등이 존재한다.

 

for문

조건식과 일치하지 않을 때까지 반복하면서 중괄호에 있는 명령을 수행한다.

for (let i = 1; i <= 10; i++) {
	console.log(i)
}

1. let i = 1 : 반복문에 사용할 변수를 초기화하는 식
2. i <= 10 : 언제까지 반복할 것인지 정의하는 식
3. i++ : 반복할 때 마다 카운터 변수를 증가 또는 감소하는 식
4. console.log(i) : 반복 수행의 대상이 되는 명령은 반복할 때 마다 실행됨.

 

break문

조건식에서 정의한 반복문의 종료 조건과 상관없이 반복을 강제로 종료할 수 있다.

for (let i = 1; i <= 10; i++) {
	if( i > 10) {
    	console.log("반복문 종료")
        break;
    }
	console.log(i);
}

 

continue문

반복을 멈추는 대신 다음 반복 과정으로 건너뛴다.

for (let i = 1; i <= 10; i++) {
	if( i === 0) {
    	continue;
    }
	console.log(i);
}

 

함수

이름이 붙은 명령들의 모음

공통으로 사용하는 유사 코드를 하나로 묶어 '함수'라는 이름으로 사용할 수 있다.

 

왜 함수가 필요할까?

유사하게 동작하는 코드를 중복해 작성하면, 코드는 길어지고 가독성도 현저히 떨어진다.

이러한 문제점을 해결하기 위해 유사하게 동작하는 중복 코드를 하나의 블록 단위로 묶어, 더 간결하고 구조적인 프로그래밍을 가능하게 만든다.

 

함수 선언

function이라는 키워드를 사용해 함수 정릐하는 작업이다.

function 함수명 (매개변수) {
	함수가 수행할 명령 작성
}

 

? 매개변수란 함수에 값을 전달하는 일종의 매개체이다.

 

함수 호출

함수는 이름을 불러 주어야 실행이 되는데 이를 '함수 호출'이라 한다. 

함수 선언이란 결국 함수의 이름으로 호출하면 바로 실행할 수 있도록 준비하는 작업이라고 말할 수 있다.

function 함수명 (매개변수) {
	함수가 수행할 명령 작성
}

함수명();

 

함수의 인수와 매개변수

'인수'와 '매개변수'라는 기능을 이용해 함수를 호출하면서 값을 주고 받는다.

• 인수 : 함수를 호출하면서 넘겨주는 값
• 매개변수 : 함수에서 넘겨받은 인수를 저장하는 변수

function a (매개변수) {
	...
}

a(인수);

 

함수 반환

return 문을 이용하여 함수 값을 반환할 수 있다.

함수에서 더 동작할 코드가 남아있어도 return문을 만나면 함수는 종료된다.

function a (매개변수) {
    let test = 1;
    return test;
}

a(인수);

 

중첩 함수

특정 함수 내부에서 선언된 함수를 '중첩 함수'라고 한다.

중첩 함수를 많이 두면 가독성을 떨어지는 단점이 있으나, 적절하게 활용하면 함수 내에서 서로 역활을 분담할 수 있어 중복 코드를 방지하는 데 도움이 된다.

function a () {
	function b(매개변수) {
    	console.log("hi");
    }
}

 

호이스팅 (Hoisting)

선언하기도 전에 호출할 수 있는 기능.

끌어 올리다의 의미를 가지고 있는 호이스팅 (Hoisting)이란 프로그램에서 변수나 함수를 호출하거나 접근하는 코드가 함수 선언보다 위에 있음에도 불구하고, 마치 선언 코드가 위에 있는 것처럼 동작하는 JavaScript만의 독특한 기능이다.

 

JavaScript는 중첩 함수가 아닌 함수들을 모두 찾아 미리 생성하는  준비 단계를 거친 다음에 실행된다.

인터프리터가 변수와 함수의 메모리 공간을 선언전에 미리 할당하기는 내부 알고리즘으로 인하여 생기게 되었고, 이러한 것을 통해 유연한 프로그래밍을 작성하는데 도움을 준다.

 

함수 표현식

함수를 생성하고 변수에 값으로 저장하는 방법으로 선언이 아닌 '값'으로 취급하기 때문에 호이스팅이 불가능하다.

JavaScript에서는 함수를 숫자나 문자열처럼 값으로 취급하는데 함수를 변수에 저장할 때는 함수 호출과는 달리 소괄호를 명시하지 않는다.

let a = function() {
	...
}

a();

let b = a;

1.  let a = function () -> 익명 함수
2. a() -> 함수 호출
3. let b = a;  -> 변수 저장

 

콜백 함수

함수를 다른 함수의 인수(=값)로도 전달하는 것을 '콜백 함수'라 한다.

function a(b) {
	...
}

function b() {
	...
}

a(b);

 

콜백 함수가 왜 필요할까?

동일한 기능을 갖더라도 특정 부분이 달라 새 함수를 만들게 되면 중복 코드가 발생하게 된다.

이러한 문제를 효과적으로 해결하기 위해 콜백 함수를 사용하여 상황에 맞게 하나의 함수가 여러 동작을 수행하도록 만들 수 있다.

 

함수 표현식을 이용한 콜백 함수

콜백 함수를 함수 표현식으로도 만들 수 있는데, 1회만 사용하는 함수라면 익명 함수를 직접 인수 형태로 전달하는 것도 가능하다.

function a (매개변수) {
	...
}

a(function(매개변수){
	...
});

 

화살표 함수

익명 함수를 매우 간결하게 작성할 때사용하는 함수 표현식의 단축 문법으로 함수 본문이 여러 줄이면 중괄호를 이용하여 선언하면 된다.

let a = (매개변수) => {
	let test = 1;
    return 1;
}

중괄호를 사용한 상태로 값을 반환할 때는 return문을 써야한다.

 

스코프 (제약 범위)

JavaScript의 변수와 함수는 생성과 동시에 접근하거나 호출할 때 일정한 제약을 갖는데, 이를 범위라는 뜻을 가진 스코프(Scope)라 부른다.

 

전역, 지역 스코프

• 전역 스코프 : 코드 어디에서나 접근할 수 있다는 의미
• 지역 스코프 : 특정 영역에서만 해당 변수에 접근할 수 있다는 의미

선언 위치에 따라 접근할 수 있는 범위가 결정되는데 이를 '변수의 스코프' 라고 한다.

let a = 1;

function test() {
	let b = 1;
}

for (true) {
	let c = 1;
}

1. let a = 1  :  전역 스코프
2. let b & let c  :  지역 스코프
3. function test  :  전역 스코프 

 

블록, 함수 스코프

중괄호로 둘러싸인 부분을 뜻하는 '블록(Block)'을 '블록 스코프'라고 한다.

또한 함수를 기준으로 지역 스코프를 정하는 '함수 스코프'가 존재한다.

함수 스코프는 함수 내부에서 선언한 변수만 지역 스코프를 가진다는 의미이다.

 

• 블록 스코프 : 블록 내부에서 선언한 변수가 갖는 스코프
• 함수 스코프 : 함수 내부에서 선언한 변수가 갖는 스코프
  • var 키워드로 선언한 변수는 블록 스코프인 let이나 const와 달리 함수 스코프를 가진다.

 

var로 선언하게 되면 생기는 문제점

변수의 이름을 중복해 사용해도 아무런 문제가 발생하지 않다보니 프로그래머를 혼란에 빠뜨릴 여지가 많다.

따라서 보편적인 let이나 const 키워드를 사용할것을 권장한다.

 

객체

다양한 값을 담는 자료형이다.

 

객체 생성

객체를 생성하는 방법은 2가지가 있다.

let a = {};
let b = new Object();

1. let a = 리터럴 문법
2. let b = 생성자 문법

 

프로퍼티

속성이라는 뜻으로 객체를 설명하는 정보이다.

key와 value 쌍으로 이루어져 있고, 여러개의 프로퍼티를 가질 수 있으며 각각은 콤마로 구분한다.

• key 
  • 반드시 문자형을 사용하며 중복해 사용할 수 없다.
  • 중복될 경우 객체에는 마지막에 작성한 프로퍼티만 남는다.
• value
  • 여러 자료형으로 구현할 수 있다.

 

객체 프로퍼티 다루기

객체는 프로퍼티의 모음이며, 프로퍼티를 찾고, 추가하고, 삭제하는 등의 모든 연산은 key를 이용하여 수행한다.

let a = {
	name : "hi",
    age : 35
}

//접근
a.name;
a["age"];

//추가 및 수정
a.name = "test";
a["age"] = 15;

//삭제
delete a.name;
delete a["age"];

1. a.name = 점 표기법 접근
2. a["age"] = 괄호 표기법 접근

 

상수 객체의 프로퍼티

상수는 변할 수 없는 값이라 하였기에 값의 조작이 불가능할거라 생각 할 수 있으나 객체를 서랍장이라 한다면 상수로 선언한 객체는 마치 내장형 서랍장에 비유할 수 있다.

위치를 옮기거나 제거하너가 교체할 수 없지만, 서랍장 안의 물건은 얼마든지 자유롭게 넣다 뺐다 할 수 있다.

 

in 연산자

특정 프로퍼티의 존재 여부를 확인하기 위해 사용한다.

객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환하는 특성을 이용해 확인할 수 있지만 프로퍼티의 value에는 undefined를 할당하는 경우도 있으므로 완벽한 방법이라 보기 어렵다.

let a = {
	age : 1
}

a.age !== undefined;

"test" in a;

1. a.age !== undefined  :  undefined를 이용한 방법
2. "test in a  :  in 연산자

 

메서드

데이터가 아니라 객체의 동작을 정의한 값이 함수인 프로퍼티를 '메서드'라 한다.

 

배열

순서가 있는 요소의 집합이자 여러 개의 항목을 담는 리스트

다른 언어와는 달리 JavaScript의 배열은 길이가 고정되어 있지 않기 떄문에 배열 요소를 추가 또는 삭제함에 따라 길이가 늘어나거나 줄어든다.

 

배열 선언

• let a = new Arrya()  :  배열 생성자
• let b = []  : 배열 리터럴
  • 특별한 이유가 없으면 이 방법으로 배열을 생성한다.

 

배열의 인덱스

배열과 객체의 차이점은 객체는 key가 있지만 배열은 데이터의 위치를 key처럼 사용할 수 있는 인덱스가 있다.

인덱스란 배열 요소의 위치를 0부터 시작하는 숫자로 순서대로 표현한 것이다.

인덱스를 이용하면 배열 요소를 수정하거나 추가할 수 있다.

let a = [1,2,3]

a[0]
a[1] = 5