#2. 자바스크립트의 기초_2

지난 1번 글에서 배웠던 내용을 이어서 적는다.

함수

Function : 어떠한 기능을 나타낸다. Input/Output 을 가진 단위를 말하기도 한다.

기능으로 코드를 묶은 후, 이후 재활용하고자 하는 수단으로 이용된다.

function 함수이름(매개변수) {
	// 함수 내부에서 실행할 로직
}

함수는 두개의 형태로 나타낼 수 있는데, 예시로 Sum 함수를 들면서 보여주도록 한다.

1. 함수 선언문

function add(x, y)
{
	return x + y;
}

2. 함수 표현식

let add2 = function(x, y) 
{
	return x + y;
}

 

console.log(add(2,3)); //출력 : 5
----------------------------------
let functionResult = add(3, 4);
console.log(functuonResult); //출력 : 7

Input : 매개변수, 함수의 매게체가 되는 변수들을 말한다.

Output : return 문 뒤의 오는 반환값을 말하며 함수 외부에서 결과값으로 사용하기 위해 작성한다.

 

스코프 (Scope)

'범위' 의 뜻을 가지고 있다.

예를 들어 let x = 10; 이라는 x 변수가 있을 때, 이 x가 영향을 끼칠 수 있는 범위를 말한다.

크게 두 종류로 나뉘는데

1. 전역 변수 : 프로젝트 어디서든 접근 가능한 변수

2. 지역 변수 : 하나의 함수 내부, 하나의 클래스 내부 등 정해진 범위가 있는 변수

이 스코프의 개념을 잘 알고 활용하는 것이 오류를 방지하는 첫 단계라고도 볼 수 있다.

 

화살표함수 =>

기존의 함수 선언은

function add(x,y)
{
	return x + y;
}

와 같은 형태였다.

이보다 더 함수를 간결하게 사용하기 위해 제안된 것이 화살표 함수이다.

 

기본적인 화살표 함수는 다음과 같다.

let arrowFunc = (x, y) => {
	return x + y;
}

이때 arrowFunc 가 변수처럼 선언되었다 할지라도 타입은 function 으로 출력된다.

또한 이 화살표 함수는 한줄로 사용할 수도 있다.

let arrowFunc = (x, y) => x + y;

물론 이는 내부 코드가 한줄로만 동작이 가능할 때만 사용 가능하다.

 

문

door를 말하는 것이 아니다.

조건문

크게 두가지로 나눌 수 있다.

(if / else if / else) 문과 Switch 문이 있다.

If 문

//기본 구조
if( 조건) { 조건이 맞을 경우 실행하는 코드 }

//예시
let x = 10;
if(x > 0) { console.log("x는 양수이다."); }

let y = "Hello World";
if(y.length >= 5 ) { console.log(y); }


//else if
//기본 구조
if (조건) {조건이 맞을 경우 시행}
else {조건이 맞지 않을 경우 시행}

//if - else if - else
//기본 구조
if (조건1) {조건1이 맞을 경우 시행}
else if (조건2) {조건1이 아니고 조건2가 맞을 경우 시행}
else {조건1, 조건2가 모두 아닐 경우 시행}

 

Switch 문

변수의 값에 따라서 여러 개의 경우 중 하나를 시행하고자 할 때 사용한다.

모든 경우가 해당되지 않을 경우에는 default 경우로 시행된다.

간단한 활용 예시로, 사용자의 입력에 따른 위치 변화 등에서 사용할 수 있다.

 

//기본 구조
swtich(변수)
{
	case 값1 :
		//값1이 맞을 경우 시행
	case 값2 :
		// 값2가 맞을 경우 시행
	default :
		// 값1, 값2가 모두 아닐 경우 시행
}

//예시
let fruit = "사과";
switch(fruit)
{
	case "사과":
		console.log("사과");
		break;
	case "수박" : 
		console.log("수박");
		break;
	default :
		console.log("과일이 아님");
		break;
}

 

이 때 case 마다 break 를 반드시 적어줘야 한다. 그렇지 않을 경우 코드를 빠져나오지 못하고 무한 루프에 갇힐 수 있다.

 

조건문 심화

조건문의 중첩

let age = 20;
let gender = "여성";

if(age >= 18)
{
	console.log("성인입니다");
	if(gender === "여성")
	{
		console.log("성인 여성입니다");
	}
}

조건부 실행

let x = 10;
//and 조건
(x>0) && console.log("x는 양수");
//or 조건
let y;
let z = y || 20;
console.log(z); //출력 : 20
//y가 존재하지 않는 경우(undefined) z = 20 실행

Truthy / Falsy

if(true 또는 false) {}

이게 기본 형태로, 이 if문의 조건이 true 냐 false 냐 에 따라 이 값이 truthy 하다, falsy 하다로 부를 수 있다.

 

객체

하나의 변수 안에 여러 개의 값을 넣고자 할 때 사용한다.

//1. 선언 예시
let person = {
	name: "홍길동",
	age : 30,
	gender : "남자"
	//key : value pair 형태
};

//2. 객체 생성 방법
function Person(name, age, gender)
{
	this.name = name;
	this.age = age;
	this.gender = gender;
}

let person1 = new Person("홍길동", 30, "남자");

//3. 접근 방법
console.log(person1.name);
//출력 : 홍길동
//객체 이름 . 키 를 써주면 됨

객체 메소드

객체가 가진 여러가지 기능들을 말한다.

Object.메소드이름() ~ 으로 사용할 수 있다.

//1. Object.key() : key를 가져오는 메소드
let keys = Object.key(person1);
//출력 : ['name', 'age', 'gender']

//2. values();
let values = Object.values(person);
//출력 a와 동일

//3. entries : key와 value 를 묶어서 2차원 배열로 만드는 함수
let entries = Object.entries(person);
//출력 : [['name', '홍길동'], ['age', 30], ['gender', '남성']]

//4. assign : 객체 복사
let newPerson = {};
//person1의 정보를 newPerson 에 대입
Object.assign(newPerson, person1);
//출력 : person1의 정보가 출력

Object.assign(newPerson, person1, {age:31});
//출력 : age 값만 31로 바뀌어서 출력됨

//5. 객체 비교
let person1 = {
	name: "홍길동",
	age : 30,
	gender : "남자"
}

let person2 = {
	name: "홍길동",
	age : 30,
	gender : "남자"
}

console.log(person1 === person2)
//출력 : false

//6. 객체 병합
let person1 = {
	name: "홍길동",
	age : 30
}
let person2 = {
	gender : "남자"
}
//이 person1 과 person2 를 합치고자 함
let perfectMan = {...person1, ...person2};
//출력 : { name: "홍길동", age : 30, gender : "남자"}

여기서 5번 객체 비교의 경우, string 같은 다른 타입의 비교 연산인 경우 true 가 출력되지만, 객체는 false가 나온다.

완벽히 같은 정보를 가진 객체라 하더라도 서로 같지 않다는 말인데, 왜 그럴까?

기본적으로 객체는 크기가 매우 커, 메모리에 저장 시 별도의 공간에 저장된다.

따라서 객체를 저장할 때마다 별도의 메모리 주소를 갖게 되어, 내부적인 데이터가 모두 동일하다고 해도 그 값이 담긴 주소가 다르기 때문에 같은 객체라고 볼 수 없다.

사실상 '완벽히 같은 객체' 란 있을 수 없는 일이라는 것이다.

 

배열

생성 및 요소 접근

//기본 생성 : [ ] 대괄호를 사용한다.
let fruits = ["apple", "banana", "kiwi"];

//크기 지정
let number = new Array(5);
//크기가 5인 배열 number 가 생성

//요소 접근
console.log(fruits[0]); //출력 : apple
console.log(fruits[1]); //출력 : banana
console.log(fruits[2]); //출력 : kiwi

여러 개의 요소를 매개변수만 다른 같은 코드로 실행시킬 수 있다는 점에서 반복문과 자주 같이 사용한다.

배열 메소드

//Push : 요소 마지막에 새 요소 추가
let fruits = ["apple", "banana"];
console.log(fruits); // ["apple", "banana"]
fruits.push("kiwi");
console.log(fruits); // ["apple", "banana", "kiwi"]

//Pop : 마지막 요소 삭제
let fruits = ["apple", "banana"];
fruits.pop(); // ["apple"]

//Shift : 첫번째 요소 삭제
let fruits = ["apple", "banana"];
fruits.shift(); // ["banana"]

//UnShift : 맨 앞에 새 요소 추가
let fruits = ["apple", "banana"];
fruits.unshift("kiwi"); // ["kiwi", "apple", "banana"];

//Splice : 요소 바꿈
//n1 부터 n2 까지 삭제 후, 그 위치에 매개변수로 할당된 요소를 추가
let fruits =["apple", "banana", "kiwi"];
fruits.splice(1, 1, "orange"); //[ 'apple', 'orange', 'kiwi' ]

//Slice : 배열 분할
//n1 부터 n2 까지 자르고, 새 배열로 반환
let fruits =["apple", "banana", "kiwi"];
let sliceFruits = fruits.slice(1, 2); //['banana']

 

배열 메소드 심화

//1. forEach : 매개변수 자리에 함수를 넣어준다. 이때 이 함수를 '콜백함수' 라고 함
let numbers = [1,2,3,4,5];
numbers.forEach(function(item){
	console.log(item);
});
//출력 : 1\n2\n3\n4\n5\n

//2. Map : 기존 배열을 가공해 새 배열로 반환
//반드시 return 이 사용되어야 하며, 새 배열은 기존 배열의 길이만큼 반환된다.
let numbers = [1,2,3,4,5];
let newNumbers = numbers.map(function(item){
	return item * 2;
});
//출력 : [2,4,6,8,10]

//3. filter : 조건에 맞는 인덱스만 반환
//return 에 조건이 들어가며, 원본 배열의 길이와 상관없이 반환 배열의 길이가 결정된다.
let numbers = [1,2,3,4,5];
let filteredNumbers = numbers.filter(function(item){
	return item === 5;
});
//출력 : [5]

//4. find : 조건에 맞는 인덱스 중 가장 첫번째 값 반환
let numbers = [1,2,3,4,5];
let result = numbers.find(function(item){
	return item > 3;
});
//출력 : 4

 

반복문

조건에 해당하는 동안 본문 코드를 반복 시행하고자 할 때 사용된다.

For 문

//기본 구조
for(초기값; 조건식; 증감식) {}

//예시 코드
for(let i = 0; i<10; i++) {console.log(i)};
//출력 : 0,1,2,3,4,5,6,7,8,9

예시 코드의 for 문을 해석하자면 다음과 같다.

i 는 0부터 시작, 10이 되기 전까지 반복되며 1씩 증가한다.

위에서도 말했듯이 for문, 즉 반복문과 배열은 자주 같이 사용한다.

const arr = [1,2,3,4,5];
for(let i = 0; i<arr.length; i++)
{
	console.log(arr[i]);
}
//출력 : 1,2,3,4,5

 

for-in 문

객체의 속성을 출력하는 방법이다.

let person = {
	name = "John",
	age : 30,
	gender : "male"
}
for(let key in person)
{
	console.log(key + " : " + person[key])
}
//출력 : name : John, age : 30, gender : male

 

While 문

//기본 구조
while(조건)
{
	//메인 로직 + 증감
}

//예시 코드
let i = 0;
while(i < 10)
{
	console.log(i);
	i++;
}
//출력 : 0,1,2,3,4,5,6,7,8,9

 

do-while 문

while 문은 첫 시행에서부터 조건을 판별했다면,

do-while 문은 일단 시행 후 그 다음부터 조건을 판별한다.

let i = 0;
do {console.log(i); i++;}
while(i < 10);
//출력 : 0,1,2,3,4,5,6,7,8,9

 

Break / Continue

Break

for(let i = 0; i< 10; i++)
{
	if(i === 5) break;
	console.log(i);
}
//출력 : 0,1,2,3,4

break 가 시행되는 순간 for 문을 깨고 반복문을 종료한다.

Continue

for(let i = 0; i< 10; i++)
{
	if(i === 5) continue;
	console.log(i);
}
//출력 : 0,1,2,3,4,6,7,8,9

continue 가 만족되는 순간 본문을 실행하지 않고, 다음 반복을 진행한다.