[2024 여름방학 React.js 스터디] 백채린 #1주차 섹션 0~7

섹션 0. 강의 오리엔테이션

 

 • 자바스크립트란?

- 브라우저 안에서 화면을 동작시키기 위한 프로그래밍 언어

- 사용자의 입력에 반응할 수 있게끔 만들어주는 역할

 

 

 

섹션 1.  변수

 

• 변수(variable) 

- 어떤 값을 저장하기 위해 사용

- 예약어는 변수의 이름으로 사용 X (예약어: 프로그래밍 언어에서 미리 점유한 단어들)

 

var message = 'hi' // 변수 선언, 값 할당
console.log(message); // hi 출력

const mag = 'hello'; // const: 예약어

 

• const와 let의 차이점

- let은 한 번 선언 후 값 변경 가능

- const(상수)는 한 번 선언 후 값 변경 불가능

 

const a= 10;
a // 10 출력
let b = 20;
b // 20 출력
b = 30;
b // 30 출력
a = 50; // error 발생

 

 

• 변수 선언 가능 데이터 유형

- 숫자, 문자열, 진위값, 배열, 객체

 

• 변수 관련 유의사항 및 컨벤션

- 변수명은 숫자로 시작 X

- 하이픈(-) 포함 X

- 카멜 케이스(camel case) 사용

  : 여러 단어로 이름을 지었을 때 두 번째 단어부터 첫 글자를 대자로 작성하는 명명 규칙

- 한글 변수명도 사용 가능

 

 

 

섹션 2. 함수

 

• 함수 소개와 기본 문법

- 함수: 특정 기능을 수행하는 코드의 단위

 

function logText() {
    console.log('hi');
}
logText(); // 함수 호출

 

 

• 함수 파라미터와 반환값

 

function logText(message) {
   console.log(message);
} //message 라고 하는 파라미터 정의
logText('hi') // hi 출력

function logText(message) {
   return message;
}
log a = logText('hi') // 변수에 함수의 호출 반환값이 할당
a // 'hi' 출력

 

• 함수 선언문과 함수 표현식

 

// 함수 선언문
function logText() {
       console.log(‘hi’);
}

// 함수 표현식
let logText = function() {
      console.log(‘hi’);
}

 

 

* 함수를 선언할 때 쓰는 값: 파라미터(매개변수)

   함수를 호출할 때 쓰는 값: 아규먼트(인자

 

• 자바스크립트의 특이한 성질 - 일급 함수

- 함수를 변수처럼 사용

 

function logText(message) {
       message;
} 

logText(function() {
      console.log(‘hi’);
}); // 인자로 함수가 들어감
-> hi 출력

 

 

• 화살표 함수

 

// 함수 표현식
let logText = function() {
      console.log(‘hi’);
}

// 화살표 함수로 작성된 함수 표현식
let logText = () => {
      console.log(‘hi’);
}

 

 

• 화살표 함수 축약 문법

 

// return 문이 하나인 경우
let logText = () => {
      return ‘a’;
}

let logMessage = () => ‘a’

// 전달인자(parameter)가 하나인 경우
let logNumber = (num) => {
      return number;
}

let logNumber = num => {
      return num;
}

// 위의 2가지 문법 적용
let logNumber = num => num;

 

 

 

섹션 3. 조건문과 반복문

 

• 조건문

: 주어진 조건을 만족할 때만 코드를 실행하게 하는 문법

 

let age = 30;
if (age > 20) {
     console.log(‘만원’);
}
// 만원 출력

age = 12;
if (age > 20) {
     console.log(‘만원’);
} else {
    console.log(‘오천원’);
}
// 오천원 출력

 

 

• 반복문

: 특정 로직을 반복할 때 사용하는 문법

 

let total = 0;
for (let i = 0; i < 6; i++) {
       total = total + i;
}

 

 

 

섹션 4. 객체

 

• 객체 기본 문법

 

let obj = {
      a: 10
}

obj.b = 20
// {a: 10, b: 20} 출력

 

 

• 객체 축약 문법

 

// 속성과 값이 같을 때
let a = 10;
let obj = {
      a: a
};

let obj = {
      a
};

// 속성에 함수를 정의할 때
let josh = {
      coding: function() {
            console.log(‘코딩’);
      }
}

let cat = {
      coding() {
            console.log(‘코딩’);
      }
}

 

 

 

섹션 5. 배열

 

• 배열 기본 문법

- 배열: 순서가 있는 데이터의 목록

 

var arr = []; // 빈 배열 선언
arr[0] = 10;
arr 
// [10] 출력

arr[1] = 20;
arr
// [10, 20] 출력

 

 

• 내장 API 사용

 

var arr = []; // 빈 배열 선언
arr.push(10); // 배열에 데이터 추가
arr 
// [10] 출력
arr.push(‘a’);
arr 
-> [10, ‘a’] 출력
arr.pop(); // 배열의 끝에 있는 값 삭제
arr 
// [10] 출력
arr.splice(0, 1); // 0번째 요소에서 하나만 삭제
arr 
// [] 출력

 

 

• 배열 반복문

- forEach: 요소의 개수만큼 반복문 실행

 

var arr = [‘a’, ‘b’, ‘c’];
arr.forEach(function(value) {
     console.log(value);
})

 

 

• 배열 주요 API

- map, filter: 배열의 데이터를 조작하거나 변경할 때 사용

 

var arr = [10, 20, 30];
arr.map(function(item) {
     return item * 10;
})
-> [100, 200, 300]

arr.filter(function(item) {
     if (item == 10) {
         return true;
     }
})
-> [10]

 

 

• 반복문으로 map, filter 코드 대체하기

 

var arr = [10, 20, 30];
var newArr = [];
arr.forEach(function(item) {
     newArray.push(item * 10);
});
newArray
// [100, 200, 300]

var newArr = [];
arr.forEach(function(item) {
     if (item == 10) {
         newArr.push(item);
     }
});
newArray
// [10]

 

 

 

섹션 7. 최신 문법

 

• 템플릿 리터럴 - 백틱(`)

 

var a = ‘hi’;
var message = `${a} 캡팡`;
message
// ‘hi 캡팡'

var arr = [‘apple’, 10];
var favoriteFruit = arr[0];
var myNumber = arr[1];

// 디스트럭처링
var [myFruit, myNum] = arr;

 

• 디스트럭처링 - 객체와 별칭

 

var josh = {
      skill: ‘js’,
      age: 21
}

var mySkill = josh.skill;
var myAge = josh.age;

// 디스트럭처링
var {skill, age} = josh;
// var skill = josh.skill; var age = josh.age;

var {skill: mySkill, age: myAge} = josh;
//var mySkill = josh.skill; var myAge = josh.age;

 

• 스프레드 오퍼레이터 - 객체

 

var obj = {
      a: 10,
      b: 20
}

var user = {
      a: obj.a,
      b: obj.b
      c: 30
}

// 키 값 쌍들이 많은 경우 -> 스프레드 오퍼레이터 문법 사용
var user = {
      …obj,
      c: 30
}

 

• 스프레드 오퍼레이터 - 배열

 

var arr = [‘a’, ‘b’];
var newArr = [arr[0], arr[1]];
// 스프레드 오퍼레이터 사용
var newArr = […arr, ‘c’];