항해99 1일차! 자바스크립트 기본언어

JS 언어의 특징

1. 객체 지향 프로그래밍 지원
2. 동적 타이핑 변수를 선언할 때 타입을 지정하지 않는다.
3. 함수형 프로그래밍 지원
4. 비동기 처리
5. 클라이언트 측 및 서버 측 모두에서 사용 가능

변수, 상수

기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용 하기 위해 변수라는 메커니즘을 이용한다.

변수 이름 : 저장된 값의 고유 이름

변수 값 : 변수에 저장된 값

변수 할당 : 변수에 값을 저장하는 행위

변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위

변수 참조 : 변수에 할당된 값을 읽어오는것

데이터 타입과 형 변환

데이터 타입

숫자(Number)

1. 정수형 숫자(Integer)
2. let num1 = 10; console.log(num1); // 10 console.log(typeof num1); // "number"
3. 실수형 숫자(Float)
4. let num2 = 3.14; console.log(num2); // 3.14 console.log(typeof num2); // "number"
5. 지수형 숫자(Exponential)
6. let num3 = 2.5e5; // 2.5 x 10^5 console.log(num3); // 250000 console.log(typeof num3); // "number"
7. NaN(Not a Number)<aside> ❗ NaN(Not a Number)은 자바스크립트에서 숫자가 아님을 나타내는 값입니다. 보통 수학적으로 정의되지 않는 계산을 수행하거나, 숫자가 아닌 값을 숫자로 변환하려고 할 때 발생합니다.
8. </aside>
9. let num4 = "Hello" / 2; console.log(num4); // NaN console.log(typeof num4); // "number"
10. Infinity(무한대)
11. let num5 = 1 / 0; console.log(num5); // Infinity console.log(typeof num5); // "number"
12. Infinity(-무한대)
13. let num6 = -1 / 0; console.log(num6); // -Infinity console.log(typeof num6); // "number"

문자열(string)

1. 문자열 길이(length) 확인하기
2. let str = "Hello, world!"; console.log(str.length); // 13
3. 문자열 결합(concatenation)
4. let str1 = "Hello, "; let str2 = "world!"; let result = str1.concat(str2); console.log(result); // "Hello, world!"
5. 문자열 자르기(substr, slice)
6. let str = "Hello, world!"; console.log(str.substr(7, 5)); // "world" 시작지점부터 글자수 5개 console.log(str.slice(7, 12)); // "world" 시작지점부터 출력할 지점까지 인덱스7부터 인덱스 12까지
7. 문자열 검색(search)
8. let str = "Hello, world!"; console.log(str.search("world")); // 7
9. 문자열 대체(replace)
10. let str = "Hello, world!"; let result = str.replace("world", "JavaScript"); console.log(result); // "Hello, JavaScript!"
11. 문자열 분할(split)
12. let str = "apple, banana, kiwi"; let result = str.split(","); console.log(result); // ["apple", " banana", " kiwi"]

불리언(boolean)

불리언은 참(true)과 거짓(false)을 나타내는 데이터 타입이다.

let bool1 = true;
console.log(bool1); // true
console.log(typeof bool1); // "boolean"

불리언 데이터 타입은 조건문(if, else, switch 등)과 논리 연산자(&&, ||, !)와 함께 많이 사용된다.

1. undefined undefined는 값이 할당되지 않은 변수를 의미합니다.
2. let x; console.log(x); // undefined
3. null null은 값이 존재하지 않음을 의미합니다. undefined와는 다릅니다.
4. let y = null;
5. 객체(Object) 자바스크립트에서는 객체가 매우 중요한 역할. 객체는 속성과 메소드를 가지는 컨테이너. 중괄호({})를 사용하여 객체를 생성한다.
6. let person = { name: 'Alice', age: 20 }; person.name // 'Alice' person.age // 20
7. 배열(Array) 배열은 여러 개의 데이터를 순서대로 저장하는 데이터 타입입니다. 대괄호([])를 사용하여 배열을 생성한다.

let numbers = [1, 2, 3, 4, 5];
let fruits = ['apple', 'banana', 'orange'];

형 변환

암시적 형 변환(implicit coercion)

암시적 형 변환은 자바스크립트에서 자동으로 수행되는 형 변환이며, 일반적으로 연산자를 사용할 때 발생한다.

문자열 변환

console.log(1 + "2");   // "12"
console.log("1" + true);   // "1true"
console.log("1" + {});   // "1[object Object]"
console.log("1" + null);   // "1null"
console.log("1" + undefined);   // "1undefined"

자바스크립트는 다른 자료형을 문자열로 변환한 후 연산을 수행한다.

숫자 변환

console.log(1 - "2");   // -1
console.log("2" * "3");   // 6
console.log(4 + +"5");   // 9

연산자를 사용할 때, 문자열을 숫자로 변환한다.. 이때, 빈 문자열("")이나 공백 문자열(" ")은 0으로 변환된다.

명시적 형 변환

명시적 형 변환은 개발자가 직접 자료형을 변환하는 것을 말합니다.

불리언 변환

console.log(Boolean(0));   // false
console.log(Boolean(""));   // false
console.log(Boolean(null));   // false
console.log(Boolean(undefined));   // false
console.log(Boolean(NaN));   // false
console.log(Boolean("false"));   // true
console.log(Boolean({}));   // true

Boolean() 함수를 사용하여 불리언 값으로 변환한다.. 이때, 0, 빈 문자열(""), null, undefined, NaN은 false로 변환된다. 그 외의 값은 true로 변환된다.

문자열 변환

console.log(String(123));       // "123"
console.log(String(true));      // "true"
console.log(String(false));     // "false"
console.log(String(null));      // "null"
console.log(String(undefined)); // "undefined"
console.log(String({}));        // "[object Object]"

위의 예제에서는 String() 함수를 사용하여 다른 자료형을 문자열로 변환된다.

console.log(typeof(true)); //string

숫자 변환

console.log(Number("123"));   // 123
console.log(Number(""));      // 0
console.log(Number("  "));    // 0
console.log(Number(true));    // 1
console.log(Number(false));   // 0

연산자

더하기 연산자는 우선순위가 문자열에 있다.

할당 연산자****(assignment operators)****

let x = 10
console.log(x) // 10
x += 5
console.log(x) // 15
x -= 5
console.log(x) // 10
x -= 20
console.log(x) // -10
x = x + 9
console.log(x) // -1
x *= 3
console.log(x) // -3

나누기 등호 연산자(/=)

let x = 10;
console.log(x);   // 10

x /= 5;
console.log(x);   // 2

위의 예제에서는 나누기 등호 연산자를 사용하여 변수에서 값을 나눌 수 있습니다.

나머지 등호 연산자(%=)

let x = 10;
console.log(x);   // 10

x %= 3;
console.log(x);   // 1

위의 예제에서는 나머지 등호 연산자를 사용하여 변수에서 값을 나눈 나머지를 구할 수 있습니다.

논리 연산자

논리곱(&&) 연산자(and)

• 두 값이 모두 true일 경우에만 true를 반환

논리합(||) 연산자(or)

• 리합 연산자는 두 값 중 하나라도 true일 경우 true를 반환

논리부정(!)연산자

• 논리부정 연산자는 true를 false로, false를 true로 바꾼가.

console.log(!true);   // false
console.log(!false);   // true
console.log(!(2 > 1));   // false

삼항 연산자

let x = 10;
let result = (x > 5) ? "크다" : "작다";
console.log(result);   // "크다"

• 삼항 연산자는 조건식 ? true일 때의 값 : false일 때의 값 형태로 사용

타입 연산자

console.log(typeof 123);   // "number"
console.log(typeof "123");   // "string"
console.log(typeof true);   // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);   // "object"
console.log(typeof {});   // "object"
console.log(typeof []);   // "object"
console.log(typeof function(){});   // "function"

객체나 함수의 경우, "object" 또는 "function"을 반환합니다. typeof null의 경우 "object"를 반환하는 버그가 있다.

함수

함수 선언문

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

함수 표현식

let add = f(매개변수){
}

함수 호출하기

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

console.log(add(2, 3));   // 5

input : 함수의 input → 매개변수(매개체가 되는 변수)

output : return문 뒤에 오는 값 : 반환값

함수 스코프

전역 스코프

• 전역 스코프에서 선언된 변수는 어디에서든지 참조할 수 있다.

let x = 10;

function printX() {
  console.log(x);
}

printX();   // 10

지역 스코프

• 지역 스코프에서 선언된 변수는 해당 함수 내에서만 참조할 수 있다.

화살표 함수

기본적인 화살표 함수

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

console.log(add(2, 3));   // 5

한 줄로 된 화살표 함수

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

console.log(add(2, 3));   // 5

함수 내부에 return문이 한 줄로 작성될 경우, 중괄호와 return 키워드를 생략할 수 있다.

매개변수가 하나인 화살표 함수

let square = x => x * x;

console.log(square(3));   // 9

매개변수가 하나일 경우에는 괄호를 생략할 수 있다.

조건문

if문

let x = 10;

if (x > 0) {
  console.log("x는 양수입니다.");
}

if-else문

let x = -10;

if (x > 0) {
  console.log("x는 양수입니다.");
} else {
  console.log("x는 음수입니다.");
}

if-else if-else문

let x = 0;

if (x > 0) {
  console.log("x는 양수입니다.");
} else if (x < 0) {
  console.log("x는 음수입니다.");
} else {
  console.log("x는 0입니다.");
}

switch문

let fruit = "사과";

switch (fruit) {
  case "사과":
    console.log("사과는 빨간색입니다.");
    break;
  case "바나나":
    console.log("바나나는 노란색입니다.");
    break;
  case "오렌지":
    console.log("오렌지는 주황색입니다.");
    break;
  default:
    console.log("해당하는 과일이 없습니다.");
    break;
}

조건부 실행

let x = 10;

(x > 0) && console.log("x는 양수입니다.");

&& 연산자를 사용하여 조건부 실행

삼항 연산자와 단축 평가

let x;
let y = x || 10;

console.log(y);   // 10

삼항 연산자를 사용하여 변수 x가 존재하지 않는 경우 기본값으로 10을 사용합니다. || 연산자를 사용하여 단축 평가(short-circuit evaluation)를 할 수 있습니다. 변수 x가 존재하지 않는 경우, || 연산자는 false 값을 반환하고, 기본값으로 지정한 10을 반환합니다.

falsy한 값과 truthy한 값

if (0) {
  console.log("이 코드는 실행되지 않습니다.");
}

if ("") {
  console.log("이 코드는 실행되지 않습니다.");
}

if (null) {
  console.log("이 코드는 실행되지 않습니다.");
}

if (undefined) {
  console.log("이 코드는 실행되지 않습니다.");
}

if (NaN) {
  console.log("이 코드는 실행되지 않습니다.");
}

if (false) {
  console.log("이 코드는 실행되지 않습니다.");
}

falsy한 값들을 사용하여 if문의 조건을 만족시키지 못하도록 한다. 0, 빈 문자열, null, undefined, NaN, false는 falsy한 값으로, if문의 조건을 만족시키지 못한다. 그 외의 값들은 모두 truthy한 값으로, if문의 조건을 만족시킨다.

배열, 객체 기초

하나의 변수에 여러개의 값을 넣을 수 있다.

객체 속성 접근

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

console.log(person.name);   // "홍길동"
console.log(person.age);    // 30
console.log(person.gender); // "남자"

Object.keys() 메소드

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

let keys = Object.keys(person);

console.log(keys);   // ["name", "age", "gender"]

객체 person의 속성 이름을 배열로 반환

Object.values() 메소드

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

let values = Object.values(person);

console.log(values);   // ["홍길동", 30, "남자"]

객체 person의 속성 값들을 배열

Object.entries() 메소드

key와 value를 묶어서 배열로 만든 배열(2차원배열)

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

let entries = Object.entries(person);

console.log(entries);
//[ [ 'name', '홍길동' ], [ 'age', 30 ], [ 'gender', '남자' ] ]

객체 person의 속성 이름과 속성 값들을 2차원 배열로 반환

Object.assign() 메소드

객체를 복사한다.

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

let newPerson = {}
Object.assign(newPerson, person);

console.log(newPerson);   // { name: "홍길동", age: 30, gender: "남자" }

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

let newPerson = Object.assign({}, person, { age: 35 });

console.log(newPerson);   // { name: "홍길동", age: 35, gender: "남자" }

새로운 객체 newPerson을 만든다.

객체 비교

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

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

console.log(person1 === person2);   // false
console.log(JSON.stringify(person1) === JSON.stringify(person2));   // true

객체는 크기가 상당히 크기때문에 메모리에 저장할 때 별도의 공간에 저장한다.

person1과 person2 는 저장경로가 다르기때문에

객체를 비교할 때는 일반적으로 === 연산자를 사용할 수 없다.

JSON.stringify ⇒ 객체를 문자열화 시킨다.

JSON.stringify() 함수를 사용하여 객체를 문자열로 변환한 후, 문자열 비교한다.

객체 병합

let person1 = {
  name: "홍길동",
  age: 30
};

let person2 = {
  gender: "남자"
};

let mergedPerson = {...person1, ...person2};

console.log(mergedPerson);   // { name: "홍길동", age: 30, gender: "남자" }

… : spread operator

배열의 크기 지정

let numbers = new Array(5);

크기가 5인 배열 numbers를 생성

배열 요소 접근

let fruits = ["사과", "바나나", "오렌지"];

console.log(fruits[0]);   // "사과"
console.log(fruits[1]);   // "바나나"
console.log(fruits[2]);   // "오렌지"

배열의 요소에 접근할 때는 대괄호([]) 안에 인덱스 값을 넣는다.

배열 메소드

push() 메소드

let fruits = ["사과", "바나나"];

fruits.push("오렌지");

console.log(fruits);   // ["사과", "바나나", "오렌지"]

push() 메소드는 배열의 끝에 요소를 추가

pop() 메소드

let fruits = ["사과", "바나나", "오렌지"];

fruits.pop();

console.log(fruits);   // ["사과", "바나나"]

pop() 메소드는 배열의 마지막 요소를 삭제

shift() 메소드

javascriptCopy code
let fruits = ["사과", "바나나", "오렌지"];

fruits.shift();

console.log(fruits);   // ["바나나", "오렌지"]

shift() 메소드는 배열의 첫 번째 요소를 삭제

unshift() 메소드

let fruits = ["바나나", "오렌지"];

fruits.unshift("사과");

console.log(fruits);   // ["사과", "바나나", "오렌지"]

unshift() 메소드는 배열의 맨 앞에 요소를 추가

splice() 메소드

let fruits = ["사과", "바나나", "오렌지"];

fruits.splice(1, 1, "포도");

console.log(fruits);   // ["사과", "포도", "오렌지"]

splice() 메소드는 배열의 요소를 삭제하거나, 새로운 요소를 추가할 수 있다.

slice() 메소드

let fruits = ["사과", "바나나", "오렌지"];

fruits.splice(1, 1, "포도");

console.log(fruits);   // ["사과", "포도", "오렌지"]

slice() 메소드는 배열의 일부분을 새로운 배열로 만든다.

forEach() 메소드

let numbers = [1, 2, 3, 4, 5];

numbers.forEach(function (number) {
  console.log(number);
});
// 1
// 2
// 3
// 4
// 5

배열의 각 요소에 대해 콜백 함수를 실행

콜백함수 : 매개변수 자리에 함수를 넣는 것

map() 메소드

let numbers = [1, 2, 3, 4, 5];

let squaredNumbers = numbers.map(function(number) {
  return number * number;
});

console.log(squaredNumbers);   // [1, 4, 9, 16, 25]

map() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과를 새로운 배열로 반환한다.

map메소드는 return을 꼭 써줘야하고 반드시 새로운 배열을 빼낸다.

항상 원본 배열의 길이만큼이 return된다.

filter() 메소드

let numbers = [1, 2, 3, 4, 5];

let evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers);   // [2, 4]

filter() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소만 새로운 배열로 반환한다.

find() 메소드

let numbers = [1, 2, 3, 4, 5];

let foundNumber = numbers.find(function(number) {
  return number > 3;
});

console.log(foundNumber);   // 4

find() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 첫 번째 요소를 반환한다.

some() 메소드

let numbers = [1, 2, 3, 4, 5];

let hasEvenNumber = numbers.some(function(number) {
  return number % 2 === 0;
});

console.log(hasEvenNumber);   // true

some() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소가 하나라도 있는지 확인한다.

every() 메소드

let numbers = [2, 4, 6, 8, 10];

let isAllEvenNumbers = numbers.every(function(number) {
  return number % 2 === 0;
});

console.log(isAllEvenNumbers);   // true

every() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소가 모든 요소인지 확인한다.

reverse() 메소드

let numbers = [1, 2, 3, 4, 5];

numbers.reverse();

console.log(numbers);   // [5, 4, 3, 2, 1]

reverse() 메소드는 배열의 요소를 역순으로 정렬(순서 뒤집기)

반복문

for문

기본적인 for문

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

배열과 함께 사용하는 for문

let numbers = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

배열의 요소를 출력한다. 배열의 요소 개수만큼 반복하여 실행한다.

for...in문

let person = { name: "John", age: 30, gender: "male" };

for (let key in person) {
  console.log(key + ": " + person[key]);
}

객체 person의 프로퍼티를 출력, 객체의 프로퍼티를 순서대로 접근할 수 있다.

while문

let i = 0;

while (i < 10) {
  console.log(i);
  i++;
}

while문은 조건식이 참인 경우에만 코드를 반복해서 실행한다.

do...while문

let i = 0;

do {
  console.log(i);
  i++;
} while (i < 10);

do...while문은 일단 한 번은 코드를 실행하고, 그 후에 조건식을 체크하여 반복 여부를 결정