[JS] JavaScript 문법 정리 - 1

Pyo·2023년 11월 12일
JavaScript
0

본격적으로 자바스크립트 문법에대해 공부를 시작해보았다. 아예 사용을 해보지 않은것은 아니지만, 제대로 공부해 본적이 없기때문에 dart언어에서는 사용하지 않았던 , 또는 몰랐던 문법을 정리할것이다.

변수

var a = 10;
var b = 2.5;
var c = '문자';
var isTrue = false;
var isNull = null;
// let undefined = undefined;


console.log(typeof(a),a)			// number 10
console.log(typeof(b),b)			// number 2.5
console.log(typeof(c),c)			// string 문자
console.log(typeof(isTrue),isTrue)	// boolean false
console.log(typeof(isNull),isNull)  // object null
  • 자바스크립트는 동적 타입 언어로, 변수의 타입은 실행 중에 자동으로 결정된다. 즉, 개발자가 변수를 선언할 때 명시적으로 타입을 지정할 필요가 없다.
  • 자바스크립트에서는 var,let,const로 변수를 선언할수 있다.

null 과 undefined의 차이

  • null : 값이 없음을 나타내는 키워드
  • undefined : 값이 할당되지 않은 변수의 기본값으로 , 해당 변수에는 아무 값도 없음을 나타낸다.

var,let,const 비교

  • var : 중복 선언 가능 , 재할당 가능 
var fruits = 'apple';
console.log(fruits); // apple

var fruits = 'banana';
console.log(fruits); // banana

fruits = 'lemon';
console.log(fruits); // lemon

var 변수는 중복 선언 , 재할당이 가능하며 변수를 유연하게 사용할 수 있지만, 변수를 중복 선언 하는 경우 문제가 발생할 수 있다. 길고 복잡한 코드에서 같은 이름의 변수가 여러번 선언되어 사용되면 어떤 부분에서 문제가 발생하였는지 파악하기 힘들다. 함수 내부에서 유효한 함수 레벨 스코프이다.

  • let : 중복선언 불가 , 재할당 가능
let fruits = 'apple';
console.log(fruits); // apple

let fruits = 'banana';
console.log(fruits); 
//Uncaught SyntaxError: Identifier 'fruits' has already been declared

fruits = 'lemon';
console.log(fruits); // lemon

let 변수는 var 변수와 달리 중복선언 시, 해당 변수는 이미 선언되었다는 에러 메시지가 발생한다. 중복 선언이 불가능하다. 하지만 재할당은 가능하다. 블록({}) 내부에서 유효한 블록 레벨 스코프이다.

  • const 
const fruits = 'apple';
console.log(fruits); // apple

const fruits = 'banana';
console.log(fruits); 
//Uncaught SyntaxError: Identifier 'fruits' has already been declared

fruits = 'lemon';
console.log(fruits);
//Uncaught TypeError: Assignment to constant variable

 const 변수는 중복 선언이 불가능하며 , 재할당 또한 불가능 하다. 블록({}) 내부에서 유효한 블록 레벨 스코프이다.

호이스팅

변수를 정리하다 보니 Dart언어를 배울때는 배우지 못했던 호이스팅이라는 개념을 배웠다. 호이스팅이란 변수 및 함수 선언이 스코프 내에서 최상단으로 끌어올려지는 특성을 말한다.

  • var 변수의 호이스팅 : 첫번째 라인의 시점에서 x의 값이 정의 되지 않았지만 아래 x의 값이 정의되어 에러가 발생하지 않는다.
console.log(x); // ReferenceError: x is not defined
var x = 5;
console.log(x);	// 출력 : 5
  • 함수의 호이스팅 : 첫번째 라인의 시점에서 hello()함수가 정의 되지 않았지만 아래 라인에서 hello() 함수가 정의되어 에러가 발생하지 않는다.
hello();	// 출력 : Hello, World
function hello(){
    console.log("Hello, World");
}
  • let 및 const 변수 호이스팅 : var 변수의 호이스팅이라면 에러가 발생하지 않지만 , 'let' 과 'const' 변수는 초기화 하기 전에 접근하게 되면 에러가 발생한다
console.log(y);
let y = 10;
console.log(y);

// 에러 - ReferenceError: Cannot access 'y' before initialization

호이스팅은 함수를 어디에 선언 하였든지, 신경 쓰지 않고 필요한 곳에서 자유롭게 사용하기 위해 만들어진 기능이다. 그러나 이 기능이 때로는 의도치 않은 버그를 생성할 여지가 있다. var변수의 사용이 지양되는 이유중 하나로 호이스팅으로 인한 의도치 않은 버그를 생성할수 있기 때문이다.

함수 & Arrow 함수

Arrow 함수(화살표 함수)는 ES6(ECMAScript 2015)에서 도입된 새로운 함수 표현식의 형태이다. Arrow 함수는 함수 표현식을 간결하게 작성하고, 특히 this의 동작을 보다 명확하게 정의하는 데 도움을 준다.

  • 기본 함수 
const add1 = function (a,b) {
    return a + b;
}

const isSmall = function (a,b){
    a < b ? console.log(a) : console.log(b);
}
  • Arrow 함수
const add2 = (a,b) => {
    return a + b;
}

const isBig = (a,b) => {
    a > b ? console.log(a) : console.log(b);
}

this 바인딩 이란?
Arrow 함수는 자신만의 this를 생성하지 않고, 주변 범위의 this를 그대로 사용한다. 함수가 호출된 위치에서 상위 스코프의 this를 참조한다.


function Counter() {
    this.count = 0;
  
    setInterval(() => {
      this.count++;
      console.log(this.count);
    }, 10);
  }

함수의 사용


const counter = new Counter(); // 1,2,3,4,5,6,7,8,9,10...
console.log(add1(20,30)) // 50
console.log(add2(10,20)) // 30
isBig(10,20);	// 20
isSmall(20,30); // 20

배열

  • 배열의 선언
let numbers = [1,2,3,4,5];
let colors = ['red','blue','black','orange']
const str = 'Apple,Orange,Banana,Mango'; // 배열의 메소드에서 사용할 변수
  • 배열의 인덱스와 길이
console.log(numbers.length) // 5
console.log(colors[0]) // red
console.log(colors[3]) // orange
  • 배열 메소드
  1. join() : 배열요소 사이에 '' 넣어 string 타입으로 변환 
console.log(numbers.join('-')); // 1-2-3-4-5
  1. split() : stirng 타입에서 '' 를 기준으로 array 타입으로 변환
console.log(str.split(',')); // ['Apple', 'Orange', 'Banana', 'Mango']
  1. reverse() : 배열을 순서를 역방향으로 변환
console.log(colors.reverse()); // ['orange', 'black', 'blue', 'red']

4.slice() : 배열의 원하는 구간 리턴

console.log(numbers.slice(0,2)); // [1,2]
  1. find() : 첫번째 요소 리턴
console.log(numbers.find((e) => e % 2 == 0)); // 2
  1. fillter() : 배열로 리턴
console.log(numbers.filter((e) => e % 2 == 0)); // [2,4]
  1. map() : 새로운 배열 리턴
console.log(numbers.map((e) => e * e ));
  1. some(),every() : boolean 반환
console.log(numbers.some((e) => e%2 == 0)); // true
console.log(numbers.every((e) => e%2 == 0)); // false```

9 reduce() : 누적값 계산

console.log(numbers.reduce((previous,next) => {
    return previous + next},0)); // 15 ```
  1. sort() // 오름차순 , 내림차순
console.log(numbers.sort((a,b) => a -b)); // [1,2,3,4,5]
console.log(numbers.sort((a,b) => b - a)); // [5,4,3,2,1]

자바스크립트에서 자주 사용하는 배열 메소드 10가지 이다.

Set

자바스크립트의 Set은 중복을 허용하지 않는 값들의 집합을 나타내는 자료 구조로. 유일한 값을 가지며, 순서가 없다. 이러한 특성 때문에 Set은 데이터를 고유하게 유지하고 중복을 방지하는데 유용하다.

  • Set 선언
let testSet = new Set([1,2,3,2,1]);
  • Set 값 추가 , 삭제 
testSet.add(4);
console.log(testSet) // Set(4) { 1, 2, 3, 4 }

testSet.delete(1)
console.log(testSet) // Set(3) { 2, 3, 4 }
  • Set 순회
let testSet = new Set([1,2,3,2,1]);

testSet.forEach((e) => {
    console.log(e)
}); // 1,2,3

Map

  • Map : 키-값 쌍을 저장하는 자료 구조로, 자바스크립트에서 제공되는 내장 객체 중 하나이다.
let players = new Map([   
    ["Tom" , 20],
    ["Haaland",20],
    ["Messi",30]
]);

players.set('name','John');
players.set('age',25);

console.log(players.get('John')); // 25
console.log(players.has('Tom')); // true

player.forEach((value,key) => {
    console.log(`${key} : ${value}`);	     
});

// Tom : 20 , Haaland : 20 , Messi : 30 , John : 25

Map 데이터 리스트로 변환

let players = new Map([   
    ["Tom" , 20],
    ["Haaland",20],
    ["Messi",30]
]);

console.log(Array.from(player.keys())); // ['Tom','Haaland','Messi']
console.log([...player.values()]);		// [20,20,30]

Object

  • Object : 자바스크립트의 Object는 키-값 쌍을 저장하는 동적인 자료 구조이다.
let person = {
  name: 'John',
  age: 30,
  sayHello: function() {
    console.log('Hello!');
  }
};

console.log(person.name); // John
console.log(person.['name']); // John

pereson.job = 'Developer';
console.log(person.job) // Developer

person.sayHello(); // Hello

자바스크립트에서는 Map과 Object를 이런식으로 사용한다. Dart에서는 Class를 사용하지 않고 객체 리터럴을 이용하여 객체를 생성하면 데이터 타입이 Map이었는데, 자바스크립트에서 객체 레터럴을 이용하여 객체를 생성하면 데이터 타입이 Map이 아닌 Object였기때문에 많이 헷갈렸다.

Map VS Object

  • Map
const Mina = new Map([
    ['name', 'Mina'],
    ['age', 24],
    ['study', function() { return `${Mina.get('name')}가 공부를 합니다.`; }]
  ]);
  

 console.log(Mina.get('name'));		// Mina
 console.log(Mina.get('age'));		// 24
 console.log(Mina.get('study')());	// Mina가 공부를 합니다.
  • Object
const kevin = {
    name : 'Kevin',
    age : 26,
    study : function(){
      return `${this.name}이 공부를 합니다.`;
    }
}

console.log(kevin.name);	// Kevin
console.log(kevin.age);		// 26
console.log(kevin.study());	// Kevin이 공부를 합니다.

키의 타입

  • Object : 키는 반드시 문자열 또는 심볼이어야 합니다. 다른 모든 값은 문자열로 변환됩니다. 예를 들어, 객체를 키로 사용하면 객체의 toString() 메서드의 반환 값이 실제 키로 사용됩니다.
  • Map : 어떠한 값도 키로 사용할 수 있습니다. 객체나 함수와 같이 참조 타입을 포함하여 어떤 타입도 유효합니다.

키 순서

  • Object : 객체는 속성의 순서를 보장하지 않습니다. 속성의 순서는 키의 삽입 순서와는 관련이 없습니다.
  • Map : Map은 키의 삽입 순서를 보장합니다. 즉, Map에 요소를 삽입한 순서대로 순회됩니다.

크기 속성

  • Object : 객체에는 직접적으로 크기를 나타내는 속성이 없습니다. 크기를 확인하려면 속성의 수를 계산해야 합니다.
  • Map : size 속성을 사용하여 맵의 크기를 바로 얻을 수 있습니다

Object에 대해 깊은 이해가 필요한것 같아서 Object에 대한 정리를 한후 나머지 내용도 정리 하겠다.

profile
Pyo
이전 포스트

본격적인 백엔드 공부를 시작해보자

다음 포스트

[JS] 객체(Object)

0개의 댓글

관련 채용 정보