본문 바로가기
학습 내용 정리/javascript

javascript 문법 총정리

verdantjuly 2023. 5. 22. 18:49
728x90

0. es6 문법

function은 호출을 할 때 this가 정해지지만, 화살표 함수는 선언할 때 this가 정해진다.

 

객체의 key와 value 값이 같다면, 생략 가능해요.

const name = "nbc"
const age = "30"

const obj = {
	name,
	age: newAge
}

const obj = {
	name,
	age
}

 

나머지 매개변수 

function func (a, b, ...args) {
	console.log(...args)
}

func(1, 2, 3) // 3
func(1, 2, 3, 4, 5, 6, 7) // 3 4 5 6 7

 

default export

// name.js
const Name = () => {
}

export default Name

// other file 
// 아무 이름으로 import 가능
import newName from "name.js"
import NameFromOtherModule from "name.js"

named export

// 하나의 파일에서 여러 변수/클래스 등을 export 하는 것이 가능

export const Name1 = () => {
}

export const Name2 = () => {
}

// other file
import {Name1, Name2} from "name.js"
import {newName} from "name.js" // x

// 다른 이름으로 바꾸려면 as 사용
import {Name1 as newName, Name2} from "name.js"

// default export 처럼 가져오려면 * 사용
import * as NameModule from "name.js"

console.log(NameModule.Name1)

1. 문자 : string (문자열 = 문자의 나열)

'  ' = "  "

 

let str = "Hello World";

console.log(str);

console.log(typeof str);

 

1-1. 문자열 길이 확인하기 

console.log(str.length);

 

1-2. 문자열 결합하기 concat

let str1 = "Hello";

let str2 = "world!";

let result = str1.concat(str2);

// console.log(result);

 

1-3. 문자열 자르기 slice substr

let str3 = "Hello, World!";

console.log(str3.substr(7, 5))

console.log(str3.slice(7, 12))

 

1-4. 문자열 검색 search

// 찾는 문자열이 시작되는 위치를 반환한다.

let str4 = "Hello, World!";

console.log(str4.search("World"));

 

1-5. 문자열 대체 replace

let str5 = "Hello, World!";

let result01 = str5.replace("World","Javascript");

console.log(result01);

 

1-6. 문자열 분할 split

// 문자열을 잘라서 각각 배열로 넣음

let str6 = "apple, bananam, kiwi";

let result02 = str6.split(",");

console.log(result02);

 

2. 배열

 

 

2-1. 기본 생성

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

 

2-2. 크기 지정

let number = new Array(5);

 

console.log(fruits.length)

console.log(number.length);

 

2-3. 요소 접근

console.log(fruits[0]);

console.log(fruits[1]);

console.log(fruits[2]);

 

2-4. 배열 메소드

 

2-4-1. push

배열 끝에 요소 추가

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

console.log("1 =>", fruits)

 

fruits.push('오렌지');

console.log("2 =>", fruits)

 

2-4-2. pop 

배열의 마지막 요소를 삭제

 

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

console.log("1 =>", fruits2);

fruits2.pop();

console.log("2 =>", fruits2);

 

2-4-3. shift

배열 맨 앞에 있는 요소 삭제

 let fruits3 = ["사과", "바나나", "키위"]

console.log("1 =>", fruits3);

fruits3.shift();

console.log("2 =>", fruits3);

 

2-4-4. unshift

배열 맨 앞에 요소 추가

fruits3.unshift("포도");

console.log(fruits3)

 

2-4–5. splice (시작위치, 지울 요소 갯수, 넣을 요소)

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

 console.log(fruits3);

 

2–4-6. slice : 배열의 일부분을 잘라서 새로운 배열로 만들어 줘.

let slicedFruits = fruits3.slice(1,2)

console.log(slicedFruits)

 

3. forEach, map, filter, find

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

 

3-1. forEach

forEach() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행합니다.

numbers.forEach(function(item){

console.log('item입니다 =>' + item);

}); 

 

 

3-2. map : 

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

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

 

let newNumbers = numbers.map(function(item){

return item *2 ;

})

 console.log(newNumbers)

 

3-3. filter

filter() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고,

그 결과가 true인 요소만 새로운 배열로 반환합니다.

 

let numbers = [4, 1, 5, 4, 5]

 let filteredNumbers = numbers.filter(function(item){

  return item === 5

 })

 console.log(filteredNumbers)

 

3-4. find

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

그 결과가 true인 첫 번째 요소를 반환합니다.

 

let numbers = [4,1,5,4,5]

let result = numbers.find(function(item){

 return item > 3

 })

console.log(result)

 

3-5. some()

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

true 아니면 false 로 반환합니다.

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

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

console.log(hasEvenNumber);   // true

 

 

3-6. every()

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

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

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

console.log(isAllEvenNumbers);   // true

 

3-7. reverse 

reverse() 메소드는 배열의 요소를 역순으로 정렬합니다.

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

numbers.reverse();

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

4. 연산자

!==

불일치 연산자는 자료형까지 비교

 

< <= > >=

숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

 

5. 삼항연산자 

조건식 ? true일 때의 값 : false일 때의 값

 

6. typeof null

typeof null의 경우 "object"를 반환하는 버그가 있습니다.

 

7. switch 문

switch (name) {
    case "다영":
        console.log("이름이 다영입니다.")
        break;
    case "철수":
        console.log("이름이 철수입니다.")
        break;
    case "영희":
        console.log("이름이 영희입니다.")
        break;
    default:
        console.log("해당하는 이름이 없습니다.");
        break;
}

switch문은 변수의 값에 따라 여러 개의 경우(case) 중 하나를 선택하여 해당하는 코드를 실행합니다.

default는 모든 경우에 맞지 않는 경우에 실행되는 코드를 작성합니다.

 

8. 단축 평가

or 연산자(|| 연산자)는 앞에 있는 값이 falsy 하면 뒤에 값을 출력합니다. 

 

9. 스코프

함수 안에서 선언된 변수는 해당 함수 내에서만 참조할 수 있습니다.

if문 내에서 선언된 변수는 해당 블록 내에서만 참조할 수 있습니다.

 

10. for...in문

const persons = ['강승현', '홍길동', '김아무개'];

for (const person in persons) {
	console.log(person);
}

// Print: 0
// 1
// 2
const persons = ['강승현', '홍길동', '김아무개'];

for (const index in persons) {
  const person = persons[index];
	console.log(person);
}

// Print: '강승현'
// '홍길동'
// '김아무개'


for...in문은 객체의 프로퍼티를 순서대로 접근할 수 있습니다.

  • for...of 문과 유사하게 객체의 요소를 반복해주지만, 선언한 변수에 값이 직접 들어가지 않고 요소의 key를 전달합니다.

 

11. while 문

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

12. do...while문

do...while문을 사용하여 0부터 9까지의 숫자를 출력합니다. do...while문은 일단 한 번은 코드를 실행하고, 그 후에 조건식을 체크하여 반복 여부를 결정합니다.

 

13. continue문

건너 뛰고 다음 반복을 실행한다.

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

14. 객체 = Object

1) 생성자 함수를 통한 객체 생성

function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

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

2) 객체 속성에 접근

function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

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

3) Object.keys() 를 이용해 key 값을 전부 가져온다.

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

let keys = Object.keys(person);

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

4) Object.values() 를 통해 value 값을 전부 가져온다.

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

let values = Object.values(person);

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

5) Object.entries() 를 이용하여 key:value를 2차원 배열로 반환한다.

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

let entries = Object.entries(person);

console.log(entries);

6) Object.assign() 을 이용하여 새로운 객체 newPerson을 만든다.

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

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

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

 

7) JSON.stringify() 객체를 문자열로 변환

- 객체를 문자열로 변환하여 비교

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

8) 객체 병합

전개 연산자 (스프레드 문법) ...

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

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

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

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

15. 일급 객체로서의 함수

- 변수를 함수에 할당

const sayHello = function() {
  console.log('Hello!');
};

sayHello(); // "Hello!" 출력

- 함수를 인자로 다른 함수에 전달 (콜백함수: 어떠한 함수의 매개변수로 쓰이는 함수)

function callFunction(func) {
  func();
}

const sayHello = function() {
  console.log('Hello!');
};

callFunction(sayHello); // "Hello!" 출력

 

- 함수를 반환

function createAdder(num) {
  return function(x) {
    return x + num;
  }
}

const addFive = createAdder(5);
console.log(addFive(10)); // 15 출력

 

- 객체의 프로퍼티로 함수를 할당

const person = {
  name: 'John',
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.sayHello(); // "Hello, my name is John" 출력

- 배열의 요소로 함수를 할당

const myArray = [
  function(a, b) {
    return a + b;
  },
  function(a, b) {
    return a - b;
  }
];

console.log(myArray[0](5, 10)); // 15 출력
console.log(myArray[1](10, 5)); // 5 출력

16. Map

  • new Map() – 맵을 만듭니다.
  • map.set(key, value) – key를 이용해 value를 저장합니다.
  • map.get(key) – key에 해당하는 값을 반환합니다. key가 존재하지 않으면 undefined를 반환합니다.
  • map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환합니다.
  • map.delete(key) – key에 해당하는 값을 삭제합니다.
  • map.clear() – 맵 안의 모든 요소를 제거합니다.
  • map.size – 요소의 개수를 반환합니다.

- for of 반복문

컬렉션 객체가 [Symbol.iterator] (반복자) 속성을 가지고 있어야만 합니다

iterator : 배열 또는 객체와 비슷한 형태로 열거되어있는 자료구조

var iterable = [10, 20, 30];

for (var valueof iterable) {
  console.log(value);// 10, 20, 30
}
const myMap = new Map();
myMap.set('one', 1);
myMap.set('two', 2);
myMap.set('three', 3);

for (const key of myMap.keys()) {
  console.log(key);
}

for (const value of myMap.values()) {
  console.log(value);
}

for (const entry of myMap.entries()) {
  console.log(`${entry[0]}: ${entry[1]}`);
}

17. Set

Set은 고유한 값을 저장하는 자료 구조입니다.

Set은 값만 저장하며, 키를 저장하지 않습니다.

Set은 값이 중복되지 않는 유일한 요소로만 구성됩니다.

Set을 사용하면 다음과 같은 작업을 수행할 수 있습니다.

 

  • 값 생성 const mySet = new Set()
  • 값 추가 mySet.add('value1');
  • 값 검색 mySet.has('value1') // true 또는 false 출력
  • 값을 반복  for (const value of mySet.values()) { console.log(value); }
  • 값 삭제  set.delete(2)
  • 모든 값 제거 set.clear()
  • Set 크기 mySet.size

18. 함수 선언식과 함수 표현식

함수 선언식은 호이스팅에 영향을 받고,

함수 표현식은 호이스팅에 영향을 받지 않습니다.

 

함수 선언식

function sayHello () {
	return "hello, world!"
}

함수 표현식

const sayHello = function(){
	return "hello, world!"
}

 

19. 구조분해 할당

 

객체 

구조분해 할당을 사용하지 않을 때 

const user = {name: "손석구", age: 10};

console.log(user.name) // 손석구
console.log(user.age) // 10

구조분해 할당을 사용할 때

const { name, age } = user

console.log(name) // 손석구
console.log(age) // 10

 

배열

구조분해 할당을 사용하지 않을 때

const games = ['배틀그라운드', '리그오브레전드'];

console.log(games[0]) // 배틀그라운드
console.log(games[1]) // 리그오브레전드

구조분해 할당을 사용할 때

// 구조분해 할당
const [battleGround, Lol] = games;

console.log(battleGround); // 배틀그라운드
console.log(Lol); // 리그오브레전드

함수에서 구조분해 할당의 사용

// 객체일 때
const getUserName = ({name, age}) => {
	return name;
};

// 배열일 때
const getUserName = ([name, age]) => {
	return name
};

20. 호이스팅

var, function 을 사용하면 호이스팅이 일어나서 안 좋다.

 

21. Promise

Promise는 비동기 처리에 대해, 처리가 끝나면 알려달라는 ‘약속'

  • resolve/reject 둘 중 하나가 실행되기 전까지는 다음(then), 오류(catch)로 넘어가지 않는다.
  • 비동기작업이 완료될 때 resolve/reject 호출
new Promise(function (resolve) {
	setTimeout(function () {
		var name = '에스프레소';
		console.log(name);
		resolve(name);
	}, 500);
}).then(function (prevName) {
	return new Promise(function (resolve) {
		setTimeout(function () {
			var name = prevName + ', 아메리카노';
			console.log(name);
			resolve(name);
		}, 500);
	});
}).then(function (prevName) {
	return new Promise(function (resolve) {
		setTimeout(function () {
			var name = prevName + ', 카페모카';
			console.log(name);
			resolve(name);
		}, 500);
	});
}).then(function (prevName) {
	return new Promise(function (resolve) {
		setTimeout(function () {
			var name = prevName + ', 카페라떼';
			console.log(name);
			resolve(name);
		}, 500);
	});
});

22. async/await

비동기 작업을 수행코자 하는 함수 앞에 async

함수 내부에서 실질적인 비동기 작업이 필요한 위치마다 await

var addCoffee = function (name) {
	return new Promise(function (resolve) {
		setTimeout(function(){
			resolve(name);
		}, 500);
	});
};
var coffeeMaker = async function () {
	var coffeeList = '';
	var _addCoffee = async function (name) {
		coffeeList += (coffeeList ? ', ' : '') + await addCoffee(name);
	};
	await _addCoffee('에스프레소');
	console.log(coffeeList);
	await _addCoffee('아메리카노');
	console.log(coffeeList);
	await _addCoffee('카페모카');
	console.log(coffeeList);
	await _addCoffee('카페라떼');
	console.log(coffeeList);
};
coffeeMaker();

23. 함수와 메서드

// example1(메서드의 예)
person.getName();

// example2(함수의 예)
testLogging();

24. Class

class Person {
	// constructor는 이름을 변경할 수 없어요.
  constructor(name, age) {
		// 이름(name)과 나이(age)가 없으면 사람이 아니죠?
		// new라는 키워드를 이용해서 인스턴스를 만들 때, 기본적으로
		// 넣어야 하는 값들을 의미해요! :)
		// 여기서 말하는 this는 만들어질 인스턴스를 의미한다고 생각해주세요!
    this.name = name;
    this.age = age;
  }

	// 다양한 메소드를 아래와 같이 정의할 수 있어요.
	// 여기서 this.name으로 내부 값을 접근해야 함을 잊지 마세요! :)
  sayHello() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

const person1 = new Person("Alice", 30);
const person2 = new Person("Bob", 25);

// 만든 객체를 토대로 메서드 호출해보기
person1.sayHello(); // 출력: "Hello, my name is Alice and I am 30 years old."
person2.sayHello(); // 출력: "Hello, my name is Bob and I am 25 years old."
// Getters와 Setters
// 객체지향 프로그래밍 언어 -> G, S
// 클래스 --> 객체(인스턴스)
// 프로퍼티(constructor)
// new Class(a, b, c)
class Rectangle {
  constructor(height, width) {
    // underscore : private(은밀하고, 감춰야 할 때)
    this._height = height;
    this._width = width;
  }

  // width를 위한 getter
  get width() {
    return this._width;
  }

  // width를 위한 setter
  set width(value) {
    // 검증 1 : value가 음수이면 오류!
    if (value <= 0) {
      //
      console.log("[오류] 가로길이는 0보다 커야 합니다!");
      return;
    } else if (typeof value !== "number") {
      console.log("[오류] 가로길이로 입력된 값이 숫자타입이 아닙니다!");
      return;
    }
    this._width = value;
  }

  // height를 위한 getter
  get height() {
    return this._height;
  }

  // height를 위한 setter
  set height(value) {
    // 검증 1 : value가 음수이면 오류!
    if (value <= 0) {
      //
      console.log("[오류] 세로길이는 0보다 커야 합니다!");
      return;
    } else if (typeof value !== "number") {
      console.log("[오류] 세로길이로 입력된 값이 숫자타입이 아닙니다!");
      return;
    }
    this._height = value;
  }

  // getArea : 가로 * 세로 => 넓이
  getArea() {
    const a = this._width * this._height;
    console.log(`넓이는 => ${a}입니다.`);
  }
}

// instance 생성
const rect1 = new Rectangle(10, 7);
rect1.getArea();
// const rect2 = new Rectangle(10, 30);
// const rect3 = new Rectangle(15, 20);

static : 인스턴스를 만들 필요가 없을 때 사용

Class 레벨의 메소드를 정의할 수 있습니다.

Class 레벨의 메소드는 인스턴스에서 호출할 수 없으며, Class 이름으로 직접 호출할 수 있어요.

class Calculator {
  static add(a, b) {
    return a + b;
  }

  static subtract(a, b) {
    return a - b;
  }
}

console.log(Calculator.add(1, 2)); // 3
console.log(Calculator.subtract(3, 2)); // 1

25. 객체의 접근 obj['key']

객체의 key에 여백(스페이스), 대쉬(-), 특수문자(*) 등 일반적인 변수명을 선언할 때 허용되지 않는 문자열을 사용할 경우  

 

26. 구조 분해 할당

객체의 구조 분해 할당

const obj = { name: "이용우", age: 28, tech: "Node.js" };

const { name, age, tech, hair } = obj;
console.log(name); // 이용우
console.log(age); // 28
console.log(tech); // Node.js
console.log(hair); // undefined: obj에는 "hair" 프로퍼티가 존재하지 않습니다.

배열의 구조 분해 할당

const arr = ["Node.js", "React", "Spring"];

const [backEnd, frontEnd] = arr;
console.log(backEnd); // Node.js
console.log(frontEnd); // React

27. Boolean

Falsy :  빈 문자열 '', 숫자 0, 불리언 false, null, undefined, NaN

Truthy: Array , Object

 

28. block : 중괄호 { }

 

출처 : 스파르타 코딩클럽 내일 배움 캠프 [자바스크립트 입문] [노드 입문]

'학습 내용 정리 > javascript' 카테고리의 다른 글

함수를 반환하는 함수  (0) 2023.05.23
javascript 에서의 8진수 표현법  (0) 2023.05.23
javascript 6. 객체 순회 , 객체 분해 , 배열 분해  (1) 2023.05.03
javascript 5. 객체  (1) 2023.05.03
javascript 4. 함수  (3) 2023.05.03

'학습 내용 정리/javascript' Related Articles

티스토리툴바