JavaScript 문법(2)

객체와 배열

• 객체(Object)
  • 키와 값의 쌍의 속성(property)으로 구성되며, Python의 딕셔너리와 유사하다.
  • key는 ' '를 생략한 문자열로 사용 가능하다.
  • value에 접근할 때 [ ] 뿐만 아니라 .을 사용하여 접근할 수 있다.

let person = {
  name: "Alex",
  age: 28,
  gender : "M"
};

console.log(person.name); // 점 표기법을 사용하여 "Alex" 출력
console.log(person["age"]); // 대괄호 표기법을 사용하여 27 출력

person.age = 31; // 기존 속성 값 수정
person.country = "USA"; // 새로운 속성 추가

 

 

 

• 참고
  • 속성명 축약
    • key에 할당할 value와 변수가 같으면 생략 가능하다.

const comics = ['spiderman', 'batman']
const cartoons = ['doraemon', 'shinchan']

const library = {
  comics,
  cartoons
}

const comics = ['spiderman', 'batman']
const cartoons = ['doraemon', 'shinchan']

const library = {
  comics : comics,
  cartoons : cartoons
}

 

• 구조 분해 할당
  • 객체 안의 data를 새로운 변수에 쉽게 할당할 수 있다.

const person = {
  name: "Alex",
  age: 28,
  gender: "M"
};

const { name, age } = person;

console.log(name, age); // Alex 28

 

• 배열(Array)
  • 여러 값을 순서대로 저장할 수 있는 구조이며, Python의 리스트와 유사하다.
  • JavaScript에서 Array는 key가 정수인 Object의 일종이다.

let fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits[0]); // "Apple"

fruits[1] = "Blueberry"; // 기존 요소 수정

 

 

 

 

 

 

조건문

• if와 else를 사용하며, python에서 elif대신 else if를 사용한다.
• 또한 condition에 ( )를 활용하며, indent(띄어쓰기 4칸)로 block을 구분했던 것과 다르게 { }를 활용하여 구분한다.

if (condition) {
  // 조건이 참일 때 실행
} else if (anotherCondition) {
  // 다른 조건이 참일 때 실행
} else {
  // 위의 모든 조건이 거짓일 때 실행
}

 

 

 

 

 

 

반복문

• while

while (condition) {
  // do something
}

let i = 0

while (i < 5) {
  console.log(i)
  i += 1
}

 

 

 

 

• for … in
  • Object(객체)의 key를 순회할 때 사용한다.

for (key in Object) {
  // do something
}

const person = {
  name: 'Alex',
  age: 28,
  gender: 'M'
}

for (let key in person) {
  console.log(key, person[key])
}

• Array에서 사용하면 element대신 key인 정수가 나온다.

const lst = ['a', 'b', 'c'];

for (let key in lst) {
  console.log(key);
}

// 0
// 1
// 2

 

 

 

 

• for … of
  • Iterable(반복 가능한 객체)의 element를 순회할 때 사용한다.
  • 즉, Array, String, Set등에서 사용 가능하다.

for (element of Iterable) {
  // do something
}

const lst = ['a', 'b', 'c'];

for (let element of lst) {
  console.log(element);
}

// a
// b
// c

 

 

 

• for
  • 초기화 / 조건 / 표현식을 통해 반복을 진행하며
    • 초기화 : 변수를 초기화 한다.
    • 조건 : 조건을 충족하면 block의 코드를 실행한다.
    • 표현식 : block의 코드 실행 후 해당 표현식을 실행한다.
    의 과정을 거친다.

for (initialization; condition; expression) {
  // do something
}

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

• 초기화 : i = 0이야
• 조건 : i < 5를 만족하면 코드를 실행해
• 표현식 : 코드가 끝난 후 i++, 즉 i에 1을 더해줘

 

 

 

• forEach
  • 배열의 메서드 중 하나로, 배열의 element, index, array 그 자체를 변수로 가진 상태로 반복을 진행한다.
  • input으로 function을 가지며, 이를 callback function이라고 한다.

const lst = ['a', 'b', 'c'];

lst.forEach((element, index, array) => console.log(element, index, array))

• 여기에서 (element, index, array) => console.log(element, index, array)는 함수이다.

 

 

함수

• 함수는 function 키워드를 사용해 선언한다.
• ES6부터는 화살표 함수(arrow function)가 도입되어 더 간결한 문법으로 함수를 표현할 수 있다.

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

const subtract = (x, y) => {
  return x - y
};

const multiply = (x, y) => x * y;

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

 

 

 

 

스코프

• 스코프(Scope)는 프로그래밍에서 변수나 함수와 같은 식별자의 유효 범위를 정의하는 것을 말한다.
• 전역 스코프(Global Scope)
  • 전역 스코프에 선언된 변수나 함수는 프로그램의 어느 곳에서나 접근할 수 있다.
• 함수 스코프(Function Scope)
  • 함수 내에서 선언된 변수는 해당 함수 내에서만 접근할 수 있으며, 함수 외부에서는 접근할 수 없다.

# python
num = 1 # 전역

def func():
    print(num) # 사용가능

# python

def func2():
    num = 2  # 지역 변수, 함수 스코프

func2()
print(num)  # 사용 불가능

 

 

 

• 블록 스코프(Block Scope)
  • 중괄호 {}로 둘러싸인 코드 블록 내에서 유효한 스코프를 의미한다.
  • 예를 들어, if문, for문, while문, 또는 단순히 중괄호로 둘러싸인 코드 블록 내에서 선언된 변수는 해당 블록 내에서만 접근할 수 있다.

// JavaScript

{
  const a = 1
}

console.log(a) // ReferenceError: a is not defined

if (true) {
  var a = 1
}

console.log(a) // var는 함수스코프를 가지고 블록스코프를 갖지 않으므로 실행 가능.

 

 

 

 

옵셔널 체이닝

• 객체의 속성에 접근할 때 . 대신 ?.를 사용하며, 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다.
• JavaScript를 사용하면서 객체의 속성에 접근을 하게 되는 경우가 많다.
• 이 때, 데이터를 서버에서 가져올 경우 아직 데이터가 없는 상태에서 property에 접근을 해야 할 경우가 생긴다.

const person = {
  name: "Alex",
  age: 28,
};

console.log(person.name); // 사용 가능, "Alex"
console.log(person.gender); // 사용 가능, undefined

console.log(person.name.someKey); // 사용 가능, undefined
// console.log(person.gender.someKey); // 사용 불가능, 에러 발생

 

• object에서 없는 key에 대해 접근하면 undefined라는 값을 얻을 수 있다.
• 여기에서 name에 없는 key인 someKey에 접근하면 undefined로 값은 없지만 에러가 나지 않는다.
• 이미 undefined인 person.gender에서 다시 없는 키인 someKey에 접근하면 에러가 나게 된다.
  • JavaScript를 사용하면 매우매우 자주 겪게 될 상황이다.
• 이 때 다음과 같이 옵셔널 체이닝을 사용하면 에러가 나오지 않음을 확인할 수 있다.

console.log(person?.gender?.someKey); // 사용 가능, undefined