⑶ - Section 2. 정리

Jae Chan·2023년 5월 28일

강의 리뷰 인프런 자바스크립트

프론트엔드를 위한 자바스크립트 첫 걸음

목록 보기

3/3

🎈 글쓰기에 앞서 해당 강의는 인프런에서 제공하는 "웹 프론트엔드를 위한 자바스크립트 첫 걸음" 강의의 내용을 토대로 학습한 내용입니다.

무료로 제공해주신 Hyobin 강사님께 감사의 말씀을 드립니다. 😄

✨ 챕터

자료형 🧱
템플릿 리터럴
Boolean
Null
undefined
비교 연산자
null 병합 연산자
함수
스코프
호이스팅
함수 표현식
화살표형 함수
콜백 함수
객체 (Object)
객체 메소드
배열 (Array)

자료형 🧱

🟩 자료형이란 변수를 선언하는 타입의 종류를 의미한다.

JavaScript 에서의 자료형은 원시 타입과 비 원시 타입으로 나뉜다.

원시 타입
- Integer
- BigInt
- Null
- String
- Boolean
- Undefined
- Symbol
비 원시 타입
- 객체 (Object)
- Function , Array 등

그렇다면 원시 타입과 비 원시 타입의 차이점은 무엇일까?

원시타입 자료형은 프로그램이 실행되는 도중에는 단 하나의 값 만을 갖고 있는 자료형이다.
비 원시 타입은 원시타입 자료형의 반대의 의미이다.

다음 코드에서 차이점을 알 수 있다.

/* 원시 타입 ✅ */
let number = 2000;
number = "2000";

/* 비 원시 타입 */
let arr = [1, 2, "3", 4, "5"]; 
// 하나의 배열 안에 서로 다른 타입의 값이 들어가 있음.

템플릿 리터럴

🟩 JavaScript에서는 문자열 변수를 선언 할 때 총 3가지로 나뉜다.

let myName_0 = 'Lee Jae Chan'; // 작은 따옴표
let myName_1 = "Lee Jae Chan"; // 큰 따옴표
let myName_0 = `Lee Jae Chan`; // 역 따옴표(백틱)

작은 따옴표와 큰 따옴표의 차이점은 크게 없지만 역 따옴표의 경우 다른 변수의 값을 문자열 안에서도 활용하고 싶을 때 사용한다.

let myName = "Jae Chan";
let introMyName = `제 이름은 ${myName} 입니다 :)` ;

console.log(introMyName);
>>> 제 이름은 Jae Chan 입니다 :)

위의 코드에서 확인할 수 있듯 myName으로 선언한 변수가 introMyName에 들어가 출력 된 것을 알 수 있다.

`Boolean`

🟩 Boolean 타입의 경우 값이 True 또는 False 만 존재한다.

다음과 같이 활용할 수 있다.

let isTrue = true;

if (isTrue) {
	console.log("참 !");
} else {
 	console.log("거짓 -_-");
}

>>> 참 !

`Null`

🟩 Null 이란 현재 값이 비어있다는 의미이다.

let thisValue = null;
console.log(thisValue);

>>> null

`undefined`

🟩 undefined란 Null과는 다르게 현재 변수에 값이 할당되지 않았을 경우의 값이다.

let myNumber;
console.log(myNumber);

>>> undefined

비교 연산자

🟩 JavaScript 에서는 두 변수의 값만 비교하는 연산자가 있고
두 변수의 값 뿐만 아니라 자료형 까지 같은지 비교하는 연산자가 존재한다.

다음 코드에서 예시를 확인해보자.

let num1 = 10;
let num2 = "10"

console.log(num1 === num2); -> false
console.log(num1 == num2); -> true

`null` 병합 연산자

🟩 null 병합 연산자란 현재 값이 null 또는 undefined 일 경우 출력할 값을 지정해주는 연산자이다.

선언하는 방법은 ?? 를 이용한다.

let myName;
myName = myName ?? "Jae Chan";

console.log(myName);
>>> Jae Chan;

위의 코드에서는 myName에 할당한 값이 없기 때문에(undefined) 출력 결과가 Jae Chan임을 알 수 있다.

여기서 myName 변수에 값을 할당할 경우 결과를 확인해보겠다.

let myName = "이재찬";
myName = myName ?? "Jae Chan";

console.log(myName);
>>> 이재찬

이처럼 값이 존재할 경우 해당 값이 그대로 출력됨을 알 수 있다.

함수

🟩 함수란, 같은 동작을 하는 중복된 코드가 존재할 경우
이들을 하나로 묶어 하나의 명령으로 실행할 수 있게 해주는 기능

예를 들어 아래 코드는 더하기가 여러 번 사용 된 경우인데 이를 함수를 이용해 줄여줄 수 있다.

let num1 = 10;
let num2 = 20;
let addNum = num1 + num2;

>>> 30

let num3 = 20;
let num4 = 40;
let addNum2 = num3 + num4;

>>> 60

자바스크립트에서 함수를 사용할 때 function 키워드를 사용한다.

/*  */
function calc(a, b) {
	return a + b;
}

let num = calc(10, 20);
console.log(num);

>>> 30

위의 함수는 매개 변수로 2개의 값을 전달받은 후 각 변수끼리 더한 값을 return 한다.

스코프

🟩 스코프란 변수 또는 함수가 사용되는 유효 범위를 뜻 한다.

스코프의 종류는 총 4가지이다.

전역 스코프
지역 스코프
함수 스코프
블록 스코프

전역 스코프

어디서든지 해당 변수에 접근 가능한 범위를 의미한다.

let global = 0; // 전역 변수

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

add(20,30);
console.log(global);

>>> 50

지역 스코프

해당 변수를 선언한 지역을 벗어난 곳에서는 접근 불가능하다.

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

console.log(localVal); // ❌ 함수 내부에서만 사용 가능한 지역 변수임

'localVal' is not defined. (no-undef)

블록 스코프

말 의미 그대로 블록 내에서만 사용 가능한 변수이다.

function testBlock() {
	for(let i = 0; i < 10; i++) {
    	console.log(`테스트 : ${i}`); // ✅ 블록 범위 내의 존재하는 변수인 i
    }
  
  		console.log(`테스트 : ${i}`); // ❌ 블록 내에서만 존재하는 변수
}

호이스팅

🟩 아직 선언되지 않은 함수나 변수들을 해당 스코프의 맨 위로 올려 사용하는 방식이다.

testHoisting(); // 호이스팅 사용. 아직 선언 안됨.

function testHoisting() {
	console.log("호이스팅 테스트");
}

함수 표현식

위에서 다뤘던 함수의 경우 함수 선언식 표현이다.

/* 함수 선언식 */
function printTest() {
	console.log("Hello World !");
}

printTest();

JavaScript에서는 함수 표현식을 이용해 함수를 만들수 있다.

/* 함수 표현식 */
let printTest = function () {
	console.log("Hello World !");
}

printTest();

그렇다면 두 표현의 차이점은 무엇일까? 바로 호이스팅 가능 여부이다.

함수 선언식

호이스팅 작동 ✅

printTest();  // hello World !

let printTest = function () {
	console.log("Hello World !");
}

함수 표현식

호이스팅 작동 ❌

printTest();  // ❌ printTest is not a function

let printTest = function () {
	console.log("Hello World !");
}

화살표형 함수

Javascript 에서는 화살표형 함수라는 것을 통해 함수 표현을 더욱 간결하게 작성이 가능하다.

const printTest() => {
	console.log("아 배고파.");
}

printTest();
>>> 아 배고파.

콜백 함수

🟩 콜백 함수란, 다른 함수에 매개변수로 넘겨준 함수를 의미한다.

용어가 헷갈릴 수 있는데 좀 더 쉽게 설명하면 함수의 매개변수로 또 다른 함수를 받는 것을 의미한다.

아래 예시를 통해 콜백 함수가 무엇인지 봐보자.

/* 매개변수가 2개. */
function testCallBack(userName, callback) {
  console.log(`Hello  ${userName} !`); // 첫 번째 매개변수.
  callback(); // 두 번째 매개변수로 또 다른 함수를 받는다.
}

function test() {
	console.log("이거 콜백 함수야 !");
}

testCallBack("이재찬", test);

>>> Hello  이재찬 ! 
	이거 콜백 함수야 !

이처럼 함수의 인자로 또 다른 함수를 받는 것을 콜백 함수라고 한다.

객체 (Object)

JavaScript의 객체 선언 방식은 총 두가지이다.

객체 생성자를 통한 선언
객체 리터럴을 통한 선언

let person = new Object(); // 객체 생성자
let person = {}; // 객체 리터럴

객체의 속성은 Key 와 Value 한 쌍으로 이루어져 있으며 :로 구분한다.

다음 코드를 통해 알아보자.

let User = {
  userName: "이재찬",	// Key : userName ,  Value : 이재찬
  age: 24, 			 	// Key : age ,  Value : 24
  sex: "Male" 			// Key : sex ,  Value : Male
};

console.log(User);
>>> {userName: "이재찬", age: 24, sex: "Male"}

여기서 객체의 속성을 각각 꺼내어 사용도 가능하다.

let User = {
  userName: "이재찬",
  age: 24, 			 	
  sex: "Male" 			
};

console.log(User.userName);
console.log(User.age);
console.log(User.sex);

>>> 이재찬 
	24
	Male

여기서 객체의 속성을 꺼낼 때 .으로 선언하였으나 []로 또한 표기 가능하다.

console.log(User["userName"]);
>>> 이재찬

괄호 표기법은 객체의 Key 와 Value의 특징을 이용해 다음과 같이 활용 가능하다.

let Pet = {
	name: "Shiba",
  	type: "Dog",
  	age: 10
};

/** 객체의 Value를 가져오는 함수 선언 */
const getValue = (key) => {
	console.log(Pet[key]);
};

getValue("name");
getValue("type");

>>> Shiba 
	Dog

객체 메소드

JavaScript의 객체 내부의 Key값에는 함수를 선언할 수 있는데 이를 메소드라 칭한다.

다음 코드를 통해 메소드 예시를 봐보자.

const User = {
  userName: "이재찬",
  userID: 20000731,
  userBlog: "https://velog.io/@jaepal",
  print: function () {
    console.log("Hello !"); // 객체 메소드
  }
};

/* 사용법 */
User.print();
>>>  Hello !

이를 활용해 객체 메소드를 이용해 객체 속성을 출력하는 것을 작성해보겠다.

여기서 주의할 점은 총 두 가지이다.

객체 내부에서 함수 선언 시 function 키워드를 사용해야 한다.
함수 내부에서 객체 프로퍼티 접근시 this 키워드를 사용해 선언 해야한다.

const User = {
  userName: "이재찬",
  userID: 20000731,
  userBlog: "https://velog.io/@jaepal",
  
  print: function () {
    console.log(`안녕하세요 유저 ${this.userName} 님!`); // 객체 프로퍼티 접근할 경우 this 키워드 사용.
  }
};

User.print();
>>> 안녕하세요 유저 이재찬 님!

배열 (`Array`)

🟩 배열이란 여러 개의 항목들이 모여있는 리스트, 순서가 있는 요소들의 집합을 의미한다.

배열의 선언은 [] 중괄호로 선언한다.

const arr = [1,2,3];

배열 내부에는 여러 타입의 값들을 넣을 수 있다.

const arr = ["이재찬" , 7, null];

배열 내부의 요소 값들을 꺼내기 위해 다음과 작성한다.

let name = arr[0];
>>> 이재찬

주의 사항 ❗
배열의 첫번 째 요소의 인덱스 번호는 0 부터 시작한다.

[1 , 2 , 3] =>	인덱스 0의 값 : 1
				인덱스 1의 값 : 2
				인덱스 2의 값 : 3

기존 배열에 값을 추가할 때는 push 메소드를 통해 추가한다.

const arr = [1,2,3];
arr.push(4);

console.log(arr[3]);
>>> 4

여기서 push의 경우는 배열의 마지막 요소에 값을 추가한 것을 알 수 있다.
배열의 맨 첫번째 요소에 값을 추가하고 싶은 경우 unshift 메소드를 사용한다.

arr.unshift(0);
console.log(arr[0]);
>>> 0

키워드가 아닌 직접 값을 제어하고 싶으면 다음과 같이 작성한다.

const arr = [1,2,"포카칩"];

arr[0] = 100;
arr[2] = "프링글스";
console.log(arr);

>>> (3) [100, 2, "프링글스"];

배열의 요소를 제거하는 방법은 pop 메소드를 이용한다.
push 와 마찬가지로 배열의 맨 마지막 요소를 제거한다.

arr.pop();
console.log(arr);
>>> [100,2];

unshift의 반대인 shift는 배열의 맨 첫 번째 요소를 제거한다.

arr.shift();
console.log(arr);
>>> [2];

선언한 배열의 길이(요소 개수)를 알려면 length 메소드를 사용한다.

const arr = [1, 2, 3, 4, 5]; // 배열 내 요소 개수 : 5
const num = arr.length;

console.log(num);
>>> 5

Jae Chan

🐋

이전 포스트

⑶ - Section 2. 정리

프론트엔드를 위한 자바스크립트 첫 걸음

자료형 🧱

템플릿 리터럴

`Boolean`

`Null`

`undefined`

비교 연산자

`null` 병합 연산자

함수

스코프

전역 스코프

지역 스코프

블록 스코프

호이스팅

함수 표현식

화살표형 함수

콜백 함수

객체 (Object)

객체 메소드

배열 (`Array`)

⑵ - 변수와 상수

0개의 댓글

⑶ - Section 2. 정리

프론트엔드를 위한 자바스크립트 첫 걸음

자료형 🧱

템플릿 리터럴

Boolean

Null

undefined

비교 연산자

null 병합 연산자

함수

스코프

전역 스코프

지역 스코프

블록 스코프

호이스팅

함수 표현식

화살표형 함수

콜백 함수

객체 (Object)

객체 메소드

배열 (Array)

⑵ - 변수와 상수

0개의 댓글

`Boolean`

`Null`

`undefined`

`null` 병합 연산자

배열 (`Array`)